HTML

2021-08-10 本文已影响0人 Zindex

简介

什么是HTML

HTML 是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。

超文本：文档内可链接其他文档外的内容，使得此文本可以写入除文本外的例如图片、视频等内容
标记语言：用一个一个标签组成的，可以让计算机读懂的语言。

计算机读取后会将 HTML 写的内容以另一种方式显示在浏览器上。

HTML 基础语法

HTML 基础结构

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    <body>
    
    </body>
</html>

head 的内容是对网页文档作辅助说明的。
body 的内容是对网页内容进行呈现的。
HTML 都是由标签和标签内的内容组合而成的

标签分为单标签和双标签，单标签例如 <hr/> <br/> ，双标签例如<div></div> <p></p>

HTML 注释

尖括号里面，感叹号 ! 开头，两边两个斜杠结尾 -- --

<!-- 这里写注释 -->

HTML 中 head 头部设置

head 标签作用于网页的头部，它的内容不会在正文中显示出来，主要完成对当前页面的各种设置。
在 head 中常包含如下子标签：

标签	描述	示例
`<title>`	定义了文档的标题	`<title>本网页标题</title>`
`<meta>`	定义了 HTML 文档中的元数据	元数据包括编码 charset，关键字 keywords ，描述 description
`<style>`	定义了 HTML 文档的内联样式
`<script>`	定义了客户端的脚本文件
`<link>`	定义了一个文档和外部资源之间的关系	通常用来引入外部样式表
`<base>`	定义了页面链接标签的默认链接地址

HTML 标签

span 标签

常用于包含文本，用来组合文档中的行内元素。

<span></span>

h系列标签（headline 大字标题）

<h1></h1>
<h2></h2> 
<h3></h3> 
<h4></h4>
<h5></h5>
<h6></h6>

p标签（paragraph 段落）

<p></p>

⚠警告： p标签不能嵌套其他块级元素标签，如果嵌套，浏览器将会强制把一个p标签拆成两个。

div 标签（division 分割）

用来将相关内容组合到一起，以便和其他内容分割，div+css 是网页常见的布局方式。

<div></div>

列表标签

h5规范：li 不能单独使用，只能放在 ul 或 ol 标签内，同理，ul 的次级子标签只能是 li ，li 内可以嵌套其他标签。

无序列表 ul （unordered list）

<ul>
    <li></li>
    <li></li>
</ul>

ul 的 type 属性：（⚠警告：涉及样式内容请在css中表达样式）
- disc 实心圆（默认）
- circle 空心圆
- square 实心方块

有序列表 ol （ordered list）

<ol>
    <li></li>
    <li></li>
</ol>

ol 的 type 属性：（⚠警告：涉及样式内容请在css中表达样式）
- 1 阿拉伯数字编号（默认）
- a 小写英文字母编号
- A 大写英文字母编号
- i 小写罗马数字编号
- I 大写罗马数字编号
start 属性：必须是一个整数，代表有序编号起始值。
reversed 属性：编号是否倒序。

定义列表 dl （definition list）

由 dt （data term）数据项，和 dd （data definition）数据定义构成

<dl>
    <dt></dt>
    <dd></dd>
</dl>

table 表格标签

table表格，tr （table row）表格行，然后每个行分出多少个表格数据格td（table data），th（table headline）标题标题格。例如：

<table border="" cellspacing="" cellpadding=""> 
    <tr><th>Header</th></tr> 
    <tbody><tr><td>Data</td></tr></tbody>   //tbody浏览器会自动加上
</table>

表格中的标签：

表格	描述	属性
<table>	定义表格	cellspacing格与格之间的间隙，cellpadding格子内边距,width宽度
<caption>	定义表格标题	align排列方式
<tr>	定义表格的行	align，valign，bgcolor
<th>	定义表格的表头	align，valign，bgcolor、rospan、colspan、width、height
<td>	定义表格单元格	align，valign，bgcolor、rospan、colspan、width、height
<thead>	定义表格的页眉	align，valign，bgcolor
<tbody>	定义表格的主体	align，valign，bgcolor
<tbody>	定义表格的页脚	align，valign，bgcolor

rowspan 属性：设置td或th行跨度，永远是右边合并去左边
colspan 属性：设置td或th列跨度，永远是下边合并去上边
align属性：水平方向对齐方式
valign属性：垂直方向对齐方式

form 表单标签

<form action="./" method="get">
    <input type="text"/>
    <input type="password"/>
    <input type="submit" value="submit"/>
    <input type="reset" value="reset"/>
</form>

form标签属性：

action 属性：表示表单要提交到的url的地址。
method 属性：表示表单提交的方式，有 get 和 post 。
enctype 属性：提交的类型，有 application/x-www-form-urlencoded 、multipart/form-data、 text/plain
target 属性：以何种方式打开发送到的页面。
name 属性：给表单起个名字。

input 标签

type属性：常用值text单行文本，password密码框，radio单选按钮，checkbox多选按钮，button普通按钮，submit提交，reset重置。
value属性：表示input的内容值。
placeholder属性：提示文本，以浅色字表现在文本框中，不是框中值。
disabled属性：禁用带有该属性的input。
required属性：带有该属性的input必须填写内容。

input 的 type 类型

type="text"时，变为文本框；value属性，表示框内的值。

<input type="text" value="" />

type="password"时，变为密码输入框。

<input type="password" />

type="radio"时，变为单选按钮，提交的是value的值，相同name的radio会互斥，带有checked属性默认选中。

<input type="radio" value="" name="" checked/>

label标签，将label标签内的内容与ID相同的input标签绑定

<input type="radio" id="ID名"/> <label for="ID名">123</label>

type="checkbox"时，变为多选按钮，提交的是value值。

<input type="checkbox" value="" />

type="file" 文件选择控件
type="hidden" 定义隐藏的输入字段，value隐藏在表单内一起提交

按钮

type="submit"、"reset"、"button"时，分别为提交按钮，重置按钮，普通按钮，value值为按钮内显示的文本，提交按钮和重置按钮直接带有动作。type="image"定义图像形式的提交按钮。

<input type="submit" value="submit按钮显示的文本" /> 
<input type="reset" value="reset按钮显示的文本" /> 
<input type="button" value="111" /> 
<input type="image" src="./img.jpg" />

button标签更为灵活，因为是双标签，里面可定义文本及图片等更多内容。

<button type="button"></button>

input 的 html5 新增 type 类型

type值	作用
multiple	多文件上传
date、time	日期，时间选择
datetime、datetime-local	定义日期字段（带有time控件）
month、week	定义日期字段的月、周
email	电子邮件输入控件（自动检测邮件规则）
url	网址输入控件（自动检测网址规则）
number	数字输入控件，可用max和min属性设最大最小值
search	搜索框，输入内容后会有清空按键
color	颜色选择
range	拖拽条，可max和min，step规定合法数字间隔，value规定默认值
tel	电话号码的文本字段

select 标签

下拉菜单select标签，里面嵌套option标签代表下拉菜单里的选项，带有selected属性的默认被选中。
提交的是value值，显示内容是option标签里面写的内容
可用optgroup进行分组

<select name=""> 
    <option value=""></option> 
    <option value="" selected=""></option>
</select>

textarea标签

textarea多行文本框；
rows和cols属性：用来定义多行文本框的显示上的行数和列数（显示上）。
style里的resize:none：禁止拉伸。

<textarea rows="" cols=""></textarea>

datalist标签

input标签添加list属性后，通过datalist控件，可为输入框提供备选项，并有模糊智能感应。

<input id="myCar" list="cars" /> 
<datalist id="cars"> 
    <option value="BMW"> 
    <option value="Ford"> 
    <option value="Volvo"> 
</datalist>

a 标签，超级链接标签

anchor锚，在哪里有什么。

<a href="" ></a>

a 标签常用属性：

href 属性：hypertext reference 超文本引用。支持相对路径和绝对路径。

路径：
相对路径：描述从标签所在的文件出发，如何找到文件，回退层级用 ../ 写法。
绝对路径：描述文件的精准地址。

title 属性：文字提示属性，常用来设置鼠标悬停文本。
target 属性：表示链接打开的方式，常用值有：
_self 本窗口（默认）
_blank 新窗口
_parent 父窗口
_top 顶级窗口

锚点跳转：href 属性值为 #top 可跳转到页面顶部，也可以为其他标签的id，#其他id 跳转至这个id的标签处。
下载链接：当 href 指向文件（exe、zip、rar）等，将自动成为下载链接。
邮件链接、电话链接：

<a href="mailto:me@test.com">发邮件</a>
<a href="tel:12306">打电话</a>

iframe 标签

<iframe src="https://www.baidu.com" name="frame1" frameborder=""></iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
ifame 常用属性

属性名	作用
src	iframe中显示的文档的url
name	规定iframe的名称,a标签的target可以指向
frameborder	规定是否显示框架周围的边框，值为0或1

img 图像标签

<img src="./img1.jpg" alt="这是提示文字" title="文字提示"/>

在HTML 网页中插入一张图片，使用 img 标签，它是一个单标签 <img/>
网页上支持的图片格式：.jpeg(jpg)、.png、.gif、.webp、.svg、.bmp

img 标签常用属性：

src 属性：source 来源，路径地址。
alt 属性：alternate 替代品，如果无法加载图像，会显示 alt 属性中的备用文本，以及网页朗读器应用。
title 属性：文字提示属性。
width 属性：图片宽度。
height 属性：图片高度。
border 属性：边框线粗细。

（⚠警告：4、5、6涉及样式内容请在css中表达样式）

audio 音频标签

<audio src="" > 
    不兼容显示文字 
</audio>
//或者用sourse标签引入文件
<audio> 
    <sourse src="" type=""></sourse>
    不兼容显示文字 
</audio>

autoplay属性：开启自动播放。
control属性：显示播放控件。
loop属性：开启循环。
src属性：音频的url地址。

video 视频标签

<video width="800" height="">
    <source src="myvideo.mp4" type="video/mp4"></source>
    <source src="myvideo.ogv" type="video/ogg"></source>
    <source src="myvideo.webm" type="video/webm"></source>
    <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
        <param name="movie" value="myvideo.swf" />
        <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
    </object>
    当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>

上面为Hbuilder自动生成多格式视频兼容写法，从上到下找可播放格式，找到然后播放。

autoplay属性：开启自动播放。
control属性：显示播放控件。
loop属性：开启循环。
src属性：音频的url地址。
muted属性：规定视频的音频输出应该被静音
poster属性：视频下载时或者播放前显示的封面

HTML 文本修饰标签

常用文本修饰标签如下

标签	作用
`<i>...</i>`	斜体
`<em>...</em>`	强调斜体
`<b>...</b>`	加粗
`<strong>...</strong>`	强调加粗
`<u>...</u>`	underline 下划线标签
`<sub>...</sub>` 和 `<sup>...</sup>`	sub 下标，sup 上标
`<cite>...</cite>`	作品的标题，表现形式为斜体
`<del>...</del>`	删除线

⚠警告： 以上对文本修饰的标签开发中使用 reset.css 已不再呈现样式，仅代表语义。后续用来当精灵图，开启position后设置宽高。

HTML5 新增语义化布局标签

标签
<header>	定义文档的页眉
<main>	定义网页核心内容
<footer>	定义文档或者节的页脚/顶部
<nav>	定义导航链接部分
<article>	定义文章
<section>	定义文档中的节（section/段落）
<aside>	定义其所处内容之外的内容/侧边

HTML

简介

什么是HTML

HTML 基础语法

HTML 基础结构

HTML 注释

HTML 中 head 头部设置

HTML 标签

span 标签

h系列标签（headline 大字标题）

p标签（paragraph 段落）

div 标签（division 分割）

列表标签

无序列表 ul （unordered list）

有序列表 ol （ordered list）

定义列表 dl （definition list）

table 表格标签

form 表单标签

input 标签

input 的 type 类型

按钮

input 的 html5 新增 type 类型

select 标签

textarea标签

datalist标签

a 标签，超级链接标签

iframe 标签

img 图像标签

audio 音频标签

video 视频标签

HTML 文本修饰标签

HTML5 新增语义化布局标签

猜你喜欢

热点阅读

HTML

简介

什么是HTML

HTML 基础语法

HTML 基础结构

HTML 注释

HTML 中 head 头部设置

HTML 标签

span 标签

h系列标签 （headline 大字标题）

p标签 （paragraph 段落）

div 标签（division 分割）

列表标签

无序列表 ul （unordered list）

有序列表 ol （ordered list）

定义列表 dl （definition list）

table 表格标签

form 表单标签

input 标签

input 的 type 类型

按钮

input 的 html5 新增 type 类型

select 标签

textarea标签

datalist标签

a 标签，超级链接标签

iframe 标签

img 图像标签

audio 音频标签

video 视频标签

HTML 文本修饰标签

HTML5 新增语义化布局标签

猜你喜欢

热点阅读

h系列标签（headline 大字标题）

p标签（paragraph 段落）