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

在HTML5中，标准属性指的是在W3C HTML规范中提到的属性，它们被广泛应用于各种HTML元素。自定义属性则指的是由开发者自己定义的属性，在HTML中通常使用data-*的形式定义。在本篇文章中，我们将详细讲解HTML5中的标准属性与自定义属性。

标准属性

href

href属性用于定义页面之间的链接。可以在a元素、base元素、area元素、link元素和@import中使用。

示例：

<a href="https://www.example.com">Example Website</a>

src

src属性用于指定一张图片或一个页面的URL。通常在img元素、iframe元素和script元素中使用。

示例：

<img src="example.jpg" alt="Example Image">

自定义属性

data-*

自定义属性通常以data-*的形式出现，其中*可以是任意字符或组合。这些自定义属性可以在JavaScript中任意使用，并且可以通过CSS样式来选择。

示例：

<div data-color="blue" class="box"></div>

自定义属性的JavaScript使用

为了能够在JavaScript代码中使用自定义属性，需要使用element.dataset获取自定义属性的值。

示例：

<div id="box" data-color="blue"></div>

<script>
var myElement = document.getElementById('box');
console.log(myElement.dataset.color); // 输出blue
</script>

自定义属性的CSS选择器

为了使用CSS选择器来选中使用自定义属性的元素，需要使用[attribute=value]的形式，其中attribute是自定义属性的名称，value是属性值。

示例：

<style>
[data-color="red"] {
  background-color: red;
}

[data-color="green"] {
  background-color: green;
}

[data-color="blue"] {
  background-color: blue;
}
</style>

<div data-color="red" class="box"></div>
<div data-color="green" class="box"></div>
<div data-color="blue" class="box"></div>