Question

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

<greeting>Hello!</greeting>

我在规范中找不到任何方式：

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

自定义标签似乎没有使用W3C验证器进行验证。

Answer 1

Custom Elements specification可在Chrome和Opera中使用，并可在other browsers中使用。它提供了一种以正式方式注册自定义元素的方法。

自定义元素是可以定义的新元素DOM元素作者。与decorators不同，Web Components是无国籍和短暂的，习俗元素可以封装状态并提供脚本接口。

自定义元素是名为excellent walk through article的更大W3规范的一部分，以及模板，HTML导入和Shadow DOM。

Web Components使Web应用程序作者能够使用a定义窗口小部件 CSS无法实现视觉丰富度和交互性单独使用脚本无法实现的组合和重用今天的图书馆。

但是，请参阅Google Developers上关于自定义元素v1的https://WebComponents.org：

自定义元素的名称必须包含短划线（-）。因此<x-tags>，<my-element>和<my-awesome-app>都是有效名称，而<tabs>和<foo_bar>则不是。这个要求是HTML解析器可以将自定义元素与常规元素区分开来的。当新标记添加到HTML时，它还可确保向前兼容性。

部分资源

示例Web组件位于WebComponents.js
WebComponents.js github page & web browser support table充当Web组件的polyfill，直到它们在任何地方都受支持。另请参阅{{3}}。

Answer 2

可能并允许：

用户代理必须处理他们没有的元素和属性理解为语义中立;将它们留在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（我的博客）

Answer 3

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

例如，the root element must be an html element.

html元素只能包含A head element followed by a body element.

body元素可能只包含Flow content，其中流内容被定义为元素： a, abbr, address, area (if it is a descendant of a map element), 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, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (if the scoped attribute is present), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr and Text

等等。

内容模型在任何时候都没有说“你可以在这个中添加任何你喜欢的元素”，这对自定义元素/标签来说是必要的。

Answer 4

基本自定义元素和属性

自定义元素和属性在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-*和非{ {1}}名称，并定义浏览器要遵守的自定义行为和语法。它需要一些花哨的JavaScript，详见下面的链接。

HTML5 Rocks - Defining New Elements in HTML
WebComponents.org - Introduction to Custom Elements
W3C - Web Components: Custom Elements

关于基本语法的有效性

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

W3C - HTML5: Extensibility

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

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

＆＃34;适用的规范可以定义新的文档内容（例如a   foobar元素）[...]。如果给定的语法和语义   符合HTML5文档的使用适用不变   规范，然后该文件仍然是符合HTML5   。文件＆＃34;

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

＆＃34;用户代理不能自由处理不符合要求的文档   请;本说明书中描述的处理模型适用   无论输入是否符合，都可以实现   文件＆＃34;

＆＃34; HTMLUnknownElement接口必须用于HTML元素   本规范未定义。＆＃34;

W3C - HTML5: Conforming Documents
WhatWG - HTML Standard: DOM Elements

Answer 5

我想指出“＃34;有效＆＃34;在这种情况下可以有两种不同的含义，其中任何一种都是潜在的，有效的。

带有自定义标签的HTML文档是否应被视为有效的HTML5？ 对此的答案显然是＃34;没有。＆＃34; The spec准确列出了哪些标记在哪些上下文中有效。这就是为什么HTML验证器不接受带有自定义标签的文档，或者标准标签位于错误的位置（例如标题中的＆＃34; img＆＃34;标签）。
是否会在浏览器中以标准，明确定义的方式解析和呈现带有自定义标签的HTML文档？ 在这里，或许令人惊讶的是，答案是“是的。”＃34;即使该文档在技术上不被视为有效的HTML5，但HTML5规范does specify确实是浏览器在看到自定义标记时应该执行的操作：简而言之，自定义标记的行为类似于<span> - 它没有任何意义，默认情况下不执行任何操作，但它可以通过HTML设置样式并通过javascript访问。

Answer 6

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

Answer 7

引用Extensibility section of the HTML5 specification：

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

因此，如果您正在使用HTML5的XML序列化，那么您可以这样做：

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

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

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

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

对于作者来说，虽然在页面中嵌入自定义元素可能是合法的（至少在XML序列化中），但您不会获得除DOM中的节点之外的任何东西。如果您希望自定义元素实际执行某些操作，或者以某种特殊方式呈现，则应该查看Custom Elements specification。

有关该主题的更温和的入门读物，请阅读Web Components Introduction，其中还包含有关Shadow DOM和其他相关规范的信息。这些规范目前仍在起草 - 您可以看到当前状态here - 但它们正在积极开发中。

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

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

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

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

虽然您可以根据需要将其包含在内。

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

Answer 8

提供反映现代网页的更新答案。

自定义标签有效，如果

1）它们包含破折号

import pandas as pd
import numpy as np
from sklearn.linear_model import LinearRegression

#I change the dates to be integers, I am not sure this is the best way    
df['date'] = pd.to_datetime(df['date'])  
df['date_delta'] = (df['date'] - df['date'].min())  / np.timedelta64(1,'D')

#Is this correct? 
model = LinearRegression()
X = df[['date_delta']]
y = df.Value
model.fit(X, y)
model.score(X, y)
coefs = zip(model.coef_, X.columns)
print "sl = %.1f + " % model.intercept_ + \
" + ".join("%.1f %s" % coef for coef in coefs)

2）它们是嵌入式XML

<my-element>

这假设您使用的是HTML5 doctype <greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

考虑到这些简单的限制，现在有必要尽最大努力保持HTML标记的有效性（请停止关闭<!doctype html>和<img>等标记，除非您使用它，否则它会变得愚蠢和不正确一个XHTML doctype，你可能不需要）。

鉴于HTML5明确定义了解析规则，兼容的浏览器将能够处理您抛出的任何标记，即使它没有严格有效。

Answer 9

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

它可能与将来添加的内容发生冲突，
除非通过JavaScript动态添加，否则HTML文档无效。

我仅在Google不关心的地方使用自定义标记，对于游戏引擎iframe中的ecample，我制作了包含<log>，<msg>和{{1}的<error>标记} - 但仅限于 JavaScript 。根据验证人的说法，它完全有效。它甚至可以在Internet Explorer中使用它的造型！ ]

Answer 10

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

Answer 11

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

<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中）。您只需要一个字母字符（a-z，A-Z）来启动标记，然后您可以使用之后的任何非字母字符。如果在CSS中，必须使用“\”（反斜杠）才能找到元素，例如需要Query \ ^ {...}。但在JS中，你只需要它如何看待它。我希望这会有所帮助。请参见示例here

-Mink CBOS

Answer 12

随便使用任何内容而无需任何dom声明

__pairs

添加您自己的样式（display：block），它将与任何现代浏览器一起使用

自定义元素是否有效HTML5？

12 个答案:

基本自定义元素和属性

高级自定义元素和属性

关于基本语法的有效性