HTML

HTML 语言简介

概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是“超文本标记语言”（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，点击链接就可以跳转到其他网页，从而构成了整个互联网。

1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础，CSS 和 JavaScript 都是基于 HTML 才能生效，即使没有这两者，HTML 本身也能使用，可以完成基本的内容展示。本教程只介绍 HTML 语言。

下面就是一个简单网页的 HTML 源码。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>网页标题</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

上面这段代码，可以保存成文件hello.html。浏览器打开这个本地文件，就能看到文字“Hello World”。

浏览器右键菜单的“查看源码”（View page source），可以展示当前网页的 HTML 源码。

网页的基本概念

标签

网页的 HTML 代码由许许多多不同的标签（tag）构成。学习 HTML 语言，就是学习各种标签的用法。

下面就是标签的一个例子。

1
<title>网页标题</title>

上面代码中，<title>和</title>就是一对标签。

标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

标签放在一对尖括号里面（比如<title>），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如</title>）。但是，也有一些标签不是成对使用，而是只有开始标签，没有结束标签，比如上一节示例的<meta>标签。

1
<meta charset="utf-8">

上面代码中，<meta>标签就没有结束标签</meta>。

这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际应用中，它们主要用来提示浏览器，做一些特别处理。

标签可以嵌套。

1
<div><p>hello world</p></div>

上面代码中，<div>标签内部包含了一个<p>标签。

嵌套时，必须保证正确的闭合顺序，不能跨层嵌套，否则会出现意想不到的渲染结果。

1
<div><p>hello world</div></p>

上面代码就是错误的嵌套，闭合顺序不正确。

HTML 标签名是大小写不敏感，比如<title>和<TITLE>是同一个标签。不过，一般习惯都是使用小写。

另外，HTML 语言忽略缩进和换行。下面几种写法的渲染结果是一样的。

1
2
3
4
5
6
7
8
<title>网页标题</title>

<title>
  网页标题
</title>

<title>网页
标题</title>

进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。所以，正式发布网页之前，开发者有时会把源码压缩成一行，以减少传输的字节数。

各种网页的样式效果，比如内容的缩进和换行，主要靠 CSS 来实现。

元素

浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的p元素。

嵌套的标签就构成了网页元素的层级关系。

1
<div><p>hello world</p></div>

上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。

块级元素，行内元素

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。

块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

1
2
<p>hello</p>
<p>world</p>

上面代码中，p元素是块级元素，因此浏览器会将内容分成两行显示。

行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。

1
2
<span>hello</span>
<span>world</span>

上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。

属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

1
<img src="demo.jpg" width="500">

上面代码中，<img>标签有两个属性：src和width。

属性可以用等号指定属性值，比如上例的demo.jpg就是src的属性值。属性值一般放在双引号里面，这不是必需的，但推荐总是使用双引号。

注意，属性名是大小写不敏感的，onclick和onClick是同一个属性。

HTML 提供大量属性，用来定制标签的行为，详细介绍请看《元素的属性》一章。

网页的基本标签

符合 HTML 语法标准的网页，应该满足下面的基本结构。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

不管多么复杂的网页，都是从上面这个基本结构衍生出来的。

前面说过，HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。

下面就依次介绍，这个基本结构的主要标签。它们构成了网页的骨架。

<!doctype>

网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。

一般来说，只要像下面这样，简单声明doctype为html即可。浏览器就会按照 HTML 5 的规则处理网页。

1
<!doctype html>

有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为<!doctype>本质上不是标签，更像一个处理指令。

1
<!DOCTYPE html>

<html>

<html>标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

该标签的lang属性，表示网页内容默认的语言。

1
<html lang="zh-CN">

上面代码表示，网页是中文内容。如果是英文内容，zh-CN要改成en。更详细的介绍，参见《元素的属性》一章。

<head>

<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。

1
2
3
4
5
6
<!doctype html>
<html>
  <head>
    <title>网页标题</title>
  </head>
</html>

<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。

<head>的子元素一般有下面七个，后文会一一介绍。

  • <meta>：设置网页的元数据。
  • <link>：连接外部样式表。
  • <title>：设置网页标题。
  • <style>：放置内嵌的样式表。
  • <script>：引入脚本。
  • <noscript>：浏览器不支持脚本时，所要显示的内容。
  • <base>：设置网页内部相对 URL 的计算基准。

<meta>

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。

不管什么样的网页，一般都可以放置以下两个<meta>标签。

1
2
3
4
5
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>

上面例子中，第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。

<meta>标签有五个属性，下面依次介绍。

（1）charset 属性

<meta>标签的charset属性，用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。

1
<meta charset="utf-8">

上面代码声明，网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式，但正确的做法几乎总是应该采用 UTF-8。

注意，这里声明的编码方式，应该与网页实际的编码方式一致，即声明了utf-8，网页就应该使用 UTF-8 编码保存。如果这里声明了utf-8，实际却是使用另一种编码（比如 GB2312），并不会导致浏览器的自动转码，网页可能会显示为乱码。

（2）name 属性，content 属性

<meta>标签的name属性表示元数据的名字，content属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。

1
2
3
4
5
<head>
  <meta name="description" content="HTML 语言入门">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>

上面代码包含了三个元数据：description是网页内容的描述，keywords是网页内容的关键字，author是网页作者。

元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。

1
2
3
4
5
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="Application Name">
<meta name="generator" content="program">
<meta name="subject" content="your document's subject">
<meta name="referrer" content="no-referrer">

（3）http-equiv 属性，content 属性

<meta>标签的http-equiv属性用来补充 HTTP 回应的头信息字段，如果服务器发回的 HTTP 回应缺少某个字段，就可以用它补充。<meta>标签的content属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法，这里就不详细介绍了。

1
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

上面代码设定 HTTP 回应的Content-Security-Policy字段。

下面是另一些例子。

1
2
3
<meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="30;URL='http://website.com'">

<title>

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

1
2
3
<head>
  <title>网页标题</title>
</head>

搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。

<title>标签的内部，不能再放置其他标签，只能放置无格式的纯文本。

<body>

<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面。

1
2
3
4
5
6
7
8
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

空格和换行

HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。

1
<p>  hello world   </p>

上面代码中，hello前面的空格和world后面的空格，浏览器一律忽略不计。

标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个。

1
<p>hello      world</p>

上面代码中，hello与world之间有多个连续空格，浏览器会将它们合并成一个。网页渲染的结果是，hello与world之间只有一个空格。

浏览器还会将文本里面的换行符（\n）和回车符（\r），替换成空格。

1
2
3
4
5
6
<p>hello



world
</p>

上面代码中，hello与world之间有多个换行，浏览器会将它们替换成空格，然后再将多个空格合并成一个。网页渲染的结果是，hello与world之间有一个空格。

这意味着，HTML 源码里面的换行，不会产生换行效果。

注释

HTML 代码可以包含注释，浏览器会自动忽略注释。注释以<!--开头，以-->结尾，下面就是一个注释的例子。

1
<!-- 这是一个注释 -->

注释可以是多行的，并且内部的 HTML 都不再生效了。

1
2
3
<!--
  <p>hello world</p>
-->

上面代码是一个注释的区块，内部的代码都是无效的，浏览器不会解析，更不会渲染它们。

注释有助于理解代码的含义，复杂的代码块前面最好加上注释。

URL 简介

概述

URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。

1
https://www.example.com/path/index.html

所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才能在互联网上获取它们。

只要资源可以通过互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。

URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。

网址的组成部分

URL 由多个部分组成。下面是一个比较复杂的 URL，实际的 URL 通常不会有这么多部分。

1
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2##anchor

我们看看，这个 URL 的各个部分。

协议

协议（scheme）是浏览器请求服务器资源的方法，上例是https://的部分，表示使用 HTTPS 协议。

互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接在浏览器地址栏输入www.example.com，那么浏览器默认会访问http://www.example.com。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。

HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（://）。其他协议不一定如此，邮件地址协议mailto:的协议名后面只有一个冒号，比如mailto:foo@example.com。

主机

主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是www.example.com。

有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。HTTP 协议的默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。

端口紧跟在域名后面，两者之间使用冒号分隔，比如www.example.com:80。

路径

路径（path）是资源在网站的位置。比如，/path/index.html这个路径，指向网站的/path子目录下面的网页文件index.html。

互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。

路径可能只包含目录，不包含文件名，比如/foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的index.html文件（即等同于请求/foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问www.example.com这个网址，很可能返回的是网页文件www.example.com/index.html。

查询参数

查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用?分隔，上例是?key1=value1&key2=value2。

查询参数可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value就是一个键值对，key1是键名，value1是键值。

多组参数之间使用&连接，比如key1=value1&key2=value2。

锚点

锚点（anchor）是网页内部的定位点，使用##加上锚点名称，放在网址的最后，比如##anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。

锚点名称通过网页元素的id属性命名，详见《元素的属性》一章。

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这个网址，需要写成下面的样子。

1
www.example.com/%e4%b8%ad%e5%9b%bd.html

上面代码中，中的转义形式是%e4%b8%ad，国是%e5%9b%bd。

绝对 URL 和相对 URL

URL 分成两种：绝对 URL 和相对 URL。

绝对 URL 指的是，只靠 URL 本身就能确定资源的位置。这意味着，URL 必须带有资源的完整信息，包含协议、主机、路径等部分。前面的例子都是绝对 URL。

相对 URL 指的是，URL 不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。比如，当前网页的 URL 是https://www.example.com/path/index.html，该网页上面有一个资源，URL 指向a.html，这个就是相对 URL。因为只知道a.html，并不能定位资源。浏览器假定，a.html与当前网址在同一个子目录下面，从而得到绝对 URL https://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.html等同于www.example.com/index.html，这时.相当于根目录的当前目录，即根目录本身。

<base>

<base>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<base>标签，而且只能放在<head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子。

1
2
3
<head>
<base href="https://www.example.com/files/" target="_blank">
</head>

<base>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（参见《链接》一章）。已知计算基准是https://www.example.com/files/，那么相对 URL foo.html，就可以转成绝对 URL https://www.example.com/files/foo.html。

注意，<base>标签必须至少具有href属性或target属性之一。

1
2
<base href="http://foo.com/app/">
<base target="_blank">

一旦设置了<base>，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对<base>计算的，而不是针对当前网页的 URL。

网页元素的属性

简介

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。

1
<html lang="en">

上面代码中，<html>标签内部的键值对lang="en"，就称为html元素的属性。属性名为lang，属性值为en。

属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。

属性名与属性值之间，通过等号=连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。

有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。

1
<input type="text" required>

上面代码中，required就是<input>标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。

全局属性

全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。

下面是一些常见的全局属性。

id

id属性是元素在网页内的唯一标识符。比如，网页可能包含多个<p>标签，id属性可以指定每个<p>标签的唯一标识符。

1
2
3
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

上面代码中，三个<p>标签具有不同的id属性，因此可以区分。

id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值还可以在最前面加上##，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址https://foo.com/index.html##bar的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。

class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

1
2
3
<p class="para"></p>
<p></p>
<p class="para"></p>

上面代码中，第一个<p>和第三个<p>是一类，因为它们的class属性相同。

元素可以同时具有多个 class，它们之间使用空格分隔。

1
<p class="p1 p2 p3"></p>

上面的p元素同时具有p1、p2、p3三个 class。

title

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

1
2
3
<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>

上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。

tabindex

网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。

这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。

tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。

  • 负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。
  • 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
  • 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
1
<p tabindex="0">这段文字可以获得焦点。</p>

上面代码中，<p>标签的tabindex为0，意味着该元素可以获得焦点，并且也可以被 Tab 键遍历，顺序由其在源码里面的位置决定。

一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历，才有必要设置tabindex属性。

accesskey

accesskey属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。

1
<button accesskey="s">提交</button>

上面代码中，<button>的快捷键是s，按下快捷键，该元素就得到了焦点。

accesskey属性的字符键，必须配合功能键，一起按下才会生效。也就是说，快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统，功能键都不一样。比如，Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键，在 Mac 系统的快捷键是Ctrl + Alt + 字符键。

注意，accesskey如果跟操作系统或浏览器级别的快捷键有冲突，这时不会生效。

style

style属性用来指定当前元素的 CSS 样式。具体的设置，请看 CSS 教程。

1
<p style="color: red;">hello</p>

上面代码指定文字颜色为红色。

hidden

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

1
<p hidden>本句不会显示在页面上。</p>

上面代码中，这个p元素不会出现在网页上。

注意，CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。

lang，dir

lang属性指定网页元素使用的语言。

1
2
<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：浏览器根据内容的解析结果，自行决定。

contenteditable

HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。

  • true或空字符串：内容可以编辑
  • false：不可以编辑
1
2
3
<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。

该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

spellcheck

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。

它有两个可能的值。

  • true：打开拼写检查
  • false：关闭拼写检查
1
2
3
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>

上面代码中，seperate下面会有提示，表示拼错了。

注意，由于该属性只在编辑时生效，所以这个例子必须加上contenteditable属性，表示本段内容可编辑。鼠标单击就可以进入编辑状态，这时才会看到拼写提示。不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素，该属性无效。

这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。

data-属性

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。

1
<a href="##" class="tooltip" data-tip="this is the tip!">链接</a>

上面代码中，data-tip用于放置链接的提示文字。

由于data-属性只能通过 CSS 或 JavaScript 利用，所以这里不做详细介绍了。下面是 CSS 的例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* HTML 代码如下
<div data-role="mobile">
Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* HTML 代码如下
<div class="test" data-content="This is the div content">test</div>​
*/
.test {
  display: inline-block;
}
.test:after {
  content: attr(data-content);
}

事件处理属性

除了上面这些属性，全局属性还包括事件处理属性（event handler），用来响应用户的动作。这些属性的值都是 JavaScript 代码，请参考 JavaScript 教程，这里只列出这些属性的名单。

onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

HTML 字符编码

简介

网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。

一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式。

1
Content-Type: text/html; charset=UTF-8

上面代码中，HTTP 头信息的Content-Type字段先声明，服务器发送的数据类型是text/html（即 HTML 网页），然后声明网页的文字编码是UTF-8。

网页内部也会再用<meta>标签，再次声明网页的编码。

1
<meta charset="UTF-8">

字符的数字表示法

网页可以使用不同语言的编码方式，但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。这个字符集的设计目标是包含世界上的所有字符，目前已经收入了十多万个字符。

每个字符有一个 Unicode 号码，称为码点（code point）。如果知道码点，就能查到这是什么字符。举例来说，英文字母a的码点是十进制的97（十六进制的61），汉字“中”的码点是十进制的20013（十六进制的4e2d）。

由于下面的原因，不是每一个 Unicode 字符都能直接在 HTML 语言里面显示。

（1）不是每个 Unicode 字符都可以打印出来，有些没有可打印形式，比如换行符的码点是十进制的10（十六进制的A），就没有对应的字面形式。

（2）小于号（<）和大于号（>）用来定义 HTML 标签，其他需要用到这两个符号的场合，必须防止它们被解释成标签。

（3）由于 Unicode 字符太多，无法找到一种输入法，可以直接输入所有这些字符。换言之，没有一种键盘，有办法输入所有符号。

（4）网页不允许混合使用多种编码，如果使用 UTF-8 编码的同时，又想插入其他编码的字符，就会很困难。

HTML 为了解决上面这些问题，允许使用 Unicode 码点表示字符，浏览器会自动将码点转成对应的字符。

字符的码点表示法是&##N;（十进制，N代表码点）或者&##xN;（十六进制，N代表码点），比如，字符a可以写成&##97;（十进制）或者&##x61;（十六进制），字符中可以写成&##20013;（十进制）或者&##x4e2d;（十六进制），浏览器会自动转换它们。

1
2
3
4
5
<p>hello</p>
<!-- 等同于 -->
<p>&##104;&##101;&##108;&##108;&##111;</p>
<!-- 等同于 -->
<p>&##x68;&##x65;&##x6c;&##x6c;&##x6f;</p>

上面代码中，字符可以直接表示，也可以使用十进制码点或十六进制码点表示。

注意，HTML 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，<p>一旦写成<&##112;>或者&##60;&##112;&##62;，浏览器就不再认为这是标签了，而会当作文本内容将其显示为<p>。

字符的实体表示法

数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。

实体的写法是&name;，其中的name是字符的名字。下面是其中一些特殊字符，及其对应的实体。

  • <：&lt;
  • >：&gt;
  • "：&quot;
  • '：&apos;
  • &：&amp;
  • ©：&copy;
  • ##：&num;
  • §：&sect;
  • ¥：&yen;
  • $：&dollar;
  • £：&pound;
  • ¢：&cent;
  • %：&percnt;
  • *：$ast;
  • @：&commat;
  • ^：&Hat;
  • ±：&plusmn;
  • 空格：&nbsp;

注意，上面最后一个特殊字符是空格，它也有对应的实体表示法。

字符的数字表示法和实体表示法，都可以表示正常情况无法输入的字符，逃脱了浏览器的限制，所以英语里面称为“escape”，中文翻译为“字符的转义”。

网页的语义结构

HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

含义

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面就是一个典型的语义结构的网页。

1
2
3
4
5
6
7
8
9
10
<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分。

编写 HTML 网页，第一步就是写出语义结构的网页骨架。

常用标签

<header>

<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。

1
2
3
4
5
6
7
8
9
10
11
12
<header>
  <h1>公司名称</h1>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。

1
2
3
4
5
6
<article>
  <header>
    <h2>文章标题</h2>
    <p>张三，发表于2010年1月1日</p>
  </header>
</article>

由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。

<footer>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

1
2
3
4
5
<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

上面代码中，版权信息放在<footer>里面。

<footer>也可以放在文章里面。

1
2
3
4
5
6
7
8
<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <footer>
    <p>© 禁止转贴</p>
  </footer>
</article>

<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。

<main>

<main>标签表示页面的主体内容，一个页面只能有一个<main>。

1
2
3
4
5
6
7
8
<body>
<header>页眉</header>
<main>
  <article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>

上面代码就是最典型的页面结构。

注意，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。

另外，功能性区块（比如搜索栏）不适合放入<main>，除非当前页面就是搜索页面。

<article>

<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。

1
2
3
4
<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

一个网页可以包含一个或多个<article>，比如包含多篇文章。

<aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。

下面是网页级别的<aside>的例子。

1
2
3
4
<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

下面是文章评注的例子。

1
2
3
4
5
<p>第一段</p>

<aside>
  <p>本段是文章的重点。</p>
</aside>

<section>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

上面代码中，<article>包含了两个<section>，代表两章。

<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。

一般来说，<section>都应该有标题，即包含<h1>~`

标签。多个
可以放置在同一个
里面，一个
里面也可能包含多个
，这取决于
和
`在当前页面的含义。

<nav>

<nav>标签用于放置页面或文档的导航信息。

1
2
3
4
5
6
7
<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

<nav>里面通常是列表，但也可以放置其他标签。

<h1> ~ <h6>

HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。

  • <h1>：一级标题
  • <h2>：二级标题
  • <h3>：三级标题
  • <h4>：四级标题
  • <h5>：五级标题
  • <h6>：六级标题

<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。

1
2
3
4
5
6
7
8
<body>
  <h1>JavaScript 语言介绍</h1>
    <h2>概述</h2>
    <h2>基本概念</h2>
      <h3>网页</h3>
      <h3>链接</h3>
    <h2>主要用法</h2>
</body>

上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面。

标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。

默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。

<hgroup>

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

1
2
3
4
5
<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

注意，<hgroup>只能包含<h1>~`

`，不能包含其他标签。

文本标签

历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。

<div>

<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式。所以在早期，下面层层包裹的<div>就很常见。

1
2
3
4
5
6
7
<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。

1
2
3
4
5
6
7
<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

<div>是无语义的块级元素。下面的例子使用<div>，将图像和文字组合在一起，构成一个警告区块。

1
2
3
4
<div>
  <img src="warning.jpg" alt="警告">
  <p>小心</p>
</div>

只要样式上需要多个块级元素组合在一起，就可以使用<div>。但是，这应该是最后的措施，带有语义的块级标签（比如<article>、<section>、<aside>、<nav>等）始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<div>。

<p>

<p>标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素。

1
<p>hello world</p>

上面代码就是一个简单的段落。

<span>

<span>是一个通用目的的行内标签（即不会产生换行），不带有任何语义。它通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式，就可以把它们放置在<span>。

1
<p>这是一句<span>重要</span>的句子。</p>

上面代码中，句子里面需要强调的部分，就可以放在<span>。

<br>，<wbr>

<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

1
hello<br>world

浏览器渲染上面代码时，会分成两行，hello和world各占一行。

<br>对于诗歌和地址的换行非常有用。

1
2
3
4
5
6
<p>
  床前明月光，<br>
  疑是地上霜。<br>
  举头望明月，<br>
  低头思故乡。
</p>

上面的代码如果不用<br>，会显示成一行。

注意，块级元素的间隔，不要使用<br>来产生，而要使用 CSS 指定。

1
2
3
4
<p>第一段</p>
<br>
<br>
<p>第二段</p>

上面的代码希望段落之间有两个换行，这时不应该使用<br>，而应该使用 CSS。

<wbr>标签跟<br>很相似，表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行。它是为了防止浏览器在一个很长的单词中间，不正确地断行或者不断行，所以事先标明可以断行的位置，主要用于欧洲一些单词很长的语言或者 URL 的断行。

1
2
3
<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

上面代码是一个很长的德语单词，为了防止不正确断行，事先用<wbr>告诉浏览器，可以选择在哪里断行。

<hr>

<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。

1
2
3
<p>第一个主题</p>
<hr>
<p>第二个主题</p>

上面代码的渲染结果是，两段之间会出现一根水平线。

该标签是历史遗留下来的，建议尽量避免使用。主题之间的分隔可以使用<section>，如果想要水平线的效果，可以使用 CSS。

<pre>

<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

1
2
3
<pre>hello

   world</pre>

上面代码中，换行和连续空格都会由于<pre>标签，而被保留下来，浏览器按照原样输出。

注意，HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML 标签。

1
<pre><strong>hello world</strong></pre>

上面代码中，<pre>标签的内容会加粗显示。

<strong>，<b>

<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。

1
<p>开会时间是<strong>下午两点</strong>。</p>

<b>与<strong>很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它是 Boldface 的缩写。

1
<p>开会时间是<b>下午两点</b>。</p>

它与<strong>的区别在于，由于历史原因，它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此不建议使用，应该优先使用<strong>标签。

<em>，<i>

<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。

1
<p>我们<em>已经</em>讨论过这件事情了。</p>

虽然浏览器通常会以斜体显示<em>，但无法保证一定如此，所以最好还是用 CSS 指定一下这个标签的样式。

<i>标签与<em>相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。

1
<p>我心想，这件事是<i>真的</i>吗？</p>

<i>标签的语义不强，更接近是一个纯样式的标签，建议优先使用<em>标签代替它。

<sub>，<sup>，<var>

<sub>标签将内容变为下标，<sup>标签将内容变为上标。它们都是行内元素，主要用于数学公式、分子式等。

1
<p>水分子是 H<sub>2</sub>O。</p>

<var>标签表示代码或数学公式的变量。

1
2
3
<p>勾股定理是
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
。</p>

<u>，<s>

<u>标签是一个行内元素，表示对内容提供某种注释，提醒用户这里可能有问题，基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。

1
2
3
<p>
一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>。
</p>

上面代码中，<u>提示用户这是一个拼写错误，“安份守己”的下方会有一个下划线。

注意，<u>会产生下划线，由于链接也默认带有下划线，所以必须非常小心使用<u>标签，避免用户误以为可以点击。万一确有必要使用，最好使用 CSS 改变<u>的默认样式。

<s>标签是一个行内元素，为内容加上删除线。

1
<p>今天特价商品：<s>三文鱼</s>（售完）</p>

上面代码中，“三文鱼”会有一根删除线。

<blockquote>，<cite>，<q>

<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。

1
2
3
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

<blockquote>标签有一个cite属性，它的值是一个网址，表示引言来源，不会显示在网页上。

<cite>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容。

1
2
3
4
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>
<cite>-- 爱迪生</cite>

<cite>不一定跟<blockquote>一起使用。如果文章中提到资料来源，也可以单独使用。

1
<p>更多资料请看<cite>维基百科</cite>。</p>

<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。

1
2
3
4
<p>
  莎士比亚的《哈姆雷特》有一句著名的台词：
  <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q>
</p>

上面例子中，引言部分跟前面的说明部分是在同一行里面。

另外，跟<blockquote>一样，<q>也有cite属性，表示引言的来源网址。

注意，浏览器默认会斜体显示<q>的内容，并且会自动添加半角的双引号。所以，引用中文内容时要小心。

<code>

<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

1
<code>alert()</code>的作用是让网页弹出一个提示框。

如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。

1
2
3
4
5
6
<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

<kbd>，<samp>

<kbd>标签是一个行内元素，原意是用户从键盘输入的内容，现在扩展到各种输入，包括语音输入。浏览器默认以等宽字体显示标签内容。

1
<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>

<kbd>可以嵌套，方便指定样式。

1
2
3
<p>Windows 可以按下
<kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd>
重启。</p>

<samp>标签是一个行内元素，表示计算机程序输出内容的一个例子。浏览器默认以等宽字体显示。

1
2
3
<p>如果使用没有定义的变量，浏览器会报错：
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>

<mark>

<mark>是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。

1
<p>我们讨论以后决定，<mark>运行会在下周三举办</mark>。</p>

<mark>很适合在引用的内容（<q>或<blockquote>）中，标记出需要关注的句子。

1
2
3
<blockquote>
床前明月光，疑是地上霜。<mark>举头望明月，低头思故乡。</mark>
</blockquote>

除了标记感兴趣的文本，<mark>还可以用于在搜索结果中，标记出匹配的关键词。

注意，不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。

<small>

<small>是一个行内标签，浏览器会将它包含的内容，以小一号的字号显示，不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。

1
2
<p>文章正文</p>
<p><small>以上内容使用创意共享许可证。</small></p>

<time>，<data>

<time>是一个行内标签，为跟时间相关的内容提供机器可读的格式。

1
<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>

上面代码中，<time>表示下周三的具体日期。这方便搜索引擎抓取，或者下一步的其他处理。

<time>的datetime属性，用来指定机器可读的日期，可以有多种格式。

  • 有效年份：2011
  • 有效月份：2011-11
  • 有效日期：2011-11-18
  • 无年份的日期：11-18
  • 年度的第几周：2011-W47
  • 有效时间：14:54、14:54:39、14:54:39.929
  • 日期和时间：2011-11-18T14:54:39.929
1
<p>音乐会在<time datetime="20:00">晚上八点</time>开始。</p>

<data>标签与<time>类似，也是提供机器可读的内容，但是用于非时间的场合。

1
<p>本次马拉松比赛第一名是<data value="39">张三</data></p>。

上面代码中，选手的机读数据就放在<data>标签的value属性。

<address>

<address>标签是一个块级元素，表示某人或某个组织的联系方式。

1
2
3
4
5
6
<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>

该标签有几个注意点。

（1）如果是文章里提到的地址（比如提到搬家前的地址），而不是联系信息，不要使用<address>标签。

（2）<address>的内容不得有非联系信息，比如发布日期。

（3）<address>不能嵌套，并且内部不能有标题标签（<h1>~`

），也不能有
、
头像头像
小u
热爱可抵岁月漫长
原创HTML
打赏作者
感谢你赐予我前进的力量
  • 微信
    微信
  • 支付宝
    支付宝
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
前端10HTML1
Related Articles