實例
使用data-* 屬性來嵌入自訂資料：
<ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>
瀏覽器支援
IE、Firefox、Chrome、Safari、Opera
所有主流瀏覽器都支援data-* 屬性。
定義和用法
data-* 屬性用於儲存頁面或應用程式的私人自訂資料。
data-* 屬性賦予我們在所有 HTML 元素上嵌入自訂 data 屬性的能力。
儲存的（自訂）資料能夠被頁面的 JavaScript 中利用，以創建更好的使用者體驗（不進行 Ajax 呼叫或伺服器端資料庫查詢）。
data-* 屬性包括兩個部分：
屬性名稱不應該包含任何大寫字母，且在前綴"data-" 之後必須有至少一個字元
屬性值可以是任意字串
#註解：使用者代理程式會完全忽略前綴為"data-" 的自定義屬性。
HTML 4.01 與 HTML5 之間的差異
data-* 屬性是 HTML5 中的新屬性。
語法
<element data-*="somevalue">
屬性值
| #值 | 描述 |
| somevalue | 規定屬性的值（以字串）。 |
在jQuery的attr與prop提到在IE9之前版本中如果使用property不當會造成記憶體洩漏問題，而且關於Attribute和Property的差異也讓人十分頭痛，在HTML5中加入了data-*的方式來自訂屬性，所謂data-*其實上就是data-前綴加上自訂的屬性名，使用這樣的結構可以進行資料存放。使用data-*可以解決自訂屬性混亂無管理的現狀。
讀寫方式
data-*有兩種設定方式，可以直接在HTML元素標籤上書寫
<div id="test" data-age="24">
Click Here
</div>其中的data-age就是一種自訂屬性，當然我們也可以透過JavaScript來對其進行操作，HTML5中元素都會有一個dataset的屬性，這是一個DOMStringMap類型的鍵值對集合
var test = document.getElementById('test');
test.dataset.my = 'Byron';這樣就為div新增了一個data-my的自訂屬性，使用JavaScript操作dataset有兩個需要注意的地方
1. 我們在新增或讀取屬性的時候需要去掉前綴data- *，像上面的範例我們沒有使用test.dataset.data-my = 'Byron';的形式。
2. 如果屬性名稱中也包含連字號(-)，需要轉成駝峰命名方式，但如果在CSS中使用選擇器，我們需要使用連字格式
以上是html5儲存頁面或應用程式的私有自訂資料的data-* 屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
