HTML5全局属性

• contentEditable属性

  它是一个布尔值属性，允许用户可以在线编辑元素中的内容，该属性还有一个隐藏的inherit（继承）状态，属性为true时，元素被指定为允许编辑；反之~，如果没有指定属性值，则有其父级元素的属性值决定。
  在编辑完元素中的内容后，先要保存其中内容，只能把该元素的innerHTML发送到服务器端进行保存。
  在js中，元素具有一个isContentEditable属性，可以设置属性的true or false

      <!-- 可编辑列表 -->
    <ul contenteditable="true">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
        <li>列表四</li>
    </ul>

• contextmenu属性

  用于定义div元素的上下文菜单。上下文菜单在用户邮件单击元素时出现。

    <div contextmenu="mymenu">
        <menu type="context" id="mymenu">
            <menuitem label="微信分享"></menuitem>
            <menuitem label="QQ分享"></menuitem>
        </menu>
    </div>

目前只有火狐浏览器支持contextmenu

• data-*属性

  data-属性可以自定义用户数据。具体应用包括：
  * data-属性用于存储页面或Web应用的私有自定义数据
  * data-属性赋予所有的html元素嵌入自定义data属性的能力
  存储的自定义数据能够被页面的js脚本利用，以创建更好的用户体验，不进行ajax 调用或服务器数据库查询。
  data-属性包括两部分：
  * 属性名：不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符。浏览器解析的时候会完全忽略为“data-”的自定义属性

     <ul>
        <li data-animal-type="bird">猫头鹰</li>
        <li data-animal-type="fish">鲤鱼</li>
        <li data-animal-type="spider">蜘蛛</li>
    </ul>

<script>
    var lis = document.getElementsByTagName("li");
    for(let i=0;i<lis.length;i++)
    {
        console.log(lis[i].dataset.animalType);
    }
</script>

• draggable属性 定义元素是否可以被拖动
  true 可被拖动
  false 不可拖动
  auto 使用浏览器默认行为
• dropzone属性

  dropzone属性定义在元素上拖动数据时，是否复制，移动或链接被拖动数据。属性取值说明如下:
  * copy:拖动数据会产生被拖动数据的副本
  * move：拖动数据会导致被拖动数据移动到新的位置
  * link 拖动数据会产生指向原数据的链接
  目前主流浏览器都不支持此属性

• hidden 属性：设置元素的可见状态

  <p hidden>这是一个不可见的标签</p>

• spellcheck属性：拼写检查

  spellcheck属性定义是否对元素进行拼写和语法检查，取值包括true或false，可检查以下内容：
  * 可检查元素中的文本值（非密码）
  * 可编辑元素中的文本

• translate属性

  定义是否翻译元素内容
  * yes 翻译
  * no 不翻译
  目前主流浏览器都不支持此属性