1. HTML 實例
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
2.瀏覽器支持
IE Firefox Chrome Safari Opera
支持 支持 支持 支持 支持
3.定義和用法
data-* 屬性用於存儲頁面或應用程序的私有自定義數據。
data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。
data-* 屬性包括兩部分：
屬性名不應該包含任何大寫字母，並且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。
語法
<element data-*="somevalue">
值描述
somevalue 規定屬性的值（以字符串）。
4.外加信息
HTML 標簽可以添加自定義屬性來存儲和操作數據。但這樣做會導致 HTML 語法上不符合 HTML 規范。
HTML5 規范里增加了一個自定義 data 屬性，自定義data屬性的用法非常的簡單，就可以往 HTML 標簽上添加任意以 "data-"開頭的屬性。
這些屬性頁面上是不顯示的，它不會影響到你的頁面布局和風格，但它卻是可讀可寫的。
下面的一個代碼片段是一個有效的 HTML5 標記：
<div id="item" data-id='123'>11111</div>
可是，怎么來讀取這些數據呢？你當然可以遍歷頁面元素來讀取你想要的屬性，但 jquery 已經內置了方法來操作這些屬性。
使用 jQuery 的 .data() 方法來訪問這些"data-*" 屬性。其中一個方法就是 .data(obj)，這個方法是在 jQuery1.4.3版本后出現的，它能返回相應的 data 屬性。
舉個例子，你可以用下面的寫法讀取 data-id 屬性值--123：
var myid= jQuery("#item").data('id');
你還可以在"data-*" 屬性里使用 json 語法，
<div id="item" data-id='{"game":"on"}'></div>
你可以通過 js 直接訪問這個數據，通過 json 的 key 值，你能得到相應的 value：
var gameStatus= jQuery("#item").data('id').game;
你也可以通過 .data(key,value) 方法直接給"data-*" 屬性賦值。
一個重要的你要注意的事情是，這些"data-*" 屬性應該和它所在的元素有一定的關聯，不要把它當成存放任意東西的存儲工具。
盡管"data-*" 是 HTML5 才出現的屬性，但 jquery 是通用的，所以，在非 HTML5 的頁面或瀏覽器里，你仍然可以使用 .data(obj ) 方法來操作"data-*" 數據。