734 lines
15 KiB
Markdown
734 lines
15 KiB
Markdown
---
|
||
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 |规定不应翻译元素内容。|
|