简介
网页元素的属性（attribute）可以定制元素的行为. 不同的属性会导致元素有不同的行为。元素属性的写法是 HTML 标签内部的“键值对”。
<html lang="en">
上面代码中，<html>标签内部的键值对lang="en"，就称为html元素的属性。属性名为lang，属性值为en。 属性名与标签名一样，不区分大小写，lang和LANG是同一个属性。
属性名与属性值之间，通过等号=连接。 属性值可以放在单引号或双引号之中，建议统一使用双引号。某些属性值可以不使用引号，但是建议不要这样写。
有些属性是布尔属性，即属性值是一个布尔值，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。
<input type="text" required>
上面代码中，required就是<input>标签的布尔属性。如果加上这个属性，就表示打开，没有就是关闭。
全局属性
全局属性（global attributes）是所有元素都可以使用的属性。也就是说，你可以把下面的属性，加在任意一个网页元素上面，不过有些属性对某些元素可能不产生意义。常用的如下
id
id属性是元素在网页内的唯一标识符。
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
id属性的值必须是全局唯一的，id属性的值不得包含空格。
id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。比如，用户访问网址 foo.com/index.html#… 的时候，浏览器会自动将页面滚动到bar的位置，让用户第一眼就看到这部分内容。
class
class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。
<p class="para"></p>
<p></p>
<p class="para"></p>
上面代码中，第一个<p>和第三个<p>是一类，因为它们的class属性相同。
元素可以同时具有多个 class，它们之间使用空格分隔。
<p class="p1 p2 p3"></p>
上面的p元素同时具有p1、p2、p3三个 class。
title
title属性用来为元素添加附加说明。
<div title="版权说明">
<p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>
上面代码中，title属性解释了这一块内容的目的。鼠标悬停在上面时，浏览器会显示一个浮动提示。一旦鼠标移开，提示就会消失。
tabindex
浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。
tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。
负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。 0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。 正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以获得焦点。</p>
一般来说，tabindex属性最好都设成0，按照自然顺序进行遍历，这样比较符合用户的预期，除非网页有特殊布局。如果网页所有元素都没有设置tabindex，那么只有那些默认可以遍历的元素（比如链接、输入框等）才能参与 Tab 键的遍历，顺序由其在源码的位置决定。因此实际上，只有那些无法获得焦点的元素（比如<span>、<div>）需要参与遍历，才有必要设置tabindex属性。
accesskey
<button accesskey="s">提交</button>
上面代码中，<button>的快捷键是s，按下快捷键，该元素就得到了焦点。
accesskey属性的字符键，必须配合功能键，一起按下才会生效。也就是说，快捷键是“功能键 + 字符键”的组合。不同的浏览器与不同的操作系统，功能键都不一样。比如，Chrome 浏览器在 Windows 系统和 Linux 系统的快捷键是Alt + 字符键，在 Mac 系统的快捷键是Ctrl + Alt + 字符键。
注意，accesskey如果跟操作系统或浏览器级别的快捷键有冲突，这时不会生效。
style
style属性用来指定当前元素的 CSS 样式。
<p style="color: red;">hello</p>
hidden
hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
<p hidden>本句不会显示在页面上。</p>
上面代码中，这个p元素不会出现在网页上。
注意，CSS 的可见性设置，高于hidden属性。如果 CSS 设为该元素可见，hidden属性将无效。
lang，dir
lang属性指定网页元素使用的语言。 dir属性表示文字的阅读方向，有三个可能的值。
<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：法语
contenteditable
HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。
true或空字符串：内容可以编辑 false：不可以编辑
<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>
上面代码中，鼠标单击句子，就可以进入编辑状态，用户可以改变句子的内容。当然，除非提交到服务器，否则刷新页面还是显示原来的内容。
该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。
spellcheck
浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。
它有两个可能的值。 true：打开拼写检查 false：关闭拼写检查
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>
上面代码中，seperate下面会有提示，表示拼错了。
注意，由于该属性只在编辑时生效，所以这个例子必须加上contenteditable属性，表示本段内容可编辑。鼠标单击就可以进入编辑状态，这时才会看到拼写提示。不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素，该属性无效。
这个属性看上去像布尔属性，但是其实是枚举属性，所以最好不要省略它的值。如果没有指定这个属性，浏览器将自行决定是否打开拼写检查。
data-属性
data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。
<a href="#" class="tooltip" data-tip="this is the tip!">链接</a>
上面代码中，data-tip用于放置链接的提示文字。
data-属性只能通过 CSS 或 JavaScript 利用
全局属性还包括事件处理属性（event handler），用来响应用户的动作。这些属性的值都是 JavaScript 代码，
