使用 data-* 属性来嵌入自定义数据:

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

浏览器支持

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


定义和用法

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

data-* 属性由以下两部分组成:

  1. 属性名不要包含大写字母,在 data- 后必须至少有一个字符。
  2. 该属性可以是任何字符串

注意: 自定义属性前缀 "data-" 会被客户端忽略。

HTML中data-* 属性的更多相关文章

  1. bootstrapValidator验证的remote中data属性里获取select一直是默认值

    budgetEditionNo:{ message:'版本号输入不正确' , validators:{ notEmpty:{ message:'版本号不能为空,请填写' } , remote:{ ur ...

  2. Ajax请求($.ajax()为例)中data属性传参数的形式

    首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...

  3. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  4. jquery easyui ajax data属性传值方式

    $.ajax({   url:url,   type:'post',   data:data,   dataType:'json',   contentType: "application/ ...

  5. spring data mongodb中,如果对象中的属性不想加入到数据库字段中

    spring data mongodb中,如果对象中的属性不想加入到数据库字段中,可加@Transient注解,声明为透明属性 spring data mongodb 官网帮助文档 http://ww ...

  6. [Oracle维护工程师手记]Data Guard Broker中改属性是否需要两侧分别执行?

    Data Guard Broker中改属性是否需要两侧分别执行? Data Guard Broker有一些属性,可以通过 show configuration 看到.我有时会想,这些个属性,是否是分别 ...

  7. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  8. 揭秘DOM中data和nodeValue属性同步改变那些事

    问题引发:最近在整理DOM系列的一些知识点,发现在DOM的某些接口API中,存在一些我想不通的现象.就随便举个例子吧:DOM文档模型中的文本节点,可以通过nodeValue或data属性访问文本节点的 ...

  9. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  10. ajax取到数据后如何拿到data.data中的属性值

    今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi

随机推荐

  1. redis搭建主从复用-读写分离

    1:安装redis5.0.3 2:解压到/usr/local/redis 3:在/opt/redis/下创建三个文件夹 data,存放数据的目录 log,存放日志的目录 conf,存放配置的目录 co ...

  2. 【Git】Git使用记录: remove *.lock eg: index.lock/head.lock

    问题 Another git process seems to be running in this repository, e.g. an editor opened by 'git commit' ...

  3. JavaWeb网上商城项目中sql语句问题的解决

    出现的问题 解决方法 对ProductDaoImpl建立Junit测试得到问题所在 学到了 Junit case测试验证和debug分步执行 mysql是关系型数据库.Redis是非关系型数据库且比m ...

  4. OpenStack入门科普

    看完OpenStack入门科普,看这一篇就够啦!这篇文章,做些记录. 一.OpenStack简介:OpenStack就是为了云计算服务的.简单来说,它是一个操作系统,一套软件,一套IaaS软件. 1. ...

  5. Thinkphp5背景图片的引入~ 以及图片的引入

    将图片信息从数据库查询 再渲染于前台页面

  6. threejs绕轴转,粒子系统,控制器操作等(二)

    前言:threejs系列的第二篇文章,也是一边学习一边总结: 1,一个物体绕着另一个物体转动 上一篇文中主要是物体自转,为了描述一个一个物体绕另一个物体转,这里我描述了一个月球绕地球公转,并且自转的场 ...

  7. selenium-xpath练习

  8. mint修改host

    sudo xed /etc/hosts # Pycharm 0.0.0.0 account.jetbrains.com0.0.0.0 www.jetbrains.com #sublime text3 ...

  9. 记录几个字符串转html的帮助类,已防忘记

    html的帮助类 /// <summary> /// Represents a HTML helper /// </summary> public partial class ...

  10. web服务器初识

    静态元素:.html .img js css swf mp4   --->浏览器自身可以解析 动态元素:.php .jsp .cgi .asp php SQL  ---->浏览器不能直接解 ...