HTML5 data-*属性规则？

HTML5 data-*属性规则是一种在HTML元素中自定义数据的方法。它允许开发人员在HTML标签中添加自定义属性，以存储与该元素相关的数据。这些自定义属性以"data-"开头，后面跟着任意自定义名称。

这种规则的主要优势是可以将数据与特定的HTML元素关联起来，而无需使用其他方式（如JavaScript变量或全局对象）。这样可以使代码更加模块化和可维护，同时提高了开发效率。

HTML5 data-*属性的应用场景非常广泛。以下是一些常见的应用场景：

数据存储：可以使用data-*属性将数据存储在HTML元素中，以便在后续的JavaScript代码中进行访问和处理。
样式控制：可以使用data-*属性来存储与样式相关的数据，然后通过JavaScript动态修改元素的样式。
交互行为：可以使用data-*属性来存储与元素交互行为相关的数据，例如按钮的状态、选项卡的索引等。
数据传递：可以使用data-*属性将数据传递给后端服务器，以便在后台处理数据时使用。

腾讯云提供了一系列与HTML5 data-*属性相关的产品和服务，例如：

腾讯云对象存储（COS）：腾讯云对象存储是一种可扩展的云存储服务，可以用于存储和管理HTML页面中使用data-*属性存储的数据。详情请参考：腾讯云对象存储
腾讯云云服务器（CVM）：腾讯云云服务器提供了稳定可靠的云计算基础设施，可以用于部署和运行HTML页面及相关的后端服务。详情请参考：腾讯云云服务器
腾讯云CDN加速：腾讯云CDN加速可以加速HTML页面及相关静态资源的传输，提高页面加载速度和用户体验。详情请参考：腾讯云CDN加速

通过使用这些腾讯云产品，开发人员可以更好地利用HTML5 data-*属性规则，实现数据存储、样式控制、交互行为和数据传递等功能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML5 *data-** 自定义属性

在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。...使用data-*可以解决自定义属性混乱无管理的现状。 1....来对其进行操作，HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合 var test = document.getElementById('test');...test.dataset.my = 'Byron'; *使用JavaScript操作dataset有两个需要注意的地方（1）我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用...-前缀的属性那么为什么我们还要用data-*呢，一个最大的好处是我们可以把所有自定义属性在dataset对象中统一管理，遍历啊神马的都哦很方便，而不至于零零散散了，所以用用还是不错的。

9122 0

HTML5的*data-**自定义属性

HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。...在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。...中的简洁操作方法：（dataset属性存取data-*自定义属性的值）这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。...这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象。...data-属性选择器在实际开发时，可以根据自定义的data-属性选择相关的元素。

1.5K4 1

jQuery获取*data-**属性值

下面就详细介绍四种方法获取data-*属性的值获取id 需要获取的就是data-id 和 dtat-vice-id...//data-前缀属性可以在JS中通过dataset取值，更加方便 console.log(getId.dataset.id);//112 //data-vice-id连接取值使用驼峰命名法取值 console.log...data-myname="lsxj" data-app-id="456" data-my-name="secondname"> 需要注意的是，data()的值进行修改并不会影响到DOM元素上的data...-*属性的改变。...data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。

2.6K2 0

html的*data-**属性

使用 data-* 属性来嵌入自定义数据：可以用来传参 <input data-schoolcode="${item.schoolCode}" data-region="${item.region

1054 0

HTML5 自定义属性 *data-** 和 jQuery.data 详解

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。...这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。...所做出的任何更改，都是可以实时反映到元素data属性上的。但是这种方法比较低端，如果遇到多个data-*自定义字段，想要一次全部获取所有的data属性并包装成对象的话，还必须做一个循环，很麻烦。...利用 jQuery.data 方法存取 dataset jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性，同时也不需要写"data-"关键词了，例如，对于上面的例子，可以运行...HTML5 Dataset 浏览器支持情况 HTML5 Data属性的支持情况在IE上很糟糕： Internet Explorer: 11+ Chrome: 8+ Firefox: 6+ Opera:

1.4K5 0

采用HTML5之data-机制自由提供数据

周末总是过得很快，又到了跟代码亲密接触的日子，我在北京向各位问好，今天我分享一点关于前端的东西，HTML5之标签"data-*"自定义属性的值传递。 ...今天我就给各位记录其中的一种，就是HTML5的"data-*"机制，它是一种标记语言标签的自定义属性，完全可以依靠这种机制自由地向后台提供各种数据，极其方便，当然，这种自定义属性的值可以通过jQuery...好了，下面正式来说说HTML5的"data-*"的机制提供数据，并如何获取。因为之前在更换页面的过程中也看到了公司使用"data-*"的机制来输送数据，但是对它的印象不是太深，就没有深究。...下面是一个表单中定义data-*自定义属性，并如何获取属性的数据值。...jQuery的data()方法，该方法是用来获取data-*自定义属性的值，也可以覆盖或存储data-*属性的值。

65810 0

HTML5的*data-** 要注意的问题

说说问题： 1、data-其后的属性名命名，发现如果为大写字母，则会转为 “-” + “小写字母”，如： DOM.dataset.newAttrHaha 将会转换为属性“data-new-attr-haha...2、data-其后的属性名命名，如果包含“-”紧接其后则不能为字母，可以为数字。...如：DOM.dataset[‘newAttr-23aaa’]正确(转换方式按规则1处理) DOM.dataset[‘newAttr-a23aaa’]则会报语法错误： ?...3、使用setAttribute定义的属性，如果中间包含”-”，转换规则有所不同，中间所有大写字母均转换为小写之母 DOM.setAttribute("data-newAttr2-abc", "22222...规则（1）中 “大写” ==》“-” + “小写”，在这里刚好获取则刚好相反 “-” + “小写”==》“大写” 如果是“-”+ “数字”，则保持原样不变综上所述，在使用自定义属性时兼容各浏览器时，需要注意

6002 0

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

一、HTML5 新增 input 表单属性 ---- HTML5 新增 input 表单属性 : required 属性 : 属性值为 required , 一旦设置了该属性 , 则表单的内容就是必填项..., 不能为空 ; placeholder 属性 : 属性值为提示文本 , 又称为占位符 , 用于设置表单的提示信息 , 如果有默认值则不显示 ; multiple 属性 : 属性值为 multiple..., 可以选择多个文件提交 ; autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦 , 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ; autocomplete...需要满足以下两个条件 : 为表单添加 name 属性自动补全的内容需要之前提交成功过 1、required 属性 required 属性 : 属性值为 required , 一旦设置了该属性 ,...autofocus 属性 : 属性值为 autofocus , 设置了该属性 , 可以自动进行聚焦 , 页面加载完毕后 , 自动聚焦到设置了该属性的表单 ; 如 : 百度搜索引擎 , 网页加载好 ,

2.9K3 0

HTML中的自定义数据属性*data-**

data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。...定义和用法 data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。...data-* 属性包括两部分： ①属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符。 ②属性值可以是任意字符串。...注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。...*可以使用遵循 xml名称生产规则的任何名称来被替换，并具有以下限制： 1.该名称不能以xml开头，无论这些字母是大写还是小写； 2.该名称不能包含任何分号 (U+003A)； 3.该名称不能包含A

1.1K2 0

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112709.html原文链接：https://javaforall.cn

3132 0

HTML5 pattern属性

<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter ...

6612 0

HTML5语法,标签,属性

HTML 5的语法 html5相对于以前的html（html4，xhtml等）更加简洁更加的人性化。...这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。 2、不再使用frame框架。 frameset、frame、noframes。...HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。...HTML 5全局属性可直接在标签里插入的：data-自定义属性名字； hidden（直接放上去就是隐藏）； spellcheck=”true”（语法纠错）； tabindex=”1”（Tab跳转顺序...，整个页面的文本都可以编辑了）； HTML 5的兼容性 HTML5有部分内容兼容到IE9，IE8及以下对H5完全不兼容后面的内容不再考虑此类浏览器。

2.3K2 0

HTML5新增属性学习笔记

1、form属性表单内的从属元素，可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。...="testForm"> 2 3 4 详细学习内容可参看：HTML5...新增的form属性简介 2、formaction属性给所有的提交按钮增加formaction属性，可以通过不同的按钮将表单提交到不同的页面。...6、list属性为单行文本框特有属性，配合datalist标签使用。属性值为datalist标签的id。...Hello">Hello Good Afternoon 详细学习内容可参看：HTML5

1.8K9 0

HTML5全局属性汇总

局部属性和全局属性局部属性：有些元素能规定自己的属性，这种属性称为局部属性。...3、contenteditable 属性 contenteditable 是 HTML5 中新增加的属性，，其用途是让用户能够修改页面上的内容。从左到右从右到左 5、draggable 属性 draggable 属性是 HTML5 支持拖放操作的方式之一...6、dropzone 属性 dropzone 属性是 HTML5 支持拖放操作的方式之一，与 draggable 属性搭配使用。 7、id 属性 id 属性用来给元素分配一个唯一的标识符。...），具体也可以看一下这篇介绍 HTML5 的 hidden 属性 <!

9860 0

HTML5新增全局属性

HTML5新增了全局属性概念，所谓全局属性就是可以对任何元素都可以的属性。...该属性还有一个隐藏的inherit（继承）状态，如果属性值为true时表示为可编辑状态，如果属性值为false时表示为不可编辑状态，如果是未设定属性值，则由inherit状态来决定，如果元素的父元素是可编辑的...属性值有on和off，当该属性值为on时页面可编辑。属性值为off表示页面不可编辑。...3、hidden属性在HTML5中所有的元素都允许使用一个hidden属性，该属性是布尔值属性，可以被设定为true或者false。当设为true时，元素处于不可见状态。...4、spellcheck属性该属性是HTML5对于input元素与textarea元素提供的一个新属性，它的功能是针对用户输入的内容进行拼写检查和语法检查，spellcheck属性是一个布尔值属性，具有

8732 0

【HTML5】HTML5 多媒体标签 ② ( 视频标签＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

一、HTML5 视频标签 video ---- HTML 5 的视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同...: controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ; autoplay 属性 : 值为 autoplay...; 播放器的宽高建议只设置一个 , 避免失真 ; height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ; loop 属性 : 值为 loop , 设置播放器循环播放...; poster 属性 : 值为图片 url 路径 , 设置视频位置等待加载时的图片 ; preload 属性 : 设置 auto , 表示预先加载视频 ; 设置 none , 表示不预先加载视频...content="IE=edge"> HTML5

2.3K2 0

HTML5新增的标签与属性

一、关于DTD HTML5 不基于 SGML，所以不需要引用 DTD（HTML 4.01 基于 SGML）二、HTML5结构标签标记定义一个页面或一个区域的头部标记定义导航链接...ogg JS中new Audia() 等同于 html 上加一个标签 chrome和opera不能自动播放，需要一个页面元素上的交互才可以 width / height 属性没有作用...表单属性 autocomplete：自动完成，适用于标签，以及以下类型的标签： text, search, url, telephone, email, password...链接属性 size target <base href=“http://localhost...其他属性 defer：加载完脚本后并不执行，而是等整个页面加载完之后再执行 async：加载完脚本后立刻执行，不用等整个页面都加载完，

1.5K1 0

HTML5(一)——新增元素和属性

属性规定form或input域应该拥有自动完成功能，当input聚焦时，浏览器应该在域中显示填写的选项。...新增表单属性 H5中新增表单属性指 form 和 input 元素新增属性。 form新属性及意义 autocomplete ：规定form域自动完成功能。...： formaction - 重写表单的 action 属性 formenctype - 重写表单 enctype 属性 formmethod - 重写表单 method 属性 formnovalidate...- 重写表单 novalidate 属性 formtarget - 重写表单的 target 属性 min、max、step属性三者用于对数字、日期类型输入框的限制和约束。...multipel属性：规定输入域中可选择多个值。适用于 email 和 file 两种类型。 pattern属性：验证input域的模式。

1.3K3 0

HTML5(一)——新增元素和属性

1.3K2 0

HTML5 download属性无效的问题

如果url指向第三方资源，download会失效，表现和不使用download时一致——浏览器能打开的文件，浏览器会直接打开，不能打开的文件，会直接下载。浏览器...

4.7K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

HTML5 data-*属性规则？

相关·内容

HTML5 *data-** 自定义属性

HTML5的*data-**自定义属性

jQuery获取*data-**属性值

html的*data-**属性

HTML5 自定义属性 *data-** 和 jQuery.data 详解

采用HTML5之data-机制自由提供数据

HTML5的*data-** 要注意的问题

【HTML5】HTML5 新增 input 表单属性 ( required 属性 | placeholder 属性 | autofocus 属性 | autocomplete 属性 )

HTML中的自定义数据属性*data-**

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

HTML5 pattern属性

HTML5语法,标签,属性

HTML5新增属性学习笔记

HTML5全局属性汇总

HTML5新增全局属性

【HTML5】HTML5 多媒体标签 ② ( 视频标签＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

HTML5新增的标签与属性

HTML5(一)——新增元素和属性

HTML5(一)——新增元素和属性

HTML5 download属性无效的问题

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐