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;
}

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

感谢您的帮助。：）

Answer 1

TL; DR：没有有效的自定义HTML5标记。

我认为您可能指的是Custom Element Working Draft提出的Web Applications Working Group，其中描述了这一点：

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


注释的XML

颜色配置文件

字体面

字体面-SRC

字体面-URI

字体面格式

字体面名

丢失字形

此外，根据HTML5规范，HTML tag names can only start with ASCII letters。如果我们假设自定义元素提议不建议对HTML语法规范进行任何更改，则以连字符 - 减号字符开头的元素不是有效的HTML标记名称。如果我们结合自定义元素工作草案提案和HTML5语法规范所说的内容，那么我们可以得出结论<-custom> 不格式良好的HTML，因此不能成为有效的自定义元素，因为标签名称不以ASCII字母开头。另一方面，custom-既是格式良好的HTML又是有效的自定义元素。

请注意，自定义元素是Working Draft ，而不是W3C推荐标准。这意味着自定义元素在HTML5中无效。也不要抱有希望，W3C中提出的很多工作草案从来没有得到任何结果（并且有充分理由，并非所有提案都是好的）。

＆lt; rant＆gt;就个人而言，我希望这个提案被击落。我花了一些时间阅读这个提议，看起来这个提案试图重新发明XML Namespace和SGML，并且可能忘记了HTML和语义网应该是什么。在任何情况下，HTML5语法已经允许作者使用HTML5规范中未指定的元素，我认为没有必要标准化如何创建自定义元素。我希望HTML5工作组中的人能够理智地认识到这个提案有多糟糕，并投票支持这个提案。保持HTML5不受作者定义的自定义修改的影响。＆lt; / rant＆gt;

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

关于自定义数据属性的问题，这就是the HTML5 specification says：

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

因此，对于您的示例，这些是有效的data- *属性：

data-my-attribute

虽然不是：

my-attribute

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

至于你关于CSS的问题，是的，你理解正确，那些是有效的CSS选择器来定位这些自定义元素。 CSS可以用于设置任何元素的样式，不仅是HTML定义的元素，还有其他标记语言，如SVG，MathML，以及使用XHTML时的任意XML词汇表。 CSS Selectors specification实际上并不以任何实质性的方式依赖HTML词汇表（尽管HTML在例子中被大量使用，因为它是大多数人最熟悉的）。因此，CSS Selector语法可用于引用文档中的任何元素，包括HTML规范中未指定的自定义元素。样式自定义标记现在已在所有主流浏览器中使用。您可以使用任意标记名称，并使用您期望的选择器选择它们，CSS将按照您的预期对其进行样式设置。不需要在标记名称中使用连字符减号来实现此目的。

Answer 2

要通过验证，默认情况下，您添加的所有不可用于元素的属性都应以data为前缀 - 它与包含短划线的内容无关。

使用element[data-attribute]。

之类的东西来完成在CSS中定位这些内容

所以这是有效的：<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/en-US/docs/Web/Guide/HTML/Using_data_attributes

Answer 3

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

可以创建自定义HTML代码（custom elements），因为它们可用于创建web components

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

e.g。

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

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

3 个答案: