HTML5 全局属性

了解HTML5新加入的内容，首先了解对于所有元素都适应的全局属性，一部分是HTML5新添加的属性，一部分是HTML5之前就已经存在的属性，至于是什么时候添加到HTML标准中，就不纠结了。可以到 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes上进行查看

1. 全局属性

2. 可访问性

accesskey

accesskey 属性 --提供生成当前元素的键盘快捷方式的提示。该属性由空格分隔的字符列表组成。浏览器应该使用计算机键盘布局中存在的第一个。
(但是对于多个字符的存在测试没有效果，不知道是什么原因，还是只用一个字符吧。)
定义了accesskey的链接可以使用快捷键(ALT+字母)访问.

<form>用户名： <input type="text" name="name" accesskey="u"/><p/>密码： <input type="password" name="password" accesskey="p"/><p/><input type="submit" value="Submit" accesskey="s"/>
</form>

在HTML4.0.1的时候，HTML accesskey属性请可以作用在以下元素上：<a>, <area>, <button>, <input>, <label>, <legend>以及<textarea>元素。在HTML5 则可以作用到所有的元素上。

附上一张（参照MSDN）各平台的激活访问键的操作

* a标签在IE浏览器中只会聚焦，但是不会出发click，其他的浏览器都可以。

<a href='https://www.baidu.com' accesskey="u">a标签</a>

tabindex

是一个整数属性，指示该元素是否可以采取输入焦点（可对焦），如果它应该参与顺序键盘导航，如果是，则在什么位置。它可以需要几个值：

一个负值意味着元素应该是可聚焦的，但不应该是通过顺序键盘导航可达，也就是table不可到达这个元素;
0 意味着元素应该通过顺序键盘导航来聚焦和可达，但其相对顺序由平台约定定义,也就是在所有正值之后;
一个正值，这意味着应该通过顺序键盘导航来聚焦和达到; 其相对顺序由属性的值定义：顺序遵循增加的tabindex数。如果几个元素共享相同的tabindex，则它们的相对顺序将跟随它们在文档中的相对位置）。

根据msdn上的描述：最大值为tabindex 32767. 如果未指定，则取值为缺省值-1。
但是通过本人的测试，如果tabindex设为32768，仍然可以工作，如果为指定缺省值的效果相当于0.

<form>tabindex 1： <input type="text" tabindex="1"/><p/>tabindex 2： <input type="text" tabindex="2"/><p/>tabindex 0：<input type="text" tabindex="0"/><p/>tabindex 32768：<input type="text" tabindex="32768`"/><p/>tabindex -1：<input type="text" tabindex="-1"/><p/>tabindex 缺省：<input type="text" tabindex=""/>
</form>

chorme : 1 -> 2 -> 32768 -> 0 -> 缺省（-1不会到达）
firefox: 1 -> 2 -> 32768 -> 0 -> 缺省（-1不会到达）
IE : 1 -> 2 -> 0 -> 32768 -> 缺省（-1不会到达）

作为开发人员相信在开发中不会用到不符合1 ~ 32767 之位的值，但是如果遇到还是要亲自测试一下。

3. 元数据

title

为元素提供了一个参考信息。通常的形式是当鼠标悬浮在一个链接、表单输入框或缩写时，展示一个小提示。这里有一个例子：

<element title="value">

lang

指定了元素内文本书写的语言。一些元素可以用它来根据不同的语言脚本渲染文本，比如使用的引号类型。例如，下面的代码片段在页面顶部指定了整个HTML页面是用英语书写的：

<element lang="language_code">

具体的language_code 可以参照HTML 语言代码参考手册

contextmenu

HTML5里增加了contextmenu属性，在contextmenu 全局属性是ID的<menu>作为该元素的上下文菜单来使用。
一个上下文菜单是出现在用户交互，如右键菜单。HTML5现在允许我们自定义此菜单。以下是一些实现示例，包括嵌套菜单。
当前只有firefox支持，具体的用法可以参照https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu。

4. 唯一标识

id

全局属性定义一个唯一的标识符（ID），其必须在整个文档中是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。
该属性的值是不透明的字符串：这意味着Web作者不得使用它来传达任何信息。特殊含义，例如语义，不能从字符串派生出来。
此属性的值不能包含空格（空格，制表符等）。浏览器处理包含空格的不一致的ID，就像空格是ID的一部分一样。与类属性（允许空格分隔的值）相反，元素只能有一个单一的ID。

* 注意：使用除ASCII字母，数字之外的字符'_'，'-'和'.'可能会导致兼容性问题，因为它们不允许在HTML4中。尽管在HTML 5中已经解除了该限制，但ID应以字母开头，以便兼容。

class

类是元素的类的空格分隔的列表。类允许CSS和Javascript通过类选择器或类似DOM方法的函数来选择和访问特定的元素document.getElementsByClassName。

虽然规范没有对类的名称提出要求，但鼓励Web开发人员使用描述元素的语义目的的名称，而不是元素的呈现。例如，属性来描述一个属性而不是斜体，虽然这个类的一个元素可以用斜体表示。语义名称保持逻辑，即使页面的呈现发生变化。

* class只有从Firefox 32起才是真正的全局属性。

5. 可编辑性

contenteditable

是指示如果元素应该是可由用户编辑枚举属性。如果是这样，浏览器修改其窗口小部件以允许编辑。属性必须采用以下值之一：

true或空字符串，表示元素必须可编辑;
false，表示该元素不能被编辑。
如果未设置此属性，则其默认值将从其父元素继承。

此属性是枚举的属性，而不是布尔值。这意味着显式使用其中一个值true，false或空字符串是强制性的，
并且<label contenteditable>Example Label</label> 不允许使用简写。
正确的用法是<label contenteditable="true">Example Label</label>。

例如

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

不能是

<p contenteditable>这是一段可编辑的段落。请试着编辑该文本。</p>

6. 拼写检查

spellcheck

规定是否对元素进行拼写和语法检查。
此属性是枚举的属性，而不是布尔值。这意味着明确使用其中一个值true或是false强制性的，并且<label spellcheck>Example Label</label> 不允许使用速记。正确的用法是<label spellcheck="true">Example Label</label>。

可以对以下内容进行拼写检查：
input 元素中的文本值（非密码）
<textarea> 元素中的文本
可编辑元素中的文本

<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

如果在编辑中输入一个sdf,那么会提示有错误。

* Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。

7. 隐藏元素

hidden

<p hidden>这个段落应该被隐藏。</p>

hidden 属性是布尔属性。
如果设置该属性，它规定元素仍未或不再相关。
浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。

* 表单仍然可以提交

8. 拖拽

draggable

可拖动全局属性是枚举属性指示该元素是否可以拖动

true，表示元素可能被拖动
false，表示元素可能未被拖动。
如果此属性未设置，其默认值为auto，表示行为应为浏览器默认定义的行为。

此属性是枚举的属性，而不是布尔值。这意味着显式使用其中一个值true或false是强制性的，并且<label draggable>Example Label</label> 不允许使用简写。正确的用法是<label draggable="true">Example Label</label>。

*默认情况下，只能拖动文本选择，图像和链接。

dropzone

规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。

值描述
copy 拖动数据会产生被拖动数据的副本。
move 拖动数据会导致被拖动数据被移动到新位置。
link 拖动数据会产生指向原始数据的链接。

具体的内容后面会有单独的章节进行学习，这里了解一下。

9. 样式

style

style属性用来直接在元素上应用CSS样式。通过这种方式设置的任何样式会覆盖其他地方设置的样式。虽然这样很快捷，但是最好完全避免使用这个属性，而把所有样式放在外部样式表里。分离CSS和HTML带来组织性和灵活性上的好处，因为当CSS存放在CSS文件里时，查找和禁用CSS规则都比当CSS和HTML代码混杂在一起时容易很多。

10. 文字方向

dir

枚举属性指示元素文本的方向性。它可以具有以下值：

ltr，意思是从左到右，用于从左到右的语言（如英文）;
rtl，这意味着从右到左，用于从右到左写的语言（如阿拉伯语）;
auto，让用户代理决定。它使用基本算法来解析元素内的字符，直到找到具有强方向性的字符，然后将该方向性应用于整个元素。

<element dir="ltr|rtl">

11. 自定义数据

data- *

data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。（这句话的含义没有搞懂，如果有知道的话可以告知一下）

HTML语法

语法很简单。属性名称开头的任何元素上的任何属性data-都是数据属性。说你有一篇文章，你想要存储一些没有任何视觉表示的额外信息。只需使用data属性：

<articleid="electriccars"data-columns="3"data-index-number="12314"data-parent="cars">
...
</article>

JavaScript访问

在JavaScript中读取这些属性的值也很简单。您可以使用getAttribute()其完整的HTML名称来阅读它们，但标准定义了一种更简单的方式：DOMStringMap您可以通过dataset属性读取。
要data通过dataset对象获取属性，请通过属性名称的一部分获取属性data-（注意，破折号转换为camelCase）。

var article = document.getElementById('electriccars');article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

每个属性都是一个字符串，可以读写。在上述情况下，设置article.dataset.columns = 5会将该属性更改为"5"。

jquery访问

使用 jQuery 的 .data() 方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj)，这个方法是在 jQuery1.4.3版本后出现的，它能返回相应的 data 属性。

var myid= jQuery("#electriccars").data('columns');

CSS访问

请注意，由于数据属性是纯HTML属性，您甚至可以从CSS访问它们。例如，要显示文章中的父数据，您可以使用CSS中的生成内容，其attr()功能如下：

article::before {content: attr(data-parent);
}

note: 这种实现方式还需要后面css的学习。

还可以使用CSS中的属性选择器根据数据更改样式：

article[data-columns='3'] {width: 400px;
}
article[data-columns='4'] {width: 600px;
}

* HTML 标签可以添加自定义属性来存储和操作数据。但这样做会导致 HTML 语法上不符合 HTML 规范。

* HTML5 规范里增加了一个自定义 data 属性，自定义data属性的用法非常的简单，就可以往 HTML 标签上添加任意以 "data-"开头的属性。
* 这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。
* 要考虑的主要问题是Internet Explorer的支持和性能。Internet Explorer 11+提供了对标准的支持，但所有早期版本都不支持dataset。为了支持IE 10和以下，需要访问数据属性getAttribute()

12. translate

translate

规定是否应该翻译元素内容。

空字符串"yes"，表示当页面本地化时应该翻译该元素。

"no"，表示该元素不能被翻译。

* 不过现在还没有浏览器支持。