DOCTYPE の役割と標準モードと互換モードの違いの詳細な紹介

DOCTYPE の役割と標準モードと互換モードの違い

1. ステートメントは、ブラウザのパーサーに内容を伝えるために、HTML ドキュメント の先頭になければなりません。使用するドキュメント標準 このドキュメントを解析します。 DOCTYPE が存在しないか、形式が正しくない場合、ドキュメントは互換モードで表示されます。 HTML5 大文字と小文字を区別しない

2. 宣言は HTML タグ ではなく、現在の HTML バージョンをブラウザーに伝えるために使用されるディレクティブです

3. 最新のブラウザーの html レイアウト エンジンドキュメントは、Doctype をチェックすることにより、互換モードまたは標準モードを使用してレンダリングされます。一部のブラウザーには、標準に近い モデル があります。

4. HTML4.01 では、 宣言は DTD を指します。HTML4.01 は SGML に基づいているため、ブラウザがコンテンツを正しく表示するためのマークアップ ルールを指定します。 HTML5 は SGML に基づいていないため、DTD を指定する必要はありません

5. 標準モードと互換モードの違い: 標準モードの書式設定と

   JS
操作モードは、ブラウザーでサポートされている最高の標準に従って実行されます。 。互換モードでは、サイトが機能しなくなるのを防ぐために、古いブラウザーの動作をシミュレートして、緩やかな下位互換性のある方法でページが表示されます。

具体的な違い: 1.ボックスモデル

厳密モード:
width はコンテンツの幅であり、要素の実際の幅 = width; 互換モード: width は =width+padding+border
2互換モードでは、高さのパーセンテージとインライン要素の高さと幅を設定できます 標準モードでは、span などのインライン要素の wdith と height
の設定は有効になりませんが、互換モードでは有効になります。 。
標準モードでは、要素の高さはそれに含まれるコンテンツによって決まります。親要素が高さを設定していない場合、子要素の高さのパーセンテージを設定することは無効です。
3. margin:0 auto を使用して水平方向の中央揃えを設定すると、IE では機能しません 標準モードで margin:0 auto を使用すると、要素を水平方向に中央揃えにできますが、互換モードでは機能しません (text-align

属性
を使用します)解決策) body{text-align:center};#content{text-align:left}4. 互換モードでは、Table のフォント属性は上位レイヤーの設定を
継承できません。 :pre は無効です。画像のパディング設定は無効になります
ステートメントは、HTML ドキュメントの先頭、 タグの前になければなりません。これは、ブラウザのパーサーにどのドキュメント標準であるかを伝えます。この文書を解析するために使用します。 DOCTYPE が存在しないか、形式が正しくない場合、ドキュメントは互換モードで表示されます。 HTML5 は大文字と小文字を区別しません

1. 宣言は HTML タグではなく、ブラウザに現在の HTMl バージョンを伝えるために使用される命令です

2. 最新のブラウザの HTML レイアウト エンジンが互換性の使用を決定しますdoctype を確認することにより、ドキュメントは標準モードでレンダリングされ、一部のブラウザーは標準に近いモデルを備えています。

3. HTML4.01 では、 は DTD を指します。HTML4.01 は SGML に基づいているため、DTD はブラウザーがコンテンツを正しく表示するためのマークアップ ルールを指定します

4. HTML5 はSGMLに基づいていないため、使用されません DTDを指定します

5. 標準モードと互換モードの違い: 標準モードの組版とJS操作モードは、ブラウザがサポートする最高の標準で実行されます。互換モードでは、サイトが機能しなくなるのを防ぐために、古いブラウザーの動作をシミュレートして、緩やかな下位互換性のある方法でページが表示されます。

   具体的な違い:
   1. ボックスモデル
   厳密モード: width はコンテンツの幅、要素の実際の幅 = width;
   互換モード: width は =width+padding+border
   で設定できます。互換モード インライン要素の高さのパーセントと高さと幅
   標準モードでは、span などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。
   標準モードでは、要素の高さはそれに含まれるコンテンツによって決まります。親要素が高さを設定していない場合、子要素の高さのパーセンテージを設定することは無効です。
   3. margin:0 auto を使用して水平方向の中央揃えを設定すると、IE では無効になります
   margin:0 auto を使用すると、標準モードでは要素を水平方向に中央揃えにできますが、互換モードでは無効になります (これを解決するには text-align 属性を使用します) )
   body {text-align:center};#content{text-align:left}
   4. 互換モードでは、Table のフォント属性は上位レイヤーの設定を継承できず、white-space:pre は無効になります。画像のパディングは無効になります

以上がDOCTYPE の役割と標準モードと互換モードの違いの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。