本文来自于对 HTML教程 的整理。

1. 网页元素的属性

1. 简介

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

1

<html lang="en">

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

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

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

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

1

<input type="text" required>

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

2. 全局属性

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

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

2.1 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的位置，让用户第一眼就看到这部分内容。

2.2 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。

2.3 title

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

1
2
3

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

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

2.4 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属性。

2.5 accessKey

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

1

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

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

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

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

2.6 style

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

1

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

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

2.7 hidden

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

1

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

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

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

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

2.9 contenteditable

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

  • true或空字符串：内容可以编辑
  • false：不可以编辑
1
2
3

<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

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

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

2.10 spellcheck

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

它有两个可能的值。

  • true：打开拼写检查
  • false：关闭拼写检查
1
2
3

<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>

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

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

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

2.11 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);
}

2.12 事件处理属性

除了上面这些属性，全局属性还包括事件处理属性（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

2. 字符编码

1. 简介

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

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

1

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

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

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

1

<meta charset="UTF-8">

2. 字符的数字表示法

网页可以使用不同语言的编码方式，但是最常用的编码是 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>。

3. 字符的实体表示法

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

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

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

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

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