ホームページ > 記事 > ウェブフロントエンド > フロントエンドの人気科学記事 - が不可欠な理由_html/css_WEB-ITnose
フロントエンドの人気科学記事 - が不可欠な理由_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:28:441201ブラウズ
質問が来たとき
HTML ページ (Baidu など) の先頭に次のようなコード行を見たことがあるはずです:
<!DOCTYPE html>
または次のようなもの (Blog Garden-Han Zichi など) PS: ドキュメントBlog Garden ホームページの type 宣言は同じ Baidu):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
それでは質問が来ます。
- このコード行は何に役立ちますか?
- それを削除するとどのような影響がありますか?
標準モード VS 固有モード
この問題を明確にするために、まずブラウザの「標準モード」(厳密モードとも呼ばれます) と「固有モード」(「固有モード」とも呼ばれます) の 2 つの用語「混合モード」について説明します。 」および「互換モード」）。
Quirks モードとは何ですか? 簡単に言うと、Quirks モードは、古いバージョンのブラウザ用にずっと前に設計され、W3C 標準に厳密に従っていない Web ページと互換性を持たせるために、ブラウザによって生成されるページ レンダリング モードです。
IE を例に挙げてみましょう。 IE の開発に伴い、そのレンダリング エンジン (初期の MSHTML.dll、後に Trident と呼ばれる) には新しい機能が追加され、以前のバージョンのいくつかのバグが修正され続けました。 2001 年に IE6 が正式リリースされる前、当時市場に出ていたブラウザは IE と Netscape の Navigator の 2 つでした。IE はユーザー ベースが大きかったため、ほとんどのページが IE 用に設計されていましたが、IE のレンダリング エンジンには準拠していませんでした。当時、Microsoft は W3C 仕様の重要性を認識していたため、IE が IE6 に開発されたときに、レンダリング エンジン (MSHTML.dll) に重要な変更が加えられ、当初の W3C 仕様への非準拠が変更されました。ボックスモデルのモード描画方法が W3C 標準に準拠するように変更されました。この大きな変更により、元々古いバージョンの IE 用に設計されていた HTML ページが正しく表示されなくなったため、IE6 のリリース時に、 (正確には) IE5.5 でのページ レンダリング モードの機能がこの機能で初めて提案されたと言うべきです。
ユーザーが古いバージョンのページを表示する必要がある場合は、Quirks モードに切り替えます。このとき、ブラウザのレンダリング エンジンは IE5.5 (MSHTML.dll 5.5.x) に対応するバージョンに切り替わり、ボックスが表示されます。モードは以前と同様に描画されるため、ページは正しく表示されます。ユーザーが W3C 仕様を満たす新しいページを表示する必要がある場合、レンダリング エンジンは Quirks モードに対応する標準モードに切り替わります。このモードでは、レンダリング エンジンは最新バージョンであり、より新しいバージョンの要件も満たします。多くの W3C 仕様。 これら 2 つのモードの違いは、レンダリング エンジン環境の異なるバージョンで動作することです。
最後に、Quirks モードと Standards モードを合わせてブラウザのドキュメント モードと呼びます。
実際、上記のブラウザには 3 番目のモードであるほぼ標準モードがあり、Quirks と Standards の 2 つのドキュメント モードがあります。このモードは標準モードとほぼ同じです。唯一の違いは、場合によってはほぼ標準モードが Quirks と同じ方法でページを描画することです。たとえば、画像を分割して表のセルに表示する必要がある場合、Almost Standards モードと Quirks モードでは同じ描画方法が使用されるため、画像は標準モードのように断片的に表示されません。
ただし、これはごく少数のケースにすぎません。ほとんどの場合、Almost Standards と Standards の 2 つのモードは一貫しているため、通常は 2 つを特に区別しません。
ヒント:
- 1 つは、2 つのレンダリング モードを備えた世界初のブラウザーは IE6 であると言い、もう 1 つは、Mac 用の IE5 であると言いました。Safari (2003 - ?) 以前は、IE は Mac として使用されていました。デフォルトのブラウザーは 6 年間も続きました (1997 年から 2003 年、2003 年に開発中止、2006 年にダウンロード中止)
- Quirks モードには 2 種類があります。 IE を IE10 にアップグレードすると、IE7/8/9/10 標準モードの 4 つの標準モードに加えて、IE10 には IE5 Quirks と IE10 Quirks の 2 つの Quirks モードがあることがわかります。 IE10 のリリースに付属したこの新しい奇妙なモードである IE10 Quirks は、HTML5 仕様をサポートするより優れた Quirks モードであると考えられています。 HTML5 仕様向けに設計されたページ (b97864c2e0ef2353a16c4d64c7734e92、39000f942b2545a5315c57fa3276f220、5ba626b379994d53f7acf72a64f9b697 などのタグを含むページ) は、IE5 Quirks では正しく表示できませんが、IE10 Quirks では正しく表示できることがわかります。言い換えれば、IE10 Quirks は HTML5 用に設計されているが doctype を追加しないページに存在します。
DOCTYPE
前述したように、W3C 標準に準拠し、古い Web ページを引き続き閲覧できるようにするために、当時の IE6 のレンダリングでは Quircks モードと Standards モードの 2 つのレンダリング モードが生成されました。 1 つのブラウザ上で共存できます。 しかし、手動での切り替えは明らかに非現実的でした。Microsoft は、当時非常に「斬新な」概念であるドキュメント タイプ (DOCTYPE) を提案しました。
一个网页，如果没有指明文档类型（旧的网页根本没文档类型一说），那么浏览器自动采用 "怪异模式" 去渲染页面，如果指明了文档类型，就按照文档指明的类型进行渲染。所以，如果你的网页没有声明文档类型，那么就会用浏览器的 "怪异模式" 去解析你的页面，这是非常危险的！而两个模式对页面解析最大的区别无疑是对于盒模型的解析。
这里我们不会去分析怪异模式和标准模式在页面渲染方面会有多少的不同之处坑爹之处，为了能有个感性的认识，我举个简单的例子。
我从网上找了个俄罗斯方块的 游戏代码 ，带有 DTD 的效果猛戳 这里 ，去除 DTD 的效果猛戳 这里 。
IE（无 DTD 声明的网页）：
Firefox（无 DTD 声明的网页，chrome 的怪异模式渲染效果和 ff 类似）：
很显然，没有 DTD 声明，浏览器进入怪异模式渲染页面，所以页面乱了。而且 IE 和 FF 怪异模式渲染效果不一样，这也很好理解，毕竟没遵循 W3C 标准前，每家的标准都有自己一套。在 FF 的页面可以右键查看其 Page Info。
那么浏览器究竟该采用哪种 DTD 渲染页面呢？推荐使用：
<!DOCTYPE html>
经过调研，BAT 以及 GOOGLE 等大公司用的都是它，能很好地 向后兼容 。所以，放心大胆地用它吧！
其他各种文档类型声明以及差异可以参考 HTML标签
声明必须是 HTML 文档的第一行，位于 100db36a723c770d327fc0aef2ce13b1 标签之前。
声明不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
小知识：
- 在 ie6 中，如果在 doctype 声明前有一个 xml 声明(比如: 9b732f047148da411dfd9e15cc62bdcd )，则采用 quirks mode 解析。这条规则在 ie7 中已经移除了。
Back to the question
我们再回到这个问题，浏览器从服务端获取网页后会根据文档的 DOCTYPE 定义显示网页，如果文档正确定义了 DOCTYPE 浏览器则会进入标准模式（Standards Mode），否则浏览器会认为你的网页是旧的网页（需要用旧的渲染引擎去解析），从而进入怪异模式（Quirks mode）进行解析。
为了避免浏览器进入怪异模式（事实上，现实中已经几乎没有网页需要用浏览器的怪异模式去解析，浏览器的 Quirks Mode 仅仅是为了向后兼容），所以，请确保在 HTML 页面的首行写上：
<!DOCTYPE html>