47

如果我弄错了,请纠正我,但是 AFAIK,标记中的未知 HTML 标记(即未在 HTML 规范中定义的标记,例如, )最终将在 HTML 5 浏览器环境中<foobar>被视为常规。<div>

我在想:这种做法的支持程度如何?我的意思是,如果我在标记中使用未知的 HTML 标签,我会遇到什么陷阱?在接下来的几秒钟内,一只迅猛龙会扑向我吗?

我问的原因是,如果这些标签遵循<div>,我可能会以更语义化的方式使用这些标签,而不是分配标识模块的类名。看看这篇文章,例如,一个.media。现在,如果我不是将那个 CSS 写到 target .media,而是让它成为 target<media>怎么办?在我看来,这使得标记更具可读性和可维护性,但我承认它不是“正确的”HTML。

编辑

为了透明起见,我确实从几年前发现了这个 SO 问题。它已被关闭为题外话,但我觉得我自己的措辞有一个有效的观点。我承认,这是一个很接近的副本,但它是几年前的事了,因此 Web 开发人员对该主题的看法可能已经发生了变化。

4

13 回答 13

104

user1309389 有一个很好的答案,我同意对规范的呼吁。但我不同意他们的结论,我认为他们对导致“未定义行为”的虚构元素是错误的。我想提出另一种思考方式,根植于规范和浏览器实际处理组成元素的方式。

现在是 2015 年,我们正处于被广泛采用的CustomElement规范的边缘,并且 polyfill 很容易获得。现在是思考“制作自己的元素”的好时机。在不久的将来,您将能够以所有人都喜欢的完全标准和受支持的方式创建具有自己选择的标签和行为的新元素。但是,直到所有浏览器都使用它,并且直到大多数人都使用支持的浏览器,您才能利用PolymerX-Tags的辛勤工作项目以几乎标准且大多数人喜欢的方式检查自定义元素的未来。这可能是“正确的事情”。但这并没有回答你的问题,坦率地说,我发现“只使用 X”或“不要做 X”比“这是规范如何涵盖这一点,这是浏览器所做的”。所以,这就是我喜欢的。

反对大部分网络开发社区的衷心推荐(有时甚至是尖叫),在过去的一年里,我一直在使用“虚构”元素,在我所有的生产项目中,没有使用 polyfill,而且我已经(还)没有无法解决的问题,也没有投诉。如何?通过依赖HTMLUnknownElement的标准行为,W3C 规范的一部分涵盖了“组成”元素的情况。如果浏览器遇到无法识别的 HTML 元素,则应该有一种定义明确且明确的方式来处理它,而 HTMLUnknownElement 定义了该行为,您可以在此基础上进行构建。HTMLUnknownElement 还必须足够强大和正确以“不破坏网络”<blink>标签。不建议您使用 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. 您必须display在 CSS 中为您的元素定义一个属性,否则呈现行为是未定义的。

就是这样。如果你做这些事情,你应该很好地在 IE9 及更高版本中使用虚构的元素,依靠 HTMLUnknownElement 的安全网。对我来说,好处远远超过成本,所以我一直在大量使用这种模式。我经营着一个面向主要工业公司的 SaaS 网站,到目前为止,我没有遇到任何问题或投诉。如果您必须支持旧版本的 IE,明智的做法是远离任何“2015”技术或其粗略的近似值,并安全地留在规范中被广泛使用的部分。

因此,总而言之,您的问题的答案是“是的,如果您知道自己在做什么”。

于 2015-01-09T20:50:48.837 回答
14

您应该始终按照其各自规范中定义的方式处理 HTML。“定义”新标签有点极端。它可能会通过浏览器检查,因为它实现了各种故障保护,但不能保证这一点。充其量,您正在进入未定义行为的领域。更不用说您将无法通过验证测试,但您似乎已经意识到这一点。

如果您希望在标记中更具语义表达,您可以使用 HTML5,它定义了很多更具描述性的标签来描述您的页面结构,而不是div需要附加ids 或classes 的通用 s。

最后,一个简短的回答:不,这是不好的做法,你不应该这样做,并且在你的开发后期可能会出现无法预料的问题。

于 2012-05-31T09:24:12.883 回答
10

不,您将无法通过验证,您将在浏览器中遇到随机问题,您将被上述恐龙吃掉。如果您希望页面的行为可预测,CSS 就是答案。

于 2012-05-31T09:21:02.230 回答
10

是的,我们可以

有一个关于自定义元素/标签的新规范 - http://w3c.github.io/webcomponents/spec/custom/

唯一的问题是你必须使用 js 来注册你的新元素

您可以在以下位置阅读更多相关信息

https://developers.google.com/web/fundamentals/getting-started/primers/customelements

于 2014-01-28T06:54:37.210 回答
2

浏览器互操作性的规则 #1 是:不要有错误。无论您在多少个浏览器中进行测试,总有一些浏览器是您无法测试的,例如因为它们还不存在。此外,目前大多数浏览器都不
会将未知元素视为。<span><div>

如果它真的是你所追求的源代码可读性(*),你应该研究 XML+XSLT。
这样,您可以使用您想要的所有标签名称,并使它们以您喜欢的任何方式运行,您不必担心这<media>将成为未来 HTML 版本中的真正元素。

一个很好的现实世界的例子是 element <picture>。如果一个网站曾经使用<picture>并依赖于这个元素本身没有样式或特殊内容的概念,那么他们现在就有麻烦了!

(*) 使用 XML+XSLT,可读性显然在 XML 部分,而不是 XSLT 部分。

于 2012-05-31T09:29:27.250 回答
1

通常不推荐,例如 IE 不会将 css 样式应用于未知标签。

所有其他浏览器将未知标签呈现为inline-Elements(这会导致嵌套问题)。

我向您推荐以下文章:http ://diveintohtml5.info/有一个关于未知标签的部分。

于 2012-05-31T09:31:16.573 回答
1

在我的例子中,我在我的 Webkit 驱动的游戏 GUI 系统中使用了很多它们,并且一切正常。

于 2014-10-15T12:17:47.237 回答
1

W3C 说:

HTML5 支持将未知标签作为内联元素,但它建议为其设置 CSS 样式。

这里是来源:https ://www.w3schools.com/html/html5_browsers.asp

于 2019-01-24T16:18:14.437 回答
0

在您正在谈论的示例中<media>,它可能很棒,但如果 html6 为另一个元素添加此标签,您的代码将不兼容。

于 2012-05-31T09:27:07.650 回答
0

让我担心的一个缺点是,如果我现在使用的自定义标签在明年甚至以后成为官方 HTML 标签怎么办?

因此如何:而不是自定义标签使用 'div' + 自定义 CSS 类。

CSS-classes 是自定义的,拥有自己的自定义 CSS-classes 绝对没问题。然后,您的 div 可以进一步具有与其关联的任意数量的 CSS 类,从而使语义机制更加灵活,您可以将其称为多重继承。

您可以使用 span 而不是 div 用于相同目的。实际上我想使用更短的东西,比如 p 但不幸的是 p 有它自己的特殊行为,如果你不关闭它会发生什么。

但是如果你走的是用 CSS 类表达语义的路线,那么使用尽可能短的标签名确实会有所帮助。我希望有比 div 更短的东西,例如 t 表示“标签”。

于 2018-10-06T08:08:21.517 回答
0

默认情况下,自定义元素是许多 JavaScript 框架的主要部分。它是现代 javascript 中最先进的:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

可以使用未知的 HTML 标签吗?如果你问错了问题,你总是得到错误的答案。如果您使用 javascript 将未知标签定义为 CustomeElement ,则您的未知标签不再是 HTML5/HTML 定义的一部分。

是的,如果您在 javascript 中定义标签,您可以使用未知标签。

于 2021-03-19T10:18:31.033 回答
-1

明智地使用 < !-- your stuff here -- > 有什么问题。它适用于白垩纪-古近纪边界时期的脚本。恐龙在那个时候不再是一个问题,除了会飞的有羽毛的品种。

于 2015-11-28T08:29:04.567 回答
-2

这是不好的做法,你不应该这样做。在大多数情况下,浏览器将其呈现为 div 作为后备解决方案,但它不是有效的 html,因此永远不会通过有效性测试。

于 2012-05-31T09:19:31.757 回答