Html5 简明教程
HTML5 - Attributes
正如前一章所解释的，元素可能包含属性，用于设置元素的各种属性。
As explained in the previous chapter, elements may contain attributes that are used to set various properties of an element.
有些属性在全局中定义，可在任何元素中使用，而有些属性仅针对特定的元素定义。所有属性均有一个名称和一个值，如下面的示例所示。
Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.
以下是如何使用“示例”的值标记带有名为 class 的属性的 div 元素的 HTML5 属性示例：
Following is the example of an HTML5 attributes which illustrates how to mark up a div element with an attribute named class using a value of "example" −
<div class = "example">...</div>属性只能在 start tags 中指定，并且绝不能在 end tags 中使用。
Attributes may only be specified within start tags and must never be used in end tags.
HTML5 属性不区分大小写，可以全部采用大写或混合大小写编写，但最常见的惯例是坚持使用小写。
HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.
Standard Attributes
以下列出的属性受几乎所有 HTML 5 标记支持。
The attributes listed below are supported by almost all the HTML 5 tags.
Attribute |
Options |
Function |
accesskey |
User Defined |
Specifies a keyboard shortcut to access an element. |
align |
right, left, center |
Horizontally aligns tags |
background |
URL |
Places an background image behind an element |
bgcolor |
numeric, hexidecimal, RGB values |
Places a background color behind an element |
class |
User Defined |
Classifies an element for use with Cascading Style Sheets. |
contenteditable |
true, false |
Specifies if the user can edit the element’s content or not. |
contextmenu |
Menu id |
Specifies the context menu for an element. |
data-XXXX |
User Defined |
Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-". |
draggable |
true,false, auto |
Specifies whether or not a user is allowed to drag an element. |
height |
Numeric Value |
Specifies the height of tables, images, or table cells. |
hidden |
hidden |
Specifies whether element should be visible or not. |
id |
User Defined |
Names an element for use with Cascading Style Sheets. |
item |
List of elements |
Used to group elements. |
itemprop |
List of items |
Used to group items. |
spellcheck |
true, false |
Specifies if the element must have it’s spelling or grammar checked. |
style |
CSS Style sheet |
Specifies an inline style for an element. |
subject |
User define id |
Specifies the element’s corresponding item. |
tabindex |
Tab number |
Specifies the tab order of an element. |
title |
User Defined |
"Pop-up" title for your elements. |
valign |
top, middle, bottom |
Vertically aligns tags within an HTML element. |
width |
Numeric Value |
Specifies the width of tables, images, or table cells. |
有关 HTML5 标记和相关属性的完整列表，请查看我们对 HTML5 Tags 的引用。
For a complete list of HTML5 Tags and related attributes, please check our reference to HTML5 Tags.
Custom Attributes
HTML 5 中引入的一项新功能是添加了自定义数据属性。
A new feature being introduced in HTML 5 is the addition of custom data attributes.
自定义数据属性以 data- 开头，并会根据您的要求进行命名。以下是简单的示例 −
A custom data attribute starts with data- and would be named based on your requirement. Here is a simple example −
<div class = "example" data-subject = "physics" data-level = "complex">
...
</div>上面的代码将与两个称为 datasubject 和 data-level 的自定义属性形成完全有效的 HTML5。您将能够使用 JavaScript API 或 CSS 获取这些属性的值，就像获取标准属性的值一样。
The above code will be perfectly valid HTML5 with two custom attributes called datasubject and data-level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way as you get for standard attributes.