logo标签列表

使用未知的HTML标签是否可以？

html
53

如果我理解有误，请纠正我，但据我所知，在标记中使用未知的HTML标签（即在HTML规范中未定义的标签，比如说<foobar>）将最终在HTML 5浏览器环境中被视为常规的<div>。

我在想：这种做法有多可行？我的意思是，如果我在我的标记中使用未知的HTML标签，会遇到什么问题？会不会一只迅猛龙在接下来的几秒钟内扑向我？

我问这个问题的原因是，如果这些标签推迟到<div>，与其分配识别模块的类名，我可以更具语义性地使用这些标签。例如，请看这篇文章中的.media类。现在，如果我不编写用于目标.media的CSS，而是改为将其设置为目标<media>，我认为这使得标记更易读和可维护，但我承认它不是“正确”的HTML。

编辑

透明度起见，我确实找到了几年前的此SO问题。它已被关闭，但我认为我的措辞很有道理。我承认这是一个紧密的重复，但是由于在网络开发人员之间对该主题的观点的一般环境可能发生了变化，所以这是几年前的问题。

13个回答
109

user1309389提供了一个非常好的答案，我同意他们对规范的呼吁。但是我不同意他们的结论，并且我认为他们关于虚构元素导致“未定义行为”的说法是错误的。我想提出一种替代思考方式，根植于规范和浏览器实际处理虚构元素的方式。

现在是2015年，我们正处于广泛采用CustomElement规范的边缘，并且polyfills已经可以轻松获得。现在是一个很好的时机去思考“创造自己的元素”。在不久的将来，您将能够以完全标准和支持的方式创建具有自己选择的标签和行为的新元素，每个人都可以喜欢。但在此之前，直到所有浏览器都实现该功能，并且大多数人都使用支持的浏览器之前，您可以利用Polymer或X-Tags项目的辛勤工作，以一种几乎标准和大部分支持的方式来查看自定义元素的未来，这是做正确事情的可能性非常高的。但这并没有回答您的问题，坦白地说，“只需使用X”或“不要使用X”比“规范如何覆盖此内容以及浏览器如何处理此内容”更少有帮助。因此，以下是我所喜欢的。

在很多Web开发社区的真诚建议（有时是尖叫声）反对下，过去一年我一直在所有的生产项目中使用“虚构”的元素，没有使用polyfill，并且我还没有遇到无法解决的问题（至少目前为止），也没有收到任何投诉。如何做到的？通过依赖HTMLUnknownElement的标准行为，该W3C规范部分涵盖了“虚构”元素的情况。如果浏览器遇到无法识别的HTML元素，则应该以一种明确定义和明确的方式处理它，并且HTMLUnknownElement定义了该行为，您可以在此基础上构建。 HTMLUnknownElement还必须足够强大和正确，以在遇到现在已过时的所有标签（如<blink>标签）时，“不破坏Web”。虽然不建议使用HTMLUnknownElement，但从理论上和实践上来看，如果您知道自己在做什么，绝对不会有任何危害。

那么HTMLUnknownElement是如何工作的呢？它只是HTMLElement接口的扩展，这是所有HTML元素的标准接口。与大多数其他元素不同的是，HTMLUnknownElement没有添加任何特殊行为 - 您将获得一个原始元素，没有任何特殊行为或使用约束规则的装饰。HTMLDivElement接口的工作方式几乎完全相同，扩展HTMLElement并几乎不添加任何其他行为。简而言之，自定义元素与使用div或span几乎相同。

我喜欢“创造”元素的思维方式。您应该基于多种因素使用或发明HTML元素，从使标记更易读的清晰度，到浏览器、屏幕阅读器和搜索引擎解析代码的方式，再到您的代码被某些客观度量视为“正确”的可能性。我很少使用自定义元素，但我正如Richard所描述的那样使用它们，以使HTML作者更有意义，而不仅仅是对提取元数据的计算机服务有意义。当在团队中一致使用时，可以获得巨大的好处，因为自定义元素可以简洁地表达它们的用途。

我特别喜欢使用虚构元素来表示我将使用JS为元素定义额外行为。例如，如果我有一个元素将会被JS添加/删除子元素，我会使用一个虚构元素作为提示，表明这个元素受到特殊行为的影响。同样地，当标准元素足够时，我不使用虚构元素。在我的代码中，你会看到<dynamic-list>和<div>并存。
关于那些令人讨厌的验证器。是的，使用虚构的元素在“验证器”中没有通过“有效性”检查。但是，许多现代HTML和JS开发常用的功能、模式和系统都无法通过W3C验证器。验证器并不是法律 - 规范才是。而规范并不具约束力 - 所有浏览器的实现才是。随着HTML的灵活性增加和浏览器与规范之间的关系转变，多年来验证器的效用已经逐渐减弱。对于不熟悉HTML并需要指导的人来说，验证器非常有用。但是，如果您习惯于根据规范和浏览器实现来获得指导，就没有理由担心被验证器淘汰。当然，如果您遵循Google、Apple、Microsoft等公司提供的许多实验性功能实施的指南，您将在验证器范围之外工作。只要您是有意为之且了解足够，这绝对可以做得到。
因此，如果您要创建自己的元素并依赖HTMLUnknownElement，请不要将其视为野西部。您需要遵循一些简单的规则。

  1. 在标签名称中必须使用连字符。这样做，可以确保您永远不会与HTML规范的未来版本发生冲突。因此，永远不要使用<wrong>，而应该使用<quite-right>。

  2. 虚构的元素不能自闭合 - 必须使用闭合标签关闭它们。您不能只写<wrong>或<still-wrong />，而应该写<totally-good></totally-good>。

  3. 您必须在CSS中为元素定义一个display属性，否则渲染行为是未定义的。

这就是全部内容了。如果您遵循这些步骤，您应该能够在IE9及以上版本中使用虚构元素，并依靠HTMLUnknownElement的安全保障。对我来说，好处远远超过成本，所以我一直在大量使用这种模式。我运营一个面向主要工业企业的SaaS网站，到目前为止，我没有遇到任何问题或投诉。如果您必须支持旧版IE，则明智的做法是远离任何“2015”技术或它们的粗略近似，并安全地留在规范的常用部分。
因此，总之，对于你的问题的答案是“是的，如果你知道你在做什么”。
1
非常好的答案，谢谢你。 - MichaelB
13
我是W3C HTML验证器的维护者。最近，我为该验证器添加了对自定义元素的支持。简单来说，该验证器不再报告具有连字符的元素名称（例如quite-right）的错误。如果需要更多详细信息，请参阅https://dev59.com/p4fca4cB1Zd3GeqPodpu#28711028。 - sideshowbarker
2
这里最好的答案，实际上回答了问题。 - Numbnut
1
我刚刚在我正在开发的页面上开始使用这些，所以我认为我应该检查一下它是否可以在所有（或大多数）浏览器上正常工作。如果它可以在IE9上正常工作，那么没有任何理由它不能在好的浏览器上运行。感谢这个（五年前的）答案，以及为使用这些美妙工具制定的“规则”，使HTML更易于阅读。 - brandonmack
1
优秀的回答——在虚构元素争论中表现出理智的罕见表达。 - Mitya
显示剩余2条评论
14

在编写HTML时，您应该始终遵循其相应规范的定义。"定义"新标签是一种极端的方法。它可能通过浏览器检查，因为它实现了各种故障保护措施，但这并不保证。最好情况下，您正在进入未定义行为的领域。更不用说您将无法通过验证测试，但您似乎已经意识到了这一点。

如果您希望在标记中更具语义表达性，可以使用HTML5，它定义了许多更具描述性的标签，用于描述页面结构，而不是需要附加id或class的通用

标签。

总之，简短的回答是：不，这是不好的做法，您不应该这样做，并且在开发过程中可能会出现意想不到的问题。

5
Web Components 是什么？ - Zorgatone
3
在开发过程中难免会出现未预料到的问题。 <future>因其本质而言，未来是未知的。</future> - Bryan Grace
请查看此处以获取详细答案：https://dev59.com/T2gv5IYBdhLWcg3wHdR_#27869027 - Arlen Beiler
10
10

不行。您将无法通过验证，您将在跨浏览器时遇到随机问题，并且您将被这些恐龙吃掉。如果您想要页面可预测的行为，则CSS是答案。

1
当然，我们不想被恐龙吃掉。说真的，这些观点很有道理。 :) - Richard Neil Ilagan
3
2
浏览器互通性的第一条规则是：不要出现错误。无论你测试了多少种浏览器，总会有一些浏览器你没法测试，例如因为它们还不存在。
此外，目前大多数浏览器将未知元素视为而非
。
如果真的在意源代码的可读性(*), 您应该研究XML+XSLT。这样，您可以使用任何标签名称，并使其按您想要的任何方式运作，而无需担心将成为HTML某个未来版本中的真实元素。
一个好的实际示例是元素。如果网站曾经使用过并且依赖于这个元素本身没有样式或特殊内容的概念，那么他们现在会遇到麻烦！
(*) 使用XML+XSLT，可读性将在XML部分中，而不是显然在XSLT部分中。
1
在我的情况下，我在基于Webkit的游戏GUI系统中大量使用它们，一切都正常。
1

一般不建议使用，例如IE无法将CSS样式应用于未知标签。

所有其他浏览器将未知标签呈现为内联元素（这会导致嵌套问题）。

我建议您阅读以下文章：http://diveintohtml5.info/其中有一个关于未知标签的部分。

1
现在不正确。CSS对IE11+的edge模式下的自定义元素有效。可能对IE10也有效，但我没有尝试过。我相信对于IE8 / IE9，您可以通过使用document.createElement（'my-custom-tag'）来“注册”标记来使其工作，以将'my-custom-tag'注册为有效标记（您的自定义标记应始终包含破折号）。 - robocat
0

唯一让我担心的是，如果我现在使用的自定义标签在明年甚至更晚成为官方HTML标签怎么办？

因此，我们可以这样做：不使用自定义标签，而是使用“div”+自定义CSS类。

CSS类是用于自定义的，拥有自己的自定义CSS类绝对没问题。您的div可以进一步与任意数量的CSS类相关联，使语义机制更加灵活，您可以称之为多重继承。

您也可以使用span来达到同样的目的。实际上，我想使用更短的东西，比如说p，但不幸的是，p有其自己的特殊行为，如果您不关闭它，会发生什么。

但是，如果您使用CSS类来表达语义，那么尽可能使用尽可能短的标签名称确实有所帮助。我希望有比div更短的东西，比如t代表“标签”。

0
在你的例子中，你谈到了<media>，这很棒，但如果HTML6为另一个元素添加了此标签，你的代码将不具备向后兼容性。
1
自定义元素的规则是名称中需要使用连字符。如果这样做，您就可以确保不会与将来版本的规范发生冲突。因此，<media-item>现在和将来都可以使用。 - ivanreese
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接