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

Question

最近，我一直在阅读如何通过在名称中加上一个破折号来使自定义标记在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-？

谢谢你的帮助。:)

Answer 1

没有有效的自定义HTML5标记。

我认为您可能指的是Web应用程序工作组提出的这个Web应用程序工作组，它描述了以下内容：

自定义元素类型标识自定义元素接口，是必须与NCName产品匹配的字符序列，必须包含U+002D连字符-减号字符，并且不能包含任何大写的ASCII字母。自定义元素类型不能是下列值之一：

• 注释-xml
• 彩色轮廓
• 字体面
• 字体脸-src
• 字体
• 字体-脸格式
• 字形名称
• 失踪字形

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

注意，自定义元素是 工作草案，而不是W3C推荐。这意味着自定义元素在HTML5中无效。也不要抱太大的希望，在W3C中提出的许多工作草案都没有结果(也有充分的理由，并不是所有的提案都是好的)。

就我个人而言，我希望这个建议被否决。我花了一些时间阅读这个提议，看起来这个提议试图重新发明和SGML，而且可能忘记了HTML和语义web应该是什么。无论如何，HTML5语法已经允许作者使用未在HTML5规范中指定的元素，我认为没有必要进一步标准化如何创建自定义元素。我希望HTML5工作组中会有足够理智的人意识到这一提案有多糟糕，并否决这一提案。保持HTML5不受作者定义的自定义修改的影响.

如果您想要定义您自己的自定义词汇表，我建议您使用XHTML5编写一个XML应用程序，该应用程序实际上指定了如何使用XML名称空间定义您自己的自定义元素。与HTML不同，XML是设计成可扩展的。

至于您关于自定义数据属性的问题，这是什么HTML5规范说

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

因此，使用您的示例，这些是有效的数据-*属性：

• data-my-attribute

虽然这些不是：

• my-attribute

据我所知，自定义元素工作草案没有对自定义元素上的自定义属性指定任何额外的语法要求，也不明确允许使用任意的非数据-*属性以及自定义属性如何与现有的HTML属性交互，尽管我们可以合理地推断，允许自定义属性可能是建议的目的。

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

Answer 2

要通过验证，默认情况下添加的元素不可用的所有属性都应该以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>

这里有更多信息：属性

Answer 3

HTML5没有特定的doctype定义或XML定义。

可以创建自定义HTML标记(自定义元素)，因为它们可以用于创建web组件。

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

例如：

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