当前位置：文江博客话题详情

HTML中不关闭标签和属性的实际问题是什么

发布于 2024-11-30 11:49:26 字数 528 浏览 0 评论 0原文

最近，一位朋友决定不关闭 HTML 中的标签或属性，因为这不是必需的，而且他会节省一些带宽和下载时间。我告诉他这是一个坏主意，并且“安全总比后悔好”，但是，我只能找到关于这个问题的 2 个资源：

#1 很好，但即使正如他所说，它们并不是真正的现实世界示例，这就是我转到 #2 的原因，但它们只真正显示，这与大多数其他标签有很大不同/节点。

是否有其他资源或测试用例可以更好地说明引用您的属性并关闭标签的原因？

原文

分享到QQ

分享到微博

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

发布评论

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

被你宠の有点坏 2024-12-07 11:49:27

您通常可以将许多元素的结束标签保留下来，而不改变“它的外观”。然而，尽管 HTML5 的主要目标之一是标准化浏览器处理不良标记的方式，不关闭标签可能会以意想不到的方式影响您的内容。这是一个简单的例子，一个项目列表，其中一些项目是空白的，都没有明确的闭合标签，并且带有：

<ul>
    <li>Item
    <li>
    <li>Item
    <li>
    <li>Item
</ul>

<ul>
    <li>Item</li>
    <li></li>
    <li>Item</li>
    <li></li>
    <li>Item</li>
</ul>

查看两个在浏览器中它们看起来是一样的。但是，如果您添加一些 CSS 来隐藏空的：

li:empty { display: none; }

现在它们看起来不一样< /a>，即使标记与上一个示例相比没有改变。其根本原因是两个版本产生不同的 DOM 树，该版本迭代所有节点在两个列表中并对它们进行计数，然后显示结果和警报中找到的节点列表。您可以看到顶部列表有 12 个 DOM 节点，下面的列表有 15 个。结果至少在跨浏览器上是一致的，区别在于文本节点，无论如何，您在编写脚本时都会经常跳过这些节点，但这表明即使当标签关闭或不关闭时，视觉输出看起来是相同的，即使在这样简单的示例中也存在潜在的差异。

You can often leave the closing tags off many elements without changing 'the way it looks'. However, even though one of the main goals of HTML5 is to standardize how browsers deal with bad markup, not closing tags can impact your content in unexpected ways. Here's a simple example, a list of items where some of the items are blank, both without explicitly closed tags and with:

<ul>
    <li>Item
    <li>
    <li>Item
    <li>
    <li>Item
</ul>

<ul>
    <li>Item</li>
    <li></li>
    <li>Item</li>
    <li></li>
    <li>Item</li>
</ul>

Looking at the two in a browser they look identical. However, if you add a bit of CSS to hide the empty ones:

li:empty { display: none; }

Now they don't look the same, even though the markup hasn't changed from the previous example. The underlying reason for this is that the two versions produce different DOM trees, this version iterates through all the nodes in both lists and counts them, then shows the results and the list of nodes found in alerts. You can see the top list has 12 DOM nodes, the lower list has 15. The results are at least consistent cross browser, and the difference is in text nodes which you'll frequently skip over when scripting anyway, but this shows that even if the visual output looks the same when tags are closed or not, there are underlying differences even in an example as simple as this.

回复收藏 0 原文

美人骨 2024-12-07 11:49:27

不关闭标签可能会导致浏览器不兼容和页面呈现不正确。仅此一点就足以成为正确关闭标签的理由。

如果你问我的话，节省带宽和下载时间是一个可怕的借口。现在是 2011 年，即使在拨号时，由于不关闭一些标签而节省的几个字节也不会被注意到。然而，由于渲染不当会导致页面损坏。

回复收藏 0 原文

桃气十足 2024-12-07 11:49:27

不关闭标签可能会在标记中的元素之间创建意外的空白。

考虑以下示例。

<!-- English quoting rules. -->
<style>
    blockquote > p::before { content: open-quote; }
    blockquote > p::after { content: no-close-quote; }
    blockquote > p:last-of-type::after { content: close-quote; }
</style>

<!-- This is ok. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</blockquote>

<!-- This isn't. There are blank spaces after the last (unclosed) <p> element.
     Thus, the closing quote appears separated with a space from the text. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.
    <p>Lorem ipsum dolor sit amet.
</blockquote>

Not closing tags can create unexpected blank spaces between elements in the markup.

Consider the following example.

<!-- English quoting rules. -->
<style>
    blockquote > p::before { content: open-quote; }
    blockquote > p::after { content: no-close-quote; }
    blockquote > p:last-of-type::after { content: close-quote; }
</style>

<!-- This is ok. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</blockquote>

<!-- This isn't. There are blank spaces after the last (unclosed) <p> element.
     Thus, the closing quote appears separated with a space from the text. -->
<blockquote>
    <p>Lorem ipsum dolor sit amet.
    <p>Lorem ipsum dolor sit amet.
</blockquote>

回复收藏 0 原文

梦醒时光 2024-12-07 11:49:27

在我看来，这只是糟糕的编码实践。

程序员有两种类型：那些关心的人和那些不关心的人。

这是一种懒惰的编程，就像没有编码标准，或者没有格式化你的代码一样……就像是一个木匠，而不是打磨你刚刚建造的桌子的边缘。

大多数浏览器都支持它，但有些浏览器可能会抱怨。

回复收藏 0 原文

暗喜 2024-12-07 11:49:27

大多数 HTML 标签都是容器。考虑：

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section
</section>
Stuff outside a section
<p>
  Other text
</p>

在此示例中，“部分内的内容”将是红色文本，“部分外的内容”不是红色。在这个例子中：

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section

Stuff outside a section
<p>
  Other text
</p>

...在这个例子中，“部分内的内容”、“部分外的内容”和“其他文本”都将是红色的 - 也就是说，该部分永远不会结束。浏览器可能会尝试假设该部分可能在哪里结束，但在上面的示例中，唯一可能的假设是该部分继续到文档的末尾，这不是预期的。

简而言之，不关闭 HTML 标签只会让事情变得更加混乱，会导致页面在浏览器之间呈现与预期不一致，而且通常是一个坏主意。事实上，太糟糕了，以至于根本不应该将其视为一个严肃的建议。您的朋友显然从未开发过实际的网站。

Most HTML tags are containers. Consider:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section
</section>
Stuff outside a section
<p>
  Other text
</p>

In this example, "Stuff inside a section" would be red text, "Stuff outside a section" is not red. In this example:

<style>
 section {
   color: red;
 }
</style>
<section>
  Stuff inside a section

Stuff outside a section
<p>
  Other text
</p>

... in this example, "Stuff inside a section", " Stuff outside a section", and "Other text" would ALL be red - that is, the section never ended. The browser may try to assume where the section could have ended, but in my above example the only assumption possible is that the section continues to the end of the document, which is not what was intended.

In short, not closing HTML tags just makes things more confusing for you, will cause pages to render inconsistently from expectations and between browsers, and is just generally a bad idea. So bad, in fact, that it shouldn't even be taken as a serious suggestion at all. Your friend has clearly never developed an actual web site.

回复收藏 0 原文