|
|
相关文章推荐
|
温文尔雅的菠萝 · IE调试网页之一：F12 ...· 4 周前 · |
|
|
精明的猴子 · 如何应对网页视频课程进度条禁止拖动？ - ...· 3 周前 · |
|
|
不敢表白的牛肉面 · [每月共读一本书]十二月书目《朱自清散文精选 ...· 1 年前 · |
|
|
星星上的红烧肉 · 四平市2017年国民经济和社会发展统计公报· 1 年前 · |
|
|
豁达的肉夹馍 · 电子血压计到底准不准- 回应关切- ...· 1 年前 · |
|
|
豪爽的刺猬 · 动力煤价格仍有下探空间· 2 年前 · |
|
|
发财的太阳 · 学前儿童视力普查 - 家庭健康服务· 2 年前 · |
1.1、概述
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。
HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。2014 年，HTML 5 发布，这是目前正在使用的版本。
浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页于用户的互动行为。
下面就是一个简单网页的 HTML 源码。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<p>Hello World</p>
</body>
</html>
说明：上面这段代码，可以保存成文件 hello.html。浏览器打开这个本地文件，就能看到文字“Hello World”
1.2、网页的基本概念
1.2.1、标签
HTML 代码由许许多多不同的标签（tag）构成。
<title>网页标题</title>
上面代码中，<title>和</title>就是一对标签。
标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器要渲染的、展示在网页上的内容。
标签放在一对尖括号里面（比如<title>），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签名之前加斜杠（比如</title>）。但是。也有一些标签不是成对使用的，而是只有开始标签，没有结束标签，比如<meta>标签。
<meta charset="utf-8">
上面代码中，<meta>标签就没有结束标签</meta>。
这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。时机引用中，它们主要用来提示浏览器，做一些特别处理。
标签可以嵌套。
<div><p>Hello World</p></div>
上面代码中，<div>标签内部包含了一个<p>标签。
嵌套时，必须保证正确的闭合顺序，不能跨层嵌套，否则会出现意想不到的渲染结果。
<div><p>Hello World</div></p>
上面代码就是错误的嵌套，闭合顺序不正确。
标签名是大小写不敏感，比如<title>和<TITLE>是同一个标签。不过，一般习惯都是使用小写。
另外，HTML 语言忽略缩进和换行。也就是说，小面的写法与一行的写法效果是一样的。
<title>
</title>
进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。有时，正式发布网页之前，开发者会把源码压缩成一行，以减少传输的字节数。网页内容的缩进和换行，主要靠 CSS 样式来实现。
1.2.2、元素
浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点（node），成为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的p元素。
嵌套的标签就构成了网页元素的层级关系。
<div><p>hello world</p></div>
上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。
所有元素可以分成两大类：块级元素（block）和行内元素（inline）。块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。
<p>hello</p>
<p>world</p>
上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。
1.2.3、属性
属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。
<img src="demo.jpg" width="500">
上面代码中，<img>标签有两个属性：src 和 width。
属性可以用等号指定属性值，比如上例的 demo.jpg 就是 src 的属性值。属性值一般放在双引号里面，这不是必须的，但推荐总是使用双引号。
注意，属性名是大小写不敏感的，onclick 和 onClick 是同一个属性。
HTML 提供了大量属性，用来定制标签的行为。
1.3、网页的基本标签
符合语法标准的网页，应该满足下面的基本结构。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
</body>
</html>
不管多么复杂的网页，都是从上面这个基本结构衍生出来的。
注意，HTML 代码的缩进和换行，对于浏览器不产生作用。所以上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。
下面介绍，这个基本结构的主要标签，它们构成网页的骨架。
<!doctype>
网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。
一般来说，只要像下面这样，简单声明 doctype 为 html 即可。浏览器就会按照 HTML5 的规则处理网页。
<!doctype html>
有时，该标签采用完全大写的形式，以便于区别正常的 HTML 标签。因为 <!DOCTYPE>本质上不是标签，更像是一个处理指令。
<!DOCTYPE html>
html 标签
<html>标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。
该标签的 lang 属性，表示网页内容默认的语言。
<html lang="en">
上面代码表示，网页的语言是英语
head 标签
<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。
<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。
<head>的子元素一般有下面七个。
<meta>：设置网页的元数据<link>：链接外部样式表<title>： 设置网页标题<style>：放置内嵌的样式表<script>：引入脚本<noscript>：浏览器不支持脚本时，所要显示的内容<base>：设置网页内部相对 URL 的计算基准。meta 标签
<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>
一般来说，网页至少应该具有以下两个<meta>标签，而且必须在<head>的最前面。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
charset 属性
<meta> 有一个 charset 属性，指定网页的编码方式，该属性非常重要。如果设置得不正确，浏览器可能无法正确解码，就会出现乱码。
<meta charset="utf-8">
上面代码声明，网页为 utf-8 编码。虽然可以使用其他得编码方式，但几乎总是应该采用 UTF-8。注意，声明得编码方式，应该与网页实际得编码方式一致，即声明了 utf-8，网页就应该使用 UTF-8 编码保存。
name 属性，content 属性
<meta>的 name 属性表示元数据的名字，content 属性表示元数据的值。
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据：description 是网页内容的描述，keywords 是网页内容的关键字，author 是网页作者。
http-equiv 属性，content 属性
http-equiv 属性用来覆盖 HTTP 回应的头信息字段，content 属性是该字段的内容。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
上面代码可以覆盖 HTTP 回应的 Content-Security-Policy 字段。
title 标签
<title>标签用于指定页面的标题，会显示在浏览器窗口的标题栏。
<title>网页标题</title>
</head>
搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反应网页的主题。
<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。
body 标签
<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>网页标题</title>
</head>
<p>hello world</p>
</body>
</html>
1.4、空格和换行
HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。
<p> hello world </p>
上面代码中，hello 前面的空格和 world 后面的空格，浏览器一律忽略不计。
标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个。
<p>hello world</p>
上面代码中，hello 与 world 之间有多个连续空格，浏览器会将它们合并成一个。网页渲染的结果是，hello 与 world 之间只有一个空格。
浏览器还会将文本里面的换行符（\n）和回车符（\r），替换成空格。
<p>hello
world
上面代码中，hello 与 world 之间有多个换行，浏览器会将它们替换成空格，然后再将多个空格合并成一个。网页渲染的结果是，hello 与 world 之间有一个空格。
这意味着，HTML 源码里面的换行，不会产生换行效果。
1.5、注释
HTML 代码可以包含注释，浏览器会自动忽略注释以 <!-- 开头，以 --> 结尾，下面就是一个注释的例子。
<!-- 这是一个注释 -->
注释可以是多行的，并且内部的 HTML 都不再生效了。
<p>Hello World</p>
上面代码是一个注释的区块，内部的代码都是无效的，浏览器不会解析，更不会渲染它们。
注释有助于理解代码的含义，复杂的代码块前面最好加上注释。
2、URL 简介
2.1、概述
URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。
https://www.example.com/path/index.html
所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才可能再互联网上获取它们。
只要资源可以互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。
URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。
2.2、网址的组成部分
URL 由多个部分组成。为了讲解，下面是一个比较复杂的 URL。
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor
我们看看，这个 URL 的各个部分
2.2.1、协议
协议（scheme）是浏览器请求服务器资源的方法，上例是 https://的部分，表示使用 HTTPS 协议。
互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接再浏览器地址输入 www.example.com，那么浏览器默认会访问 www.example.com。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。
HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（://）。其他协议不一定如此，邮件地址协议 mailta: 的协议名后面只有一个冒号，比如 mailto:foo@example.com。
2.2.2、主机
主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是 www.example.com。
有些主机没有域名，只有 IP 地址，比如 192.168.31.3。这种情况常常出现在局域网。
2.2.3、端口
用一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。默认端口是 80，如果省略了这个参数，服务器就会返回 80 端口的网站。端口紧跟在域名后面，两者之间使用冒号分隔，比如 www.example.com:80。
2.2.4、路径
路径（path）是资源在网站的位置。比如，/path/index.html 这个路径，指向网站的 /path 子目录下面的网页文件 index.html。
互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。
路径可能只包含目录，不包含文件名，比如 /foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的 index.html 文件（即等同于请求 /foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问www.example.com这个网址，很可能返回的是网页文件 www.example.com/index.html。
2.2.5、查询参数
查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用 ? 分隔，上例是 ?key1=value1&key2=value2。
查询阐述可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名（key）和键值（value），它们之间使用等号（=）连接。比如，key1=value 就是一个键值对，key1 是键名，value1 是键值。
多个参数之间使用 & 连接，比如 key1 = value&key2=value2。
2.2.6、锚点
锚点（anchor）是网页内部的定位点，使用 # 加上锚点名称，放在网址的最后，比如 #anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。
锚点名称通过网页元素的 id 属性命名。
2.3、URL 字符
URL 的各个组成部分，只能使用以下这些字符。
26 个英文字母（包括大写和小写）
10 个阿拉伯数字
连词号（-）
句点（.）
下划线（-）
此外，还有 18 个字符属于 URL 的保留字符，只能在给定的位置出现。比如，查询参数的开头是问号（?），也就是说，问号只能出现查询参数的开头，出现在其他位置就是非法的，会导致网址解析错误。网址的其他部分如果要使用这些保留字符，必须使用它们的转义形式。
URL 字符转义的方法是，在这些字符的十六进制 ASCII 码前面加上百分号（%）。下面是这 18 个字符及其转义形式。
!: %21#: %23$: %24&: %26': %27(: %28): %29*: %2A+: %2B,: %2C/: %2F:: %3A;: %3B=: %3D?: %3F@: %40[: %5B]: %5D举例来说，有一个网页的 URL 是 foo?bar.html，即文件里面包含一个问好，那么需要写成 foo%3Fbar.html。
URL 的合法字符，其实也可以采用这种转义方法，但是不建议使用。比如，字母 a 的十六进制 ASCII 码是 61，转义形式后就是 %61。因此，www.apple.com 又可以写成 www.%61pple.com，浏览器一样识别。
值得注意的是，空格的转义形式是 %20。对于那些包含空格的文件名，这个转义是必须的。
既不属于合法字符、也不属于保留字符的其他字符（比如汉字），理论上不需要手动转义，可以直接写在 URL 里面，比如 www.example.com/中国.html，浏览器… UTF-8 编码，每两位算作一组，然后每组头部添加百分号（%）。
举例来说，汉字中的 UTF-8 十六进制编码是 e4b8ad，每两个字符一组，URL 转义后就为 %e4%b8%ad。也就是说，URL 里面凡是有汉字 中的地方，都要写成 %e4%b8%ad。因此，访问 www.example.com/中国.html 这个网址，需要写成下面的样子。
www.example.com/%e4%b8%ad%e5%9b%bd.html
上面代码中，中的转义形式是 %e4%b8%ad，国是 %e5%9b%bd。
2.4、绝对 URL 和相对 URL
URL 分成两种：绝对 URL 和 相对 URL。
绝对 URL 指的是，只靠 URL 本身就能确定资源的位置。这意味着，URL 必须带有资源的完整信息，包含协议、主机、路径等部分。前面的例子都是绝对 URL。
相对 URL 指的是，URL 不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。比如，当前网页的 URL 是 www.example.com/path/index.… 指向 a.html，这个就是相对 URL。因为只知道 a.html 与当前网址在同一个子目录下面，从而得到绝对 URL www.example.com/path/a.html…
相对 URL 如果以斜杠（/）开头，就表示网站的根目录。否则，必须以当前目录为起点，推算资源的位置。比如，相对 URL /foo/bar.html表示网站根目录的子目录 foo，foo/bar.html 表示在当前目录的 foo 子目录。
URL 还可以使用两个特殊简写，表示特定位置。
.：表示当前目录，比如 ./a.html（当前目录下的 a.html 文件）..：表示上级目录，比如 ../a.html（上级目录下的 a.html 文件）这两种简写可以多个连用，比如 ../../ 表示上两级目录。
绝对 URL 也可以使用这两个简写，比如 www.example.com/./index.hml 等同于 www.example.com/index.html，…
2.5、base
<base>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个 <base> 标签，而且只能放在 <head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。
<base href="https://www.example.com/files/" target="_blank">
</head>
<base>标签的 href 属性给出计算的基准网址，target 属性给出如何打开链接。以知计算基准是 www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。
注意，<base> 标签必须至少具有 href 属性或 target 属性之一。
<base href="http://foo.com/app/">
<base target="_blank">
一旦设置了 <base>，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对 <base> 计算的，而不是针对当前网页的 URL。
3、网页元素的属性
3.1、简介
网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。
<html lang="en">
上面代码中，<html>标签内部的键值对 lang="en"，就称为 html 元素的属性。属性名为 lang，属性值为 en。
属性名与标签名一样，不区分大小写，lang 和 LANG 是同一个属性。
属性名与属性值之间，通过等号 = 连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。
有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。
<input type="text" required>
上面代码中，required 就是 <input>标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。
3.2、全局属性
全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。
下面是一些常见的全局属性。
class
title
tabindex
accesskey
style
hidden
lang,dir
contenteditable
spellcheck
data-属性
事件处理属性
3.2.1、id
id 属性是元素在网页内的唯一标识符。比如，网页可能包含多个 <p> 标签，id 属性可以指定每个 <p>标签的唯一标识符。
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
上面代码中，三个 <p>标签具有不同的 id 属性，因此可以区分。
id 属性的值必须是全局唯一的，同一个页面不能有两个相同的 id 属性。另外，id 属性的值不得包含空格。
id 属性的值还可以在最前面加上 #，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址 foo.com/index.html#… 的时候，浏览器会自动将页面滚动到 bar 的位置，让用户第一眼就看到这部分内容。
3.2.2、class
class 属性用来对网页元素进行分类。如果不同元素的 class 属性值相同，就表示它们是一类的。
<p class="para"></p>
<p></p>
<p class="para"></p>
上面代码中，第一个 <p> 和 第三个 <p> 是一类，因为它们的 class 属性相同。
元素可以同时具有多个 class，它们之间使用空格分隔。
<p class="p1 p2 p3"></p>
上面的 p 元素同时具有 p1、p2、p3 三个 class。
3.2.3、title
title 属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将 title 属性值作为浮动提示，显示出来。
<div title="版权说明">
<p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>
上面代码中，title 属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。
3.2.4、tabindex
网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
这里有提个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了 tabindex 属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。
tabindex 属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。
负整数：该元素可以获取焦点（比如使用 JavaScript 的 focus() 方法），但不参与 Tab 键对网页元素的遍历。这个值通常是 -1。
0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。正整数：网页元素按照从小到大的顺序，参与 Tab 键的遍历。如果多个元素的 tabindex 属性相同，则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以获得焦点。</p>
上面代码中，<p>标签的 tabindex 为 0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。
一般来说，tabindex 属性最好都设成 0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页由特殊布局。如果网页所有元素都没有设置 tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历，才有必要设置 tabindex 属性。
3.2.5、accesskey
accesskey 属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。
<button accesskey="s">提交</button>
上面代码中，<button>的快捷键是 s，按下快捷键，该元素就得到了焦点。
accesskey 属性的字符键，必须配合功能键，一起按下才会生效。也就是说，快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统，功能键都不一样。比如，Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是 Alt + 字符键，在 Mac 系统的快捷键是 Ctrl + Alt + 字符键。
注意，accesskey 如果跟操作系统或浏览器级别的快捷键有冲突，这时不会生效。
3.2.6、style
style 属性用来指定当前元素的 CSS 样式。
<p style="color: red;">hello</p>
上面代码指定文字颜色为红色。
3.2.7、hidden
hidden 是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
<p hidden>本句不会显示在页面上</p>
上面代码中，这个 p 元素不会出现在网页上。
注意，CSS 的可见性设置，高于 hidden 属性。如果 CSS 设置该元素可见，hidden 属性将无效。
3.2.8、lang, dir
lang 属性指定网页元素使用的语言。
<p lang="en">hello</p>
<p lang="zh">你好</p>
上面代码中，第一个 <p>的 lang 属性，表示使用英文，第二个 <p>的 lang 属性，表示使用中文。lang 属性的值，必须符合 BCP47 的标准。下面是一些商检的语言代码。
zh：中文
zh-Hans：简体中文
zh-Hant：繁体中文
en：英语
en-US：美国英语
en-GB：英国英语
es：西班牙语
fr：法语
dir 属性表示文字的阅读方向，有三个可能的值。
ltr：从左到右阅读，比如英语
rtl：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类
auto：浏览器根据内容的解析结果，自行决定
3.2.9、contenteditable
HTML 网页的内容默认是用户不能编辑，contenteditable 属性允许用户修改内容。它有两个可能的值。
true 或空字符串：内容可以编辑
false：不可以编辑
<p contenteditable="true">
鼠标点击，本句内容可修改
上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。
该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。
3.2.10、spellcheck
浏览器一般会自带拼写检查功能，编辑内容时，拼写的单词下面会显示红色的波浪线。spellcheck 属性就表示，是否打开拼写检查。
它由两个可能的值。
true：打开拼写检查
false：关闭拼写检查
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate
上面代码中，seperate 下面会有提示，表示拼错了。
注意，由于该属性只在编辑时生效，所以这个例子必须加上 contenteditable 属性，表示本段内容可编辑。鼠标单击就可以进入编辑状态，这时才会看到拼写提示。不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素该属性无效。
这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。
3.2.11、data-属性
data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在 data- 属性。
<a href='#' class="tooltip" data-tip="this is the tip!">链接</a>
上面代码中，data-tip 用于放置链接的提示文字。
3.2.12、事件处理属性
除了上面这些属性，全局属性还包括事件处理属性（event handler），用来响应用户的动作。常用属性有 onclick、onblur、onchange、onfocus、onkeyup 等等。
4、HTML 字符编码
4.1、简介
网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。
一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式。
Content-Type: text/html; charset=UTF-8
上面代码中，HTTP 头信息的 Content-Type 字段先声明，服务器发送的数据类型时 text/html （即 HTML 网页），然后声明网页的文字编码是 UTF-8。
网页内部也会再用 <meta>标签，再次声明网页的编码
<meta charset="UTF-8">
4.2、字符的数字表示法
网页可以使用不同语言的编码方式，但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。这个字符集的设计目标是包含世界上的所有字符，目前已经收入了十多万个字符。
每个字符有一个 Unicode 号码，称为码点（code point）。如果知道码点，就能查到这是什么字符。举例来说，英文字母 a 的码点是十进制的 97（十六进制的 61），汉字“中”的码点是十进制的 20013（十六进制的 4e2d）。
不是每个 Unicode 字符都可以打印出来，有些没有可打印形式，比如换行符的码点是十进制的 10（十六进制的 A），就没有对应的字面量形式。
小于号（<）和大于号（>）用来定义 HTML 标签，其他需要用到这两个符号的场合，必须防止它们被解释成标签。
由于 Unicode 字符太多，无法找到一种输入法，可以直接输入所有这些字符。换言之，没有一种键盘，有办法输入所有符号。
网页不允许混合使用多种编码，如果使用 UTF-8 编码的同时，又想插入其他编码的字符，就会很困难。
HTML 为了解决上面这些问题，允许使用 Unicode 码点表示字符，浏览器会自动将码点转成对应的字符。
字符的码点表示法是 &#N（十进制，N 代表码点）或者&#xN（十六进制，N 代表码点），比如，字符 a 可以写成 a（十进制）或者a十六进制，字符中可以写成 中（十进制）或者中（十六进制），；浏览器会自动转换它们。
<p>hello</p>
<!-- 等同于 -->
<p>hello</p>
<!-- 等同于 -->
<p>hello</p>
上面代码中，字符可以直接表示，也可以使用十进制码点或十六进制码点表示。
注意，HTML 标签本身不能使用码点表示，否则浏览器会认为这是要显示的文本内容，而不是标签。比如，<p> 一旦写成<p>或者<p>，浏览器就不再认为这是标签了，而会当作文本内容将其显示为 <p>。
4.3、字符的实体表示法
数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为了一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。
实体的写法是 &name;，其中的 name 是字符的名字。下面是其中一些特殊字符，及其对应的实体。
<：<>：><：<"："'：'&：&©：©#：#§：§￥：¥$：$£：£¢：¢%：%*：*@：@^：^±：±空格：
注意，上面最后一个特殊字符是空格，它也有对应的实体表示法。
字符的数字表示法和实体表示法，都可以表示正常情况无法输入的字符，逃脱了浏览器的限制，所以英文里面称为“escape”，中文翻译为“字符的转义”。
5、网页的语义结构
HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。
5.1、含义
HTML 标签地一个重要作用，就是声明网页元素地性质，使得用户只看到标签，就能俩姐这个元素地意义，阅读 HTML 源码就能了解网页地大致结构。这被称为 HTML 地语义原则。
下面就是一个典型地语义结构地网页。
<header>页眉</header>
<article>
<h1>文章标题</h1
>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
只看上面地代码，就可以知道，页面分为页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。
编写 HTML 网页，第一步就是写出语义结构地网页骨架。
5.2、常用标签
5.2.1、header 标签
header
footer
article
aside
section
h1 ~ h6
hgroup
header 标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在 header 标签里面。
<header>
<h1>公司名称</h1>
<li href="/home">首页</li>
<li href="/about">关于</li>
<li href="/contact">联系</li>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
如果 header 用在文章的头部，则可以把文章标题、作者等信息放进去。
<article>
<header>
<h2>文章标题</h2>
<p>张三，发表于2010年1月1日</p>
</header>
</article>
由于 header 可以用在多种场景，所以一个页面可能包含多个 header，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，header 里面不能包含另一个 header 或 footer。
5.2.2、footer 标签
footer 标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页眉”，通常包含版本信息或者其他相关信息
<footer>
<p>© 2018 xxx 公司</p>
</footer>
</body>
上面代码中，版权信息放在 footer 里面。
footer 也可以放在文章里面。
<article>
<header>
<h1>文章标题</h1>
</header>
<footer>
<p>© 禁止转贴</p>
</footer>
</article>
footer 不能嵌套，即内部不能放置另一个 footer，也不能放置 header。
5.2.3、main 标签
main 标签表示页面的主体内容，一个页面只能有一个 main。
<header>页眉</header>
<article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>
上面代码就是最典型的页面结构。
注意，main 是顶层标签，不能放置在 header、footer、article、aside、nav 等标签之中。
另外，功能性区块（比如搜索栏）不适合放入 main，除非当前页面就是搜索页面。
5.2.4、article 标签
article 标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（h1 到 h6）。
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
一个网页可以包含一个或多个 article，比如包含多篇文章。
5.2.5、aside 标签
aside 标签用来放置与网页或文章主要内容间接相关的部分。网页级别的 aside，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的 aside，可以用来放置评论或注释。
下面是网页级别的 aside 的例子。
<main>主体内容</main>
<aside>侧边栏</aside>
</body>
下面是文章评注的例子。
<p>第一段</p>
<aside>
<p>本段是文章的重点。</p>
</aside>
5.2.6、section 标签
section 标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如 article 可以包含多个 section。section 总是多个一起使用，一个页面不能只有一个 section。
<article>
<h1>文章标题</h1>
<section>
<h2>第一章</h2>
<p>...</p>
</section>
<section>
<h2>第二章</h2>
<p>...</p>
</section>
</article>
上面代码中，article 包含了两个 section，代表两章。
section 很适合幻灯片展示的页面，每个 section 代表一个幻灯片。
一般来说，section 都应该有标题，即包含 h2 ~ h6 标签。多个 section 可以放置在同一个 arcticle 里面，一个 section 里面也可能包含多个 arctcle，这取决于 section 和 article 在当前页面的含义。
5.2.7、nav 标签
nav 标签用于放置页面或文档的导航信息。
<li><a href="item-a">商品 A</a></li>
<li><a href="item-b">商品 B</a></li>
<li>商品 C</li>
</nav>
一般来说，nav 往往放置在 header 里面，不适合放入 footer。另外，一个页面可以有多个 nav，比如一个用于站点导航，另一个用于文章导航。
5.2.8、h1 ~ h6 标签
HTML 提供了 6 个标签，用来表示文章的标题。按照标题的等级，一共分成六级。
<h1>：一级标题<h2>：二级标题<h3>：三级标题<h4>：四级标题<h5>：五级标题<h6>：六级标题h1 是最高级别的标题，h6 是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个 h1 后面可以有多个 h2，每个 h2 后面又可以有多个 h3。
<h1>JavaScript 语言介绍</h1>
<h2>概述</h2>
<h2>基本概念</h2>
<h3>网页</h3>
<h3>链接</h3>
<h2>主要用法</h2>
</body>
上面代码，通过章节标题，清晰地表明了文章地主体结构。具体地内容，就可以写在章节标题的下面。
标题不应该越级，比如 h1 下面直接写 h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1 的字号比 h2 大，h2 比 h3 大，以此类推。
5.2.9、hgroup 标签
如果主标题包含多级标题（比如带有副标题），那么可以使用 hgroup 标签，将多级标题放在其中。
<hgroup>
<h1>Heading 1</h1>
<h1>Subheading 1</h1>
<h1>Subheading 2</h1>
</hgroup>
注意，hgroup 只能包含 h1 ~ h6，不能包含其他标签。
5.3、文本标签
历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。
br, wbr
strong, b
em, i
sub, sup, var
blockquote, cite, q
kbd, samp
small
time, data
address
ins, del
ruby, rp
bdo, bdi
5.3.1、div 标签
div 是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，有没有其他合适的标签，就可以使用这个标签。
它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的 div 就很常见。
<div class="main">
<div class="article">
<div class="title">
<h1>文章标题</h1>
</div>
</div>
</div>
上面代码读起来很费力，因为不带有语义。后来，HTML5 就提出了语义标签，改进了上面的代码。
<article>
<header>
<h1>文章标题</h1>
</header>
</article>
</main>
div 是无语义的块级元素。下面的例子使用 div，将图像和文字组合在一起，构成一个警告区块。
<img src="warning.jpg" alt="警告" />
<p>小心</p>
</div>
只要样式上需要多个块级元素组合在一起，就可以使用 div。但是，这应该是最后的措施，带有语义的块级标签（比如 article、section、aside、nav 等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用 div。
5.3.2、p 标签
p 标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进 p 元素。
<p>hello world</p>
上面代码就是一个简单的段落。
5.3.3、span 标签
span 是一个通用目的的行内标签（即不会产生换行），不带有任何语义。它通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式，就可以把它们放置在 span。
<p>这是一句<span>重要</span>的句子。</p>
上面代码中，句子里面需要强调的部分，就可以放在 span。
5.3.4、br, wbr 标签
br 让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。
hello<br>world
浏览器渲染上面代码时，会分成两行，hello 和 world 各占一行。
br 对于诗歌和地址的换行非常有用。
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。
上面的代码如果不用 br，会显示成一行。
注意，块级元素的间隔，不要使用 br 来产生，而要使用 CSS 指定。
<p>第一段</p>
<p>第二段</p>
上面的代码希望段落之间有两个换行，这时不应该使用 <br/>，而应该使用 CSS。
wbr 标签跟 br 很相似，表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在 wbr 的位置断行。它是为了防止浏览器在一个很长的单词中间，不确定地断行或者不断行，所以事先标明可以断行地位置，主要用于欧洲一些单词很长地语言或者 URL 的断行。
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
上面代码是一个很长的德语单词，为了防止不确定断行，事先用 wbr 告诉浏览器，可以选择在哪里断行。
5.3.5、hr 标签
hr 用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。
<p>第一个主题</p>
<p>第二个主题</p>
上面代码的渲染结果是，两段之间会出现一根水平线。
该标签是历史遗留下来的，建议尽量避免使用。主题之间的分隔可以使用 section，如果想要水平线的效果，可以使用 CSS。
5.3.6、pre 标签
pre 是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
<pre>hello
world</pre>
注意，HTML 标签在 pre 里面还是起作用的。pre 只保留空格和换行，不会保留 HTML 标签。
<pre><strong>hello world</strong></pre>
上面代码中， pre 标签的内容会加粗显示。
5.3.7、strong, b 标签
strong 是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
<p>开会时间是<strong>下午两点</strong></p>
b 与 strong 很相似，也表示它包含的内容需要引起注意，浏览器会以加粗显示。它是 Blodface 的缩写。
<p>开会时间是<b>下午两点</b>。</p>
它与 strong 的区别在于，由于历史原因，他没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此不建议使用，应该优先使用 strong 标签。
5.3.8、em, i 标签
em 是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
<p>我们<em>已经</em>讨论过这件事情了。</p>
虽然浏览器通常会以斜体显示 em，但是无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。
i 标签与 em 相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。
<p>我心想，这件事是<i>真的</i>吗？</p>
i 标签的语义不强，更接近是一个纯样式的标签，建议优先使用 em 标签代替它。
5.3.9、sub, sup, var 标签
sub 标签将内容变为下标，sup 标签将内容变为上标。它们都是行内元素，主要用于数学公式，分子式等。
<p>水分子是 H<sub
>2</sub>O。</p>
var 标签表示代码或数学公式的变量。
<p>勾股定理是<var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
5.3.10、u, s 标签
u 标签是一个行内元素，表示对内容提供某种注释，提醒用户这里可能有问题，基本上只能用来表示拼写错误。浏览器默认以下划线渲染内容。
一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>
上面代码中，u 提示用户这是一个拼写错误，“安分守己”的下方会有一个下划线。
注意，u 会产生下划线，由于链接也会默认带有下划线，所以必须非常小心使用 u 标签，避免用户误以为可以点击。万一确有必要使用，最好使用 CSS 改变 u 的默认样式。
s 标签是一个行内元素，为内容加上删除线。
<p>今天特价商品：<s>三文鱼</s>（售完）</p>
上面代码中，“三文鱼”会有一根删除线。
5.3.11、blockquote, cite, q 标签
blockquote 是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。
<blockquote cite="https://quote.example.com">
<p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>
blockquote 标签有一个 cite 属性，它的值是一个网址，表示引言来源，不会显示在网页上。
cite 标签标识引言出处或者作者，浏览器默认使用斜体显示这部分内容。
<blockquote cite="https://quote.example.com">
<p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>
<cite>-- 爱迪生</cite>
cite 不一定跟 blockquote 一起使用。如果文章中提到资料来源，也可以单独使用。
<p>更多资料请看<cite>维基百科</cite>。</p>
q 是一个行内标签，也表示引用。它与 blockquote 的区别，就是它不会产生换行。
莎士比亚的《哈姆雷特》有一句著名的台词：
<q cite="https://quote.exmaple.com">活着还是死亡，这是一个问题。</q>
跟 blockquote 一样，q 也有 cite 属性，表示引言的来源网址。
注意，浏览器默认会斜体显示 q 的内容，并且会自动添加半角的双引号。所以，引用中文内容时要小心。
5.3.12、code 标签
code 标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。
<code>alert()</code>的作用是让网页弹出一个提示框。
如果要表示多行代码，code 标签必须放在 pre 内部。code 本身仅表示一行代码。
let a = 1;
console.log(a);
</code>
5.3.13、kbd, samp 标签
kbd 标签是一个行内元素，愿意是用户从键盘输入的内容，现在扩展到各种输入，包括语音输入。浏览器默认以等宽字体显示标签内容。
<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd>重启。</p>
kbd 可以嵌套，方便指定样式。
<p>Windows 可以按下 <kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd></kbd>重启。</p>
samp 标签是一个行内元素，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。
<p>如果使用没有定义的变量，浏览器会报错：<samp>Uncaught ReferenceError: foo is not defined</samp>。</p>
5.3.14、mark 标签
mark 是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。
<p>我们讨论以后决定，<mark>运行会在下周三举办。</mark></p>
mark 很适合在引用的内容（q 或 blockquote）中，标记出需要关注的句子。
<blockquote>
床前明月光，疑是地上霜。<mark>举头望明月，低头思故乡。</mark>
</blockquote>
除了标记感兴趣的文本，mark 还可以用于在搜索结果中，标记出匹配的关键词。
注意，不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。
5.3.15、small 标签
small 是一个行内标签，浏览器会将它包含的内容，以小一号的字号显示，不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。
<p>文章正文</p>
<p><small>以上内容使用创意共享许可证。</small></p>
5.3.16、time, data 标签
time 是一个行内标签，为跟时间相关的内容提供机器可读的格式。
<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>
上面代码中，time 表示下周三的具体日期。这方便搜素引擎抓取，或者下一步的其他处理。
time 的 datetime 属性，用来指定机器可读的日期，可以有多种格式。
有效年份：2011
有效月份：2011-11
有效日期：2011-11-18
无年份的日期：11-18
年度的第几周：2011-w47
有效时间：14:54、15:54:39、14:54:39.929
日期和时间：2011-11-18T14:54:39.929
<p>音乐会在<time datetime="20:00">晚上八点</time>开始。</p>
data 标签与 time 类似，也是提供机器可读的内容，但是用于非时间的场合。
<p>本次马拉松比赛第一名是<data value="39">张三</data></p>
上面代码中，选手的机读数据就放在 data 标签的 value 属性。
5.3.17、address 标签
address 标签是一个块级元素，表示某人或某个组织的联系方式。
<p>作者的联系方式：</p>
<address>
<p><a href="mailto:foo@example.com">foo@example.com</a></p>
<p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>
该标签有几个注意点。
如果是文章里提到的地址（比如提到搬家前的地址），而不是联系信息，不要使用 address 标签。
address 的内容不得有非联系信息，比如发布日期。
address 不能嵌套，并且内部不能有标题标签（h1 ~ h6），也不能有 article、aside、section、nav、header、footer 等标签。
通常，address 会放在 footer 里面，下面是一个例子。
<footer>
<address>
文章的相关问题请联系<a href="mailto:zhangsan@example.com">张三McClure</a>
</address>
</footer>
5.3.18、abbr 标签
abbr 标签是一个行内元素，表示标签内容是一个缩写。它的 title 属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title 属性值作为提示，会显示出来。
<abbr title="HyperText Markup Language">HTML</abbr>
注意，某些浏览器可能对该标签提供圆点下划线。
5.3.19、ins, del 标签
ins 标签是一个行内元素，表示原始文档添加（insert）的内容。del 与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。
<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>
浏览器默认为 del 标签的内容加上删除线，为 ins 标签的内容加上下划线。
这两个标签都有以下属性。
cite：该属性的值是一个 URL,表示该网址可以解释本次删改。
datetime：表示删改发生的时间。
<ins cite="./why.html" datetime="2018-05">
<p>项目比原定时间提前两周结束。</p>
</ins>
5.3.20、dfn 标签
dfn 是一个行内元素，表示标签内容是一个术语（definition），本段或本句包含它的定义。
通过 TCP/IP 协议连接的全球性计算机网络，叫做 <dfn>Internet</dfn>
为了脚本操作的方便，可以把术语的定义写入 dfn 标签的 title 属性。
通过 TCP/IP 协议连接的全球性计算机网络，叫做 <dfn title="全球性计算机网络">Internet</dfn>
上面代码中，title 属性的一个作用是，鼠标悬浮的时候，术语的解释会以提示的形式显示出来。
某些时候，术语本身是一个缩写，这是 dfn 和 abbr 可以结合使用。
<dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn>的全称是获得性免疫缺陷综合征。
5.3.21、ruby, rp 标签
ruby 用于表示东亚文字的语音，比如汉语拼音。它默认会以小字体，显示在文字的上方。
汉<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
上面代码的渲染结果是，汉字上方有小字体的拼音。
ruby 是一个行内元素，也是一个容器标签，内部还有许多配套的标签。
<rp>：标注语音符号的起始符号（默认为半角括号）和结束符号（默认为半角右括号），默认不显示。<rt>：标注语音符号。<rb>：划分文字单位，与语音一一对应。<rbc>：<rb>的容器，主要作用是将语音显示在文字的右侧。如果想让拼音不是显示在文字上方，而是显示在文字右侧，写法如下。
<rb>汉</rb><rp>(</rp><rt>han</rt><rp>)</rp> <rb>字</rb><rp>(</rp
><rt>zi</rt><rp>)</rp>
</rbc>
</ruby>
5.3.22、bdo, bdi 标签
大部分文字的阅读方向是从左到右，但是有些文字的方向是从右到左，比如阿拉伯语、希伯来语等。bdo 标签是一个行内元素，表示文字方向与网页主体内容的方向不一致。
<p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p>
上面代码中，bdo 标签里面的文字，会以相反的方向渲染，结果就是“床前明月光，疑是地上霜”。
bdo 的 dir 属性，指定具体的文字方向。它有两个值，ltr 表示从左到右，rtl 表示从右到左。
bdi 标签用于不确定文字方向的情况。比如，网页有一部分是用户输入的内容，但是不知道输入内容的文字方向。这种情况下就可以使用 bdi 标签，告诉浏览器，不确定文字方向，由浏览器自己决定。
<p><bdi>床前明月光，疑是地上霜。</bdi></p>
5.4、列表标签
列表是一系列排好的项目，主要分成两类：有序列表和无序列表
有序列表是每个列表前面有编号，呈现出顺序，就像下面这样。
1. 列表项 A
2. 列表项 B
3. 列表项 C
无序列表则是列表项前面没有编号，只有一个列表符号，默认是一个圆点。
· 列表项 A
· 列表项 B
· 列表项 C
5.4.1、ol 标签
ol 标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
下面代码会在列表项 A、B、C 前面，分别产生 1、2、3 的编号。
ol 标签内部可以嵌套 ol 标签或 ul 标签，形成多级列表。
<li>列表项 A</li>
列表项 B
<li>列表项 B1</li>
<li>列表项 B2</li>
<li>列表项 B3</li>
<li>列表项 C</li>
上面代码中，一个有序列表内部嵌套了另一个有序列表，渲染结果如下。
1. 列表项 A
2. 列表项 B
1. 列表项 B1
2. 列表项 B2
3. 列表项 B3
3. 列表项 C
该标签有以下属性。
reversed
reversed 属性产生倒序的数字列表。
<ol reversed>
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
上面代码中，列表项 A、B、C 前面，产生的编号是 3、2、1。
start
start 属性的值是一个整数，表示数字列表的起始编号。
<ol start="5">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
上面代码中，列表项 A、B、C 前面，产生的编号是 5、6、7。
type 属性指定数字编号的样式。目前，浏览器支持以下样式。
a ：小写字母
A ：大写字母
i ：小写罗马数字
I ：大写罗马数字
1 ：整数（默认值）
<ol type="a">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
上面代码中，列表项 A、B、C 前面的编号，分别是英文小写字母 a、b、c。
注意，即使编号是字母，start 属性也依然使用整数。
<ol type="a" start="3">
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
上面代码中，type 属性指定编号采用小写英文字母，start 属性等于 3，表示从 c 开始编号。
5.4.2、ul 标签
ul 标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。
<li>列表项 A</li>
<li>列表项 B</li>
<li>列表项 C</li>
上面代码的渲染结果是，列表项 A、B、C 前面，分别产生一个实心小圆点，作为列表符号。
ul 标签内部可以嵌套 ul 或 ol，形成多级列表。
5.4.3、li 标签
li 表示列表项，用在 ol 或 ul 容器之中。
有序列表 ol 之中，li 有一个 value 属性，定义当前列表项的编号，后面列表项会从这个值开始编号。
<li>列表项 A</li>
<li value="4">列表项 B</li>
<li>列表项 C</li>
上面代码中，value 属性指定第二个列表项的编号是 4，因此三个列表项的编号，分别为 1、4、5。
5.4.4、dl、dt、dd 标签
dl 标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）。由 dt 标签定义，术语解释（description detail）由 dd 标签定义。dl 常用来定义词汇表。
<dt>CPU</dt>
<dd>中央处理器</dd>
<dt>Memory</dt>
<dd>内存</dd>
<dt>Hard Disk</dt>
<dd>硬盘</dd>
dt 和 dd 都是块级元素，dd 默认会在 dt 下方缩进显示。上面代码的默认渲染结果如下。
中央处理器
Memory
Hard Disk
多个术语 dt 对应一个解释，或者多个解释 dd 对应一个术语 dt，都是合法的。
<dt>A</dt>
<dt>B</dt>
<dd>C</dd>
<dt>D</dt>
<dd>E</dd>
<dd>F</dd>
上面代码中，A 和 B 有共同的解释 C，而 D 有两个解释 E 和 F。
5.5、图像标签
图片是互联网的重要组成部分，让网页变得丰富多彩。
figure, figcaption
响应式图像
picture
5.5.1、img 标签
img 标签用于插入图片。它是单独使用的，没有闭合标签。
<img src="foo.jpg" />
上面代码在网页插入一张图片 foo.jpg。src 属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。
img 默认是一个行内元素，与前后的文字处在同一行。
<p>Hello<img src="foo.jpg"/>World</p>
上面代码的渲染结果是，文字和图片在同一行显示。
图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。
img 可以放在 a 标签内部，使得图片变成一个可以点击的链接。
<a href="example.html">
<img src="foo.jpg" />
上面代码中，图片可以像链接那样点击，点击后会产生跳转。
alt 属性
alt 属性用来设定图片的文字说明。图片不显示时（比如加载失败，或用户关闭图片加载），图片的位置上会显示该文本。
<img src="foo.jpg" alt="示例图片"/>
上面代码中，alt 是图片的说明。图片下载失败时，浏览器会在图片的位置，显示文字“示例图片”。
width 属性，height 属性
图片默认以原始大小插入网页，width 属性和 height 属性可以指定图片显示时的宽度和高度，单位是像素或百分比。
<img src="foo.jpg" width="400" height="300"/>
上面代码中，width 属性指定图片显示的宽度为 400 像素，height 属性指定显示高度为 300 像素。
注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。
一种特殊情况时，width 属性和 height 属性只设置了一个，另一个没有设置。这时，浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。举例来说，图片大小是 800 像素 * 800 像素，width 属性设置成 200，那么浏览器会自动将 height 设置成 200。
referrerpolicy
img 导致的图片加载的 HTTP 请求，默认会带有 Referer 的头信息。referrerpolicy 属性对这个行为进行设置。
crossorigin
有时，图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin 属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。
简单说，只要打开了这个属性，HTTP 请求的头信息里面，就会加入 origin 字段，给出请求发出的域名，不打开这个属性就不加。
一旦打开该属性，它可以设为两个值。
anonymous：跨域请求不带有用户凭证（通常是 Cookie）。
use-credentials：跨域请求带有用户凭证。
下面是一个例子。
<img src="foo.jpg" crossorigin="anonymous" />
crossorigin 属性如果省略值得部分，则等同于 anonymous。
<img src="foo.jpg" crossorigin />
loading
浏览器得默认行为是，只要解析到 img 标签，就开始加载图片。对于很长得网页，这样做很浪费带宽，因为用户不一定会往下滚动，一致看到网页结束。用户很可能是点开网页，看了一会就关掉了，那些不再视口得图片加载的流量，就都浪费了。
loading 属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载，这样就节省了带宽。
loading 属性可以取以下三个值。
auto ：浏览器默认行为，等同于不使用 loading 属性。
lazy ：启用懒加载
eager ：立即加载资源，无论它在页面上的哪个位置
<img src="image.png" loading="lazy" alt="..." width="200" height="200" />
由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
5.5.2、figure, figcaption
figure 标签可以理解是一个图像区块，将图像和相关信息封装在一起。figcaption 是它的可选的子元素，表示图像的标题。
<figure>
<img src="https://exmaple.com/foo.jpg" />
<figcaption>示例图片</figcaption>
</figure>
除了图像，figure 还可以封装引言、代码、诗歌等等。它等于是一个将主体内容与附加信息，封装在一起的语义容器。
<figure>
<p><code>const foo = 'hello';</code></p>
<figcaption>JavaScript 代码示例</figcaption>
</figure>
5.5.3、响应式图像
网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”（responsive web design）。响应式设计的网页图像，就是“响应式图像”（responsive image）。
响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法，浏览器原生支持。
我们知道，img 标签用于插入网页图像，所有情况默认插入的都是同一张图像。
<img src="foo.jpg" />
上面代码在桌面端和手机端，插入的都是图像文件 foo.jpg。
这种处理方法固然简单，但是有三大弊端。
一般来说，桌面端显示的是大尺寸，文件体积较大。手机的屏幕较小，只需要小尺寸的图像，可以节省带宽，加速网页渲染。
桌面显示器一般是单倍像素密度，而手机的显示屏往往是多倍像素密度，即显示时多个像素合成为一个像素，这种屏幕称为 Retina 屏幕。图像文件很可能在桌面端很清晰，放到手机上会有点模糊，因为图像没有那么高的像素密度，浏览器自动把图像的每个像素复制到周围像素，满足像素密度的要求，导致图像的锐利度有所下降。
桌面显示器的面积较大，图像可以容纳更多细节。手机的屏幕较小，许多细节是看不清的，需要突出重点。
5.5.4、srcset 属性
为了解决上面这些问题，HTML 语言提供了一套完整的解决方案。首先，img 标签引入了 srcset 属性。
srcset 属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面借一个空格，然后是像素密度的描述符。请看下面的例子。
<img srcset="foo-320w.jpg,foo-480w.jpg 1.5x,foo-640w.jpg 2x" src="foo-640w.jpg" />
上面代码中，srcset 属性给出了单个图像 URL，适应三种不同的像素密度。
图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母 x。1x 表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。
如果 srcset 属性都不满足条件，那么就加载 src 属性指定的默认图像。
5.5.5、sizes 属性
像素密度的适配，只适合显示区域一样大小的图像。如果希望不同尺寸的屏幕，显示不同大小的图像，srcset 属性就不够用了，必须搭配 sizes 属性。
第一步，srcset 属性列出所有可用的图像。
<img srcset="foo-160.jpg 160w,
foo-320.jpg 320w,
foo-640.jpg 640w,
foo-1280.jpg 1280w"
src="foo-1280.jpg" />
上面代码中，srcset 属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。
宽度描述符就是图像原始的宽度，加上字符 w。上例的四种图片的原始宽度分别为 160 像素、320 像素、640 像素和 1280 像素。
第二部，sizes 属性列出不同设备的图像显示宽度。
sizes 属性的值是一个逗号分隔的字符串，除了最后一部分，前面每一部分都是一个放在括号里面的媒体查询表达式，后面是一个空格，再加上图像的显示宽度。
<img srcset="foo-160.jpg 160w,
foo-320.jpg 320w,
foo-640.jpg 640w,
foo-1280.jpg 1280w"
sizes="(max-width: 440px) 100vw,
(max-width: 900px) 33vw,
254px"
src="foo-1280.jpg" />
上面代码中，sizes 属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过 440 像素的设备，图像显示宽度为 100%；宽度 441 像素到 900 像素的设备，图像显示宽度为 33%；宽度 900 像素以上的设备，图像显示宽度为 254px。
第三步，浏览器根据当前设备的宽度，从 sizes 属性获得图像的显示宽度，然后从 srcset 属性找出最接近该宽度的图像，进行加载。
假定当前设备的屏幕宽度是 480px，浏览器从 sizes 属性查询得到，图片的显示宽度是 33vw（即 33%），等于 160px。srcset 属性里面，正好有宽度等于 160px 的图片，于是加载 foo-160.jpg。
如果省略 sizes 属性，那么浏览器将根据实际的图像显示宽度，从 srcset 属性选择最接近的图片。一旦使用 sizes 属性，就必须与 srcset 属性搭配使用，单独使用 sizes 属性是无效的。
5.5.6、sizes 属性
img 标签的 srcset 属性和 sizes 属性分别解决了像素密度和屏幕大小的适配，但如果要同时适配不同像素密度、不同大小的屏幕，就要用到 picture 标签。
picture 是一个容器标签，内部使用 source 和 img，指定不同情况下加载的图像。
<picture>
<source media="(max-width: 500px)" srcset="cat-vertical.jpg" />
<source media="(min-width: 501px)" srcset="cat-horizontal.jpg" />
<img src="cat.jpg" alt="cat" />
</picture>
上面代码中，picture 标签内部有两个 source 标签和一个 img 标签。
picture 内部的 source 标签，主要使用 media 属性和 srcset 属性。media 属性给出媒体查询表达式，srcset 属性就是 img 标签的 srcset 属性，给出加载的图像文件。sizes 属性其实这里也可以用，但由于有了 media 属性，就没有必要了。
浏览器按照 source 标签出现的顺序，依次判断当前设备是否满足 media 属性的媒体查询表达式，如果满足就加载 srcset 属性指定的图片文件，并且不再执行后面的 source 标签和 img 标签。
img 标签是默认情况下加载的图像，用来满足上面所有 source 都不匹配的情况，或者不支持 picture 的老式浏览器。
上面给出一个例子，同时考虑屏幕尺寸和像素密度的适配。
<picture>
<source
srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"
media="(min-width: 990px)"
<source
srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x"
media="(min-width: 750px)"
srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x"
alt="Shopify Merchant, Corrine Anestopoulos"
</picture>
上面代码中，source 标签的 media 属性给出屏幕尺寸的适配条件，每个条件都用 srcset 属性，再给出两种像素密度的图像 URL。
除了响应式图像，picture 标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 webp 格式，就加载这种格式的图像，否则加载 PNG 图像。
<picture>
<source type="image/svg+xml" srcset="logo.xml" />
<source type="image/webp" srcset="logo.webp" />
<img src="logo.png" alt="ACME Corp" />
</picture>
上面代码中，source 标签的 type 属性给出图像的 MIME 类型，srcset 是对应的图像 URL。
浏览器按照 source 标签出现的顺序，依次检查是否支持 type 属性指定的图像格式，如果支持就加载图像，并且不再检查后面的 source 标签了。上面的例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。
5.6、链接标签
链接（hyperlink）是互联网的核心。它允许用户再页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。
URL 是连接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。
script
noscript
5.6.1、a 链接标签
链接通过 a 标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。
<a href="https://wikipedia.org/">维基百科</a>
上面代码就定义了一个超集链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到 href 属性指定的网址。
a 标签内部不仅可以防止文字，也可以放置其他元素，比如段落、图像、多媒体等等。
<a href="https://www.example.com/">
<img src="https://www.example.com/foo.jpg"/>
上面代码中，a 标签内部就是一个图像。用户点击图像，就会跳转到指定网址。
a 标签有如下属性。
href 属性
href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
上文已经给出完整 URL 的例子，下面是锚点的例子。
<a href="#demo">示例</a>
上面代码中，href 属性的值 # 加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面 demo 锚点所在的位置。
hreflang 属性
hreflang 属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。
<a href="https://www.exmaple.com" hreflang="en">示例网址</a>
上面代码标明，href 属性指向的网址的语言是英语。
title 属性
title 属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。
<a href="https://www.example.com/" title="hello">示例</a>
上面代码中，用户鼠标停留在链接上面，会出现文字提示 hello。
target 属性
target 属性指定如何展开打开的链接。它可以是在指定的窗口打开，也可以在 iframe 里面打开。
<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>
上面代码中，两个链接都在名叫 test 的窗口打开。首先点击链接 foo，浏览器发现没有叫做 test 的窗口，就新建一个窗口，起名为 test，在该窗口打开 foo.com。然后，用户又点击链接 bar，由于已经存在 test 窗口，浏览器就在该窗口打开 bar.com，取代里面已经打开的 foo.com。
target 属性的值也可以是以下四个关键字之一。
_self：当前窗口打开，这时默认值。_blank：新窗口打开。_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者 iframe 里面的链接。如果当前窗口没有上层窗口，这个值等同于 _self。_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于 _self。<a href="https://www.example.com" target="_blank">示例链接</a>
上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。
注意，使用 target 属性的时候，最好跟 rel="noreferrer" 一起使用，这样可以避免安全风险。
rel 属性
rel 属性说明链接与当前页面的关系。
<a href="help.html" rel="help">帮助</a>
上面代码的 rel 属性，说明链接是当前页面的帮助文档。
下面是一些常见的 rel 属性的值。
alternate：当前文档的另一种形式，比如翻译
author：作者链接
bookmark：用作书签的永久地址
external：当前文档的外部参考文档
help：帮助链接
license：许可证链接
next：系列文档的下一篇
nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的 Referer 字段发送出去，这样可以隐藏点击的来源。
noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的 window.opener 属性引用原始窗口，这样就提高了安全性。
prev：系列文档的上一篇
search：文档的搜索链接
tag：文档的标签链接
referrerpolicy 属性
referrerpolicy 属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的 Referer 字段行为。
该属性可以取下面八个值：no-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
其中，no-referrer 表示不发送 Referer 字段，same-origin 表示同源时才发送 Referer 字段，origin 表示只发送源信息（协议+域名+端口）。
ping 属性
ping 属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。
type 属性
type 属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。
<a href="smile.jpg" type="image/jpeg">示例图片</a>
上面代码中，type 属性提示这是一张图片。
download 属性
download 属性表明当前连接用于下载，而不是跳转到另一个 URL。
<a href="demo.txt" download>下载</a>
上面代码点击后，会出现下载对话框。
注意，download 属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。
如果 download 属性设置了值，那么这个值就是下载的文件名。
<a href="foo.exe" download="bar.exe">点击下载</a>
上面代码中，下载文件的原始文件名是 foo.exe。点击后，下载对话框提示的文件名是 bar.exe。
注意，如果链接点击后，服务器的 HTTP 回应的头信息设置了 Content-Disposition 字段，并且该字段的值与 download 属性不一致，那么该字段优先，下载时将显示其设置的文件名。
download 属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如 data: 开头的网址。这时，download 属性可以为虚拟网址指定下载的文件名。
<a href="data:,Hello%2C%20World!">点击</a>
上面链接点击后，会打开一个虚拟网页，上面显示 Hello World!。
<a href="data:,Hello%2C%20World!" download="hello.txt">点击</a>
上面链接点击后，下载的 hello.txt 文件内容是“Hello World!”。
5.6.2、邮件链接
链接也可以指向一个邮件地址，使用 mailto 协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户指定地址发送邮件。
<a href="mailto:contact@example.com">联系我们</a>
上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向 contact@example.com发送邮件。
除了邮箱，邮件协议还允许指定其他几个邮件要素。
subject：主题
cc：抄送
bcc：密送
body: 邮件内容
使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面。
<a href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body">发送邮件</a>
上面代码中，邮件链接里面不仅包含了邮箱地址，还包含了 cc、subject、body 等邮件要素。这些要素的值需要经过 URL 转义，比如空格转成 %20。
不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。