HTML5学习笔记简明版（8）：新增的全局属性

contenteditable属性

不论什么元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。

用户能够改变元素的内容以及操作标记。比如：

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

 

该属于有3种值可选：true, false和空字符，空字符代表true。

而对<iframe id="editor"></iframe>框架页面能够通过JS程序代码来实现：editor.document.designMode="on" 。

 

contextmenu属性

contextmenu属性用来指向一个作者提供的上下文文件夹，比如：

<form name="npc" action="">
 <label>Character name: <input type=text contextmenu=namemenu  required></label>
 <menu type=context id=namemenu>
  <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
  <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
 </menu>
</form>

 

data-*属性

开发者能够在不论什么元素上定义他们想要的不论什么属性，仅仅要他们在其之前加上 data- 的前缀，以此避免与未来的HTML版本号的冲突。asp.net MVC下的jQuery验证就是採用这样的方式。比如：data-val=”true”。

 

draggable和dropzone属性

draggable 和 dropzone 属性能够与新的拖放API一起使用。draggable为是否同意拖放，dropzone代表能够拖放到哪个区域。

<p draggable="true" dropzone="div1">test</p>

 

hidden属性

不显示定义了hidden属性的元素。但与表现层的比方tab切换隐藏图层不同。hidden后的元素针对全部的显示，比方屏幕阅读器。与form里的hidden域相似。

 

role和aria-*属性

HTML5把WAI-ARIA当作是合法的语言添加，用来做辅助作用。

 

spellcheck属性

spellcheck 属性规定是否对元素内容进行拼写检查。

比如：

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