html5新属性详解及用法？

HTML5 引入了一些新的属性，以下是部分常见新属性的详解及用法：

contenteditable 属性

定义和用法：指定元素内容是否可编辑。

语法：<element contenteditable="true|false">

属性值：true 表示可编辑，false 表示不可编辑。

contextmenu 属性

定义和用法：指定一个元素的上下文菜单。当用户右击该元素时，将显示上下文菜单。其属性的值是需要打开的 <menu> 元素的 id。但需注意，目前只有 Firefox 浏览器支持此属性。

语法：<element contextmenu="menu_id">

data- 属性

定义和用法：用于存储私有页面或应用的自定义数据。可以在所有的 HTML 元素中嵌入数据，以让页面拥有更好的交互体验，不需要使用 Ajax 或去服务端查询数据。属性名由“data-”前缀和至少一个字符组成，属性值可以是任何字符串。

语法：<element data-*="somevalue">

draggable 属性

定义和用法：规定元素是否可以拖动。链接和图像默认是可拖动的。

语法：<element draggable="true|false|auto">

属性值：true 表示可拖动，false 表示不可拖动，auto 表示由浏览器根据元素的类型来决定是否可拖动。

hidden 属性

定义和用法：规定对元素进行隐藏。隐藏的元素不会被显示。可以通过 JavaScript 来删除该属性，使元素变得可见。

语法：<element hidden> 或者在 XHTML 中，需完整写成 <element hidden="hidden">

spellcheck 属性

定义和用法：规定是否对元素内容进行拼写检查。可对类型为 text 的 input 元素中的值（非密码）、textarea 元素中的值以及可编辑元素中的值进行拼写检查。但 Internet Explorer 9 及更早版本不支持该属性。

语法：<element spellcheck="true|false">

属性值：true 表示进行拼写检查，false 表示不进行拼写检查。

translate 属性

定义和用法：规定元素内容是否要翻译。但目前没有主流浏览器支持此属性。

语法：<element translate="yes|no">