Html5新属性
contenteditable属性
定义和用法
contenteditable属性指定元素内容是否可编辑
语法：
<element contenteditable="true|false">属性值：
值 | 描述 |
true | 指定元素是可编辑的 |
false | 指定元素是不可编辑的 |
contextmenu属性
定义和用法
contextmenu指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 。其属性的值是需要打开的**
**元素的id
注：目前只有Firefox浏览器支持contextmenu属性
语法：
<element contextmenu="menu_id">
e.g.：
规定<div>元素的上下文菜单。当用户右击元素时将显示上下文菜单：
<div contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem lable="Refresh"></menuitem>
<menuitem lable="Twitter"></menuitem>
</menu>
</div>data-*属性
定义和用法
data-*属性用于存储私有页面后应用的自定义数据。
data-*属性可以在所有的HTML元素中嵌入数据。
自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。
data-* 属性由以下两部分组成：
- 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
- 该属性可以是任何字符串
注意： 自定义属性前缀 “data-” 会被客户端忽略。
语法:
<element data-*="somevalue">
e.g.:
使用data-*属性来嵌入自定义数据：
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>draggable属性
定义和用法
draggable属性规定元素是否可以拖动。 提示： 链接和图像默认是可拖动的。
语法：
<element draggable="true|false|auto">
e.g.:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>draggable_demo</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{ // 设置拖动的格式和数据。使用事件对象的ID来表示数据
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{// 取得数据，对应于拖动后要放置的目的元素的ID
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//preventDefault() 方法会取消该事件，意味着属于该事件的默认操作将不会发生
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" οndragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
</html>属性值：
值 | 描述 |
true | 规定元素是可拖动的。 |
false | 规定元素不可拖动。 |
auto | 使用浏览器的默认特性。 |
dropzone属性
定义和用法
dropzone 属性规定当被拖动的数据在拖放到元素上时，是否被复制、移动或链接 。注：没有主流浏览器支持此属性。
语法：
<element dropzone="copy|move|link">属性值：
值 | 描述 |
copy | 拖动数据会导致被拖动数据产生副本。 |
move | 拖动数据会导致被拖数据移动到新位置。 |
link | 拖动数据会生成指向原始数据的链接。 |
hidden属性
定义和用法
hidden 属性规定对元素进行隐藏。
隐藏的元素不会被显示。
如果使用该属性，则会隐藏元素。
可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
语法：
<element hidden>
在 XHTML 中, 属性禁止简写，hidden 属性必须定义为 <element hidden="hidden">.spellcheck属性
定义和用法
spellcheck 属性规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查：
- 类型为 text 的 input 元素中的值（非密码）
- textarea 元素中的值
- 可编辑元素中的值
注意： Internet Explorer 9 及更早IE版本不支持 spellcheck 属性。
语法：
<element spellcheck="true|false">属性：
值 | 描述 |
true | 规定应当对元素的文本进行拼写检查。 |
false | 规定不应对元素的文本进行拼写检查。 |
translate属性
定义和用法
translate 属性规定元素内容是否要翻译。
注：目前没有主流浏览器支持此属性。
语法：
<element translate="yes|no">
e.g.:
<p translate="no">这个段落不能翻译。</p>
<p>这个段落可以被翻译</p>属性值：
值 | 描述 |
yes | 规定元素内容需要翻译 |
no | 规定元素内容不需要翻译 |
