我注意到 jQuery(或者是 Firefox)将我的一些<span class="presentational"></span> into <span class="presentational" />
现在我的问题是,这样写我的标记可以吗?任何浏览器都会窒息它吗?
就个人而言,我认为<span class="presentational" />
如果它是空的,它看起来更干净。
当您在 Firefox 中查看源代码时,我假设您的问题与自动关闭元素上的红色斜杠有关。如果是这样,那么您已经陷入了浏览器制造商与 Web 开发人员之战中最激烈但同时也是最被动、激进的辩论之一。XHTML 不仅仅是文档的标记。它还涉及如何通过网络提供文档。
在我开始之前;我正在努力不在这里偏袒任何一方。
XHTML 1.1 规范说,Web 服务器应该使用 Content-Type 为 application/xhtml+xml 的 XHTML 服务。Firefox 将那些尾随斜杠列为无效,因为您的文档是作为 text/html 而不是 application/xhtml+xml 提供的。举这两个例子;相同的标记,一个用作 application/xhtml+xml,另一个用作 text/html。
http://alanstorm.com/testbed/xhtml-as-html.php
http://alanstorm.com/testbed/xhtml-as-xhtml.php
Firefox 将元标记中的尾部斜杠标记为对使用 text/html 提供的文档无效,并且对使用 application/xhtml+xml 提供的文档有效。
对于浏览器开发人员,XHTML 的意义在于您可以将您的文档视为 XML,这意味着如果有人向您发送无效的内容,规范说您不必解析它。因此,如果一个文档作为 application/xhtml+xml 并且具有格式不正确的内容,则允许开发人员说“不是我的问题”。你可以在这里看到它的作用
http://alanstorm.com/testbed/xhtml-not-valid.php
当文档以 text/html 形式提供时,Firefox 将其视为普通的旧 HTML 文档并使用原谅、修复它、解析例程
http://alanstorm.com/testbed/xhtml-not-valid-as-html.php
因此,对于浏览器制造商来说,将 XHTML 用作 text/html 是可笑的,因为浏览器的渲染引擎从未将其视为 XML。
很多年前,希望不仅仅是标记猴子的 Web 开发人员(免责声明:我包括我自己也是其中之一)开始寻找方法来开发不涉及三次嵌套表的最佳实践,但仍然可以提供引人入胜的设计体验. 他们/我们锁定了 XHTML/CSS,因为 W3C 说这是未来,唯一的选择是一个单一供应商(微软)控制事实上的标记规范的世界。真正的邪恶是单一供应商,而不是微软。我发誓。
那么争议在哪里呢?application/xhtml+xml有两个问题。第一个是 Internet Explorer。IE 中有一个遗留错误/功能,其中作为 application/xhtml+xml 的内容将提示用户下载文档。如果您尝试使用 IE 访问上面列出的 xhtml-as-xhtml.php,则很可能发生了什么。这意味着如果你想使用 application/xhtml+xml,你必须在浏览器中嗅探 IE,检查 Accepts 标头,并且只为那些接受它的浏览器提供 application/xhtml+xml。这并不像听起来那么简单,而且也违背了 Web 开发人员所追求的“一次编写”原则。
第二个问题是 XML 的严苛性。这又是那些容易引起火灾的问题之一,但有些人认为单个错误标签或单个字符编码不正确不应导致用户看不到他们想要的文档。换句话说,是的,规范说如果 XML 格式不正确,您应该停止处理 XML,但用户并不关心规范,他们关心他们的猫的网站是否损坏。
XHTML 1.0(不是 1.1)规范更让这个问题更加突出,假设 XHTML 文档可以作为 text/html 提供,前提是遵循了某些兼容性准则。诸如img标签之类的东西会自动关闭等等。这里的关键词是may。在RFC中,可能意味着可选。Firefox 选择不将使用 XHTML doctype 而是将 text/html 内容类型提供的文档视为 XHTML。但是,W3C 验证器会很乐意将这些文档报告为有效。
我会让读者去思考一种文化的同时发生的奇迹/恐怖,这种文化写了一份文件来定义他们所说的may这个词的含义。
最后,这就是整个HTML 5的内容。XHTML 变成了一个政治烫手山芋,以至于一群想要推动语言向前发展的人决定转向另一个方向。他们制定了 HTML 5 规范。目前正在 W3C 中讨论,预计将在未来十年的某个时间完成。与此同时,浏览器供应商正在从正在进行的规范中挑选功能并实施它们。
在评论中,Alex指出,如果您要嗅探某些东西,您应该检查 Accept 标头以查看 application/xhtml+xml 是否被用户代理接受。
这是绝对正确的。一般来说,如果你要嗅探,嗅探功能,而不是浏览器。
其他答案的补充:在 IE 中,<span />
在标记中包含元素会导致 JavaScript 中的 DOM 遍历方法出现各种问题。查看以下 XHTML 文档:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<script type="text/javascript">
function show() {
var span = document.getElementById("span");
alert(span.innerHTML);
}
</script>
</head>
<body onload="show();">
<p id="p1">Paragraph containing some text followed by
an empty span<span id="span"/></p>
<p id="p2">Second paragraph just containing text</p>
</body>
</html>
这个想法是,当页面加载时,JavaScript 将获得对空范围的引用并显示其 HTML 内容。那将是一个空字符串,对吧?不在IE中它不会。在 IE 中,您将获得整个文档中 span 之后的所有内容:
</P>
<P id=p2>Second paragraph just containing text</P>
此外,第二个<p>
出现在跨度的childNodes
集合中。<p>
在 body 的childNodes
集合中也是如此,这意味着一个节点可以有效地拥有多个 parent。对于依赖遍历 DOM 的脚本来说,这可不是什么好消息。
我也写过关于这个的博客。
是的。这是。在某些情况下,旧浏览器会出现问题。
<script type='text/javascript' src='script.js' />
在这种情况下,旧浏览器可能无法理解该<script>
标签已结束。
作为application/xhtml+xml,<span />表示创建一个没有内容的span元素。
用作 text/html,<span /> 表示创建一个 span 元素,其中元素的内容跟随此标记,直到遇到 </span> 标记,或者遇到隐式关闭该元素的另一个标记(或 EOF)。即在这种情况下,<span /> 的含义与<span> 相同。
另外:HTML 5 定义了 HTML 和 XHTML 序列化,因此它不会以某种方式影响这个问题。与 XHTML 1.0 不同,它确实需要像 XHTML 1.1 一样将 XHTML 作为 application/xhtml+xml 提供服务。但实际上,这并没有改变,因为所有浏览器都将任何版本的 XHTML 视为 text/html 作为标签汤。
请参阅 XHMTL 工作组关于该主题的说明:http: //www.w3.org/TR/xhtml-media-types/
简而言之——如果您的 XHTML 将被视为 XHTML,那很好。如果您要假装它是 HTML(如果您希望它由 Internet Explorer 加载(包括版本 8,在撰写本文时最新),那么您必须跳过箍)。
箍很烦人,我建议大多数人坚持使用 HTML 4.01。
另外值得注意的是,<?xml ...?>
在 doctype 之前的声明会将 IE 置于 quirks 模式。
应该明确指出,HTML 中没有自闭合标签,因此每当浏览器决定将您的 XHTML 视为 HTML 时,它都不会识别出该标签是闭合的。对于不必在 HTML 中关闭的<img>
标签(如<span>
.
一般来说,对空元素使用简写是没有问题的,但也有一些例外情况会导致问题。
<script>
是一个重要的,需要关闭</script>
以避免问题。
另一个是用蜘蛛写成而不是<meta>
更好地工作<meta></meta>
<meta />
不完全是问题,而是相关的,就格式而言,IE 版本仅存在空元素的问题,例如<div></div>
or <div />
。在这种情况下,<div> </div>
需要保持格式。