HTML 基础知识（二）
本文概要：
HTML 全局属性（class、id、style、title、dir、hidden、lang、tabIndex、accesskey、contenteditable、contextmenu）
HTML5 全局属性
前文 HTML基础知识（一） 中说元素属性时，有提到过全局属性。
全局属性用于配置所有元素的共有行为。理论上全局属性可以用在任何一个元素身上，不过不一定会有什么效果。
下面是关于全局属性的学习要点：
class 属性
class 属性是开发中常用的属性，用于将 HTML 元素进行归类。通过使用 class 属性，可以快速地找出 HTML 文档中的被归类的元素，或者也可以为归类一些元素来一同设置 CSS 样式。举例：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>class 属性</title>
5 </head>
6 <body>
7 <a class="class1 class2" href="http://baidu.com">百度一下</a>
8 <p/>
9 <a class="class2 class3" href="http://w3c.org">W3C 网站</a>
10 </body>
11</html>正如上例所示，一个元素可以被归多个类别，所以在不同的类别之间使用空格来区隔不同的类别，class1 与 class2 之间就使用空格来区分。类别的名称可以自行定义，随便取，不过最好要通俗易懂、符合规范些，尤其是项目大了之后，规范、明了的命名会在工作中的细节中体验的尤为重要。
CSS 中的应用
如果只是单纯地添加 class 属性显示上是没有任何效果的，除非你给对应的类别设定了 CSS 样式。例如：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>class 属性</title>
5 <style type="text/css">
6 .class1 {
7 font-size: x-large;
8 }
9 .class2 {
10 background-color: green;
11 color: white;
12 padding: 5px;
13 margin: 4px;
14 }
15 </style>
16 </head>
17 <body>
18 <a class="class1 class2" href="http://baidu.com">百度一下</a>
19 <p/>
20 <a class="class2 class3" href="http://w3c.org">W3C 网站</a>
21 </body>
22</html>运行效果：
正如上例，在 style 元素中分别定义了名为 class1、class2 的 CSS 样式，这样符合属性值的元素会展示相对的样式。
JavaScript 中的应用
JavaScript 中也可以利用 class 属性，例如：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>class 属性</title>
5 </head>
6 <body>
7 <a class="class1 class2" href="http://baidu.com">百度一下</a>
8 <p/>
9 <a class="class2 class3" href="http://w3c.org">W3C 网站</a>
10 <script type="text/javascript">
11 let elems = document.getElementsByClassName("class3");
12 for (let i = 0; i < elems.length; i++) {
13 const x = elems[i];
14 x.style.border = "thin solid black";
15 x.style.backgroundColor = "white";
16 x.style.color = "black";
17 }
18 </script>
19 </body>
20</html>上例中，脚本程序找出所有属于 class3 类别的元素并对其设置了样式。运行效果如下：
id 属性
id 属性用于给元素配备唯一的标识符。常常是用来给某元素设置特定的样式，或者通过 JavaScript 代码找到出相应的元素。
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>id 属性</title>
5 <style>
6 #bing {
7 background: blue;
8 color: white;
9 }
10 </style>
11 </head>
12 <body>
13 <a href="http://www.baidu.com">点我百度</a>
14 <p/>
15 <a href="http://www.bing.com" id="bing">点我必应</a>
16 </body>
17</html>如上所示，案例中通过 id 属性给对应的 a 元素设置 CSS 样式。
style 属性
style 属性是用于在 HTML 元素身上直接定义 CSS 样式的。
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>id 属性</title>
5 </head>
6 <body>
7 <a href="http://www.baidu.com"
8 style="background: blue; color: white;">
9 点我百度
10 </a>
11 </body>
12</html>如上，通过 style 属性，直接在 a 元素身上进行 CSS 样式设置。
title 属性
title 属性是用于给 HTML 元素提供额外信息的属性。浏览器常常用这个属性中的值显示内容提示。
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>title 属性</title>
5 </head>
6 <body>
7 <a href="http://www.baidu.com" title="这是去往百度的">
8 点我百度
9 </a>
10 </body>
11</html>
如上所示，当鼠标悬停在 a 元素上时，会显示 title 元素设置的值 。
dir 属性
dir 属性用于规定元素中的文字方向。其有效值共两个：
ltr，从左到右rtl，从右到左
效果如下：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>dir 属性</title>
5 </head>
6 <body>
7 <p dir="rtl">今天星期五</p>
8 <p dir="ltr">今天星期五</p>
9 </body>
10</html>上面那行是靠右，下面那行是靠左侧。
hidden 属性
hidden 属性是布尔属性，用于表示想着元素当前无需关注，浏览器将会把设置了些属性的元素进行隐藏。
举例：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>hidden 属性</title>
5 <script>
6 var toggleHidden = function () {
7 var elem = document.getElementById("toggle");
8 if (elem.hasAttribute("hidden")) {
9 elem.removeAttribute("hidden");
10 } else {
11 elem.setAttribute("hidden", "hidden");
12 }
13 }
14 </script>
15 </head>
16 <body>
17 <button onclick="toggleHidden()">捉迷藏</button>
18 <p>叫你一声，你敢答应吗？</p>
19 <p id="toggle" hidden>孙悟空</p>
20 <p>你爷爷在此！</p>
21 </body>
22</html>上例中，通过按钮，控制 p 元素的显示与隐藏。如果元素被设置了 hidden 属性，浏览器则是像没有这个元素一样，不占用页面空间。
lang 属性
lang 属性是用于说明元素内容使用的语言。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>lang 属性</title>
5</head>
6<body>
7 <p lang="zh">你好</p>
8 <p lang="en">Hello</p>
9 <p lang="fr">Bonjour</p>
10 <p lang="es">Hola</p>
11</body>
12</html>lang 属性的值必须是 ISO 语言代码。使用这个属性的目的是为了让浏览器调整它表达元素内容的方式。例如，改变里面的标点符号。对于开启电脑文字朗读器（视障人群）的情况下能够正确的发音。lang 属性还可以用于选择指定语言的内容，对用户只显示 TA 所选的语言进行展示 。
tabIndex 属性
tabIndex 属性是用于使用键盘 Tab 键在元素之间切换焦点顺序，举例：
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>spellcheck 属性</title>
5 </head>
6 <body>
7 <label>
8 姓名：
9 <input type="text" name="name" tabindex="1" />
10 </label>
11 <br />
12 <label>
13 手机：
14 <input type="text" name="phone" tabindex="-1" />
15 </label>
16 <br />
17 <label>
18 账户：
19 <input type="text" name="account" tabindex="2" />
20 </label>
21 <br />
22 <input type="submit" tabindex="3">
23 </body>
24</html>如上，进入网页后，直接按下 Tab 键光标会先到姓名输入框中，再按会到手机的输入框中，再然后按到提交按钮上。被设置成 -1 的元素，光标是不会到它上面的。
accesskey 属性
使用 accesskey 属性可以设定一个或几个用来选择页面上的元素的快捷键。例如：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>accesskey 属性</title>
5</head>
6<body>
7 <form>
8 账户：<input type="text" name="account" accesskey="a">
9 <p/>
10 密码：<input type="password" name="password" accesskey="p">
11 <p/>
12 <input type="submit" value="登录" accesskey="s">
13 </form>
14</body>
15</html>上例中，三个 input 元素都添加了 accesskey 属性，这个场景一般用于给网站的老用户使用。触发 accesskey 机制的按键组合因平台而异，在 Windows 系统下是使用组合键 Alt键 + accesskey 属性值对应的键。用户可以按 Alt 键 + a 将光标直接移入账户对应的输入框中，以此类推。
contenteditable 属性
contenteditable 属性是 HTML5 中新加的属性，其作用就是可以让用户可以修改页面上的内容。举例：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>contenteditable 属性</title>
5 </head>
6 <body>
7 <p contenteditable="true">今天天气是：晴天</p>
8 </body>
9</html>正如上例所示，我们使用 p 元素将内容进行展示，默示情况下是不可以进行编辑的。但是我在 p 元素中添加了 contenteditable 属性，并将属性值设置了 true，所以上例运行起来后，点击文字内容是可以进行内容修改的。这里我们不再演示了，你感兴趣可以自行试验。
另外在前文 HTML基础知识（一） 布尔属性中说，当属性属于布尔属性时，可以不用设定具体的值，只需要将对应的属性名添加到元素中即可，所以上例中的代码也可以写成如下形式：
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>contenteditable 属性</title>
5 </head>
6 <body>
7 <p contenteditable>今天天气是：晴天</p>
8 </body>
9</html>直接 contenteditable 即可，也具有同样的效果。
contextmenu 属性
contextmenu 属性用来为元素设定快捷菜单 。”据说“配置了后，可以通过鼠标右键呼出。
但是我试了，没有反应……
后来查了查说：只有火狐浏览器支持……
我兴高采烈地下载安装，运行到火狐浏览器中，然而，并没有什么效果……
后来又查到说因为这个属性又在高版本中弃用了………
总结
以上就是我关于 HTML 全局属性的学习整理、记录。至于 spellcheck 属性是用于对可编辑的元素进行拼写检查的，但我试了半天，愣是没反应。暂时搁置吧。还有 draggable 属性和 dropzone 属性，我打算后面再专攻。
