对于自定义标签在HTML5中是否有效,我一直无法找到一个明确的答案,比如:
<greeting>Hello!</greeting>
我在说明书中什么都没发现:
http://dev.w3.org/html5/spec/single-page.html
而且自定义标记似乎无法使用W3C验证器进行验证。
对于自定义标签在HTML5中是否有效,我一直无法找到一个明确的答案,比如:
<greeting>Hello!</greeting>
我在说明书中什么都没发现:
http://dev.w3.org/html5/spec/single-page.html
而且自定义标记似乎无法使用W3C验证器进行验证。
当前回答
data-*属性在HTML5中有效,甚至在HTML4中,所有web浏览器都尊重它们。 添加新标签在技术上是可以的,但不建议这样做,因为:
它可能会与将来添加的内容相冲突,而且 使HTML文档无效,除非通过JavaScript动态添加。
我只在谷歌不关心的地方使用自定义标签,在一个游戏引擎iframe中,我做了一个<日志>标签,包含<msg>, <错误>和<警告> -但只通过JavaScript。根据验证器,它是完全有效的。它甚至可以在Internet explorer中使用它的样式!;]
其他回答
自定义元素规范可以在Chrome和Opera中使用,也可以在其他浏览器中使用。它提供了一种以正式方式注册自定义元素的方法。
自定义元素是可以定义的DOM元素的新类型 作者。与无状态且短暂的装饰器不同,自定义 元素可以封装状态并提供脚本接口。
自定义元素是更大的W3规范Web组件的一部分,另外还有模板、HTML导入和影子DOM。
Web组件使Web应用程序作者能够使用 视觉的丰富程度和交互性是CSS无法实现的 单独使用,并且易于组合和重用,而不可能使用脚本 今天库。
但是,在谷歌开发人员的这篇关于自定义元素v1的优秀通览文章中:
自定义元素的名称必须包含破折号(-)。因此<x-tags>、<my-element>和<my-awesome-app>都是有效名称,而<tabs>和<foo_bar>则不是。这个需求是为了让HTML解析器能够区分自定义元素和常规元素。当新标签添加到HTML中时,它还可以确保向前兼容性。
一些资源
Web组件示例可从https://WebComponents.org获得 WebComponents.js充当了Web组件的填充,直到它们在任何地方都得到支持。参见WebComponents.js github页面和web浏览器支持表。
自定义标记在HTML5中无效。但目前浏览器支持解析它们,你也可以使用css来使用它们。因此,如果你想为当前的浏览器使用自定义标记,那么你可以。但是,一旦浏览器实现了严格用于解析HTML内容的W3C标准,这种支持可能就会消失。
data-*属性在HTML5中有效,甚至在HTML4中,所有web浏览器都尊重它们。 添加新标签在技术上是可以的,但不建议这样做,因为:
它可能会与将来添加的内容相冲突,而且 使HTML文档无效,除非通过JavaScript动态添加。
我只在谷歌不关心的地方使用自定义标签,在一个游戏引擎iframe中,我做了一个<日志>标签,包含<msg>, <错误>和<警告> -但只通过JavaScript。根据验证器,它是完全有效的。它甚至可以在Internet explorer中使用它的样式!;]
引用HTML5规范的可扩展性部分:
对于标记级特性,可以限制在XML序列化中,并且不需要在HTML序列化中得到支持,供应商应该使用名称空间机制来定义自定义名称空间,其中支持非标准元素和属性。
如果你在使用HTML5的XML序列化,你可以这样做:
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
但是,如果您使用的是HTML语法,那么您所能做的事情就会受到很大的限制。
对于打算与HTML语法一起使用的标记级特性,扩展应该限制为“x-vendor-feature”形式的新属性[…]不应该创建新的元素名称。
但是这些说明主要是针对浏览器供应商的,他们可能会为他们选择创建的任何自定义元素提供视觉样式和功能。
不过,对于作者来说,虽然在页面中嵌入自定义元素是合法的(至少在XML序列化中是这样),但除了DOM中的一个节点之外,您不会得到其他任何东西。如果你想让你的自定义元素实际做一些事情,或者以某种特殊的方式呈现,你应该看看自定义元素规范。
要了解这个主题的更温和的入门知识,请阅读Web组件介绍,其中还包括关于Shadow DOM和其他相关规范的信息。这些规范目前仍是工作草案——你可以在这里看到当前的状态——但它们正在积极地开发中。
例如,greeting元素的简单定义可能是这样的:
<element name="greeting">
<template>
<style scoped>
span { color:gray; }
</style>
<span>Simon says:</span>
<q><content/></q>
</template>
</element>
这告诉浏览器以引号显示元素内容,并以文本“Simon说:”为前缀,其样式为灰色。通常,像这样的自定义元素定义将存储在一个单独的html文件中,您将使用链接导入该文件。
<link rel="import" href="greeting-definition.html" />
如果你想,你也可以将它内联。
我用你可以在这里看到的Polymer polyfill库创建了上述定义的工作演示。注意,这是使用旧版本的聚合物库-最新版本的工作方式完全不同。然而,由于规范仍在开发中,我不建议在产品代码中使用这种方法。
自定义HTML元素是一个新兴的W3标准,我一直在为它做出贡献,它允许你用解析器声明和注册自定义元素,你可以在这里阅读规范:W3 Web Components自定义元素规范。此外,微软支持一个名为X-Tag的库(由前Mozilla开发人员编写)——它使使用Web组件更加容易。