您的位置:首页 > Web前端 > HTML5

HTML5学习笔记简明版(8):新增的全局属性

2015-07-19 11:35 786 查看


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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: