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

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 标签中包含错误的属性时会发生什么？

what happens when we include wrong attributes in html tags?

html

browser