正如 HTML5 語(yǔ)法中所闡述的,元素可以包含屬性(attributes)給一個(gè)元素設(shè)置各種屬性(properties)。
有些屬性被定義為全局的,可以用在任何元素上,而其他的被定義為元素特有的。所有的屬性都有一個(gè)名稱和一個(gè)值,看起來(lái)如下面的示例所示。
下面是一個(gè)使用 HTML5 屬性的例子,演示了如何用名為 class 的屬性和值 “example” 標(biāo)記一個(gè) div 元素:
<div class="example">...</div>
屬性只能在起始標(biāo)簽中指定,絕對(duì)不能用在結(jié)束標(biāo)簽中。
HTML5 屬性不區(qū)分大小寫(xiě),可以全部大寫(xiě)或者混合使用,盡管最常見(jiàn)的約定是始終使用小寫(xiě)。
標(biāo)準(zhǔn)屬性
下面列出的屬性幾乎所有的 HTML5 標(biāo)簽都支持。
屬性 | 選項(xiàng) | 功能 |
accesskey | 用戶自定義 | 定義訪問(wèn)元素的鍵盤(pán)快捷鍵。 |
align | right, left, center | 水平對(duì)齊標(biāo)簽。 |
background | URL | 在元素后面設(shè)置一個(gè)背景圖像。 |
bgcolor | 數(shù)值,十六進(jìn)制值,RGB值 | 在元素后面設(shè)置一個(gè)背景顏色。 |
class | 用戶定義。 | 分類一個(gè)元素,便于使用級(jí)聯(lián)樣式表。 |
contenteditable | true, false | 定義用戶是否可以編輯元素的內(nèi)容。 |
contextmenu | Menu id | 為元素定義上下文菜單。 |
data-XXXX | 用戶定義。 | 自定義屬性。 HTML 文檔的作者可以定義自己的屬性。 自定義屬性必須以 "data-" 開(kāi)頭。 |
draggable | true,false, auto | 定義用戶是否可以拖動(dòng)元素。 |
height | 數(shù)字值 | 定義表格,圖像或表格單元的高度。 |
hidden | hidden | 定義元素是否應(yīng)該可見(jiàn)。 |
id | 用戶定義。 | 命名元素,便于使用級(jí)聯(lián)樣式表。 |
item | 元素列表。 | 用于組合元素。 |
itemprop | 條目列表。 | 用于組合條目。 |
spellcheck | true, false | 定義元素是否必須有拼寫(xiě)或錯(cuò)誤檢查。 |
style | CSS 樣式表。 | 給元素定義內(nèi)聯(lián)樣式。 |
subject | 用戶定義 id。 | 定義元素關(guān)聯(lián)的條目。 |
tabindex | Tab number | 定于元素的 tab 鍵順序。 |
title | 用戶定義。 | 元素的“彈出”標(biāo)題。 |
valign | top, middle, bottom | HTML 元素內(nèi)標(biāo)簽的垂直對(duì)齊方式。 |
width | 數(shù)字值。 | 定義表格,圖像和表格單元的寬度。 |
自定義屬性
HTML5 還引入了一個(gè)新特性,就是可以添加自定義的數(shù)據(jù)屬性。
自定義數(shù)據(jù)屬性以 data- 開(kāi)頭,基于我們的需求命名。下面是一個(gè)簡(jiǎn)單的例子:
<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個(gè)叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標(biāo)準(zhǔn)屬性類似的方式獲取它們的值。
在HTML元素中添加自定義屬性,通過(guò)JavaScript進(jìn)行訪問(wèn),如果你之前有嘗試過(guò),你會(huì)發(fā)現(xiàn),容易忽略標(biāo)記驗(yàn)證,而HTML5可以為你提供在有效的網(wǎng)頁(yè)內(nèi)創(chuàng)建并使用自己的元素屬性的功能。
創(chuàng)建HTML5文件:
如果你還沒(méi)想好要使用哪一個(gè),可以復(fù)制下面的代碼:
新聞熱點(diǎn)
疑難解答
圖片精選