可以使用未知的HTML标签吗?

时间:2012-05-31 09:17:23

标签: html html5

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

我在想:这种做法有多可支持?我的意思是,如果我在标记中使用未知的HTML标记,我会发现什么陷阱?请a velociraptor pounce on me within the next few seconds

我问的原因是,如果这些标签推迟到<div>,我可能会以更加语义的方式使用这些标签,比如分配识别模块的类名。 Have a look at this article, for example, of a .media class。现在,如果不是将CSS写入目标.media,而是将其设为目标<media>,该怎么办?在我看来,这使得标记更具可读性和可维护性,但我确实认为它不是“正确的”HTML。

修改

为了透明,我 找到了this SO question from a few years back。它已被关闭作为偏离主题,但我觉得我在自己的措辞中有一个有效的观点。我承认,这是一个非常接近的重复,但它是在几年前,所以网络开发人员对该主题的一般环境观念可能会发生变化。

13 个答案:

答案 0 :(得分:68)

user1309389有一个非常好的答案,我同意该规范的吸引力。但我不同意他们的结论,我认为他们错误地认为构成元素导致了未定义的行为&#34;。我想提出另一种思考方式,根据规范和浏览器实际处理组成元素的方式。

2015年,我们正处于广泛采用的CustomElement规范的边缘,并且可以随时使用polyfill。现在是一个很好的时间,想知道&#34;制作自己的元素&#34;。在不久的将来,您将能够以完全标准和受支持的方式创建具有您自己选择的标记和行为的新元素,每个人都可以喜欢。但是直到所有浏览器都出现这种情况,直到大多数人使用支持的浏览器,您才能利用PolymerX-Tags项目的艰苦工作来检查自定义元素的未来一种近乎标准且大多数人支持的方式,很多人都喜欢这种方式。这可能是#34;正确的事情&#34;去做。但它没有回答你的问题,坦率地说,我发现&#34;只是使用X&#34;或者&#34;不做X&#34;没有什么帮助比#34;这里的规范如何涵盖这一点,以及这里的浏览器做什么&#34;。所以,这就是我喜欢的。

反对大部分网络开发社区的衷心建议(有时尖叫),我一直在和#34;制作&#34;在过去的一年中,在我的所有生产项目中,没有填充物,我还没有任何无法解决的问题,而且没有抱怨。怎么样?依靠HTMLUnknownElement的标准行为,W3C规范的一部分涵盖&#34;制作&#34;元素。如果浏览器遇到无法识别的HTML元素,则应该处理明确定义且明确的方式,HTMLUnknownElement定义该行为,您可以在此基础上构建。 HTMLUnknownElement也必须功能强大且正确足以打破网络&#34;遇到所有现已过时的标记时,如<blink>标记。我们不建议您使用HTMLUnknownElement,但在理论上和实践中,如果您知道自己在做什么,那么这样做绝对没有害处。

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

我喜欢什么&#34;化妆&#34;元素是心态的变化。您应该根据以下几个因素使用或发明 HTML元素,范围从标记到阅读的清晰程度,浏览器和屏幕阅读器和搜索引擎如何解析代码,到代码的可能性要#14;纠正&#34;通过一些客观的措施。我谨慎使用虚构的元素,但我完全按照理查德所描述的方式使用,以使HTML的作者更有意义,而不仅仅是对提取元数据的计算机服务有意义。在整个团队中以一致的方式使用时,可以有很大的好处,因为制作元素可以简明扼要地表达他们的目标。

我特别喜欢使用虚构元素来指示何时使用JS来定义元素的额外行为。例如,如果我有一个将由JS添加/删除子元素的元素,我将使用一个组合元素作为该元素受特殊行为约束的线索。出于同样的原因,当标准元素足够时,我不会使用制作元素。您会在我的代码中<dynamic-list>旁边看到<div>幸福地生活。

现在,关于那些讨厌的验证者。是的,使用虚构的元素并不是有效的&#34;从某种意义上说它不会通过验证器&#34;。但是现代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属性,否则渲染行为未定义。

  4. 关于它。如果你做这些事情,你应该善于在IE9及更高版本中使用虚构元素,依赖于HTMLUnknownElement的安全网。对我来说,好处远远超过成本,所以我一直在大力使用这种模式。我经营SaaS网站迎合主要的工业企业,到目前为止我没有遇到任何麻烦或抱怨。如果您必须支持旧版本的IE,那么远离任何&#34; 2015&#34;技术或其粗略的近似值,并安全地保持在规范中经过深思熟虑的部分。

    总而言之,问题的答案是&#34;是的,如果你知道你正在做什么&#34;。

答案 1 :(得分:13)

您应始终接近HTML,因为它在各自的规范中定义。 “定义”新标签是一种极端的方法。它可能会通过浏览器检查,因为它实现了各种故障,但不能保证这一点。你充其量只是进入了未定义行为之地。更不用说你将失败验证测试,但你似乎意识到这一点。

如果您希望在标记中更具语义表达能力,可以使用HTML5定义相当多的描述性标记来描述页面结构,而不是需要附加的通用div { {1}}或id es。

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

答案 2 :(得分:8)

没有。您将无法通过验证,您将通过浏览器获得随机问题,您将被所述恐龙吃掉。如果您希望页面的行为可预测,那么CSS就是答案。

答案 3 :(得分:8)

是的,我们可以

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

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

您可以在

了解更多相关信息

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

答案 4 :(得分:2)

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

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

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

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

答案 5 :(得分:1)

就我而言,我在Webkit驱动的游戏GUI系统中使用了很多它们,一切正常。

答案 6 :(得分:0)

在您的示例中,您正在讨论<media>,它可能很棒,但如果html6为其他元素添加此标记,则您的代码将不具有反向兼容性。

答案 7 :(得分:0)

一般不值得推荐,例如IE不会将CSS样式应用于未知标签。

所有其他浏览器将未知标记呈现为inline - 元素(导致嵌套问题)。

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

答案 8 :(得分:0)

让我担心的一个缺点是,如果我现在使用的自定义标签在明年甚至更晚成为正式的HTML标签会怎样?

因此,如何处理:代替自定义标签,请使用'div'+自定义CSS类。

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

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

但是,绝对可以肯定的是,如果您使用CSS类来表达语义,那么使用尽可能短的标记名确实有帮助。我希望有比div更短的内容,例如t代表“标签”。

答案 9 :(得分:0)

W3C说:

  

HTML5支持将未知标记用作内联元素,但建议使用CSS   样式。

以下是来源:https://www.w3schools.com/html/html5_browsers.asp

答案 10 :(得分:0)

默认情况下,自定义元素是许多 JavaScript-Framwork 的主要部分。它是现代 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 中定义标签,您可以使用未知标签。

答案 11 :(得分:-1)

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

答案 12 :(得分:-1)

明智地使用&lt; ! - 你的东西 - &gt;。它适用于围绕白垩纪 - 古近纪边界时期的脚本。恐龙在那段时间不再是一个问题,除了飞翔的羽毛品种外。