全面解析HTML5中的标准属性与自定义属性


Posted in HTML / CSS onFebruary 18, 2016

正如 HTML5 语法中所阐述的,元素可以包含属性(attributes)给一个元素设置各种属性(properties)。

有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,看起来如下面的示例所示。

下面是一个使用 HTML5 属性的例子,演示了如何用名为 class 的属性和值 “example” 标记一个 div 元素:

<div class="example">...</div>
属性只能在起始标签中指定,绝对不能用在结束标签中。

HTML5 属性不区分大小写,可以全部大写或者混合使用,尽管最常见的约定是始终使用小写。

标准属性
下面列出的属性几乎所有的 HTML5 标签都支持。

属性 选项 功能
accesskey 用户自定义 定义访问元素的键盘快捷键。
align right, left, center 水平对齐标签。
background URL 在元素后面设置一个背景图像。
bgcolor 数值,十六进制值,RGB值 在元素后面设置一个背景颜色。
class 用户定义。 分类一个元素,便于使用级联样式表。
contenteditable true, false 定义用户是否可以编辑元素的内容。
contextmenu Menu id 为元素定义上下文菜单。
data-XXXX 用户定义。 自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable true,false, auto 定义用户是否可以拖动元素。
height 数字值 定义表格,图像或表格单元的高度。
hidden hidden 定义元素是否应该可见。
id 用户定义。 命名元素,便于使用级联样式表。
item 元素列表。 用于组合元素。
itemprop 条目列表。 用于组合条目。
spellcheck true, false 定义元素是否必须有拼写或错误检查。
style CSS 样式表。 给元素定义内联样式。
subject 用户定义 id。 定义元素关联的条目。
tabindex Tab number 定于元素的 tab 键顺序。
title 用户定义。 元素的“弹出”标题。
valign top, middle, bottom HTML 元素内标签的垂直对齐方式。
width 数字值。 定义表格,图像和表格单元的宽度。

自定义属性
HTML5 还引入了一个新特性,就是可以添加自定义的数据属性。

自定义数据属性以 data- 开头,基于我们的需求命名。下面是一个简单的例子:

<div class="example" data-subject="physics" data-level="complex">
...
</div>
上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。

在HTML元素中添加自定义属性,通过JavaScript进行访问,如果你之前有尝试过,你会发现,容易忽略标记验证,而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。

创建HTML5文件:

如果你还没想好要使用哪一个,可以复制下面的代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html   
  2. >  
  3.     
  4. <  
  5. html  
  6. >  
  7.     
  8. <  
  9. head  
  10. >  
  11.     
  12. <  
  13. script  
  14. >  
  15.     
  16. /*functions here*/     
  17. </  
  18. script  
  19. >  
  20.     
  21. </  
  22. head  
  23. >  
  24.     
  25. <  
  26. body  
  27. >  
  28.     
  29. </  
  30. body  
  31. >  
  32.     
  33. </  
  34. html  
  35. >  

 
在body中设置自定义元素,在head部分脚本区域利用JavaScript元素进行访问。

创建元素:

首先,添加一些简单的内容和自定义属性以及ID等元素,以便我们能够识别JavaScript示例。

XML/HTML Code复制内容到剪贴板
  1. <  
  2. div id="product1" data-product-category="clothing"  
  3. >  
  4.     
  5. Cotton Shirt     
  6. </  
  7. div  
  8. >  

 
正如你所看到的那样,自定义属性的形式为:“data-*”,在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性,这是唯一有效的方法。因此,如果你想验证网页是否有效可才采用这种方法。

当然,项目细节部分决定了自定义属性对你是否有用,以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。

自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素,例如,动画显示功能。如果没有标准的HTML元素,我们建议使用自定义属性。

添加测试按钮

在页面上利用自身的JavaScript元素即可执行事件,前提是将下面的代码添加到页面中:

XML/HTML Code复制内容到剪贴板
  1. <  
  2. input type="button" value="get attribute" onclick="getElementAttribute('product1')"  
  3. />  

 
获取属性:

在JavaScript中访问属性最常用的方法是使用“getAttributes”,这也是我们要做的第一步。在页面的head脚本区域添加以下函数:

JavaScript Code复制内容到剪贴板
  1. function getElementAttribute(elemID) {     
  2. var theElement = document.getElementById(elemID);     
  3. var theAttribute = theElement.getAttribute('data-product-category');     
  4. alert(theAttribute);     
  5. }   

这里,我们为示例增加了alert 值,当然你也可以根据自身需求在脚本中添加。

获取数据:

你可以使用元素数据集来替代DOM “getAttributes”,这或许更有效,尤其是在某种情况下,代码通过多种属性进行迭代,然而,浏览器对数据集的支持依然非常低,所以牢记这一点,此代码与//后面的方法一样可执行相同的进程。

//var theAttribute = theElement.getAttribute('data-product-category'); 
var theAttribute = theElement.dataset.productCategory;
从属性名称开始在数据集中删除“data-”,它仍然包含在HTML中。

请注意,如果你的自定义属性名称中有一个连字符,当通过数据访问时这会呈现出camel-case形式,即(“data-product-category” 变成“productCategory”)。

其他模块、函数

我们已经获取该属性,脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。

JavaScript Code复制内容到剪贴板
  1. //DOM method       
  2.     
  3. theElement.setAttribute('data-product-category''sale');      
  4. //dataset version       
  5.     
  6. theElement.dataset.productCategory = "sale";     
  7. 你也可以使用DOM方法或者数据集来删除某个属性:   
  8.   
  9. //DOM method     
  10. theElement.removeAttribute('data-product-category');    
  11. //dataset version     
  12. theElement.dataset.productCategory = null;   

在HTML5中实现自定义属性技术上并不是很复杂,真正困难的是选择使用的方法是否适用于你的项目;如果适用,该如何使其更有效?请记住,现在启用数据集方法作为页面功能还为时尚早,毕竟很多浏览器暂不支持此功能。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 #HTML / CSS
HTML5实现预览本地图片
Feb 17 #HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 #HTML / CSS
HTML5未来发展趋势
Feb 01 #HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 #HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 #HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 #HTML / CSS
You might like
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
网页javascript精华代码集
2007/01/24 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
让python在hadoop上跑起来
2016/01/27 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
超市营业员岗位职责
2013/12/20 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
中职生自荐信范文
2014/06/15 职场文书
大学生学习计划书
2014/09/15 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js