2.5 HTML5新的全局属性
HTML5除了支持HTML4原有的全局属性之外，还添加了8个新的全局属性。所谓全局属性是指可以用于任何HTML元素的属性。
2.5.1 contentEditable——可编辑内容
视频讲解
contentEditable属性的主要功能是允许用户在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true或false。
注意，该属性还有个隐藏的inherit（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。
【示例】在下面示例中为正文文本包含框<div>标签加上contentEditable属性后，该包含框包含的文本就变成可编辑的了，浏览者可自行在浏览器中修改内容，执行结果如图2.22所示。
图2.22 可编辑文本
在编辑完元素中的内容后，如果想要保存其中内容，只能使用JavaScript脚本把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容后该元素的innerHTML内容也会随之改变，目前还没有特别的API来保存编辑后元素中的内容。
提示：在JavaScript脚本中，元素还具有一个isContentEditable属性，当元素可编辑时，该属性值为true；当元素不可编辑时，该属性值为false。利用这个属性，可以实现对编辑数据的后期操作。
2.5.2 contextmenu——快捷菜单
视频讲解
contextmenu属性用于定义元素的上下文菜单。所谓上下文菜单，就是会在用户右击元素时出现。
【示例】下面示例使用contextmenu属性定义<div>元素的上下文菜单，其中contextmenu属性的值是要打开的<menu>元素的id属性值。
当用户右击元素时，会弹出一个上下文菜单，从中可以选择指定的快捷菜单项目，如图2.23所示。
提示：目前只有Firefox支持contextmenu属性。
图2.23 打开上下文菜单
2.5.3 data——自定义属性
视频讲解
使用data-*属性可以自定义用户数据。具体应用包括：
data-*属性用于存储页面或元素的私有数据。
data-*属性赋予所有HTML元素嵌入自定义属性的能力。
存储的自定义数据能够被页面的JavaScript脚本利用，以创建更好的用户体验，方便Ajax调用或服务器端数据库查询。
data-*属性包括两部分：
属性名：不应该包含任何大写字母，并且在前缀"data-"之后必须有至少一个字符。
属性值：可以是任意字符串。
当浏览器解析时，会忽略前缀"data-"，取用其后的自定义属性。
【示例1】下面示例使用data-*属性为每个列表项目定义一个自定义属性type。这样在JavaScript脚本中可以判断每个列表项目包含信息的类型。
【示例2】以上面示例为基础，下面示例使用JavaScript脚本访问每个列表项目的type属性值，演示效果如图2.24所示。
图2.24 访问列表项目的type属性值
访问元素的自定义属性，可以通过元素的dataset.对象获取，该对象存储了元素所有自定义属性的值。访问规则与CSS脚本化访问相同。对于复合属性名，通过驼峰命名法访问，如animal-type，访问时使用animalType，避免连字符在脚本中引发的歧义。
注意：目前IE暂不支持这种访问方式。
2.5.4 draggable——可拖动
draggable属性可以定义元素是否可以被拖动。属性取值说明如下：
true：定义元素可拖动。
false：定义元素不可拖动。
auto：定义使用浏览器的默认行为。
draggable属性常用在拖放操作中，详细说明请参考第15章拖放API。
2.5.5 dropzone——拖动数据
dropzone属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。属性取值说明如下：
copy：拖动数据会产生被拖动数据的副本。
move：拖动数据会导致被拖动数据被移动到新位置。
link：拖动数据会产生指向原始数据的链接。
例如：
<div dropzone="copy"></div>
提示：目前所有主流浏览器都不支持dropzone属性。
2.5.6 hidden——隐藏
视频讲解
在HTML5中，所有元素都包含一个hidden属性。该属性设置元素的可见状态，取值为一个布尔值，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。
【示例】下面使用hidden属性定义段落文本隐藏显示。
<p hidden><img src="images/1.jpg" width="200" /></p>
hidden属性可用于防止用户查看元素，直到匹配某些条件，如选择了某个复选框。然后，在页面加载之后，可以使用JavaScript脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也即时显示出来。
提示：除了IE，所有主流浏览器都支持hidden属性。
2.5.7 spellcheck——语法检查
视频讲解
spellcheck属性定义是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查：
input元素中的文本值（非密码）。
<textarea>元素中的文本。
可编辑元素中的文本。
spellcheck属性是一个布尔值的属性，取值包括true和false，为true时表示对元素进行拼写和语法检查，为false时则不检查元素。用法如下所示：
<!--以下两种书写方法正确-->
<textarea spellcheck="true" >
<input type=text spellcheck=false>
<!--以下书写方法为错误-->
<textarea spellcheck >
注意，如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
【示例】下面示例设计两段文本，第一段文本可编辑、可语法检查；第二段文本可编辑，但不允许语法检查。当编辑文本时，第一段文本显示检查状态，而第二段忽略，如图2.25所示。
图2.25 段落文本检查状态比较
2.5.8 translate——可翻译
translate属性定义是否应该翻译元素内容。取值说明如下：
yes：定义应该翻译元素内容。
no：定义不应翻译元素内容。
【示例】下面示例演示了如何使用translate属性。
<p translate="no">请勿翻译本段。</p>
<p>本段可被译为任意语言。</p>
提示：目前，所有主流浏览器都无法正确地支持translate属性。