HTML ドキュメント mode_html/css_WEB-ITnose に関する簡単な説明-htmlチュートリアル-php.cn

HTML コードを書くときに考えたことがあるかどうかはわかりませんまたは、理解できないこの長いリストコード、それは何をするのか、なぜこの文が含まれているのか、この文は何をするのか、関連していますか?他の HTML コードに?フロントエンドの面接の質問でこの知識ポイントに関する質問がよく見られるとは言いませんが、多くの場合、ハイエンドのページ効果は追求されますが、最も基本的なドキュメントモードは無視されます。ドキュメントモード、どうすればハイエンドのページ効果を得ることができますか？！それでは、この要約から答えを見つけてください!

ドキュメントモード:

この概念は、ドキュメントタイプ doctype 切り替えを使用して実装されます。最後の 2 つのレンダリングモードは、混合モード (互換モード) と標準モード (標準モード) です。 2 つのモードの違いは、異なるバージョンのレンダリングエンジン環境で動作することです。混合モードは IE を IE5 と同じように動作させます (標準以外の機能を含む)。標準モードは IE の動作を標準に近づけます。行動。これら 2 つのモードは主に CSS コンテンツのレンダリングに影響し、場合によっては JavaScript の解釈と実行にも影響します (これについては後で詳しく説明します)。その後、IE は ほぼ標準モード (ほぼ標準モード) を提案しました。このモードの多くのブラウザー機能は標準に準拠していますが、非標準の側面が画像ギャップの処理に反映されるとは限りません (表にある問題)。画像を使用すると最も明白です)。標準モードと準標準モードは非常に近いものであり、文書モードの検出には違いはありません。ここで言う標準モードとは、混合モードを除く他のモードを指します。

ドキュメントタイプ DOCTYPE の定義と使用法:

ブラウザがどのモードで動作するかを決定できます。

宣言は、HTML ドキュメントの最初の行、の前になければなりません。
宣言は HTML タグではなく、どの HTML バージョンでページを作成するかを Web ブラウザーに指示し、ブラウザーのパーサーにドキュメントの解析に使用するドキュメントタイプの仕様を指示します。各仕様は、ブラウザによって対応するドキュメントモードも選択されます。
HTML4.01 では、ステートメントは DTD を指します。HTML4.01 は、一般的に使用されるハイパーテキスト形式の最高レベルの標準である SGML (Standard General Markup Language) に基づいているためです。 XML はマークアップ言語を定義します。XML はそのサブセットとして考えられ、セマンティック Web などのより一般的な目的のために登場しました。HTML はその応用です。 DTD はマークアップ言語のルールを規定しており、ブラウザのレンダリングがこれらのルールに準拠してコンテンツを正しく表示できるようにします。
ただし、HTML5 は SGML に基づいていないため、DTD を参照する必要はありません。

ドキュメントタイプ DOCTYPE の構文:

最上位要素の可用性 "Registration // Organization // Type Tag Definition // Language" "URL"

タグとまったく同じですが、
html は、現在のドキュメントの最も外側のタグ、つまり xml のルートタグと呼ばれる最上位要素 ( など) を指定します。html は html (など) html5 の例として )
PUBLIC 説明指定された DTD ファイルは、プライベートファイルに対して相対的なパブリックファイルです。つまり、次の URL は誰でもアクセスできます。または、SYSTEM (DTD ファイル)ローカルシステムからロードされます)。
"-//W3C//DTD XHTML 1.0 Transitional//EN" この HTML ファイルで使用される DTD のバージョン番号を指定します。この部分は HTML 専用です。 -/+ は組織が国際標準化機構 ISO に登録されているかどうかを指定します。+ は名前が登録されていることを示し、- は組織名が登録されていないことを示します。 Internet Engineering Task Force (IETF) および World Wide Web Consortium (W3C) は ISO 登録組織ではないため、html での登録項目は - です。組織とは、!DOCTYPE 宣言によって参照される DTD ファイルを作成および保守した W3C 組織を指します。 DTD は参照されるオブジェクトタイプであり、XHTML 1.0 は公開テキストの説明を表し、その後にバージョン番号を付けることができます。 Transitional は文書型定義が過渡的なものであることを意味し、以下の 3 種類があります。 EN は、指定されたパブリックテキスト言語が英語であることを示します。
URL は、参照される DTD オブジェクトの場所を指定します

DTD (文書型定義):

DTD標準とは、HTMLやXMLの表示効果が崩れないようにタグの入れ子のルールを規定した構文と理解できます。異なる DTD ファイルは、異なる標準 DTD を記述します。

詳細な説明:

(2). 標準モード: 次のドキュメントタイプのいずれかを使用してオンにし、厳格なドキュメントを使用してトリガーできます。

//html<br />该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（Framesets）<!-- HTML 4.01 严格型 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!-- HTML5 --><!DOCTYPE html>//xhtml<br />该DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素（比如font），不允许框架集（Framesets）。必须以格式正确的XML来编写标记<br /><!-- XHTML 1.0严格型 --><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ログイン後にコピー

移行 DTD を使用すると、プレゼンテーション層の識別子、要素、属性 (組版用のテーブル、背景色の識別子など、プレゼンテーションを制御するために純粋に使用されるタグを指します) を使用できるようになり、W3C コード検証に合格することが容易になります。ただし、HTML5 では、構造を表現するために HTML タグが使用され、プレゼンテーションを実現するために CSS が使用されること、つまりデータとプレゼンテーションが分離されることが強調されているため、トランジショナルタイプやフレームタイプは使用しないようにしてください。

ブラウザが混合モードになった場合:

css に影響する状況

<=IE6 は、ボックスのパディングと境界線をボックスサイズに計算します。これは、IE ボックスモデルと呼ばれます。
W3C 標準ボックスモデルでは、ボックスサイズがコンテンツサイズになります。
この違いにより、ページを描画するときにすべてのブロックレベルの要素が大きく異なるため、2 つの異なるドキュメントモードのページも大きく異なります。

JavaScript への影響

IE9+、FF、Safari、Opera、Chrome はすべて、このために innerWidth、innerHeight、outerWidth、outerHeight の 4 つのプロパティを提供します。

IE、FF、Safari、Opera、Chrome では、 document.documentElement.clientWidth および document.documentElement.clientHeight はページのビューポート情報を保存します。 IE および Chrome の上位バージョンでは、FF ブラウザは標準モードで document.documentElement を優先しますが、document.body は body 要素コンテンツの幅と高さに基づいて計算されます。混合モードでは、IE と Chrome の上位バージョンの document.documentElement と document.body の計算値は同じですが、FF が異常です。

（2）但在IE6中这些属性必须在标准模式下才有效，如果在混杂模式就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。这里模拟了一下IE5文档模式，可见在混杂模式下只有document.body可用，而且获取的值还不一定正确。模拟IE7在标准模式下是优先选择document.documentELement的，但是获取的值也不一定正确。高版本的IE表现正常。

（3）标准模式下的Chrome46.0.2490.80 ，要优先选择document.documentElement计算视口，而document.body.clientWidth和clientHeight默认是body元素所包含内容的总宽高，这里我设置body的width为200px了。

混杂模式下的Chrome，无论通过document.documentElement还是document.body中的clientWidth和clientHeight属性都可取得视口大小。

//获取页面可见视口宽高，向后兼容function visualViewport(){  var visualobj={};  visualobj.pageWidth=window.innerWidth,  visualobj.pageHeight=window.innerHeight;  //<=IE8不支持上面两种属性  if(typeof visualobj.pageWidth!="number"){        if(document.compatMode=="CSS1Compat"){            visualobj.pageWidth=window.documentElement.clientWidth;            visualobj.pageHeight=window.documentElement.clientHeight;        }else{            //兼容三大主流浏览器的混杂模式(因为FF在混杂模式下document.documentElement的两个属性表现不正常，所以集中用document.body)            visualobj.pageWidth=window.body.clientWidth;            visualobj.pageHeight=window.body.clinetHeight;        }    }     return visualobj;    }

ログイン後にコピー

参考：

《JavaScript高级程序设计》

HTML标签

怎么看网页是使用哪个HTML版本编写的？

DOCTYPE作用及用法详解

怪异模式（Quirks Mode）对 HTML 页面的影响