如何通过浏览器处理非标准标签？

Question

我正在重构旧代码并看到一些自定义的非标准代码，如下所示：

<close></close>

由于这些不是custom elements，而只是作为divs工作，我倾向于删除这些并替换为这样的结构：

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

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

Answer 1

我想唯一值得注意的是，未知元素（例如问题中的<close></close>元素）会在DOM中公开HTMLUnknownElement interface。

否则，浏览器如何处理它们并没有什么特别之处。浏览器中的HTML解析器将它们解析为DOM，就像正常已知元素一样。

关于未知元素是否需要更多资源进行处理的问题部分，鉴于浏览器不对它们做任何特殊处理，处理它们的浏览器资源要求与它们的用途没有什么不同一个div或其他什么。

Answer 2

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

但它可能有不同的含义。例如。 <div class="section">和<section>对某些网页抓取工具（例如Google bot）具有不同的语义含义。

也可能有一些JS代码可以使用这些标记，更改它会破坏JS代码。

E.g。 $('close')无法与<div class="close">

一起使用

Html只不过是XML，因此任何标记都可以用任何类型的属性写入HTML。只有当某个工具正在处理这些标记时，它才有意义。

Answer 3

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

它们不需要更多资源来处理它们，因为它像standard-tag。

使用non-standard-tag时注意：

• 对于在Html文档中使用非标准HTML标记，Google不会惩罚您的网站。但是，当我们谈论谷歌时，它就是关于谷歌机器人和搜索引擎的结果。当机器人索引或读取您的页面时，它会根据文档的类型来检查文档的类型。基本上，通过使用根据doctype不是标准的自定义标记，您会混淆那些可能导致内容减轻并且可能无法在搜索结果中显示的机器人。

• 你看起来更好。但是，在为全世界编写它之后，您还必须考虑跨浏览器兼容性。有些浏览器会以不同的方式呈现它，尤其是IE。所以练习使用标准的Html标签是很好的。

• 在jquery中，Selector概念对于所有元素都是相同的。如果使用自定义标签，它可能会在IE中中断。