data-* 屬性用於存儲頁面或應用程序的私有自定義數據。
data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。
data-* 屬性包括兩部分：
語法 <element data-*="somevalue">
- 屬性名不應該包含任何大寫字母，並且在前綴 "data-" 之后必須有至少一個字符
- 屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。
例:
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert(animal.innerHTML + "是一種" + animalType + "。");
}
</script>
</head>
<body>
<h1>物種</h1>
<p>點擊某個物種來查看其類別：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="鳥類">喜鵲</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="魚類">金槍魚</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蠅虎</li>
</ul>
</body>
</html>
好處
1.自定義屬性，可以被js很好的操作
2.H5的新屬性
3.通過js的element.dataset.*或jQuery的data('*')拿到，*可以為url等字符
4.框架的數據綁定，例如data-ng-if="cs==1"