全面解析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 還引入了一個新特性，就是可以添加自定義的數據屬性。

自定義數據屬性以 data- 開頭，基于我們的需求命名。下面是一個簡單的例子：

<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中兩個叫做 data-subject 和 data-level 的自定義屬性在 HTML5 中是完全有效的。我們還可以使用 JavaScript API 或者在 CSS 中以獲取標準屬性類似的方式獲取它們的值。

在HTML元素中添加自定義屬性，通過JavaScript進行訪問，如果你之前有嘗試過，你會發現，容易忽略標記驗證，而HTML5可以為你提供在有效的網頁內創建并使用自己的元素屬性的功能。

創建HTML5文件：

如果你還沒想好要使用哪一個，可以復制下面的代碼：

			XML/HTML Code復制內容到剪貼板

上一篇：HTML5新特性之用SVG繪制微信logo

下一篇：HTML5實現預覽本地圖片

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注