HTML 全局属性
HTML 属性赋予元素意义和语境。
下面的全局属性可用于任何 HTML 元素。
HTML 全局属性
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键。 |
| class | 规定元素的一个或多个类名（引用样式表中的类）。 |
| contenteditable | 规定元素内容是否可编辑。 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| dir | 规定元素中内容的文本方向。 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden | 规定元素仍未或不再相关。 |
| id | 规定元素的唯一 id。 |
| lang | 规定元素内容的语言。 |
| spellcheck | 规定是否对元素进行拼写和语法检查。 |
| style | 规定元素的行内 CSS 样式。 |
| tabindex | 规定元素的 tab 键次序。 |
| title | 规定有关元素的额外信息。 |
| translate | 规定是否应该翻译元素内容。 |
实例
带有指定快捷键的超链接：
<a href="http://www.w3school.com.cn/html/"accesskey="h">HTML</a><br /> <a href="http://www.w3school.com.cn/css/"accesskey="c">CSS</a>
定义和用法
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。
实例
一段可编辑的段落：
<pcontenteditable="true">这是一个可编辑的段落。</p>
定义和用法
contenteditable 属性规定元素内容是否可编辑。
注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
HTML 4.01 与 HTML5 之间的差异
contenteditable 属性是 HTML5 中的新属性。
contextmenu 属性
规定 <div> 元素的上下文菜单。上下文菜单会在用户右键点击元素时出现：
<div contextmenu="mymenu">
<menu type="context" >
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</menu>
</div>定义和用法
contextmenu 属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单。
contextmenu 属性的值是要打开的 <menu> 元素的 id。
HTML 4.01 与 HTML5 之间的差异
contextmenu 属性是 HTML5 中的新属性。
data-* 属性
实例
使用 data-* 属性来嵌入自定义数据：
<ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>
<script type="text/javascript">
alert(document.getElementById("bird").getAttribute("data-animal-type"))
</script>
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。
HTML 4.01 与 HTML5 之间的差异
data-* 属性是 HTML5 中的新属性。
dir 属性
一段方向从右向左的段落：
<p dir="rtl">Write this text right-to-left!</p>定义和用法
dir 属性规定元素内容的文本方向。
draggable 属性
实例
一个可拖动的段落：
<!DOCTYPE HTML>
<html>
<head>
<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)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div >这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
</html>
定义和用法
draggable 属性规定元素是否可拖动。
提示：链接和图像默认是可拖动的。
提示：draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。
dropzone 属性
实例
拖动数据会产生被拖动数据的副本：
<div dropzone="copy"></div>
定义和用法
dropzone 属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。
HTML 4.01 与 HTML5 之间的差异
dropzone 属性是 HTML5 中的新属性。
属性值
| 值 | 描述 |
|---|---|
| copy | 拖动数据会产生被拖动数据的副本。 |
| move | 拖动数据会导致被拖动数据被移动到新位置。 |
| link | 拖动数据会产生指向原始数据的链接。 |
hidden 属性
被隐藏的段落：
<phidden>这个段落应该被隐藏。</p>
定义和用法
hidden 属性是布尔属性。
如果设置该属性，它规定元素仍未或不再相关。
浏览器不应显示已规定 hidden 属性的元素。
hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。
HTML 4.01 与 HTML5 之间的差异
hidden 属性是 HTML5 中的新属性。
spellcheck 属性
进行拼写检查的可编辑段落：
<p contenteditable="true" spellcheck="true">这是一个段落。</p>定义和用法
spellcheck 属性规定是否对元素进行拼写和语法检查。
可以对以下内容进行拼写检查：
- input 元素中的文本值（非密码）
- <textarea> 元素中的文本
- 可编辑元素中的文本
HTML 4.01 与 HTML5 之间的差异
spellcheck 属性是 HTML5 中的新属性。
tabindex 属性
实例
带有指定 tab 键顺序的链接：
<a href="http://www.w3school.com.cn/"tabindex="2">W3School</a> <a href="http://www.google.com/"tabindex="1">Google</a> <a href="http://www.microsoft.com/"tabindex="3">Microsoft</a>
定义和用法
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。
title 属性
实例
在 HTML 文档中使用 title 属性：
<abbr title="People's Republic of China">PRC</abbr> was founded in 1949. <p title="Free Web tutorials">W3School.com.cn</p>
定义和用法
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
translate 属性
实例
规定不应翻译某些元素：
<p translate="no">请勿翻译本段。</p> <p>本段可被译为任意语言。</p>
定义和用法
translate 规定是否应该翻译元素内容。
提示：请使用 class="notranslate" 替代。
HTML 4.01 与 HTML5 之间的差异
translate 属性是 HTML5 中的新属性。
- 上一篇 »【03】全局 CSS 样式
- 下一篇 »JavaScript全局属性/函数