HTML data-* 屬性

HTML 全局屬性 HTML 全局屬性

實例

使用 data-* 屬性來嵌入自定義數據:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>


流覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流流覽器都支持 data-* 屬性。


定義和用法

data-* 屬性用於存儲私有頁面後應用的自定義數據。

data-* 屬性可以在所有的 HTML 元素中嵌入數據。

自定義的數據可以讓頁面擁有更好的交互體驗(不需要使用 Ajax 或去服務端查詢數據)。

data-* 屬性由以下兩部分組成:

  1. 屬性名不要包含大寫字母,在 data- 後必須至少有一個字元。
  2. 該屬性可以是任何字串

注意: 自定義屬性首碼 "data-" 會被客戶端忽略。


HTML 4.01 與 HTML5之間的差異

data-* 屬性是 HTML5 新增的。


語法

<element data-*="somevalue">

屬性值

描述
somevalue 指定屬性值 (一個字串)


HTML 全局屬性 HTML 全局屬性