使用 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. HttpClient throws TaskCanceledException on timeout

    error msg: HttpClient throws TaskCanceledException on timeout HttpClient is throwing a TaskCanceledE ...

  2. SharePoint2007使用WebPart加载UserControl

    之前一直做SharePoint2010开发,最近转向了2007开发,感觉两者开发时有很多地方不一样,我现在接触到2007开发项目里面使用Module去加载Application Page,而在Appl ...

  3. 《Clean Code》阅读笔记

    Chapter 2  命名 命名要表现意图 避免歧义和误导,增强区分 命名可读性:便于发音,增强印象,便于交流 命名可查性:增强区分,便于搜索 类和对象的命名:名词或名词短语 方法的命名:动词或动词短 ...

  4. ZJOI-2017 R2 游记

    来说说考试(之前的事明天再补): 开始看了一遍所有题目,感觉第二题最可做的样子(ZJOI R1树状数组,HNOI splay 你们西方什么题我还没见过,淦!),大概感觉了一下所有题. T1:k=1直接 ...

  5. HTML CSS 特殊字符表

    HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”.要是你用时忘记了这 ...

  6. spring RedisTemplate的使用(一)--xml配置或JavaConfig配置

    1.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="h ...

  7. AutoCAD批量导出点坐标

    需求背景: 需要批量导出DWG文件中的散点树的位置信息,以Excel文件格式存储. 实现方法: 在AutoCAD2012打开dwg文件,点击“插入”选项卡中的“提取数据”工具(或输入DATAEXTRA ...

  8. Linux Shell函数定义与调用

    一.Shell函数定义格式 shell函数定义格式,各部分说明如下: [ function ]等中括号括起来部分----表示可选(即可有可无) your_function_name部分----为函数名 ...

  9. 卡方分布(Chi-Square Distribution):

    定义:如果我们的随机变量是标准正态分布(详见以前博客的高斯分布),那么多个随机变量的平方和服从的分布即为卡方分布. X=Y12+Y22+⋯+Yn2 其中,Y1,Y2,⋯,Yn均为服从标准正态分布的随机 ...

  10. c语言判断闰年作业

    #include <stdio.h> int main() { int year,a; printf("请输人年份y:\n"); scanf("%d" ...