HTML 5的Data屬性可以讓你給元素自定義數據。這篇文章就是思考怎么更好的使用Data屬性。
**介紹**
HTML 5之前，我們必須依賴於class和rel屬性來存儲需要在網站中使用的數據片段，這種做法有時會在網站的外觀和實用性之間產生沖突。而HTML 5 Data屬性的存在就能很好滿足需要。
隨着網站自身的數據越來越多，一些特定的元素也開始保存數據了。比如，要創建一個audio應用，代碼如下：
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" />
</audio>
上面的代碼是完全能夠接受的，但是有時我們需要保存時長、速度和作者等更多關於音頻本身的信息，而不是音頻來源。這就需要用到Data屬性了，示例如下：
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>
通過這些自定義的Data屬性，就能夠對audio執行搜尋、過濾以及分組等動作。
怎么使用Data屬性
自定義的Data屬性的名字必須以data-開頭，並且連字號后面至少要有一個符合HTML規范的字符。（HTML naming convention.）
W3C文檔對Data屬性的說明如下：
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
這也意味着我們只能在應用程序內部使用data數據，而不應該將它呈現給用戶。更重要的是你可以給元素自定義任何數量的Data屬性，並賦予任何有意義的值。
什么時候需要使用Data屬性？
通過上面的講述，已經知道怎么使用Data屬性了。但為了更好地了解這個屬性，再看幾個例子。
在Tuts+的Webdesign板塊已經有了很好地、關於使用data屬性的例子。One of the tuts，將Data屬性運用到樣式中，讓菜單有一個“氣泡”通知效果。在這個示例中，data屬性被用於只想氣泡通知的值。
<a href="#" class="pink" data-bubble="2">Profile</a>
另外一個示例：quick tip，Data屬性作為提示信息是怎么被用於提示框的
<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>
什么時候不該用Data屬性？
當元素已經建立或者更適當的屬性時，就不應該用Data屬性了。在下面這個示例中運用data是不合適的：
<span data-time="20:00">8pm<span>
因為在一個表示時間的元素中，已經有一個datetime屬性了：
<time datetime="20:00">8pm</time>
同時，Data屬性不應該被用作一個可替代的元數據或者微格式。微格式主要是為人類設計的、用於介紹上下文信息的。比如，如果你有一張關於個人或者某個組織聯系信息的Vcard,你應該賦予一個名為vcard的class屬性，讓機器明白它包含了一些聯系的信息。
利用微格式的代碼如下：
<div class="vcard">
<span class="fn " >Aaron Lumsden</span>
</div>
相反，利用Data屬性的代碼如下：
<div class="vcard">
<span data-name="Aaron Lumsden " >Aaron Lumsden</span>
</div>
了解更多關於微格式的信息：Mircorformats.org.
在CSS中使用Data屬性
既然在HTML標記中實現了Data屬性，那么也可以在CSS中使用這個屬性了。注意：盡管在某些情況下更適合直接使用Data屬性，那也不應該對任何樣式規則直接使用該屬性。簡單的使用如下：
[data-role="page"] {
/* Styles */
}
在JQuery中使用Data屬性
在JQuery中怎么使用Data屬性呢？JQuery提供了很多種從元素獲取數據的方式。例如，像下面這樣：
<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>
如果有一個和上面類似的錨文本標記，有一個名為data-info的data屬性，利用下面的方式，可以獲取任何一個屬性，包括data-info
$('.button').click(function(e) {
e.preventDefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});