6

出于好奇，如果您不使用元素的 ID 或类，而是简单地使用 JS 创建自定义元素并使用 CSS 对它们进行样式化，那么它将对站点或页面产生什么影响（如果有的话）？

例如，如果我创建一个元素“容器”并将其用作<container> 而不是<div class="container">，是否存在性能差异或什么？

我没有看到这个经常被使用，我想知道为什么？

4

4 回答 4

2

HTML 是标准化的，您不能简单地发明新元素。一些浏览器会呈现它们无法识别的元素的文本内容，但并非所有浏览器都会呈现，在这种情况下，您的 HTML 将不是有效的 HTML。

于 2011-11-01T13:37:11.620 回答
2

这就像在说“如果我尊重英语的句法和语法，但把所有的词都编出来怎么办？” 虽然这种想法造就了好诗，但它并不适合技术领域；）

HTML 有一组已定义的有效标签。如果您使用任何编造的标签，它将是无效的。

现在，这并不意味着您无法摆脱它；在万维网上宽恕是默认设置，因此如果您使用自己制作的标签，它不会是世界末日......但这仍然是一个坏主意，因为您无法保证浏览器如何处理这些标签。

因此，唯一真正的答案是“如果不使用 ID 或类作为元素，您只需使用 JS 创建自定义元素并使用 CSS 对它们进行样式化，它将对页面产生什么影响？” 是不是什么事情都可能发生。由于您将使用非标准的 HTML 元素，因此您最终会得到非标准的结果，这是我们任何人都不应该尝试和预测的。

如果您真的想（和/或需要）使用自定义元素，请查看 XML。在 XML 中，您可以“组成”您的标签，但仍然可以应用 CSS 并在浏览器中打开文档。

例如，保存以下两个文件，然后在浏览器中打开 XML 文件：

索引.xml

<?xml-stylesheet href="style.xml.css"?>
<example>
 <summary>
     This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
 </summary>
 <main>
     <container>This is the stuff in the container</container>
 </main>
</example>

样式.xml.css

summary {
    display:none;
}
main container {
    border:2px solid blue;
    background:yellow;
    color:blue;
}
于 2011-11-01T14:27:21.723 回答
1

HTML是一种已定义的语言，格式中的元素和标签具有一定的含义。你不能发明一个新元素，不仅因为浏览器可能会不一致地渲染这些元素，还因为文档的含义和结构变得无效。

您最好使用对您希望提供的内容具有正确含义的元素。如果您需要一个通用容器来进行样式设置，那么正确的元素是 div。有类似的元素也提供了一些语义含义。我建议查看 HTML 标记索引和 HTML5 医生以帮助选择正确的元素。

听起来好像<div class="container">...</div>最接近您的简短描述所需要的。

于 2011-11-01T13:46:57.037 回答
0

如果自定义元素使您的 HTML 更易于阅读和管理，请继续使用它们。

自从提出这个问题以来，自定义元素已被添加到WHATWG HTML Living Standard以及相关的 JavaScript API。一些 Web 组件框架已经在实现其中的一些规范。它不再像 2011 年那样成为禁忌。（我记得在尝试使用新发布的 HTML5 元素时，在处理 Internet Explorer 中的 DOM 时遇到了一些不愉快的问题。）

截至撰写本文时（2018 年 11 月），自定义元素已在多个主要浏览器中实现。然而，MDN 将 Microsoft Edge 列为尚未实现自定义元素，尽管2015 年的一篇博客文章称 Edge 团队“很高兴继续支持并为这一旅程做出贡献”。

于 2018-11-12T18:54:30.313 回答