非标准标签是如何被浏览器处理的？

Question

我正在重构一份旧代码，发现其中有一些自定义的非标准标签，比如：

<close></close>

由于这些不是自定义元素，而只是作为divs使用，我倾向于删除它们并替换为以下结构：

<div class="close"></div>

同时，我在想是否不属于此列表https://www.w3schools.com/tags/的标签元素会被浏览器以不同方式处理，它们是否需要更多资源来进行处理？

- Sergei Basharov

---

未知元素采用所有非继承CSS属性的初始值，对于 display 属性来说是 inline，因此它们更像 <span> 而不是 <div>。 - Alohci

Answer 1

我想唯一需要注意的是，问题中类似于 <close></close> 元素这样的未知元素会在DOM中暴露出HTMLUnknownElement 接口。除此之外，浏览器处理它们的方式与普通已知元素相同。浏览器中的HTML解析器将它们解析到DOM中，就像处理普通已知元素一样。至于问题中有关未知元素是否需要更多资源来处理的部分：考虑到浏览器并没有对它们进行任何特殊处理，处理它们所需的浏览器资源要求与处理 div 或其他元素相同。

- sideshowbarker

Answer 2

您可以阅读文章以了解更多信息：https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

它们不需要更多资源来处理，因为它们就像一个标准标签。

使用非标准标签时请注意：

• 谷歌不会因在Html文档中使用非标准HTML标签而惩罚您的网站。但是当我们谈论谷歌时，它与谷歌机器人和搜索引擎结果有关。当机器人索引或读取您的页面时，它会检查文档类型，根据类型爬行您的站点。基本上，通过使用自定义标签，这些机器人会感到困惑，可能会对您的内容产生较小的权重，并且可能不会显示在搜索结果中。

• 它看起来更好。但是您必须考虑跨浏览器兼容性，毕竟您是为全世界编写的。某些浏览器可能以不同的方式呈现它，特别是IE。因此，最好练习使用标准的Html标签。

• 在jquery中，选择器概念对所有元素都相同。如果使用自定义标签，则它可能会在IE中出现问题。

- Ave

Answer 3

非标准元素的处理方式与简单的<div>相同。

但是它可能具有不同的含义。例如，对于某些页面爬虫（如Google bot），<div class="section">和<section>具有不同的语义含义。

此外，可能会有一些JS代码与这些标签一起使用，更改它将破坏JS代码。

例如，$('close')将无法与<div class="close">一起使用。

---

HTML本质上就是XML，因此任何标签都可以用任何类型的属性编写到HTML中。只有在某些工具处理这些标签时才会有所区别。

- Justinas