---
title: HTML 的属性
date: 2020-11-10 15:55:09
tags: [HTML]
categories: [HTML]
author: Anges黎梦
---

## 属性概览

> 部分为 HTML5 中添加的属性

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

## 属性详情

### accesskey

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

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

#### 浏览器支持

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

#### 定义和用法

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

#### 提示和注释

以下元素支持 accesskey 属性：

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

#### 语法

```text
\<element accesskey="character"\>
```

#### 属性值

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

### class

> 在 HTML 文档中使用 class 属性

```text
\<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 元素中使用：

```text
base head html meta param script style title。
```

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

```text
\<span class="left_menu important"\>
```
这么做可以把若干个 CSS 类合并到一个 HTML 元素。

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

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

|IE	|Firefox	|Opera	|Safari|
|---|:---:|:---:|:---:|
|YES	|YES|	YES|	YES|

#### 语法

```text
\<element class="value"\>
```

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



### contenteditable

#### 实例

一段可编辑的段落：

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

#### 浏览器支持

|IE	|Firefox	|Chrome	|Safari	|Opera|
|:---:|:---:|:---:|:---:|:---:|
|  YES	|YES|	YES|	YES|	YES|

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

#### 定义和用法

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

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

#### HTML 4.01 与 HTML5 之间的差异

`contenteditable` 属性是 `HTML5` 中的新属性。

#### 语法

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

#### 属性值

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

### contextmenu

#### 实例

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

```text
\<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` 中的新属性。

#### 语法

```text
\<element contextmenu="menu_id"\>
```

#### 属性值
|属性|	描述|
|---|:---:|
|menu_id	|要打开的 \\<menu\> 元素的 id。|


### data-*

#### 实例

使用 data-* 属性来嵌入自定义数据：
```text
\<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` 中的新属性。

#### 语法

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

#### 属性值

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

### dir

#### 实例

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

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

#### 浏览器支持

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

#### 定义和用法

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

#### 提示和注释

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

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

#### 语法

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

#### 属性值

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

### draggable

#### 实例

一个可拖动的段落：

```text
\<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 中的新属性。

#### 语法

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

#### 属性值

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

### dropzone

#### 实例

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

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

#### 浏览器支持

|IE	|Firefox	|Chrome	|Safari	|Opera|
|:---:|:---:|:---:|:---:|:---:|
|  NO	|NO|	NO|	NO|	NO|

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

#### 定义和用法

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

#### HTML 4.01 与 HTML5 之间的差异

`dropzone` 属性是 HTML5 中的新属性。

#### 语法

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

#### 属性值

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

### hidden

#### 实例

被隐藏的段落：

```text
\<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"\>。

#### 语法

```text
\<element hidden\>
```

### id

#### 实例

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

```text
\<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|

#### 语法

```text
\<element id="value"\>
```

#### 属性值

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

### lang

#### 实例
段落中的一些法文：
```text
\<p lang="fr"\>Ceci est un paragraphe.\</p\>
```

#### 浏览器支持

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

#### 定义和用法

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

#### 提示和注释

lang 属性在以下标签中无效
```text
\<base\> \<br\> \<frame\> \<frameset\> \<hr\> \<iframe\> \<param\> \<script\>
```

#### 语法
```text
\<element lang="language_code"\>
```

#### 属性值

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

### spellcheck

#### 实例

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

```text
\<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 中的新属性。

#### 语法

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

#### 属性值

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

### style

#### 实例
在 HTML 文档中使用 style 属性：
```text
\<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|

#### 语法

```text
\<element style="value"\>
```

#### 属性值

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

### tabindex

#### 实例

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

```text
\<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 属性：

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

#### 语法

```text
\<element tabindex="number"\>
```

#### 属性值

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

### title

#### 实例

在 HTML 文档中使用 title 属性：

```text
\<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|

#### 语法

```text
\<element title="value"\>
```

#### 属性值

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

### translate


#### 实例

规定不应翻译某些元素：

```text
\<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 中的新属性。

#### 语法

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

#### 属性值

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