フロントエンドの人気科学記事 - が不可欠な理由_html/css_WEB-ITnose
質問が来たとき
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 仕様向けに設計されたページ (
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 文档的第一行，位于 标签之前。
声明不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。HTML5 不基于 SGML，所以不需要引用 DTD。
小知识：
- 在 ie6 中，如果在 doctype 声明前有一个 xml 声明(比如: )，则采用 quirks mode 解析。这条规则在 ie7 中已经移除了。
Back to the question
我们再回到这个问题，浏览器从服务端获取网页后会根据文档的 DOCTYPE 定义显示网页，如果文档正确定义了 DOCTYPE 浏览器则会进入标准模式（Standards Mode），否则浏览器会认为你的网页是旧的网页（需要用旧的渲染引擎去解析），从而进入怪异模式（Quirks mode）进行解析。
为了避免浏览器进入怪异模式（事实上，现实中已经几乎没有网页需要用浏览器的怪异模式去解析，浏览器的 Quirks Mode 仅仅是为了向后兼容），所以，请确保在 HTML 页面的首行写上：
<!DOCTYPE html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
