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