這篇文章主要介紹了HTML5中的標準屬性與自定義屬性,文中也談到了JavaScript操作DOM時訪問自定義屬性的一些相關知識點,非常推薦,需要的朋友可以參考下
正如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複製內容到剪貼板