Question

我注意到当我为html标记包含非现有属性名称时，浏览器不会以任何方式进行投诉。例如

<!DOCTYPE html>
<html>
    <head test1="abc">
        <title test2="cba">My Sample Project</title>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

这里到底发生了什么？当浏览器中的html解析器不知道如何处理它时，它是否会忽略属性？我还发现，当我们包含非现有标签时也会出现相同的行为。这是否意味着浏览器会解释它可以理解的HTML并且不会抱怨文件中的任何其他内容？

Answer 1

如果之前的浏览器只是为他们无法识别的所有内容提供错误，那么对浏览器的任何轻微升级都会导致很多问题。也就是说，该页面将无法通过W3C验证;一般不建议使用属性（如果，从现在开始两年，test1是一个有效的HTML5属性，触发浏览器的单元测试功能怎么办？好的，一段时间。）

如果您确实想要为随机目的制作属性，我建议您使用data-启动它们。

Answer 2

您可以在技术上拥有您想要的任何类型的属性，并且可以在整个html，css和javascript中访问它。

示例：

<h1 id="heading" my-attribute="foo" another="bar">My Heading</h1>

CSS

h1[my-attribute=foo]{
   background:red;
}

的Javascript

console.log(document.getElementById('heading').getAttribute('my-attribute');//logs "foo"

这在技术上也有效：

<mytag>Something awesome.</mytag>

但是，我们有一个标准模型（W3C）。我们是否希望开发人员重新学习他们将在项目中使用的所有标签？或者弄清楚如何访问这些标签的某些属性？它可以很快失控。

如何进行自定义属性

使用HTML5，现在使用data-创建自定义属性是标准做法：

<h1 data-alt="my alternate data">This is totally standard compliant</h1>

这些是100％有效，符合标准的自定义属性，您可以在MDN深入阅读它们：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

这允许我们标记自定义数据，并确保新的浏览器不会出现并以奇怪的方式处理我们的属性（如Katana314在更简洁的答案中所说）。

当我们在html标签中包含错误的属性时会发生什么？

2 个答案: