HTML5全局属性

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>

HTML5全局属性

推荐阅读