HTML Data-* 全局属性|定义元素自定义数据

HTML全局属性


定义与用法

  • data-* 属性用于存储私有页面后应用的自定义数据。
  • data-* 属性可以在所有的 HTML 元素中嵌入数据。
  • 自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。
  • data-* 是 HTML5 新增属性。
data-* 属性由以下两部分组成:
  1. 属性名不要包含大写字母,在 data- 后必须至少有一个字符。
  2. 该属性可以是任何字符串

提示: 自定义属性前缀 “data-” 会被客户端忽略。


语法格式

<element data-*=”somevalue“>


示例代码

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

效果展示:

  • Owl
  • Salmon
  • Tarantula

浏览器支持

属性Google ChromeInternet ExplorerFirefoxSafariOpera
data-*YesYesYesYesYes

所有主流浏览器都支持 data-* 属性。


属性值

描述
somevalue指定属性值 (一个字符串)

HTML全局属性


相关