正如 HTML5 语法中所阐述的,元素可以包含属性(attributes)给一个元素设置各种属性(properties)。
有些属性被定义为全局的,可以用在任何元素上,而其他的被定义为元素特有的。所有的属性都有一个名称和一个值,看起来如下面的示例所示。
下面是一个使用 HTML5 属性的例子,演示了如何用名为 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- 开头,基于我们的需求命名。下面是一个简单的例子:
...
上面的例子中两个叫做 data-subject 和 data-level 的自定义属性在 HTML5 中是完全有效的。我们还可以使用 JavaScript API 或者在 CSS 中以获取标准属性类似的方式获取它们的值。
在HTML元素中添加自定义属性,通过JavaScript进行访问,如果你之前有尝试过,你会发现,容易忽略标记验证,而HTML5可以为你提供在有效的网页内创建并使用自己的元素属性的功能。
创建HTML5文件:
如果你还没想好要使用哪一个,可以复制下面的代码:
- nbsp;html
- >
- html
- >
- head
- >
- script
- >
- /*functions here*/
- script
- >
- head
- >
- body
- >
- body
- >
- html
- >
在body中设置自定义元素,在head部分脚本区域利用JavaScript元素进行访问。
创建元素:
首先,添加一些简单的内容和自定义属性以及ID等元素,以便我们能够识别JavaScript示例。
- div id="product1" data-product-category="clothing"
- >
- Cotton Shirt
- div
- >
正如你所看到的那样,自定义属性的形式为:“data-*”,在“data-”部分设定名称或者你选定的名称。在HTML5中使用自定义属性,这是唯一有效的方法。因此,如果你想验证网页是否有效可才采用这种方法。
当然,项目细节部分决定了自定义属性对你是否有用,以及该将其如何命名。这个示例可适用于不同产品类别的零售网站。
自定义属性允许你以一种特殊的方式利用页面内的JavaScript代码来设置元素,例如,动画显示功能。如果没有标准的HTML元素,我们建议使用自定义属性。
添加测试按钮
在页面上利用自身的JavaScript元素即可执行事件,前提是将下面的代码添加到页面中:
- input type="button" value="get attribute" onclick="getElementAttribute('product1')"
- />
获取属性:
在JavaScript中访问属性最常用的方法是使用“getAttributes”,这也是我们要做的第一步。在页面的head脚本区域添加以下函数:
- function getElementAttribute(elemID) {
- var theElement = document.getElementById(elemID);
- var theAttribute = theElement.getAttribute('data-product-category');
- alert(theAttribute);
- }
这里,我们为示例增加了alert 值,当然你也可以根据自身需求在脚本中添加。
获取数据:
你可以使用元素数据集来替代DOM “getAttributes”,这或许更有效,尤其是在某种情况下,代码通过多种属性进行迭代,然而,浏览器对数据集的支持依然非常低,所以牢记这一点,此代码与//后面的方法一样可执行相同的进程。
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
从属性名称开始在数据集中删除“data-”,它仍然包含在HTML中。
请注意,如果你的自定义属性名称中有一个连字符,当通过数据访问时这会呈现出camel-case形式,即(“data-product-category” 变成“productCategory”)。
其他模块、函数
我们已经获取该属性,脚本仍然可以设置和删除。下面的代码演示了如何使用标准的JavaScript模块和数据集来设置属性。
- //DOM method
- theElement.setAttribute('data-product-category', 'sale');
- //dataset version
- theElement.dataset.productCategory = "sale";
- 你也可以使用DOM方法或者数据集来删除某个属性:
- //DOM method
- theElement.removeAttribute('data-product-category');
- //dataset version
- theElement.dataset.productCategory = null;
在HTML5中实现自定义属性技术上并不是很复杂,真正困难的是选择使用的方法是否适用于你的项目;如果适用,该如何使其更有效?请记住,现在启用数据集方法作为页面功能还为时尚早,毕竟很多浏览器暂不支持此功能。

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3 Linux新版
SublimeText3 Linux最新版