HTML5 属性

正如 HTML5 语法中所阐述的,元素可以包含属性(attributes)给一个元素设置各种属性(properties)。

有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,看起来如下面的示例所示。

下面是一个使用 HTML5 属性的例子,演示了如何用名为 class 的属性和值 "example" 标记一个 div 元素:

<div class="example">...</div>

属性只能在起始标签中指定,绝对不能用在结束标签中。

HTML5 属性不区分大小写,可以全部大写或者混合使用,尽管最常见的约定是始终使用小写。

标准属性

下面列出的属性几乎所有的 HTML5 标签都支持。

|-----------------|---------------------|--------------------------------------------------| | 属性 | 选项 | 功能 | | accesskey | 用户自定义 | 定义访问元素的键盘快捷键。 | | align | right, left, center | 水平对齐标签。 | | background | URL | 在元素后面设置一个背景图像。 | | bgcolor | 数值,十六进制值,RGB值 | 在元素后面设置一个背景颜色。 | | class | 用户定义。 | 分类一个元素,便于使用级联样式表。 | | contenteditable | true, false | 定义用户是否可以编辑元素的内容。 | | contextmenu | Menu id | 为元素定义上下文菜单。 | | data-XXXX | 用户定义。 | 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。 | | draggable | true,false, auto | 定义用户是否可以拖动元素。 | | height | 数字值 | 定义表格,图像或表格单元的高度。 | | hidden | hidden | 定义元素是否应该可见。 | | id | 用户定义。 | 命名元素,便于使用级联样式表。 | | item | 元素列表。 | 用于组合元素。 | | itemprop | 条目列表。 | 用于组合条目。 | | spellcheck | true, false | 定义元素是否必须有拼写或错误检查。 | | style | CSS 样式表。 | 给元素定义内联样式。 | | subject | 用户定义 id。 | 定义元素关联的条目。 | | tabindex | Tab number | 定于元素的 tab 键顺序。 | | title | 用户定义。 | 元素的"弹出"标题。 | | valign | top, middle, bottom | HTML 元素内标签的垂直对齐方式。 | | width | 数字值。 | 定义表格,图像和表格单元的宽度。 |

完整的 HTML5 标签列表以及相关的属性请参考 HTML5 标签

自定义属性

HTML5 还引入了一个新特性,就是可以添加自定义的数据属性。

自定义数据属性以 data- 开头,基于我们的需求命名。下面是一个简单的例子:

<div class="example" data-subject="physics" data-level="complex">
...
</div>

上面的例子中两个叫做 data-subjectdata-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。