# HTML 教程 系统讲解 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 源码。 ```html 网页标题

Hello World

``` 上面这段代码，可以保存成文件`hello.html`。浏览器打开这个本地文件，就能看到文字“Hello World”。 浏览器右键菜单的“查看源码”（View page source），可以展示当前网页的 HTML 源码。 ## 网页的基本概念 ### 标签 网页的 HTML 代码由许许多多不同的标签（tag）构成。学习 HTML 语言，就是学习各种标签的用法。 下面就是标签的一个例子。 ```html 网页标题 ``` 上面代码中，``和``就是一对标签。 标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。 标签放在一对尖括号里面（比如``），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如``）。但是，也有一些标签不是成对使用，而是只有开始标签，没有结束标签，比如上一节示例的``标签。 ```html ``` 上面代码中，``标签就没有结束标签``。 这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际应用中，它们主要用来提示浏览器，做一些特别处理。 标签可以嵌套。 ```html

hello world

``` 上面代码中，`
`标签内部包含了一个`

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

hello world

``` 上面代码就是错误的嵌套，闭合顺序不正确。 HTML 标签名是大小写不敏感，比如``和`<TITLE>`是同一个标签。不过，一般习惯都是使用小写。 另外，HTML 语言忽略缩进和换行。下面几种写法的渲染结果是一样的。 ```html <title>网页标题 网页标题 网页 标题 ``` 进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。所以，正式发布网页之前，开发者有时会把源码压缩成一行，以减少传输的字节数。 各种网页的样式效果，比如内容的缩进和换行，主要靠 CSS 来实现。 ### 元素 浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点（node）。这种节点就称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是从源码角度来看，元素是从编程角度来看，比如`

`标签对应网页的`p`元素。 嵌套的标签就构成了网页元素的层级关系。 ```html

hello world

``` 上面代码中，`div`元素内部包含了一个`p`元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即`div`是`p`的父元素，`p`是`div`的子元素。 ### 块级元素，行内元素 所有元素可以分成两大类：块级元素（block）和行内元素（inline）。 块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。 ```html

hello

world

``` 上面代码中，`p`元素是块级元素，因此浏览器会将内容分成两行显示。 行内元素默认与其他元素在同一行，不产生换行。比如，`span`就是行内元素，通常用来为某些文字指定特别的样式。 ```html hello world ``` 上面代码中，`span`元素是行内元素，因此浏览器会将两行内容放在一行显示。 ### 属性 属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。 ```html ``` 上面代码中，``标签有两个属性：`src`和`width`。 属性可以用等号指定属性值，比如上例的`demo.jpg`就是`src`的属性值。属性值一般放在双引号里面，这不是必需的，但推荐总是使用双引号。 注意，属性名是大小写不敏感的，`onclick`和`onClick`是同一个属性。 HTML 提供大量属性，用来定制标签的行为，详细介绍请看《元素的属性》一章。 ## 网页的基本标签 符合 HTML 语法标准的网页，应该满足下面的基本结构。 ```html ``` 不管多么复杂的网页，都是从上面这个基本结构衍生出来的。 前面说过，HTML 代码的缩进和换行，对于浏览器不产生作用。所以，上面的代码完全可以写成一行，渲染结果不变。上面这样分行写，只是为了提高可读性。 下面就依次介绍，这个基本结构的主要标签。它们构成了网页的骨架。 ### `` 网页的第一个标签通常是``，表示文档类型，告诉浏览器如何解析网页。 一般来说，只要像下面这样，简单声明`doctype`为`html`即可。浏览器就会按照 HTML 5 的规则处理网页。 ```html ``` 有时，该标签采用完全大写的形式，以便区别于正常的 HTML 标签。因为``本质上不是标签，更像一个处理指令。 ```html ``` ### `` ``标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个``标签。 该标签的`lang`属性，表示网页内容默认的语言。 ```html ``` 上面代码表示，网页是中文内容。如果是英文内容，`zh-CN`要改成`en`。更详细的介绍，参见《元素的属性》一章。 ### `` ``标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。 ```html 网页标题 ``` ``是``的第一个子元素。如果网页不包含``，浏览器会自动创建一个。 ``的子元素一般有下面七个，后文会一一介绍。 - ``：设置网页的元数据。 - ``：连接外部样式表。 - ``：设置网页标题。 - `<style>`：放置内嵌的样式表。 - `<script>`：引入脚本。 - `<noscript>`：浏览器不支持脚本时，所要显示的内容。 - `<base>`：设置网页内部相对 URL 的计算基准。 ### `<meta>` `<meta>`标签用于设置或说明网页的元数据，必须放在`<head>`里面。一个`<meta>`标签就是一项元数据，网页可以有多个`<meta>`。`<meta>`标签约定放在`<head>`内容的最前面。 不管什么样的网页，一般都可以放置以下两个`<meta>`标签。 ```html <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title ``` 上面例子中，第一个``标签表示网页采用 UTF-8 格式编码，第二个``标签表示网页在手机端可以自动缩放。 ``标签有五个属性，下面依次介绍。 **（1）charset 属性** ``标签的`charset`属性，用来指定网页的编码方式。该属性非常重要，如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。 ```html ``` 上面代码声明，网页为 UTF-8 编码。虽然开发者可以使用其他的编码方式，但正确的做法几乎总是应该采用 UTF-8。 注意，这里声明的编码方式，应该与网页实际的编码方式一致，即声明了`utf-8`，网页就应该使用 UTF-8 编码保存。如果这里声明了`utf-8`，实际却是使用另一种编码（比如 GB2312），并不会导致浏览器的自动转码，网页可能会显示为乱码。 **（2）name 属性，content 属性** ``标签的`name`属性表示元数据的名字，`content`属性表示元数据的值。它们合在一起使用，就可以为网页指定一项元数据。 ```html ``` 上面代码包含了三个元数据：`description`是网页内容的描述，`keywords`是网页内容的关键字，`author`是网页作者。 元数据有很多种，大部分涉及浏览器内部工作机制，或者特定的使用场景，这里就不一一介绍了。下面是一些例子。 ```html ``` **（3）http-equiv 属性，content 属性** ``标签的`http-equiv`属性用来补充 HTTP 回应的头信息字段，如果服务器发回的 HTTP 回应缺少某个字段，就可以用它补充。``标签的`content`属性是对应的字段内容。这两个属性与 HTTP 协议相关，属于高级用法，这里就不详细介绍了。 ```html ``` 上面代码设定 HTTP 回应的`Content-Security-Policy`字段。 下面是另一些例子。 ```html ``` ### `` `<title>`标签用于指定网页的标题，会显示在浏览器窗口的标题栏。 ```html <head> <title>网页标题 ``` 搜索引擎根据这个标签，显示每个网页的标题。它对于网页在搜索引擎的排序，有很大的影响，应该精心安排，反映网页的主题。 ``标签的内部，不能再放置其他标签，只能放置无格式的纯文本。 ### `<body>` `<body>`标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都放置在它的内部。它是`<html>`的第二个子元素，紧跟在`<head>`后面。 ```html <html> <head> <title>网页标题

hello world

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

hello world

``` 上面代码中，`hello`前面的空格和`world`后面的空格，浏览器一律忽略不计。 标签内容里面的多个连续空格（包含制表符`\t`），会被浏览器合并成一个。 ```html

hello world

``` 上面代码中，`hello`与`world`之间有多个连续空格，浏览器会将它们合并成一个。网页渲染的结果是，`hello`与`world`之间只有一个空格。 浏览器还会将文本里面的换行符（`\n`）和回车符（`\r`），替换成空格。 ```html

hello world

``` 上面代码中，`hello`与`world`之间有多个换行，浏览器会将它们替换成空格，然后再将多个空格合并成一个。网页渲染的结果是，`hello`与`world`之间有一个空格。 这意味着，HTML 源码里面的换行，不会产生换行效果。 ## 注释 HTML 代码可以包含注释，浏览器会自动忽略注释。注释以``结尾，下面就是一个注释的例子。 ```html ``` 注释可以是多行的，并且内部的 HTML 都不再生效了。 ```html ``` 上面代码是一个注释的区块，内部的代码都是无效的，浏览器不会解析，更不会渲染它们。 注释有助于理解代码的含义，复杂的代码块前面最好加上注释。 # URL 简介 ## 概述 URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL。 ```html https://www.example.com/path/index.html ``` 所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才能在互联网上获取它们。 只要资源可以通过互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。 URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。 ## 网址的组成部分 URL 由多个部分组成。下面是一个比较复杂的 URL，实际的 URL 通常不会有这么多部分。 ```html 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`这个网址，需要写成下面的样子。 ```html 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`，这时`.`相当于根目录的当前目录，即根目录本身。 ## `` ``标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个``标签，而且只能放在``里面。它是单独使用的标签，没有闭合标签，下面是一个例子。 ```html ``` ``标签的`href`属性给出计算的基准网址，`target`属性给出如何打开链接的说明（参见《链接》一章）。已知计算基准是`https://www.example.com/files/`，那么相对 URL `foo.html`，就可以转成绝对 URL `https://www.example.com/files/foo.html`。 注意，``标签必须至少具有`href`属性或`target`属性之一。 ```html ``` 一旦设置了``，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对``计算的，而不是针对当前网页的 URL。 # 网页元素的属性 ## 简介 网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。 ```html ``` 上面代码中，``标签内部的键值对`lang="en"`，就称为`html`元素的属性。属性名为`lang`，属性值为`en`。 属性名与标签名一样，不区分大小写，`lang`和`LANG`是同一个属性。 属性名与属性值之间，通过等号`=`连接。属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。 有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。 ```html ``` 上面代码中，`required`就是``标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。 ## 全局属性 全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。 下面是一些常见的全局属性。 ### id `id`属性是元素在网页内的唯一标识符。比如，网页可能包含多个`

`标签，`id`属性可以指定每个`

`标签的唯一标识符。 ```html

``` 上面代码中，三个`

`标签具有不同的`id`属性，因此可以区分。 `id`属性的值必须是全局唯一的，同一个页面不能有两个相同的`id`属性。另外，`id`属性的值不得包含空格。 `id`属性的值还可以在最前面加上`#`，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址`https://foo.com/index.html#bar`的时候，浏览器会自动将页面滚动到`bar`的位置，让用户第一眼就看到这部分内容。 ### class `class`属性用来对网页元素进行分类。如果不同元素的`class`属性值相同，就表示它们是一类的。 ```html

``` 上面代码中，第一个`

`和第三个`

`是一类，因为它们的`class`属性相同。 元素可以同时具有多个 class，它们之间使用空格分隔。 ```html

``` 上面的`p`元素同时具有`p1`、`p2`、`p3`三个 class。 ### title `title`属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将`title`属性值作为浮动提示，显示出来。 ```html

本站内容使用创意共享许可证，可以自由使用。

``` 上面代码中，`title`属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。 ### tabindex 网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。 这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了`tabindex`属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。 `tabindex`属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。 - 负整数：该元素可以获得焦点（比如使用 JavaScript 的`focus()`方法），但不参与 Tab 键对网页元素的遍历。这个值通常是`-1`。 - `0`：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。 - 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的`tabindex`属性相同，则按照在网页源码里面出现的顺序遍历。 ```html

这段文字可以获得焦点。

``` 上面代码中，`

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

`）需要参与遍历，才有必要设置`tabindex`属性。 ### accesskey `accesskey`属性指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点。 ```html ``` 上面代码中，`