1.1contentEditable属性
contentEditable属性的主要功能是允许用户可以在线编辑元素中的内容。是布尔值属性，可以被指定为true或false。属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定为true或false时，由inherit（继承）状态决定。
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>contentEditable属性</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
在编辑元素中的内容后，如果想要保存其中内容，只能把元素的innerHTML发送到服务器端进行保存，因为改变元素内容后该元素的innerHTML内容也会随之改变。
在JavaScript脚本中，元素还具有一个isContentEditable属性，当元素可编辑时，该属性值为true；当元素不可编辑时，该属性值为false。
1.2contextmenu属性
contextmenu属性用于定义<div>元素的上下文菜单。上下文菜单在用户右键单击元素时出现。
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div contextmenu="mymenu">上下文菜单
<menu type="context" id="mymenu">
<menuitem lable="微信分享"></menuitem>
<menuitem lable="微博分享"></menuitem>
</menu>
</div>
</body>
</html>
目前只有Firefox支持contextmenu属性。
1.3data-*属性
data-* 属性用于存储页面或Web应用的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义)数据能够被页面的 JavaScript 中利用，以创建更好的用户体验,不进行 Ajax 调用或服务器端数据库查）。
data-* 属性包括两部分：
属性名：不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符。
属性值：可以是任意字符串。
当浏览器（用户代理）解析时，会完全忽略前缀为 "data-" 的自定义属性。
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li data-animal-type="bird">猫头鹰</li>
<li data-animal-type="fish">鲤鱼</li>
<li data-animal-type="spider">蜘蛛</li>
</ul>
</body>
</html>
1.4draggable属性
draggable属性可以定义元素是否可以被拖动。
1.5dropzone属性
dropzone属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。
copy：拖动数据会产生被拖动数据的副本。
move：拖动数据会导致被拖动数据被移动到新位置。
link：拖动数据会产生指向原始数据的链接。
【示例】
<div dropzone="copy"></div>
1.6hidden属性
在HTML中，所有元素都包含一个hidden属性。该属性设置元素的可见状态，取值为一个布尔值，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。
【示例】
<p hiddden>该段落被隐藏</p>
hidden属性可以用于防止用户查看元素，直到匹配某些条件。在页面加载之后，可以使用JavaScript脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也显示出来。
1.7spellcheck属性
spellcheck 属性规定是否对元素内容进行拼写和语法检查。
可对以下文本进行拼写检查：
input 元素中的文本值（非密码）。
<textarea >元素中的值。
可编辑元素中的文本。
spellcheck 属性是一个布尔值的属性，取值包括true和false。
<!-- 正确写法 --> <textarea spellcheck="true"> <input type="text" spellcheck="false" /> <!-- 错误写法 --> <textarea spellcheck>
如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p contenteditable="true" spellcheck="true">这是一个段落</p>
</body>
</html>
1.8translate属性
translate属性定义是否应该翻译元素内容。
取值说明如下：
yes：定义应该翻译元素内容。
no：定义不应该翻译元素内容。
【示例】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p translate="no">请翻译本段。</p>
<p>本段可被翻译为任意语言。</p>
</body>
</html>