原文：all you need to know about the html5 data attribute
譯文：你必須知道html 5 的data屬性
譯者：dwqs
html 5的data屬性可以讓你給元素自定義資料。這篇文章就是思考怎麼更好的使用data屬性。
介紹
html 5之前，我們必須依賴於class和rel屬性來儲存需要在**中使用的資料片段，這種做法有時會在**的外觀和實用性之間產生衝突。而html 5 data屬性的存在就能很好滿足需要。
audio
controls
="controls"
>
<
source
src="track1.***"
type
="audio/mpeg"
/>
audio
>
上面的**是完全能夠接受的，但是有時我們需要儲存時長、速度和作者等更多關於音訊本身的資訊，而不是音訊**。這就需要用到data屬性了，示例如下：
audio
controls
="controls"
>
<
source
src="track1.***"
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屬性的說明如下：
這也意味著我們只能在應用程式內部使用data資料，而不應該將它呈現給使用者。更重要的是你可以給元素自定義任何數量的data屬性，並賦予任何有意義的值。
什麼時候需要使用data屬性？
通過上面的講述，已經知道怎麼使用data屬性了。但為了更好地了解這個屬性，再看幾個例子。
在tuts+的webdesign板塊已經有了很好地、關於使用data屬性的例子。one of the tuts，將data屬性運用到樣式中，讓選單有乙個「氣泡」通知效果。在這個示例中，data屬性被用於只想氣泡通知的值。
ahref
="#"
class
="pink"
data-bubble
="2"
>profile
a>
另外乙個示例：quick tip，data屬性作為提示資訊是怎麼被用於提示框的
ahref
="#"
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
>
利用微格式的**如下：
divclass
="vcard"
>
<
span
class
="fn "
>aaron lumsden
span
>
div>
相反，利用data屬性的**如下：
divclass
="vcard"
>
<
span
data-name
="aaron lumsden "
>aaron lumsden
span
>
div>
在css中使用data屬性
既然在html標記中實現了data屬性，那麼也可以在css中使用這個屬性了。注意：儘管在某些情況下更適合直接使用data屬性，那也不應該對任何樣式規則直接使用該屬性。簡單的使用如下：
/* styles */
}在jquery中使用data屬性
在jquery中怎麼使用data屬性呢？jquery提供了很多種從元素獲取資料的方式。例如，像下面這樣：
ahref
=""class
="button"
data-info
="the worlds most popular search engine"
a>
如果有乙個和上面類似的錨文字標記，有乙個名為data-info的data屬性，利用下面的方式，可以獲取任何乙個屬性，包括data-info
e.preventdefault();
thisdata = $(this).attr('data-info');
console.log(thisdata);
});原文首發：
初學HTML5必須知道的那些事（三）
值得注意的有以下幾點 1.封閉標記 雙標記 和非封閉標記 單標記 封 閉標記有始有終，有 頭有尾，比如說 等，如果少了一邊比如 我是段落 的後果，雙標記中，我們少了一邊很可能讓我們做出來的html網頁和設想中的html網頁大相徑庭。2.文字和特殊字元 在 html 中我們連續打出多個空格，在網頁中卻...
學習HTML之前你必須知道的知識
title head body html 1234567html骨架標籤總結 標籤名定義說明 html標籤 頁面中最大的標籤，我們成為 根標籤 文件的頭部 注意在head標籤中我們必須要設定的標籤是title 文件的標題 讓頁面擁有乙個屬於自己的網頁標題 文件的主體 元素包含文件的所有內容，頁面內容...
5個你必須知道的建站平台
如今在網路上有很多優秀的 構建平台。根據你的需求，它們會提供不同的功能。然而，對於乙個 構建工具最重要的就是簡單和友好。通過這些平台，開發者可以省去開發中的不少環節。在本篇文章中，我們會介紹5款非常酷的 建立平台 dudaone duda為搜尋相關內容的 開發出了獨特的演算法，而且這些功能現在都已經...