最近我一直在阅读有关如何通过在名称中添加短划线来使HTML5中的自定义标签有效的信息,因此我一直想知道自定义标签的实际规则/指南是什么.
custom-tag√
customX
-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-？
谢谢您的帮助.:)
要通过验证，您添加的所有默认情况下不适用于该元素的属性都应加上前缀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
TL; DR:没有有效的自定义HTML5标记.
我想你可能指的是Web应用程序工作组提出的这个自定义元素工作草案,它描述了这个:
自定义元素类型标识自定义元素接口,并且是必须与NCName生成匹配的字符序列,必须包含U + 002D HYPHEN-MINUS字符,并且不得包含任何大写ASCII字母.自定义元素类型不能是以下值之一:
- 注释的XML
- 颜色配置文件
- 字体面
- 字体面-SRC
- 字体面-URI
- 字体面格式
- 字体面名
- 缺少字形
此外,根据HTML5规范,HTML标记名称只能以ASCII字母开头.如果我们假设自定义元素提议不建议对HTML语法规范进行任何更改,则以连字符减号字符开头的元素不是有效的HTML标记名称.如果我们结合一下自定义元素工作的建议草案和HTML5语法规范说的话,我们可以得出这样的结论<-custom>是不是一个结构良好的HTML,因此不能成为有效的自定义元素,因为标签名不以ASCII字母开头.另一方面,custom-既是格式良好的HTML又是有效的自定义元素.
请注意,自定义元素是工作草案,而不是W3C建议书.这意味着自定义元素在HTML5中无效.不要抱有希望,W3C提出的很多工作草案从来没有得到任何结果(并且有充分的理由,并非所有提案都是好的).
<rant>我个人希望这个建议被击落.我花了一些时间阅读这个提议,看起来这个提案试图重新发明XML Namespace和SGML,并且可能忘记了HTML和语义网应该是什么.在任何情况下,HTML5语法已经允许作者使用HTML5规范中未指定的元素,我认为没有必要标准化如何创建自定义元素.我希望HTML5工作组中的人能够理智地认识到这个提案有多糟糕,并投票支持这个提案.保持HTML5不受作者定义的自定义修改的影响.</ rant>
如果你想定义自己的自定义词汇表,我建议你应该用XHTML5编写一个XML应用程序,它实际上指定了如何使用XML命名空间定义自己的自定义元素.与HTML不同,XML被设计为可扩展的.
至于您关于自定义数据属性的问题,这就是HTML5规范所说的:
自定义数据属性是无命名空间中的属性,其名称以字符串"data-"开头,连字符后至少有一个字符,与XML兼容,并且不包含大写ASCII字母.
因此,对于您的示例,这些是有效的data-*属性:
data-my-attribute虽然这些不是:
my-attribute据我所知,自定义元素工作草案没有为自定义元素指定自定义属性的任何其他语法要求,也没有明确允许使用任意非数据*属性以及自定义属性如何与现有HTML属性交互,尽管我们可以合理地推断,允许自定义属性可能是提案的目的.
至于你关于CSS的问题,是的,你理解正确,那些是有效的CSS选择器来定位这些自定义元素.CSS可以用于设置任何元素的样式,不仅是HTML定义的元素,还有其他标记语言,如SVG,MathML,以及使用XHTML时的任意XML词汇表.该CSS选择器规范实际上不依赖于HTML的词汇在任何实质性的(尽管HTML中的例子中大量使用,因为它是大多数人最熟悉的).因此,CSS Selector语法可用于引用文档中的任何元素,包括HTML规范中未指定的自定义元素.样式自定义标记现在已在所有主流浏览器中使用.您可以使用任意标记名称,并使用您期望的选择器选择它们,CSS将按照您的预期对其进行样式设置.不需要在标记名称中使用连字符减号来实现此功能.