03 # 网页元素的属性

说明

​​网道HTML 教程​​学习笔记

1、简介

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。

注意：

1、属性名与标签名一样，不区分大小写。

2、属性名与属性值之间，通过等号=连接。

3、有些属性是布尔属性，属性值可以省略，表示打开该属性。

2、全局属性

全局属性（global attributes）是所有元素都可以使用的属性。

2.1、id

id 属性是元素在网页内的唯一标识符。

2.2、class

class 属性用来对网页元素进行分类。

2.3、title

title 属性用来为元素添加附加说明。

2.4、tabindex

浏览器允许使用 Tab 键，遍历网页元素。

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

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

不同的属性值有不同的含义：

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

2.5、accesskey

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

2.6、style

style属性用来指定当前元素的 CSS 样式。

2.7、hidden

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

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

注意：

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

2.8、lang，dir

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

lang 属性的值，必须符合 ​​BCP47​​ 的标准。下面是一些常见的语言代码。

• ​

  ​zh​

  ​：中文
• ​

  ​zh-Hans​

  ​：简体中文
• ​

  ​zh-Hant​

  ​：繁体中文
• ​

  ​en​

  ​：英语
• ​

  ​en-US​

  ​：美国英语
• ​

  ​en-GB​

  ​：英国英语
• ​

  ​es​

  ​：西班牙语
• ​

  ​fr​

  ​：法语

2、dir 属性表示文字的阅读方向，有三个可能的值。

• ​

  ​ltr​

  ​：从左到右阅读，比如英语。
• ​

  ​rtl​

  ​：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。
• ​

  ​auto​

  ​：浏览器根据内容的解析结果，自行决定。

2.9、contenteditable

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

• ​

  ​true​

  ​ 或 空字符串：内容可以编辑
• ​

  ​false​

  ​：不可以编辑

注意：

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

2.10、spellcheck

spellcheck 属性表示：是否打开拼写检查。

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。

注意：

• 该属性是枚举属性，最好带上属性值。
• 如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。

2.11、data-属性

data-属性用于放置自定义数据。

css样式使用

/* 例子1
<div data-role="mobile">
    Mobile only content
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* 例子2
<div class="test" data-content="This is the div content">test</div>
*/
.test:after {
  content: attr(data-content);
}      

2.12、事件处理属性

全局属性还包括事件处理属性（event handler），用来响应用户的动作。