199

我一直无法找到自定义标签在 HTML5 中是否有效的明确答案，如下所示：

<greeting>Hello!</greeting>

我在规范中没有发现任何一种方式：

http://dev.w3.org/html5/spec/single-page.html

并且自定义标签似乎无法使用 W3C 验证器进行验证。

4

12 回答 12

177

自定义元素规范在 Chrome 和 Opera 中可用，并在其他浏览器中可用。它提供了一种以正式方式注册自定义元素的方法。

自定义元素是可由作者定义的新型 DOM 元素。与无状态且短暂的装饰器不同，自定义元素可以封装状态并提供脚本接口。

自定义元素是更大的 W3 规范的一部分，称为Web 组件，以及模板、HTML 导入和 Shadow DOM。

Web 组件使 Web 应用程序作者能够定义小部件，其具有仅使用 CSS 无法实现的视觉丰富性和交互性，以及当今脚本库无法实现的易于组合和重用。

但是，从Google Developers 关于自定义元素 v1的这篇出色的演练文章中：

自定义元素的名称必须包含破折号 ( -)。所以<x-tags>,<my-element>和<my-awesome-app>都是有效的名字，而<tabs>和<foo_bar>不是。这个要求是为了让 HTML 解析器可以将自定义元素与常规元素区分开来。它还确保了向 HTML 添加新标签时的前向兼容性。

一些资源

于 2012-03-23T19:08:06.260 回答
24

这是可能和允许的：

用户代理必须将他们不理解的元素和属性视为语义中立的；将它们留在 DOM 中（对于 DOM 处理器），并根据 CSS 设置它们的样式（对于 CSS 处理器），但不会从中推断出任何含义。

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

但是，如果您打算添加交互性，则需要使您的文档无效（但仍然功能齐全）以适应 IE 的 7 和 8。

请参阅http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html（我的博客）

于 2012-10-17T14:02:04.937 回答
15

注意下面的答案在 2012 年编写时是正确的。从那时起，事情发生了一些变化。HTML 规范现在定义了两种类型的自定义元素——“自主自定义元素”和“自定义内置元素”。前者可以去任何需要短语内容的地方；这是 body 内的大多数位置，但不包括 ul 或 ol 元素的子元素，或者在 td、th 或标题元素之外的 table 元素中。后者可以去任何他们扩展的元素可以去的地方。

这其实是元素内容模型积累的结果。

例如，根元素必须是一个html元素。

该html元素只能包含一个头部元素，后跟一个主体元素。

body元素只能包含流内容，其中流内容定义为元素： a, abbr, address, area (如果它是 map 元素的后代), article,aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen,标签，地图，标记，数学，菜单，仪表，导航，noscript，对象，ol，输出，p，pre，进度，q，ruby，s，samp，脚本，部分，选择，小，跨度，强，风格（如果存在范围属性）、sub、sup、svg、table、textarea、time、u、ul、var、视频、wbr 和文本

等等。

内容模型绝不会说“您可以在其中放置您喜欢的任何元素”，这对于自定义元素/标签是必需的。

于 2012-03-24T03:20:23.747 回答
15

基本自定义元素和属性

自定义元素和属性在 HTML 中有效，前提是：

  • 元素名称为小写并以x-
  • 属性名称为小写并以data-

例如，<x-foo data-bar="gaz"/>或<br data-bar="gaz"/>。

元素的常见约定是x-foo; x-vendor-feature被推荐。

这可以处理大多数情况，因为可以说开发人员很少需要注册其元素所附带的所有功能。语法也足够有效和稳定。更详细的解释如下。

高级自定义元素和属性

自 2014 年起，有一种新的、改进的方法来注册自定义元素和属性。它不适用于旧版浏览器，例如 IE 9 或 Chrome/Firefox 20。但它允许您使用标准HTMLElement界面、防止冲突、使用非名称x-*和非data-*名称，并为浏览器定义自定义行为和语法以尊重. 它需要一些花哨的 JavaScript，详见下面的链接。

HTML5 Rocks - 在 HTML 中定义新元素
WebComponents.org - 自定义元素简介
W3C - Web 组件：自定义元素

关于基本语法的有效性

使用data-*自定义属性名称已经有一段时间了，甚至适用于旧版本的 HTML。

W3C - HTML5：可扩展性

至于自定义（未注册）元素名称，W3C 强烈建议不要使用它们，并认为它们不符合标准。但是浏览器需要支持它们，x-*标识符不会与未来的 HTML 规范x-vendor-feature冲突，标识符也不会与其他开发人员冲突。自定义 DTD 可用于解决任何挑剔的浏览器。

以下是官方文档的一些相关摘录：

“适用规范可以定义新的文档内容（例如 foobar 元素）[...]。如果给定的符合 HTML5 文档的语法和语义通过使用适用规范没有改变，那么该文档仍然是符合 HTML5文档。”

“用户代理必须将他们不理解的元素和属性视为语义中性；将它们留在 DOM 中（对于 DOM 处理器），并根据 CSS（对于 CSS 处理器）对它们进行样式设置，但不能从中推断出任何含义。”

“用户代理不能随意处理不符合要求的文档；本规范中描述的处理模型适用于实现，无论输入文档的符合性如何。”

“HTMLUnknownElement 接口必须用于本规范未定义的 HTML 元素。”

W3C - HTML5：符合标准的文档
WhatWG - HTML 标准：DOM 元素

于 2016-01-24T03:59:33.187 回答
11

我想指出，“有效”这个词在这种情况下可以有两种不同的含义，其中任何一种都是潜在的，嗯，有效的。

  1. 带有自定义标签的 HTML 文档是否应该被视为有效的 HTML5？ 答案显然是“不”。该规范准确列出了哪些标签在哪些上下文中有效。这就是为什么 HTML 验证器不接受带有自定义标签的文档，或者在错误位置带有标准标签的文档（例如标题中的“img”标签）。

  2. 带有自定义标签的 HTML 文档是否会以标准的、明确定义的方式跨浏览器进行解析和呈现？ 在这里，也许令人惊讶的是，答案是“是的”。尽管从技术上讲，该文档不被视为有效的 HTML5，但 HTML5 规范确实指定了浏览器在看到自定义标签时应该做什么：简而言之，自定义标签的行为有点像 a <span>- 它没有任何意义，并且什么都不做默认，但可以通过 HTML 设置样式并通过 javascript 访问。

于 2016-08-03T19:24:50.723 回答
5

自定义 HTML 元素是一个新兴的 W3 标准，我一直致力于使您能够使用解析器声明和注册自定义元素，您可以在此处阅读规范：W3 Web 组件自定义元素规范。此外，Microsoft 支持一个名为X-Tag的库（由前 Mozilla 开发人员编写）——它使使用 Web 组件变得更加容易。

于 2012-10-15T18:20:39.943 回答
5

给出反映现代页面的更新答案。

自定义标签是有效的，如果，

1) 它们包含一个破折号 

<my-element>

2) 它们是嵌入式 XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

这假设您使用的是 HTML5 文档类型<!doctype html>

考虑到这些简单的限制，现在尽最大努力保持 HTML 标记的有效性是有意义的（请停止关闭 和 之类的标记<img>，<hr>除非您使用 XHTML 文档类型，否则这是愚蠢和不正确的，您可能不需要）。

鉴于 HTML5 清楚地定义了解析规则，一个兼容的浏览器将能够处理你扔给它的任何标签，即使它不是严格有效的。

于 2017-01-05T22:08:08.133 回答
3

引用HTML5 规范的可扩展性部分：

对于可以仅限于 XML 序列化并且不需要在 HTML 序列化中支持的标记级功能，供应商应使用命名空间机制来定义自定义命名空间，其中支持非标准元素和属性。

因此，如果您使用 HTML5 的 XML 序列化，您可以合法地执行以下操作：

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

但是，如果您使用的是 HTML 语法，那么您可以做的事情就会受到更多限制。

对于旨在与 HTML 语法一起使用的标记级功能，扩展应限于“x-vendor-feature”形式的新属性 [...] 不应创建新元素名称。

但这些说明主要针对浏览器供应商，他们假定他们会为他们选择创建的任何自定义元素提供视觉样式和功能。

然而，对于作者来说，虽然在页面中嵌入自定义元素可能是合法的（至少在 XML 序列化中），但您在 DOM 中得到的只是一个节点。如果您希望您的自定义元素实际做某事，或以某种特殊方式呈现，您应该查看自定义元素规范。

有关该主题的更温和的入门知识，请阅读Web Components Introduction，其中还包括有关 Shadow DOM 和其他相关规范的信息。这些规范目前仍在草稿中——您可以在此处查看当前状态——但它们正在积极开发中。

例如，greeting元素的简单定义可能如下所示：

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

这告诉浏览器以引号呈现元素内容，并以文本“Simon says:”为前缀，其样式为灰色。通常，像这样的自定义元素定义将存储在单独的 html 文件中，您将使用链接导入该文件。

<link rel="import" href="greeting-definition.html" />

尽管您也可以根据需要将其包含在内。

我使用 Polymer polyfill 库创建了上述定义的工作演示，您可以在此处看到。请注意，这是使用旧版本的 Polymer 库 - 较新版本的工作方式完全不同。但是，由于规范仍在开发中，无论如何我都不建议在生产代码中使用它。

于 2013-07-16T21:53:08.320 回答
2

无需任何 dom 声明即可使用您想要的任何内容

<container>content here</container>

添加您自己的样式（显示：块），它将适用于任何现代浏览器

于 2019-08-21T20:14:44.663 回答
1

data-*属性在HTML5中是有效的，甚至在 HTML4 中，所有用于尊重它们的 Web 浏览器。添加新标签在技术上是可以的，但不建议仅仅因为：

  1. 它可能与将来添加的内容发生冲突，并且
  2. 使 HTML 文档无效，除非通过 JavaScript 动态添加。

我只在谷歌不关心的地方使用自定义标签，对于游戏引擎 iframe 中的 ecample，我制作了一个<log>包含<msg>,<error>和<warning>- 但仅通过JavaScript的标签。根据验证者的说法，它是完全有效的。它甚至可以在 Internet Explorer 中使用它的样式！;]

于 2013-01-01T03:31:12.187 回答
1

自定义标签在 HTML5 中无效。但目前浏览器支持解析它们，您也可以使用 css 来使用它们。因此，如果您想为当前浏览器使用自定义标签，那么您可以。但是一旦浏览器严格执行 W3C 标准来解析 HTML 内容，这种支持可能会被取消。

于 2013-07-17T13:03:10.747 回答
1

我知道这个问题很老，但我一直在研究这个主题，虽然上面的一些陈述是正确的，但它们并不是创建自定义元素的唯一方法。例如：

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

可以正常工作（到目前为止，在较新版本的 Google Chrome、IE、FireFox 和移动 Safari 中）。您只需要一个字母字符 (az, AZ) 来启动标签，然后您可以在之后使用任何非字母字符。如果在 CSS 中，您必须使用“\”（反斜杠）才能找到元素，例如需要 Query\^ { ... } 。但是在 JS 中，你只是按照你的看法来称呼它。我希望这会有所帮助。在此处查看示例

-水貂CBOS

于 2014-11-03T19:19:56.623 回答