HTML 全局属性

最新推荐文章于 2025-09-08 17:59:21 发布

转载最新推荐文章于 2025-09-08 17:59:21 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/james2015/p/4916436.html

文章标签：

#javascript #数据库 #ViewUI

本文介绍了HTML全局属性，如accesskey、class、contenteditable等，并通过实例展示了这些属性如何赋予元素意义和语境。

HTML 属性赋予元素意义和语境。

下面的全局属性可用于任何 HTML 元素。

HTML 全局属性

属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

accesskey 属性

实例

带有指定快捷键的超链接：

<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 属性规定激活（使元素获得焦点）元素的快捷键。

实例

一段可编辑的段落：

<p contenteditable="true">这是一个可编辑的段落。</p>

定义和用法

contenteditable 属性规定元素内容是否可编辑。

注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

HTML 4.01 与 HTML5 之间的差异

contenteditable 属性是 HTML5 中的新属性。

contextmenu 属性

规定 <div> 元素的上下文菜单。上下文菜单会在用户右键点击元素时出现：

<div contextmenu="mymenu">

<menu type="context" id="mymenu">
  <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>

定义和用法

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 id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" οndragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>
</html>

定义和用法

draggable 属性规定元素是否可拖动。

提示：链接和图像默认是可拖动的。

提示：draggable 属性常用在拖放操作中。请在我们的拖放教程中学习更多内容。

dropzone 属性

实例

拖动数据会产生被拖动数据的副本：

<div dropzone="copy"></div>

定义和用法

dropzone 属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。

HTML 4.01 与 HTML5 之间的差异

dropzone 属性是 HTML5 中的新属性。

属性值

值	描述
copy	拖动数据会产生被拖动数据的副本。
move	拖动数据会导致被拖动数据被移动到新位置。
link	拖动数据会产生指向原始数据的链接。

hidden 属性

被隐藏的段落：

<p hidden>这个段落应该被隐藏。</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 中的新属性。

转载于:https://www.cnblogs.com/james2015/p/4916436.html