blog/html5-property.md at master

15 KiB

Raw Permalink Blame History

title

date

属性概览

部分为 HTML5 中添加的属性

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

属性详情

accesskey

带有指定快捷键的超链接

\<a href="http://www.angeszhu.cn/" accesskey="h"\>黎梦逼逼叨\</a\>\<br /\>

浏览器支持

几乎所有浏览器均 accesskey 属性，除了 Opera。

定义和用法

accesskey 属性规定激活（使元素获得焦点）元素的快捷键。

提示和注释

以下元素支持 accesskey 属性：

\<a\> \<area\> \<button\> \<input\> \<label\> \<legend\> \<textarea\>

语法

\<element accesskey="character"\>

属性值

属性	描述
character	规定激活（使元素获得焦点）元素的便捷按键。

class

在 HTML 文档中使用 class 属性

\<html\>
\<head\>
\<style type="text/css"\>
h1.intro {color:blue;}
p.important {color:green;}
\</style\>
\</head\>

\<body\>
\<h1 class="intro"\>Header 1\</h1\>
\<p\>A paragraph.\</p\>
\<p class="important"\>Note that this is an important paragraph.\</p\>
\</body\>
\</html\>

定义和用法

class 属性规定元素的类名（classname）。

class 属性大多数时候用于指向样式表中的类（class）。

不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。

提示和注释

class 属性不能在以下 HTML 元素中使用：

base head html meta param script style title。

可以给 HTML 元素赋予多个 class，

\<span class="left_menu important"\>

这么做可以把若干个 CSS 类合并到一个 HTML 元素。

类名不能以数字开头！只有 Internet Explorer 支持这种做法。

浏览器支持

W3C: "W3C" 列指示 W3C 的 HTML/XHTML 推荐标准中是否定义了该属性。

IE	Firefox	Opera	Safari
YES	YES	YES	YES

语法

\<element class="value"\>

属性值

属性	描述
classname	规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。

contenteditable

实例

一段可编辑的段落：

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

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

所有主流浏览器都支持 contenteditable 属性。

定义和用法

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

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

HTML 4.01 与 HTML5 之间的差异

contenteditable 属性是 HTML5 中的新属性。

语法

\<element contenteditable="true|false"\>

属性值

属性	描述
true	规定元素可编辑。
false	规定元素不可编辑。

contextmenu

实例

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

\<div contextmenu="mymenu"\>

\<menu type="context" id="mymenu"\>
  \<menuitem label="Refresh"\>\</menuitem\>
  \<menuitem label="Twitter"\>\</menuitem\>
\</menu\>

\</div\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
NO	YES	NO	NO	NO

目前只有 Firefox 支持 contextmenu 属性。

定义和用法

contextmenu 属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单。

contextmenu 属性的值是要打开的 \<menu\> 元素的 id。

HTML 4.01 与 HTML5 之间的差异

contextmenu 属性是 HTML5 中的新属性。

语法

\<element contextmenu="menu_id"\>

属性值

属性	描述
menu_id	要打开的 \<menu> 元素的 id。

data-*

实例

使用 data-* 属性来嵌入自定义数据：

\<ul\>
\<li data-animal-type="鸟类"\>喜鹊\</li\>
\<li data-animal-type="鱼类"\>金枪鱼\</li\> 
\<li data-animal-type="蜘蛛"\>蝇虎\</li\> 
\</ul\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

所有主流浏览器都支持 data-* 属性。

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

- 属性值可以是任意字符串

注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。

HTML 4.01 与 HTML5 之间的差异

data-* 属性是 HTML5 中的新属性。

语法

\<element data-*="somevalue"\>

属性值

属性	描述
somevalue	规定属性的值（以字符串）。

dir

实例

一段方向从右向左的段落：

\<p dir="rtl"\>Write this text right-to-left!\</p\>

浏览器支持

所有浏览器均支持 dir 属性。

定义和用法

dir 属性规定元素内容的文本方向。

提示和注释

dir 属性在以下标签中无效：

\<base\> \<br\> \<frame\> \<frameset\> \<hr\> \<iframe\> \<param\> \<script\>

语法

\<element dir="ltr|rtl"\>

属性值

属性	描述
ltr	默认。从左向右的文本方向。
rtl	从右向左的文本方向。

draggable

实例

一个可拖动的段落：

\<p draggable="true"\>这是一个可拖动的段落。\</p\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。

**注释：**Internet Explorer 8 以及更早的版本，不支持 draggable 属性。

定义和用法

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

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

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

HTML 4.01 与 HTML5 之间的差异

draggable 属性是 HTML5 中的新属性。

语法

\<element draggable="true|false|auto"\>

属性值

属性	描述
true	规定元素的可拖动的。
false	规定元素不可拖动。
auto	使用浏览器的默认行为。

dropzone

实例

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

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

浏览器支持

IE	Firefox	Chrome	Safari	Opera
NO	NO	NO	NO	NO

目前所有主流浏览器都不支持 dropzone 属性。

定义和用法

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

HTML 4.01 与 HTML5 之间的差异

dropzone 属性是 HTML5 中的新属性。

语法

\<element dropzone="copy|move|link"\>

属性值

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

hidden

实例

被隐藏的段落：

\<p hidden\>这个段落应该被隐藏。\</p\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

所有主流浏览器都支持 hidden 属性，除了 Internet Explorer。

定义和用法

hidden 属性是布尔属性。

如果设置该属性，它规定元素仍未或不再相关。

浏览器不应显示已规定 hidden 属性的元素。

hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。

然后，JavaScript 可以删除 hidden 属性，以使此元素可见。

HTML 4.01 与 HTML5 之间的差异

hidden 属性是 HTML5 中的新属性。

HTML 与 XHTML 之间的差异

在 XHTML 中，属性简写是禁止的，hidden 属性必须定义为 <element hidden="hidden">。

语法

\<element hidden\>

id

实例

通过 JavaScript 利用 id 属性来改变一段文本：

\<html\>
\<head\>
\<script type="text/javascript"\>
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
\</script\>
\</head\>

\<body\>
\<h1 id="myHeader"\>Hello World!\</h1\>
\<button onclick="change_header()"\>Change text\</button\>
\</body\>

\</html\>

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

语法

\<element id="value"\>

属性值

属性	描述
id	规定元素的唯一 id。

lang

实例

段落中的一些法文：

\<p lang="fr"\>Ceci est un paragraphe.\</p\>

浏览器支持

所有浏览器均支持 lang 属性。

定义和用法

lang 属性规定元素内容的语言。

提示和注释

lang 属性在以下标签中无效

\<base\> \<br\> \<frame\> \<frameset\> \<hr\> \<iframe\> \<param\> \<script\>

语法

\<element lang="language_code"\>

属性值

属性	描述
language_code	规定元素内容的语言代码。语言代码参考

spellcheck

实例

进行拼写检查的可编辑段落：

\<p contenteditable="true" spellcheck="true"\>这是一个段落。\</p\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。

注释：Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。

定义和用法

spellcheck 属性规定是否对元素进行拼写和语法检查。

可以对以下内容进行拼写检查：

- input 元素中的文本值（非密码）

- \<textarea\> 元素中的文本

- 可编辑元素中的文本

HTML 4.01 与 HTML5 之间的差异

spellcheck 属性是 HTML5 中的新属性。

语法

\<element spellcheck="true|false"\>

属性值

属性	描述
true	对元素进行拼写和语法检查
false	不检查元素。

style

实例

在 HTML 文档中使用 style 属性：

\<h1 style="color:blue; text-align:center"\>This is a header\</h1\>
\<p style="color:red"\>This is a paragraph.\</p\>

定义和用法

style 属性规定元素的行内样式（inline style）

style 属性将覆盖任何全局的样式设定，例如在 \<style\> 标签或在外部样式表中规定的样式。

支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

语法

\<element style="value"\>

属性值

属性	描述
style_definition	一个或多个由分号分隔的 CSS 属性和值。

tabindex

实例

带有指定 tab 键顺序的链接：

\<a href="http://www.angeszhu.cn/" tabindex="2"\>Python\</a\>
\<a href="http://www.angeszhu.cn/" tabindex="1"\>Django\</a\>
\<a href="http://www.angeszhu.cn/" tabindex="3"\>Java\</a\>

浏览器支持

几乎所有浏览器均 tabindex 属性，除了 Safari。

定义和用法

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

提示和注释

以下元素支持 tabindex 属性：

\<a\>, \<area\>, \<button\>, \<input\>, \<object\>, \<select\> 以及 \<textarea\>

语法

\<element tabindex="number"\>

属性值

属性	描述
number	规定元素的 tab 键控制次序（1 是第一个）。

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 元素的必需属性。

支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

语法

\<element title="value"\>

属性值

属性	描述
text	规定元素的工具提示文本（tooltip text）。

translate

实例

规定不应翻译某些元素：

\<p translate="no"\>请勿翻译本段。\</p\>
\<p\>本段可被译为任意语言。\</p\>

浏览器支持

IE	Firefox	Chrome	Safari	Opera
YES	YES	YES	YES	YES

所有主流浏览器都无法正确地支持 translate 属性。

定义和用法

translate 规定是否应该翻译元素内容。

提示：请使用 class="notranslate" 替代。

HTML 4.01 与 HTML5 之间的差异

translate 属性是 HTML5 中的新属性。

语法

\<element translate="yes|no"\>

属性值

属性	描述
yes	规定应该翻译元素内容。
no	规定不应翻译元素内容。

15 KiB Raw Permalink Blame History Unescape Escape

属性概览

属性详情

accesskey

浏览器支持

定义和用法

提示和注释

语法

属性值

class

定义和用法

提示和注释

浏览器支持

语法

属性值

contenteditable

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

contextmenu

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

data-*

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

dir

实例

浏览器支持

定义和用法

提示和注释

语法

属性值

draggable

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

dropzone

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

语法

属性值

hidden

实例

浏览器支持

定义和用法

HTML 4.01 与 HTML5 之间的差异

HTML 与 XHTML 之间的差异

语法

id

实例

定义和用法

支持

语法

属性值

lang

实例

浏览器支持

定义和用法

提示和注释

语法

属性值

spellcheck

实例

浏览器支持

15 KiB

Raw Permalink Blame History