HTML5有效的自定义标签是什么？

Question

HTML5有效的自定义标签是什么？

csshtml

3

最近我看到了关于如何通过在名称中加入破折号使自定义标签在HTML5中有效的内容，因此我想知道自定义标签的实际规则和指南是什么。

custom-tag √
custom X
-custom ?
custom- ?

我想知道的是最后两个是否有效。

此外，作为奖励，我有点好奇自定义属性是如何工作的……据我所知：

<div my-attribute="demo"> X
<div data-my-attribute="demo"> √
<custom-tag my-attribute="demo"> √
<custom-tag data-my-attribute="demo"> √

但如果我试图使用现有的全局属性，例如title或class，会发生什么情况？

这段CSS会怎样……

custom-tag.banana {
    color: yellow;
}

你想定位这个HTML吗？

<custom-tag class="banana">
    Test!
</custom-tag>

此外，这个CSS应该针对上述HTML进行目标设置，无论全局属性是否与自定义标签一起使用，正确吗？

custom-tag[class=banana] {
    color: yellow;
}

最后，是否有规则/指南说明我应该在自定义属性的名称中使用"-"，就像自定义标签一样？例如： <div custom-tag="demo">。如果有，那么像我的原始问题一样，它是否适用于-customtag和customtag-？

感谢您的帮助。 :)

- Nebula

2

您可以通过将代码提交到W3C验证器（http://validator.w3.org/#validate_by_input）来回答您的问题。 - FrancoisBaveye

其实我有一个疑问..在HTML中是否可以创建自定义标签？因为我读到的都是预定义标签..有人能解释一下吗？谢谢.. - pcs

@saina，你可以使用“data-”前缀来创建自定义属性，在实际元素方面，你只能使用提供的元素（你可以使用JavaScript使浏览器识别它们，但它们不会被验证）。 - somethinghere

我没有使用验证器的原因是因为我听说它对于HTML5尚未完全完成。 :) 当我选择HTML5时，它会显示实验性质。 - Nebula

@Rob 哎呀！我忘记了这一点。这意味着我可以明确地说，没有办法添加自己的自定义标签（就我所知）。 :) 干杯 - somethinghere

显示剩余4条评论

3个回答

5

为了通过验证，你添加到元素中的所有不是默认可用的属性都应该以data为前缀 - 这与它是否包含破折号无关。

在CSS中定位这些内容需要使用类似element[data-attribute]的方式。

所以这是有效的：<div data-title="Custom Data Title"></div>，而这则不行：<div custom-title="Custom Title"></div>。可以使用div[data-title="Custom Data Title"]{}进行定位。

关于标签，如果想要网站通过验证，则必须限制使用浏览器提供的标签。你不能随意使用自定义元素，因为这会增加页面的处理量。

你可以使用javascript来要求网页识别某些标签，但仍然无法通过验证。这样做可以实现，但不建议这样操作：

<script type="text/javascript">document.createElement("custom");</script>
<custom data-name="Something">Here</custom>

这里有更多信息：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

- somethinghere

太棒了！我会去看看的。除非有人提供完整的答案回答我所有的问题，否则我会自己回答，并给出每个有帮助的答案的链接。 :) - Nebula

@liam_ 抱歉我忘了回答你关于标签的问题。主要的经验是尽量使用浏览器提供的内置功能，这是创建有效页面的最佳方法，但如果您确实坚持使用标签，那么有一些解决方法（在文章中提到），但除了更易读的代码和用户浏览器处理sed代码的额外开销外，它们没有任何优势。 - somethinghere

好的，有趣。出于好奇，您知道为什么浏览器处理自定义标签需要比处理类似<div class="custom">这样的标签更长时间吗？ - Nebula

liam_ 我这里主要是基于假设，但是一个知道该期望什么的浏览器比需要在其他任何事情之前评估其期望的浏览器更快。现在的浏览器都经过了高度优化，因此使用它们内置的工具总是能够让你占据优势。 - somethinghere

不要忘记，一些自称为“浏览器”的（看着你IE！）需要在Javascript中运行document.createElement("custom");，否则它甚至无法应用样式。这是拥有适用于这些标签的CSS文件的唯一方法。有些样式可能需要添加，例如display:block;，否则它们将不会在浏览器中显示。 - Ismael Miguel

0

HTML5没有特定的文档类型定义或XML模式定义。

可以创建自定义HTML标签（自定义元素），因为它们可以用于创建Web组件

自定义属性也是有效的，因为它们可以用来提供Web组件所需的信息

例如：

<custom-element a="x" b="y"/>

- Fintan Kearney

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lie Ryan · Accepted Answer

TL;DR: 没有有效的自定义HTML5标签。

我认为你可能指的是Web应用工作组提出的自定义元素工作草案，其中描述了以下内容：

自定义元素类型标识自定义元素接口，是一个字符序列，必须匹配NCName生产规则，必须包含U+002D HYPHEN-MINUS字符，并且不能包含任何大写ASCII字母。自定义元素类型不能是以下值之一：

- annotation-xml - color-profile - font-face - font-face-src - font-face-uri - font-face-format - font-face-name - missing-glyph

此外，根据HTML5规范，HTML标签名只能以ASCII字母开头。如果我们假设自定义元素提案没有对HTML语法规范提出任何更改，则以连字符减号字符开头的元素不是有效的HTML标签名。如果将自定义元素工作草案提案和HTML5语法规范所述结合起来，那么我们可以得出结论：<-custom>不是一个格式良好的HTML，因此不能成为有效的自定义元素，因为标签名不以ASCII字母开头。另一方面，custom-既是格式良好的HTML，也是有效的自定义元素。

请注意，Custom Element是工作草案，而不是W3C建议。这意味着自定义元素在HTML5中无效。也不要抱太大希望，许多在W3C中提出的工作草案从未被实现（原因也很充分，并非所有提案都是好的）。

<抱怨>个人希望这个提案被否决。我花了一些时间阅读这个提案，它看起来像是试图重新发明XML命名空间和SGML，而且可能忘记了HTML和语义Web的本意。无论如何，HTML5语法已经允许作者使用在HTML5规范中未指定的元素，我不认为有必要将如何创建自定义元素进一步标准化。我希望HTML5工作组中会有足够明智的人意识到这个提案有多糟糕，并投票反对此提案。保持HTML5不受作者定义的自定义修改的影响。</抱怨>

如果您想定义自己的自定义词汇表，我建议您使用XHTML5编写XML应用程序，该规范实际上说明了如何使用XML命名空间定义自己的自定义元素。与HTML不同，XML旨在具有可扩展性。

关于自定义数据属性的问题，这是HTML5规范所说的：

引用：自定义数据属性是没有命名空间的属性，其名称以字符串“data-”开头，在连字符后至少有一个字符，与XML兼容，并且不包含大写ASCII字母。

因此，以下是有效的data-*属性示例：

data-my-attribute

而这些则不是:

my-attribute

据我所知，自定义元素工作草案没有为自定义元素上的自定义属性指定任何附加的语法要求，也没有明确允许使用任意非data-*属性以及自定义属性如何与现有HTML属性交互，尽管我们可以合理推断允许自定义属性可能是该提案的意图。

关于你关于CSS的问题，是的，你理解得对，那些选择器是有效的CSS选择器，可以用来定位这些自定义元素。CSS可用于样式化任何元素，不仅限于HTML定义的元素，还包括其他标记语言如SVG、MathML以及使用XHTML时的任意XML词汇表。CSS选择器规范实际上并不以任何实质性方式依赖于HTML词汇表（尽管在示例中大量使用HTML，因为它是大多数人最熟悉的）。正是由于这个原因，CSS选择器语法可以用于引用文档中的任何元素，包括没有在HTML规范中指定的自定义元素。在今天的所有主要浏览器中，样式化自定义标签已经可以工作了。您可以使用任意的标签名称，并使用您期望的选择器选择它们，CSS将按照您期望的方式对它们进行样式化。这不需要标签名称中有连字符。