• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 全面解析HTML5中的标准属性与自定义属性

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

作者:夏梦竹 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,标准属性,自定义属性,属性等相关知识,夏梦竹 希望在学习及工作中可以帮助到您

正如 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文件:

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

  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等

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5进阶段内联标签汇总(小篇)
  • 2018-12-03关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法 _html5教程技巧
  • 2018-12-03如何理解 Web 语义化?
  • 2017-08-06Html5新特性用canvas标签画多条直线附效果截图
  • 2018-12-03怎样用canvas绘制星空,月亮,大地,添加文字
  • 2017-08-06深入剖析webstorage[html5的本地数据处理]
  • 2018-12-03HTML5-结构
  • 2018-12-03对HTML5中表单新增属性的分析
  • 2018-12-03用CSS固定footer在底部的疑问?
  • 2018-12-03自己学习前端开发的,公司对 Dreamweaver 和 fl 要求高不高?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5中对accesskey属性的解释与规定
    • html5 在pc端有没有类似于 初页app 一样的傻瓜制作 网站?急需!?
    • 电子行业中,以0x开头颜色表示法和以#开头的颜色表示法有什么区别?
    • HTML5本地存储之IndexedDB
    • H5之12__触摸与单击:基本的事件处理
    • phonegap使用方法介绍(五)本地存储的实现方法
    • h5表单介绍和表单验证失败问题实例
    • 浅谈html5增强的页面元素
    • 突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述_html5教程技巧
    • HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有