月明かりの下での想像 DOCTYPE モード serenade_html/css_WEB-ITnose

はじめに

私が今何をしていると思いますか？晴れた空のために言っておきますが、私はコンピューターの隣に座って真夜中のセレナーデを聞いています、そしてこのとき、私は音楽のメロディーがとても心地よく感じます。悲しいけど、心の柔らかさに触れるようで、とても美しいです。この美しい音楽の下で、私も悲しくなり、心を動かし、そして使用できるので、私はdoctypeを考えました。私の脳。

Text

DOCTYPEとは何ですか?

Baidu Encyclopediaの紹介:

特定の標準ユニバーサルマークアップ言語またはXMLドキュメント(Webページもその1つ)とドキュメントタイプ定義( DTD）。このタグはファイルの最初の行に表示されます。文書内で使用される形式は次のとおりです。

"Quoted String" は公開識別子と呼ばれ、業界によって渡されます。特定の文書型定義 (DTD) を指す公開識別子名 (通常は関連する標準) について合意されました。 (外国語の原文: DOCTYPE は SGML 文書タイプ宣言です。その目的は、SGML パーサーに文書の解析に使用する DTD を指示することです。)

タグの完全な形式は です。構文については、「!DOCTYPE」を参照してください。正しいドキュメント タイプが決定された場合にのみ、ハイパーテキスト マークアップ言語または拡張ハイパーテキスト マークアップ言語のタグとカスケード スタイル シートが有効になり、JavaScript スクリプトにも影響します。

よく使用されるコレクション:

ハイパーテキスト マークアップ言語

Internet Engineering Task Force ハイパーテキスト マークアップ言語 2.0:

PUBLIC "-//IETF//DTD HTML//en">

公開識別子は「-//IETF//DTD HTML//en」と呼ばれます。

World Wide Web コンソーシアム:

ほとんどの World Wide Web ブラウザは、実際には標準のユニバーサル マークアップ言語パーサーを使用していません。その多くはドキュメントの !DOCTYPE 宣言に基づいており、ファイルの表示方法が異なっていたり、表示されなかったりします。

ハイパーテキスト マークアップ言語の機能は、現在のドキュメントでどのハイパーテキストまたは拡張可能なハイパーテキスト仕様が使用されているかをブラウザーに伝えることです。

ハイパーテキスト 4.01 では、strict、transitional、および Frameset の 3 つのドキュメント タイプが指定されています。

ハイパーテキスト厳密なドキュメント タイプの定義:

プレゼンテーション レイヤーに乱雑さのないクリーンなマークアップが必要な場合は、このタイプを使用します。カスケード スタイル シートと一緒に使用してください:

(パブリック識別子は「-//W3C//DTD HTML 4.01//en」と呼ばれます。)

PUBLIC "-//W3C// DTD HTML 4.01//en"

"http://www.w3.org/TR/html4/strict.dtd">

ハイパーテキストトランジションドキュメントタイプ定義:

World Wide Web Consortium を含めることができますスタイルシートに移動されることが予想されるプロパティと要素をレンダリングします。読者がカスケード スタイル シートをサポートしていないブラウザを使用していて、ハイパーテキスト マークアップ言語のレンダリング機能を使用する必要がある場合は、次のタイプを使用します:

(パブリック識別子は「-//W3C// DTD HTML 4.01 Transitional」と呼ばれます) //en".)

PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en"

"http://www.w3.org/TR/html4/loose. dtd">

ハイパーテキスト フレームセットドキュメント タイプ定義:

フレームセット ドキュメント タイプ定義は、フレームのあるドキュメントに使用する必要があります。 Frameset 要素が body 要素を置き換えることを除いて、移行ドキュメント タイプ定義と同等です:

(パブリック識別子は「-//W3C//DTD HTML 4.01 Frameset//en」と呼ばれます。)

PUBLIC "-//W3C//DTD HTML 4.01 Frameset//en"

"http://www.w3.org/TR/html4/frameset.dtd"

拡張ハイパーテキスト マークアップ言語

World Wide Web Alliance:

Extensible Hypertext Markup Language 1.0 では、strict、transitional、および Frameset の 3 つのドキュメント タイプを指定します。

拡張可能なハイパーテキスト マークアップ言語 厳密なドキュメント タイプ定義:

(公開識別子は「-//W3C//DTD XHTML 1.0 Strict//en」と呼ばれます。)

< ;! DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//en"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

拡張可能なハイパーテキストマークアップ言語遷移ドキュメントタイプ定義:

W3C がスタイル シートに移動することを想定しているレンダリング属性と要素を含めることができます。読者がカスケード スタイル シート (CSS) をサポートしていないブラウザを使用していて、XHTML のレンダリング機能を使用する必要がある場合は、次のタイプを使用します:

(パブリック識別子は「-//W3C// DTD XHTML」と呼ばれます) 1.0 Transitional//en".)

PUBLIC "-//W3C//DTD xhtml1/dtd/xhtml1-transitional.dtd "& gt; 、このドキュメント タイプ定義を使用してください。

(パブリック識別子は、「-//W3C//DTD XHTML 1.0 Frameset//en」と呼ばれます。)

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//en " " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

数学的マークアップ言語 World Wide Web Consortium: 例内の宣言以下は指定されています。 「MathML」数学的マークアップ言語 2.0 文書型定義に準拠します。 (パブリック識別子は総称して「-//W3C//DTD MathML 2.0//en」と呼ばれます。)

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd">

2 つ目は、MATHML 名前空間のプレフィックスを MML に設定します。

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"

[

]

>

3 番目はチェックドキュメントタイプ定義を追加します(DTD)

PUBLIC "-//W3C//DTD MathML 2.0//en"

"http://www.w3 .org/Math/DTD/mathml2/mathml2.dtd"

[

]

>

シンボル交換ファイル形式 (音楽)

公開識別子の名前は次のとおりです: "-//IPTC-NAA//DTD NITF 2.0//en"

PUBLIC "-//IPTC-NAA//DTD NITF 2.0//en" >

Translation Memory Exchange

パブリック識別子は次のように呼ばれます: "-//LISA OSCAR:1998//DTD for Translation Memory eXchange //ja"

PUBLIC "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en">

電子カレンダー

パブリック識別子は次のように呼ばれます: "-/ /IETF//DTD iCalendar//en"

PUBLIC "-//IETF//DTD iCalendar//en">

Wireless Markup Language

パブリック識別子は次のように呼ばれます。 Point Zeroバージョン：

＆lt;＆lt; "

ルート要素のユニバーサル識別子 "HTML"

文字列 "PUBLIC"

引用符で囲まれたパブリック識別子 (publicId) "-//W3C//DTD HTML 4.01//en"

システム識別子(systemId) 引用符で囲まれた "http://www.w3.org/TR/html4/strict.dtd"

String ">"

ルート要素のユニバーサル識別子、パブリック識別子、およびシステム識別子は次のように取得できます。それぞれ document.doctype.name、document.doctype.publicId、document.doctype.systemId に対応するスクリプトを通じて DOM インターフェイスを呼び出します

最後に、

タオバオ、JD.com、Tmall、ブログパークをすべてチェックしましたuse これは HTML5 標準の Web ページ宣言です。元の文字列はこの簡潔な形式になり、すべてのマシンがこのステートメントを認識します。 Web ページが html5 を使用しており、HTML 4.01 の doctype が DTD を参照する必要があることを示します。HTML 4.01 は SGML に基づいており、HTML5 は SGML に基づいていないため、DTD を参照する必要はありませんが、doctype が必要です。ブラウザの動作を標準化します。私は通常 を使用します。簡潔で間違いが少ない一方で、標準の主流ブラウザーで認識されるので、安心して書くことができます。

DTD: Document Type Definition は、タグに関する一連の文法規則です。これは、Standard Common Markup Language および Extensible Markup Language バージョン 1.0 仕様の一部であり、ドキュメントの検証メカニズムです。ドキュメント タイプ定義は、標準ユニバーサル マークアップ言語および拡張マークアップ言語ドキュメントが正しい形式であることを確認する効果的な方法です。ドキュメントとドキュメント タイプ定義ファイルを比較して、ドキュメントが仕様に準拠しているかどうか、および要素と要素が一致しているかどうかを確認できます。タグは正しく使用されています。具体的な説明については、http://baike.baidu.com/link?url=bA_s20lIL9cApp0e-fGvm2bbCvhblqjc7_1BF1gdMMdjNREQr6VZOEcylzuG5eMaJF_-olsL6ZWWQ4QKgXUwIqを参照してください。

SGML: Standard General Markup Language (以下、「General Markup」といいます)方法です電子文書の構造と記述を定義します。ユニバーサル マークアップは、文法的なマークアップに非常に強力なツールを提供し、優れたスケーラビリティを備えているため、すべての電子文書の起源となります。ドキュメント マークアップ言語は、World Wide Web が発明される以前から「ユニバーサル スローガン」として存在していました。具体的な説明については、http://baike.baidu.com/link?url=dTCobBuXTUw0jTNi4dpsIOU2Dt0owC8WnazmV1gsgQXOegyPSDZAMZ95BN81ckCyspnO5TTgrX-hm3_ktPagruZzvIfqBISloJIXiFgJcs_euma9v9I5iABX7g0Zyxpo3zを参照してください。 JAz bDPCoH7zBJFg13TKa

ブラウザの 2 つのドキュメント モードの歴史:

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 のページ レンダリングに戻ると、モード機能、Quirks モードがこの機能で初めて提案されました。 IE6.0 以降のバージョンには、標準モード (標準モードまたは厳密モード) と互換モード (奇妙なモードまたは互換モード) という 2 つのパフォーマンス モードがブラウザに組み込まれています。標準モードでは、ブラウザは W3C によって設定された仕様に従ってページを表示します。奇妙なモードでは、ページは以前の Web ページの通常の表示を維持するために IE5 または IE4 と同じ方法で表示されます。

ブラウザはドキュメント モードをどのように判断するのでしょうか?

ブラウザがページを解析して描画する準備をしているとき、ドキュメント モードはどのように決定されるのでしょうか?実際、ブラウザはページをレンダリングする前に 2 つのことをチェックします。1 つはページに doctype 情報があるかどうか、もう 1 つはページに x-ua 互換情報があるかどうかです (ここでは説明しません。最初に doctype について説明します) ）。

Doctype の検出

HTML ページの場合、 は、 タグの前にあります。ブラウザ どの HTML 仕様が使用されるかに応じて、ブラウザは各仕様に対応するドキュメント モードも選択します。最も一般的な 3 つの Doctype 情報に対応するドキュメント モードは次のとおりです。

doctype 情報が次の場合、ページが HTML5 仕様に準拠していることを意味し、ブラウザは標準モードを選択します。この doctype を通常のデザイン ページに追加する必要があります。

doctype が次の場合、ブラウザも Standards Mode を選択します。最初の doctype とは多少の違いはありますが、ほぼ同じと考えてよいでしょう。

doctype が見つからない場合、ブラウザは Quirks モードを選択しますが、これは Web アプリケーションにとって非常に不利なため、あまりお勧めできません。

標準モードと Quirks モードのページの違い

歴史的な理由により、初期の IE ブラウザ (IE 6 より前) では、ボックスのパディングと境界線をボックスのサイズに計算していました。このモデルは、IE ボックス モデルと呼ばれます。

IE ボックス モデルでは、

ボックスの幅 = コンテンツの幅 + パディング左 + パディング右 + 境界左 + 境界右

ボックスの高さ = コンテンツの高さ + パディング上部 + パディング下部 + 境界上部 + 境界下部

そしてW3C 標準ボックス モデルでは、ボックスのサイズがコンテンツのサイズになります。

ボックスの幅 = コンテンツの幅、

ボックスの高さ = コンテンツの高さ

次のコードが表示されます:

IE5.5 でのボックスの合計幅は 100 ピクセルです。

ボックスの幅Google での幅は 160px です

ページをレンダリングするときに、2 つのドキュメント モード Quirks と Standards の間に大きな違いがあることがわかります。特に、ボックス モデルの解釈は、主に の歴史的な発展によるものです。レンダリング エンジンと W3C 標準の違いによるものです。

したがって、doctype の宣言は特に重要です。doctype が宣言されていない場合、奇妙なモードが有効になります。

次のコードの効果:

IE5.5/IE6/IE7/IE8 のレンダリングは次のとおりです:

他の主流の標準ブラウザの影響は何ですか?他の主流の標準ブラウザはすべて W3C 標準を使用しているため、その効果は次のとおりです:

(Google、360、safari、opera のそれぞれのテスト結果)

doctype ステートメントが追加される場合、IE5.5/IE6 とは/IE7/IE8の影響？

IE5.5 は依然として

ですが、IE6/IE7/IE8 は次のとおりです:

W3C 標準を採用する他のブラウザのボックス モデルと同じです。

現在、誰もが IE5 の存在を無視しています。互換性を高めるために、デフォルトでは doctype ステートメントを使用してはなりません。 も使用できます。

CSS3のbox-sizing属性（サイズにも関係するのでまとめます）

定義と使い方

box-sizing属性を使用すると、特定の領域に特定の方法で一致する特定の要素を定義できます。

たとえば、枠線付きの 2 つのボックスを並べて配置する必要がある場合、box-sizing を "border-box" に設定することでこれを行うことができます。これにより、ブラウザーは指定された幅と高さでボックスをレンダリングし、ボックス内に境界線とパディングを配置します。 デフォルト: content-box 継承: no バージョン: CSS3 JavaScript 構文: object.style.boxSizing="border-box"

文法

ボックス-sizing: content-box|border-box|inherit;

value

descriptioncontent-box要素のパディングと境界線を幅と高さの外側に描画します。 border-boxコンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することで取得できます。 inherit box-sizing 属性の値を親要素から継承することを指定します。

	これは、CSS2.1 で指定されている幅と高さの動作です。 幅と高さは要素のコンテンツ ボックスに個別に適用されます。
	要素に設定された幅と高さによって、要素の境界ボックスが決まります。 つまり、要素に指定されたパディングと境界線は、設定された幅と高さ内に描画されます。

コードは次のとおりです:

上記のコードのように、ボックス -sizing:border-box;

要素に設定された幅と高さによって、要素の境界ボックスが決まります。

つまり、要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。

コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することで取得できます。

つまり、コンテンツは 130 ピクセル、幅: 150 ピクセルのみです。設定された 150 ピクセル内で、左右の境界線を差し引いたコンテンツの値は 130 ピクセルです。

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

上記の 2 行のコードは Firefox と Safari と互換性があります。 Opera で同時にテストした場合の効果図は次のとおりです:

IE5.5 の効果は次のとおりです:

IE6/IE7 の効果は次のとおりです:

、

IE8 の効果は次のとおりです。

上記から、box-sizing 属性は IE8 上の他の標準ブラウザの効果を実現できることがわかりますが、IE5.5/IE6/IE7 では完全には実現できません。互換性の観点から、大規模なプロジェクトではボックス サイズ変更を使用しないようにしてください。興味のある友人は、ボックス サイズの互換性を実現する方法を確認してください。

重要な点は、わかりやすくするために doctype ステートメントが必要であるということです。 と記述することをお勧めします。この記事もナレッジポイントが多いので、一つ一つ詳しくは説明しません。ページレンダリングエンジンについては、よくわかっていないので、後ほどまとめます。

間違いがあれば、修正していただければ幸いです。

音楽は終わり、これで私の記事は終わりです（笑）。 ----ミャオトン

🎜🎜