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

Question

最近,一位朋友决定不在HTML中关闭他的标签或属性,因为它不是必需的,他将节省一些带宽和下载时间.我告诉他这是一个坏主意,并且"比对不起更安全",但是,我真的只能在这个问题上找到2个资源:

1. http://css-tricks.com/13286-problems-with-unquoted-attributes/
2. http://www.cs.tut.fi/~jkorpela/qattr.html

#1很好,但就像他说的那样,它们并不是真正的世界范例,这就是为什么我选择#2,但它们只是真正展示了<a>与大多数其他标签/节点不同的东西.

是否有其他资源或测试用例可以更好地引用属性并关闭标记？

Answer 1

您通常可以在不改变"外观的方式"的情况下将结束标记保留在许多元素之外.但是,即使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; }

现在它们看起来不一样,即使标记没有从前面的例子改变.其根本原因是两个版本生成不同的DOM树,此版本遍历两个列表中的所有节点并对其进行计数,然后显示结果和警报中找到的节点列表.你可以看到顶部列表有12个DOM节点,下面的列表有15个.结果至少是一致的跨浏览器,不同之处在于你在编写脚本时经常跳过的文本节点,但这表明即使当标签关闭或不关闭时,视觉输出看起来是相同的,即使在像这样简单的示例中也存在潜在的差异.

Answer 2

不关闭标签可能会导致浏览器不兼容和页面呈现不正确.仅此一项就足以让您正确关闭标签.

如果你问我,节省带宽和下载时间是一个可怕的借口.这是2011年,即使在拨号上,你在没有关闭几个标签时保存的几个字节也不会引人注目.但是,由于渲染不正确而导致页面损坏.