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

发布于 2024-09-16 09:26:55 字数 911 浏览 2 评论 0原文

即使是新的 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 网页的支持是什么样的？”）

原文

Even the new HTML5 tags aren't enough to describe structures without falling back to divs. What's stopping me from changing:

<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>

into something like:

<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>

To me, the second example is a lot cleaner. Is there anything (i.e., browser support) stopping me from doing this?

(I realize what it is is, essentially, XML, but in that case, the question becomes, "what does browser support look like for rendering XML web pages?")

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-09-23 09:26:56

好消息

没有什么可以阻止你
使用任意数量的自定义标签，浏览器会知道你的意思。不仅是现代浏览器，IE7+ 也是如此。
无默认外观
浏览器会将您的标记视为未知，并且不会对其应用默认样式。客户端和平台之间没有奇怪的边距、填充，也没有意外。 display 属性也不是隐含的，因此给它一个值，但之后一切都如常。 DOM 包含您的节点、querySelector 工作、样式应用等。
超级可读
您一定会喜欢 HTML 源代码的新外观。

要考虑的事情

是否自动关闭 - 要使标签自动关闭，请使用旧的格式，就像使用一样。这很重要，否则浏览器会寻找结束标签。我的意思是，他们怎么可能不。
未来的冲突 - 这是自定义标签怀疑论者唯一的优点：就像我们在 HTML5 中有很多新标签一样，您有可能将标签命名为“icon”，这意味着下一个 HTML 标准中的某些内容，即使有一堆渲染默认值，也会使您的页面严重混乱。所以我想说，如果你想安全起见，请使用作为你的标签，由于 Web 组件。另请参阅 HTML 标准中的 § 4.13 本身。
归咎于磁铁效应 - 说真的，这是自定义标签的问题，我一直在这条路上走下去。仅当从事同一项目的每个人都同意时才使用自定义标签。否则，每当出现问题时，“因为你愚蠢的自定义标签”都是你的错，你必须将每个实例更改为通常的
，仅后来发现真正的问题完全无关。

TLDR：

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

Good news

Nothing is stopping you
Use as many custom tags as you like, browsers will know what you mean. Not just the modern ones but IE7+ too.
No default look
Browsers will treat your tag as unknown and apply no default style to it. No weird margins, paddings, no surprises across clients and platforms. The display property is not implied either so give it a value, but after that, everything is as usual. DOM contains your node, querySelector works, styles apply, etc.
Super readable
You'll love the new look of your HTML source.

Things to consider

Self-closing or not - to make your tag self-closing, use the good old <something/> format, as you would with <br/> for example. It's important, otherwise browsers go look for the closing tag. I mean, how could they not.
Future collisions - that's the only good point from custom tag skeptics: just as we have a lot of new tags in HTML5, it's a possibility that you name a tag "icon" and it will mean something in the next HTML standard, even with a bunch of rendering defaults, and that can mess your page up badly. So I'd say, if you want to be on the safe side, use <dashed-names> for your tags, they will never ever mess with dashed tag names thanks to the naming of Web Components. Also check out § 4.13 in HTML standard itself.
Blame magnet effect - seriously, that's an issue with custom tags, I've been down this road. Use custom tags only if everyone working on the same project is on board with it. Otherwise, whenever something breaks it will be your fault "because of your stupid custom tags", and you'll have to change every instance to the usual <div class="gurgleburgle">, only to find later that the real issue was totally unrelated.

TLDR:

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

回复收藏 0 原文

恍梦境° 2024-09-23 09:26:56

大多数浏览器只会将标签视为任意标签（就像旧浏览器对待 HTML5 标签的方式一样）。没有什么可以阻止您使用自己的标签，但这并不是一种被广泛接受的 HTML 编码方式。 HTML 应该使用预定义的标签。

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

回复收藏 0 原文

雨落星ぅ辰 2024-09-23 09:26:56

您选择标签的目标是什么？如果您的目标是呈现信息，那么使用 div 和其他面向呈现的结构就很好。您的标签看起来更像是在尝试描述实际数据。如果是这种情况，那么最好在服务器端使用 XSLT 转换 XML 以输出用于表示标记的 HTML。请记住，浏览器只是一个渲染引擎，它使用 HTML 规范作为为给定站点渲染内容的蓝图。浏览器不需要理解“post”或“userInfo”之类的信息，因为它没有上下文来理解从渲染角度如何处理该信息。 CSS 可以帮助浏览器理解您想要在视觉上执行的操作，但首先要问自己这样的标记的目标是什么：存储数据（XML 样式）或呈现数据。如果要呈现它，那么如果您想继续使用浏览器作为渲染引擎，您应该遵循标准。祝你好运，如果我们都能定义我们的演示方案，那就太好了，有趣的想法！

回复收藏 0 原文

神仙妹妹 2024-09-23 09:26:56

getElementsByTagName 的自定义标签让我失败。例如，

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

这会在 IE8（怪异模式或标准模式）下失败

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

，除非您的 html 标记读取

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

getElementsByTagName fails me with custom tags. Example,

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

This fails with IE8 (Quirks Mode or Standard Mode)

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

Unless your html tag reads

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

回复收藏 0 原文

森林迷了鹿 2024-09-23 09:26:56

问题是它不会验证并且新标签将被忽略。

回复收藏 0 原文

我一向站在原地 2024-09-23 09:26:55

原因之一是 Internet Explorer（以及早期版本的 Firefox）对于未定义的标签没有后备机制，最终会忽略它们的样式和嵌套。没有 shiv，您的网站在这些浏览器中会严重崩溃。

回复收藏 0 原文

偏爱自由 2024-09-23 09:26:55

您可以使用自己的标签，但问题是，由于它们不是标准的，浏览器不会知道它们可能具有匹配的结束标签。当然，该文档不会被验证为正确的 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>

浏览器将看到，而不是现在如何处理它，并将其视为本质上“无”并忽略它。然后他们会很高兴地解析到下一点，并看到一些纯文本，其中包含有效的跨度。最终他们会到达并忽略它。

这就是为什么 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 文档。

You can use your own tags, but the problem is that since they're not standard, browsers won't know that they may have matching closing tags. And of course, the document won't validate as proper 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>

Browsers will see <blah>, not now how to deal with it, and treat it as essentially "nothing" and ignore it. Then they'll happily parse away on to the next bit, and see some plain text, with a valid span inside. Eventually they'll reach the </blah> and ignore that as well.

This is why Javascript and CSS had to support the opening HTML comment sequence as part of their respective language definitions:

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

When Javascript was first introduced, there were still MANY other browsers out there that were entirely unaware of Javascript, and so they'd ignore tags, and happily output your Javascript code. Ditto for CSS.

If you really need custom tags, you can produce the document as XML with your own DTD attached, and use XSLT to transform it into a valid HTML/X-HTML document.

回复收藏 0 原文

~没有更多了~