关于doctype

DOCTYPE 作为一个决定浏览器对于 HTML 文档采取何种模式“开关”,应出现在 HTML 文档的最前面。但是某些时候需要在页面最前端放入一些信息。

对于普通文本和 HTML 标签,各浏览器均进入了混杂模式,这个很好理解,都看到疑似的 HTML 文档正文了,浏览器不太会往下追查 DOCTYPE 在哪里。

对于 HTML 注释和 XML 声明,它们和上面的普通文本和 HTML 标签有些差别,它们不会在页面中展示出来,即不可视。这时,有的浏览器则显得十分“智能”,非 IE 浏览器均会忽略它们的存在,DOCTYPE 被正确解析。但是在 IE6 中,DOCTYPE 之前的 XML 声明会导致页面进入混杂模式,而所有的 IE 均会使 DOCTYPE 之前出现了 HTML 注释的页面进入混杂模式。在 IE9 中当出现这种情况时,浏览器在控制台中给出了提示:“HTML1113: 文档模式从 IE9 标准 重新启动到 Quirks ”,看来微软在这一点上不打算“随大流”,这样做也可以敦促作者尽量避免在 DOCTYPE 之前加入其他内容。

有的作者很聪明,他既在 DOCTYPE 之前加入了他需要的内容,却又没有使 IE 由于这些内容而进入混杂模式。他可能会这么写:

  • <![if !IE]><!-- some comments --><![endif]>
  • <![if false]><!-- some comments --><![endif]>

又或者是

  • <!--[if !IE]>some text<![endif]-->

上面这些 IE 条件注释在非 IE 浏览器中,可能完全被忽略,可能被解释为普通 HTML 注释。但是在 IE 中它们全部消失了,因为这就是 IE 条件注释的作用。所以这也是目前比较合适的在 DOCTYPE 之前写点什么又保证所有浏览器均为标准模式的做法,但我们仍然不推荐在 DOCTYPE 之前加入任何非空白内容。

先看一个标准的 DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

上面的 DOCTYPE 包含 6 部分:

  1. 字符串“<!DOCTYPE”
  2. 根元素通用标识符“HTML”
  3. 字符串“PUBLIC”
  4. 被引号括起来的公共标识符(publicId)“-//W3C//DTD HTML 4.01//EN”
  5. 被引号括起来的系统标识符(systemId)“http://www.w3.org/TR/html4/strict.dtd”
  6. 字符串“>”

其中根元素通用标识符、公共标识符、系统标识符均可以通过脚本调用 DOM 接口获得,分别对应 document.doctype.name、document.doctype.publicId、document.doctype.systemId(IE6 IE7 不支持)。

不同的 DOCTYPE 之间,上面三部分可能不尽相同,有些 DOCTYPE 确实其中某部分,如何在这些纷繁的 DOCTYPE 中选择?

其实浏览器在嗅探 DOCTYPE 时只考虑了上述 6 部分中的第 1、2、4、6 部分,且不区分大小写。在各浏览器内核实现中,几乎都存在一个名单用于记录这些常见的 DOCTYPE 所对应的模式,例如 WebKit 内核中 DocTypeStrings.gperf 文件。各浏览器名单列表中触发模式的不同导致了某些 DOCTYPE 出现在不同浏览器中触发了不同模式的现象,如 。而对于名单之外的 DOCTYPE,浏览器之间处理的差异也会导致触发不同的模式,比如可能有的浏览器会将名单之外的 DOCTYPE 当作混杂模式,而有的却会一律当作标准模式。

所以我们在选用 DOCTYPE 的时候首先确定的是我们想让 HTML 文档使用标准模式。

如果力求最简,则 HTML5 的 DOCTYPE 是最佳选择:<!DOCTYPE html>,所有的主流浏览器均将这种只包含第 1、2、6 部分的最短的 DOCTYPE 视为标准模式。

如果力求稳妥,则较早的 HTML4.01 Strict 的 DOCTYPE 也是一种好的选择:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">,它在各主流浏览器中触发的模式与上面的 HTML5 的完全一致。

有时候我们处于特殊情况也希望浏览器能够都处于近似标准模式,则可选择:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。

 

原文地址:https://www.cnblogs.com/zzcflying/p/2494306.html