# 网页元素的属性 ## 简介 网页元素的属性（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 ``` 上面代码中，`