Question

即使是新的HTML5标签也不足以描述结构而不会回退到div。什么阻止我改变：

<div class="post">
    <div class="userinfo">
        <span class="name">Casey</span>
        <img class="avatar" src="..." />
    </div>
    <div class="body">
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </div>
</div>

成像：

<post>
    <userinfo>
        <name>Casey</name>
        <img class="avatar" src="..." />
    </userinfo>
    <pbody>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
        <p>blah blah blah</p>
    </pbody>
</post>

对我来说，第二个例子更清洁。是否有任何东西（即浏览器支持）阻止我这样做？

（我意识到它本质上是XML，但在这种情况下，问题就变成了，“浏览器支持对于呈现XML网页是什么样的？”）

Answer 1

一个原因是Internet Explorer（以及早期版本的Firefox）没有针对未定义的标记进行回退，并且最终忽略了它们的样式和嵌套。 Without a shiv，您的网站会在这些浏览器中崩溃。

Answer 2

您可以使用自己的标签，但问题在于，由于它们不是标准的，因此浏览器不会知道它们可能具有匹配的结束标记。当然，该文档不会验证为正确的HTML / X-HTML。

<blah>
    This is some <span>test</span> test text with another <bogus>tag</bogus> tag
    within, which ends with a fake self-closing <tag />
</blah>

浏览器会看到<blah>，而不是现在如何处理它，并将其视为“没有”并忽略它。然后他们会愉快地解析下一个位，看到一些纯文本，里面有一个有效的跨度。最终他们会到达</blah>并忽略它。

这就是为什么Javascript和CSS必须支持打开HTML注释序列作为其各自语言定义的一部分：

<script type="text/javascript">
<!--  // <--actually a part of the javascript spec, treated as a comment.
     alert('hey!');
//-->
</script>

当Javascript首次推出时，仍有许多其他浏览器完全不知道Javascript，因此他们会忽略标签，并愉快地输出您的Javascript代码。同样适用于CSS。

如果您确实需要自定义标记，则可以使用自己的DTD将文档生成为XML，并使用XSLT将其转换为有效的HTML / X-HTML文档。

Answer 3

大多数浏览器只会将标记视为任意标记（例如旧浏览器如何处理HTML5标记）。没有什么能阻止您使用自己的标签，但它并不是一种广为接受的HTML编码方式。 HTML应该使用预定义的标签。

如果您对使用任意标签进行编码感兴趣，可以使用XML。您可以使用XSLT格式化XML（以类似于样式表的方式使用，但功能更强大）。看看这里：http://www.w3schools.com/xml/xml_xsl.asp

Answer 4

您选择的代码的目标是什么？如果你的目标是提供信息，那么使用div和其他面向表示的结构是很好的。您的标签看起来更像是他们试图描述实际数据。如果是这种情况，那么带有XSLT的XML在服务器端转换为输出HTML以进行表示标记是最好的。请记住，浏览器只是一个渲染引擎，它使用HTML规范作为给定网站呈现内容的蓝图。浏览器不需要像“post”或“userInfo”那样理解信息，因为它没有用于从具有该信息的渲染透视图中取消删除操作的上下文。 CSS可以帮助浏览器理解您想要在视觉上做什么，但首先要问自己的目标是以这种方式获得标记，存储数据（XML风格）还是呈现它。如果要呈现它，那么如果要继续使用浏览器作为渲染引擎，则应该使用标准。祝你好运，如果我们都可以定义我们的演示方案，那将是很棒的，有趣的想法！

Answer 5

getElementsByTagName使自定义标记失败。例如，

<acme:mytag id="mytag">
    <div id ="x">x</div>
    <div id ="y">y</div>
    <div id ="z">z</div>
</acme:mytag>

IE8（Quirks模式或标准模式）

失败

var mytag = document.getElementById('mytag'); // it's found
var mydivs = mytag.getElementsByTagName ('div'); // but this is always 0

除非你的html标签是

<html XMLNS:acme>
...
</html>

Answer 6

好消息

没有什么可以阻止您
使用任意数量的自定义标签，浏览器就会知道您的意思。不只是现代的，还有IE7 +。
没有默认外观
浏览器会将您的标签视为未知标签，并且不会对其应用任何默认样式。没有怪异的边距，填充，在客户和平台之间没有任何惊喜。也没有暗示display属性，因此请给它一个值，但是之后，一切照常。 DOM包含您的节点，querySelector作品，适用样式等。
超级可读
您会喜欢HTML源代码的新外观。

注意事项

是否自动关闭-要使标签自动关闭，请使用旧的<something/>格式，例如使用<br/>。这很重要，否则浏览器会去寻找结束标记。我的意思是，他们怎么会没有。
未来的冲突-这是来自自定义标签怀疑论者的唯一好处：就像HTML5中有很多新标签一样，您有可能将标签命名为“ icon”，这意味着在下一个HTML标准中，即使有许多渲染默认设置，也可能意味着可能会严重破坏您的页面。因此，我想说，如果您想安全起见，请为标签使用<dashed-names>，由于Web Components的命名，它们将永远不会与虚线的标签名称混淆。还要检查§ 4.13 in HTML standard本身。
叶片磁效应-严重的是，这是自定义标签的问题，我一直在走这条路。如果在同一项目中工作的每个人都参与其中，请仅使用自定义标签。否则，每当出现问题时，都是“由于愚蠢的自定义标签”造成的，这是您的错，并且您必须将每个实例更改为通常的<div class="gurgleburgle">，之后才发现真正的问题完全无关。 / p>

TLDR ：

    <custom-tags> Yes you can use them </custom-tags>

Answer 7

问题是它无法验证，新标签只会被忽略。

是什么阻止我在HTML中使用任意标签？

7 个答案:

好消息

注意事项