Latest web development tutorials

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 新增的。


語法

<elementdata-*=" somevalue ">

屬性值

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


HTML 全局屬性 HTML全局屬性