跳转至

HTML4与HTML5

约 4460 个字 302 行代码 3 张图片 预计阅读时间 19 分钟

Note

不要在意许多标签的默认样式，因为样式本身不是HTML需要处理的事情，学习标签只需要当功能标签学习即可

排版标签

标题

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
    <!-- 标题标签 -->
    <!-- 一共六级标题，但是建议一个网页只有一个一级标题 -->
    <h1>内容</h1>
    <h2>内容</h2>
    <h3>内容</h3>
    <h4>内容</h4>
    <h5>内容</h5>
    <h6>内容</h6>
</body>

每个标题标签不能互相嵌套

段落标签

HTML
1
2
3
4
5
6
<body>
    <!-- 段落标签 -->
    <!-- 段落标签整体占一行，前后会有行距 -->
    <p>一个段落</p>
    <p>一个段落</p>
</body>

注意，在p标签中不可以有块级标签，例如标题标签

HTML
1
2
3
4
5
6
7
8
9
<body>
    <h1>你好</h1>
    <!-- 段落标签的作用失效 -->
    <p><h1>你好</h1></p>
    <!-- 实际上渲染出来的结果如下 -->
    <p></p>
    <h1>你好</h1>
    <p></p>
</body>

div标签

HTML
1
2
3
4
5
<body>
    <!-- div是容器，本身没有实际效果 -->
    <!-- 但是div独占一行 -->
    <div>内容</div>
</body>

块级元素和行内元素

二者的特点：

  1. 块级元素：独占一行，例如标题标签、段落标签和div
  2. 行内元素：不独占一行，例如span

使用原则：

  1. 块级元素中能写行内元素和块级元素
  2. 行内元素中只能写行内元素，但不能写块级元素
  3. 一些特殊的规则：
    1. 标题标签不能互相嵌套
    2. p中不要写块级元素

文本标签

em标签

HTML
1
2
3
4
5
<body>
    <!-- 效果是让文字斜体，但是不重要 -->
    <!-- 语义化是强调文字 -->
    <em>内容</em>
</body>

strong标签

HTML
1
2
3
4
5
<body>
    <!-- 效果是让文字加粗，但是不重要 -->
    <!-- 语义化是强调文字 -->
    <strong>内容</strong>
</body>

span标签

HTML
1
2
3
4
5
<body>
    <!-- span没有任何默认效果 -->
    <!-- 只是用于包裹文字 -->
    <span>内容</span>
</body>

其他文字标签

标签名 标签语义 单/双标签
cite 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） 双
dfn 特殊术语，或者属名词 双
del 与 ins 删除的文字与插入的文字 双
sub 与 sup 下标文字与上标文字 双
code 一段代码 双
samp 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 双
kbd 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 双
abbr 缩写，最好配合上title属性 双
bdo 更改文本方向，要配合dir属性，可选值：ltr（默认值）、rtl 双
var 标记变量，可以与code标签一起使用 双
small 附属细节，例如：包括版权、法律文本。——很少使用 双
b 需要中度突显，评论中的产品名称。——很少使用 双
i 本意是：人物的思考活动，所说的话等等。现在多用于：呈现字体斜体（后面要排的内容） 双
u 与正常内容有反差文本，例如：错的单词、不会描述的描绘等。——很少使用 双
q 短引用——很少使用 双
blockquote 长引用——很少使用 双
address 地址信息 双

图片标签

HTML
1
2
3
4
5
6
<body>
    <!-- src属性中填写图片的相对路径或者绝对路径 -->
    <!-- alt属性中填写图片的描述文字，最主要的作用是搜索引擎可以通过该属性知道图片的含义 -->
    <!-- 有时图片无法正常显示也会显示alt的内容 -->
    <img src="图片路径" alt="图片替换文字">
</body>

img标签默认也有width和height属性，用于调整宽和高。但是这两个因为本质都属于样式，所以一般不直接使用二者调整高度而是使用CSS，调整高度和宽度时，只需要调整其中一个即可，图片会等比例缩放

常见的图片格式：

  1. jpg格式：扩展名为 .jpg 或 .jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。主要特点：支持的颜色丰富，占用空间较小，不支持透明背景，不支持动态图。使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等，该格式网页中很常见
  2. png格式：扩展名为 .png，是一种无损的压缩格式，能够更高质量的保存图片。主要特点：支持的颜色丰富，占用空间较大，支持透明背景，不支持动态图。使用场景：1. 想让图片有透明背景；2. 想更高质量的呈现图片；例如：公司logo图、重要页面等
  3. bmp格式：扩展名为 .bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。主要特点：支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。使用场景：对图片细节要求极高的场景，例如：一些大型游戏的图片（网页中很少使用）
  4. gif格式：扩展名为 .gif，仅支持256种颜色，色彩呈现不是很完整。主要特点：支持的颜色较少，支持简单透明背景，支持动态图。使用场景：网页中的动态图片
  5. webp格式：扩展名为 .webp，谷歌推出的一种格式，专门用来在网页中呈现图片。主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。使用场景：网页中的各种图片
  6. base64格式：
    1. 本质：一种特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
    2. 原理：把图片进行 base64 编码，形成一种文本
    3. 如何生成：一些工具可以做到
    4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响
    5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片

超链接标签

跳转功能

HTML
1
2
3
4
5
6
7
<body>
    <!-- 超链接基本功能：实现链接跳转 -->
    <a href="https://www.baidu.com">百度一下</a>
    <!-- 超链接有target属性，默认值为_self，表示在当前页面跳转 -->
    <!-- 也可以给定target为_blank，表示在新页面跳转 -->
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>

除了跳转页面外，还可以跳转文件，相当于下载文件功能：

HTML
1
2
3
4
<body>
    <!-- 跳转文件 -->
    <a href="文件路径">点击下载文件</a>
</body>

锚点功能

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
    <!-- 锚点功能 -->
    <!-- 设置锚点 -->
    <!-- 使用name属性的a标签就是锚点，使用href属性的a标签才是超链接 -->
    <a name="test1">锚点位置</a>
    <p>1</p>
    <!-- ...剩余占位p标签... -->
    <!-- 跳转锚点 -->
    <a href="#test1">跳转到锚点</a>
</body>

如果需要想直接为一个元素设置锚点，只需要给该元素设置id属性即可：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<body>
    <a href="#t1">锚点1</a>
    <a href="#t2">锚点2</a>
    <a href="#t3">锚点3</a>
    <a href="#t4">锚点4</a>

    <!-- #t1锚点会调转到id为t1的div -->
    <div id="t1">1</div>
    <!-- #t2锚点会调转到id为t2的div -->
    <div id="t2">2</div>
    <!-- #t3锚点会调转到id为t3的div -->
    <div id="t3">3</div>
    <!-- #t4锚点会调转到id为t4的div -->
    <div id="t4">4</div>
</body>

常见的其他锚点设置：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<body>
    <!-- 跳转到页面最上方 -->
    <a href="#">跳转</a>
    <!-- 跳转到其他页面中的锚点 -->
    <a href="其他页面#锚点名称">跳转</a>
    <!-- 刷新页面 -->
    <a href="">刷新</a>
    <!-- 执行JavaScript代码 -->
    <a href="javascript:alert(1);">点击弹窗</a>
</body>

打开指定应用

HTML
1
2
3
4
5
6
7
8
<body>
    <!-- 唤起设备拨号 -->
    <a href="tel:10010">电话联系</a>
    <!-- 唤起设备发送邮件 -->
    <a href="mailto:10010@qq.com">邮件联系</a>
    <!-- 唤起设备发送短信 -->
    <a href="sms:10086">短信联系</a>
</body>

列表

无序列表

HTML
1
2
3
4
5
6
7
8
9
<body>
    <!-- unordered_list——无序列表 -->
    <ul>
        <li>列表项内容</li>
        <li>列表项内容</li>
        <li>列表项内容</li>
        <li>列表项内容</li>
    </ul>
</body>

有序列表

HTML
1
2
3
4
5
6
7
8
9
<body>
    <!-- ordered_list——有序列表 -->
    <ol>
        <li>列表项内容</li>
        <li>列表项内容</li>
        <li>列表项内容</li>
        <li>列表项内容</li>
    </ol>
</body>

自定义列表

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<body>
    <!-- diy_list——自定义列表 -->
    <dl>
        <dt>自定义列表名1</dt>
        <dd>自定义列表项，持续到下一个列表名</dd>
        <dd>自定义列表项，持续到下一个列表名</dd>
        <dd>自定义列表项，持续到下一个列表名</dd>
        <dt>自定义列表名2</dt>
        <dd>自定义列表项，持续到下一个列表名</dd>
        <dd>自定义列表项，持续到下一个列表名</dd>
        <dd>自定义列表项，持续到下一个列表名</dd>
    </dl>
</body>

渲染效果如下：

列表嵌套

列表嵌套本质就是块级元素包裹块级元素：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- 列表嵌套 -->
<ul>
    <li>内容</li>
    <li>
        外侧内容
        <ul>
            <li>内部内容</li>
        </ul>
    </li>
    <li>内容</li>
</ul>

不建议ul或者ol中直接包裹新的ul和ol，而是在li中使用新的列表

表格

表格基本结构：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- table
    - thead
        - tr
            - th
    - tbody
        - tr
            - td
    - tfoot
        - tr
            - td

例如：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<body>
    <!-- 表格一般包裹在table标签内部 -->
    <!-- 标题行包裹在thead标签内部 -->
    <!-- 内容包裹在tbody标签内部 -->
    <!-- 脚注包裹在tfoot标签内部 -->
    <table>
        <!-- 标题 -->
        <thead>
            <!-- 一行用tr表示 -->
            <tr>
                <!-- 内部内容用th包裹 -->
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
            </tr>
        </thead>
        <!-- 内容 -->
        <tbody>
            <!-- 一行依旧是tr -->
            <tr>
                <!-- 内容用td包裹 -->
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
            </tr>
            <tr>
                <!-- 内容用td包裹 -->
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
            </tr>
        </tbody>
        <!-- 脚注 -->
        <tfoot>
            <!-- 脚注和内容一样 -->
            <tr>
                <td>脚注1</td>
                <td>脚注2</td>
                <td>脚注3</td>
                <td>脚注4</td>
            </tr>
        </tfoot>
    </table>
</body>

常见属性：

标签名 标签语义 常用属性 单/双标签
table 表格 width：设置表格宽度。
height：设置表格最小高度，表格最终高度可能比设置的值大。
border：设置表格边框宽度。
cellspacing：设置单元格之间的间距。		 双
thead 表格头部 height：设置表格头部高度。
align：设置单元格的水平对齐方式，可选值如下：
1. left：左对齐
2. center：中间对齐
3. right：右对齐
valign：设置单元格的垂直对齐方式，可选值如下：
1. top：顶端对齐
2. middle：中间对齐
3. bottom：底部对齐		 双
tbody 表格主体 常用属性与 thead 相同。 双
tr 行 常用属性与 thead 相同。 双
tfoot 表格脚注 常用属性与 thead 相同。 双
td 普通单元格 width：设置单元格的宽度，同列所有单元格全部受影响。
height：设置单元格的高度，同行所有单元格全部受影响。
align：设置单元格的水平对齐方式。
valign：设置单元格的垂直对齐方式。
rowspan：指定要跨的行数。
colspan：指定要跨的列数。		 双
th 表头单元格 常用属性与 td 相同。 双

常用的属性有两个：

  1. colspan：合并列，给需要合并的列的第一个列设置，移除多余的列
  2. rowspan：合并行，给需要合并的行的第一个行设置，移除多余行

例如：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>内容1</th>
                <th>内容2</th>
                <!-- 合并3和4 -->
                <!-- 在3上设置跨2列，包括当前列 -->
                <th colspan="2">内容3</th>
                <!-- 移除4 -->
                <!-- <th>内容4</th> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
            </tr>
            <!-- 合并2和3 -->
            <tr>
                <!-- 在2上的第一列设置跨2行，包括当前行 -->
                <td rowspan="2">内容1</td>
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
            </tr>
            <tr>
                <!-- 移除3上的第一列 -->
                <!-- <td>内容1</td> -->
                <td>内容2</td>
                <td>内容3</td>
                <td>内容4</td>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>            
                <td>内容3</td>
                <td>内容4</td>
            </tr>
        </tbody>
    </table>
</body>

渲染结果：

表单

基本结构

HTML
1
2
3
4
<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>
标签名 标签语义 常用属性 单/双标签
form 表单 action：用于指定表单的提交地址（需要与后端人员沟通后确定）。
target：用于控制表单提交后，如何打开页面，常用值如下：
_self：在本窗口打开。
_blank：在新窗口打开。
method：用于控制表单的提交方式，暂时只需了解，在后面Ajax的课程中，会详细讲解。		 双
input 输入框 type：设置输入框的类型，目前用到的值是text，表示普通文本。
name：用于指定提交数据的名字（需要与后端人员沟通后确定）。		 单
button 按钮 放在表单内部用默认用于提交 双

文本框

HTML
1
<input type="text">

常用属性如下：

  • name属性：数据的名称
  • value属性：输入框的默认输入值
  • maxlength属性：输入框最大可输入长度
  • placeholder属性：可以使输入框有一个默认文本，文本与placeholder的值相同，该文本在获得焦点或者有文本时消失

密码输入框

HTML
1
<input type="password">

常用属性如下：

  • name属性：数据的名称
  • value属性：输入框的默认输入值（一般不用，无意义）
  • maxlength属性：输入框最大可输入长度

单选框

HTML
1
2
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：

  • name属性：数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致
  • value属性：提交的数据值
  • checked属性：让该单选按钮默认选中

复选框

HTML
1
2
3
<input type="checkbox" name="hobby" value="read">读书
<input type="checkbox" name="hobby" value="write">写字
<input type="checkbox" name="hobby" value="paper">看报

常用属性如下：

  • name属性：数据的名称
  • value属性：提交的数据值
  • checked属性：让该复选框默认选中

隐藏域

HTML
1
<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据

  • name属性：指定数据的名称
  • value属性：指定的是真正提交的数据

提交按钮

HTML
1
2
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

需要注意：

  1. button 标签type属性的默认值是submit
  2. button 不要指定name属性
  3. input 标签编写的按钮，使用value属性指定按钮文字

重置按钮

HTML
1
2
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

需要注意：

  1. button 不要指定name属性
  2. input 标签编写的按钮，使用value属性指定按钮文字

一般按钮

HTML
1
2
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

需要注意：普通按钮的type值为button，若不写type值是submit会引起表单的提交

上传文件

HTML
1
上传文件：<input type="file" />

此时页面会有一个选择文件的按钮以及上传后的文件名文字，还可以设置其他属性：

  1. multiple：表示可以上传多个文件
  2. accept：表示指定可以上传的文件类型，例如accept=".exe,.jpg"，表示可以上传的文件类型只能是.exe和.jpg

文本域

HTML
1
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

需要注意

  1. rows属性：指定默认显示的行数，会影响文本域的高度
  2. cols属性：指定默认显示的列数，会影响文本域的宽度
  3. 不能编写type属性，其他属性，与普通文本输入框一致

下拉框

HTML
1
2
3
4
5
6
<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>
  1. name属性：指定数据的名称
  2. option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）
  3. option标签设置了selected属性，表示默认选中

禁用表单控件

给表单控件的标签设置disabled既可禁用表单控件，其中input、textarea、button、select、option都可以设置disabled属性

标签和文本绑定标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获得焦点

两种与label关联方式如下：

  1. 让label标签的for属性的值等于表单控件的id
  2. 把表单控件套在label标签的里面
HTML
1
2
3
4
5
6
7
<body>
    <!-- 方式1 -->
    <label for="c">请输入内容：</label>
    <input id="c" type="text">
    <!-- 方式2 -->
    <label>请输入内容：<input type="text"></label>
</body>

HTML实体

常见实体如下：

描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 反引号 &acute; &#180;
¢ 分 (cent) &cent; &#162;
£ 镑 (pound) &pound; &#163;
¥ 元 (yen) &yen; &#165;
€ 欧元 (euro) &euro; &#8364;
© 版权 (copyright) &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

HTML全局属性

全局属性：全局属性是指可以应用于所有HTML标签的属性。这些属性可以在任何HTML元素中使用，以提供额外的功能或信息

常见全局属性如下：

属性名 含义
id 给标签指定唯一标识，注意：id是不能重复的。作用：可以让label标签与表单控件相关联；也可以与CSS、JavaScript配合使用。
class 给标签指定类名，随后通过CSS就可以给标签设置样式。
style 给标签设置CSS样式。
dir 内容的方向，值：ltr、rtl
title 给标签设置一个文字提示，一般超链接和图片用得比较多。
lang 给标签指定语言

其他全局属性见MDN

补充标签

标签名 标签含义 单/双标签
br 换行 单
hr 分隔 单
pre 按原文显示（一般用于在页面中嵌入大段代码） 双

<hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成

HTML5新增的语义化标签

标签名 标签含义 单/双标签
header 整个页面，或部分区域的头部 双
footer 整个页面，或部分区域的底部 双
nav 导航 双
article 文章、帖子、杂志、新闻、博客、评论等 双
section 页面中的某段文字，或文章中的某段文字 双
aside 侧边栏 双
main 文档的主要内容（WHATWG没有语义，IE不支持） 双
hgroup 包裹连续的标题，如文章主标题、副标题的组合 双

关于article和section

  1. article里面可以有多个section
  2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素
  3. article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素

上面的元素都是块级元素

列表标签

标签名 含义 单/双标签
datalist 用于搜索框的关键字提示 双
option 提示文字，同select中的option 双
HTML
1
2
3
4
5
6
7
<input type="text" list="mydata">
<datalist id="mydata">
    <option value="周冬雨">周冬雨</option>
    <option value="周杰伦">周杰伦</option>
    <option value="温兆伦">温兆伦</option>
    <option value="马冬梅">马冬梅</option>
</datalist>
标签名 含义 单/双标签
details 用于展示问题和答案，或对专有名词进行解释 双
summary 写在details的里面，用于指定问题或专有名词 双
HTML
1
2
3
4
<details>
    <summary>如何走上人生巅峰？</summary>
    <p>一步一步走呗</p>
</details>

文本注音

标签名 含义 单/双标签
ruby 包裹需要注音的文字 双
rt 写注音，rt标签写在ruby里面 双
HTML
1
2
3
4
<ruby>
    <span>魑魅魍魉</span>
    <rt>chī mèi wǎng liǎng </rt>
</ruby>

搜索结果标记

使用mark标签对内容中的搜索关键字进行包裹，默认存在高亮效果

HTML
1
2
<!-- 搜索“你好中国”，mark包括“你好” -->
<mark>你好</mark>

表单相关

新增属性

属性名 功能
placeholder 提示文字（注意：不是默认值，value是默认值），适用于文字输入类的表单控件
required 表示该输入项必填，适用于除按钮外其他表单控件
autofocus 自动获取焦点，适用于所有表单控件
autocomplete 自动完成，可以设为on或off，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用
pattern 填写正则表达式，适用于文本输入类表单控件。注意：多行输入不可用，且空的输入框不会验证，往往与required配合

input新增功能属性值

属性名 功能
email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url url类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search 搜索类型的输入框，表单提交时不会验证格式。
tel 电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range 范围选择框，默认值为 50，表单提交时不会验证格式。
color 颜色选择框，默认值为黑色，表单提交时不会验证格式。
date 日期选择框，默认值为空，表单提交时不会验证格式。
month 月份选择框，默认值为空，表单提交时不会验证格式。
week 周选择框，默认值为空，表单提交时不会验证格式。
time 时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local 日期+时间选择框，默认值为空，表单提交时不会验证格式。

form新增属性

如果给form标签设置了属性，表单novalidate提交的时候不再进行验证

通常，浏览器会根据表单控件的属性（如required、pattern等）自动进行验证，并在不符合要求时阻止表单提交。而设置novalidate属性后，这些验证将被跳过，表单可以直接提交

HTML
1
2
3
4
<form novalidate>
    <input type="text" required>
    <button type="submit">提交</button>
</form>

多媒体标签

视频标签

<video>标签用来定义视频，它是双标签

属性名 值 描述
src URL地址 视频地址
width 像素值 设置视频播放器的宽度
height 像素值 设置视频播放器的高度
controls - 向用户显示视频控件（比如播放/暂停按钮）
muted - 视频静音
autoplay - 视频自动播放
loop - 循环播放
poster URL地址 视频封面
preload auto/metadata/none 视频预加载，如果使用autoplay，则忽略该属性，使用none不预加载视频仅预先获取视频的元数据（例如长度）。使用metadata可以下载整个视频文件，即使用户不希望使用它

音乐标签

<audio>标签用来定义音频，它是双标签

属性名 值 描述
src URL地址 音频地址
controls - 向用户显示音频控件（比如播放/暂停按钮）
autoplay - 音频自动播放
muted - 音频静音
loop - 循环播放
preload auto/metadata/none 音频预加载，如果使用 autoplay，则忽略该属性，none表示不预加载音频，metadata表示仅预先获取音频的元数据（例如长度），auto表示可以下载整个音频文件，即使用户不希望使用它。

新增全局属性

属性名 功能
contenteditable 表示元素是否可被用户编辑，可选值如下：
true：可编辑
false：不可编辑
draggable 表示元素可以被拖动，可选值如下：
true：可拖动
false：不可拖动
hidden 隐藏元素
spellcheck 规定是否对元素进行拼写和语法检查，可选值如下：
true：检查
false：不检查
contextmenu 规定元素的上下文菜单，在用户鼠标右键点击元素时显示
data-* 用于存储页面的私有定制数据
accesskey 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符

Note

需要注意，激活accesskey的操作取决于浏览器及其平台，例如在Windows系统下需要按下Alt的同时再按下accesskey指定的键值