gpt4 book ai didi

css - 什么是有效的 HTML5 自定义标签?

转载 作者:搜寻专家 更新时间:2023-10-31 22:06:05 28 4
gpt4 key购买 nike

最近我一直在阅读有关如何通过在名称中加入破折号来使自定义标签在 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-

感谢您的帮助。 :)

最佳答案

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


我认为您可能指的是这个 Custom Element Working DraftWeb Applications Working Group 提出,它描述了这一点:

The custom element type identifies a custom element interface and is a sequence of characters that must match the NCName production, must contain a U+002D HYPHEN-MINUS character, and must not contain any uppercase ASCII letters. The custom element type must not be one of the following values:

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

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

请注意,自定义元素是一个 Working Draft ,不是 W3C 推荐标准。这意味着自定义元素在 HTML5 中无效。也不要抱太大希望,W3C 中提出的许多工作草案从未取得任何进展(并且也有充分的理由,并非所有提案都是好的)。

我个人希望这个提议被否决。我花了一些时间阅读这个提案,看起来这个提案试图重新发明 XML 命名空间和 SGML 很糟糕,并且可能忘记了 HTML 和语义网应该是什么。无论如何,HTML5 语法已经允许作者使用 HTML5 规范中未指定的元素,我认为没有必要进一步标准化如何创建自定义元素。我希望 HTML5 工作组中有足够清醒的人意识到这个提案有多糟糕,并投票否决这个提案。让 HTML5 远离作者定义的自定义修改。

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


至于你关于自定义数据属性的问题,这就是the HTML5 specification says :

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

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

  • data-my-attribute

虽然这些不是:

  • my-attribute

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


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

关于css - 什么是有效的 HTML5 自定义标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30258630/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com