以下内容为学习下图这本书做的笔记，非原创。做笔记主要是为了实践一下看看结果加深记忆。
目录：
1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译
如果元素的 contentEditable 未指定为 true/false, 则是否可编辑取决于其父元素，如果父元素可编辑，则该元素是可编辑的。
在 JS 脚本中有一个属性 isContentEditable ,当元素可编辑该属性的值为 true，不可编辑则为 false。
① 使包含框的文本变成可编辑的
语句：
1 <div contenteditable="true"> 2 <p>1234</p> 3 </div> 4 <!-- 下面没加 contenteditable 属性，包含框内内容不可编辑 --> 5 <div> 6 <p>1234</p> 7 </div>
页面表现：
用于定义上下文菜单，右击时出现。
① 用 contextmenu 属性定义 <div>元素的上下文菜单，其中 contextmenu 属性的值是要打开的 <menu> 元素的 id 属性值。
语句：
1 <div contextmenu="mymenu">上下文菜单 2 <menu type="context" id="mymenu"> 3 <menuitem label="微信分享"></menuitem> 4 </menu> 5 </div>
页面表现：
上下文菜单中没有出现预想的效果，去查了一下，只有Firefox 8.0版本以上的浏览器支持 menuitem 属性。且目前只有 Firefox 支持 contextmenu 属性。
使用 data-* 属性可以自定义用户数据。存储的自定义数据可以被 JS 脚本 利用。当浏览器解析时，会忽略前缀 “data-”，取用其后的自定义属性。
① 使用 JS 脚本访问每个列表项目的 type 属性值
语句：
1 <ul> 2 <li data-animal-type="bird">猫头鹰</li> 3 <li data-animal-type="fish">鲤鱼</li> 4 <li data-animal-type="spider">蜘蛛</li> 5 </ul> 6 <script> 7 var list = document.getElementsByTagName("li"); 8 for( var i=0; i<list.length; i++ ){ 9 console.log(list[i].dataset.animalType); //通过元素的 dataset. 对象获取元素的自定义属性的值 10 } //复合属性名如 animal-type 访问时使用 animalType 11 </script>
页面表现：
draggable 属性定义元素是否可以被拖动。属性取值：
true: 定义元素可拖动
false: 定义元素不可拖动
auto: 定义使用浏览器的默认行为
目前所有主流浏览器都不支持 dropzone 属性
dropzone 属性定义在元素上拖动数据时，是否复制、移动或链接被拖动数据。属性取值：
copy: 拖动数据会产生被拖动数据的副本
move: 拖动数据会导致被拖动数据被移动到新位置
link: 拖动数据会产生向原始数据的链接
可用于防止用户查看元素，直到匹配某些条件，如选择了某个复选框。然后在页面加载之后可以使用 JavaScript 脚本删除该属性，删除之后该元素变为可见状态，同时元素中的内容也即时显示出来。
① 使用 hidden 属性定义段落文本隐藏显示
语句：
1 <p hidden><img src="1.jpg" width="200"></p>
页面表现：
可以对以下内容进行拼写检查: 1. input 元素中的文本值、<textarea>元素中的文本、可编辑元素中的文本
如果元素中的 readOnly 属性或 disabled 属性设为 true，则不执行拼写检查。
① 设计两段文本，第一段文本可编辑，可语法检查；第二段文本可编辑，但不允许语法检查。当编辑文本时，第一段显示检查状态，而第二段忽略。
语句：
1 <div contenteditable="true"> 2 <p spellcheck="true">accesskey</p> 3 <p spellcheck="false">accesskey</p> 4 </div>
页面表现：
效果暂时没看懂。
translate 属性定义是否应该翻译元素内容
① 使用 translate 属性
语句：
1 <p translate="no">请勿翻译本段</p> 2 <p>本段可以被翻译为任何语言</p>
页面表现：
