目次
DOCTYPEとは何ですか?
よく使用されるコレクション:
ハイパーテキスト マークアップ言語
ハイパーテキスト厳密なドキュメント タイプの定義:
ハイパーテキストトランジションドキュメントタイプ定義:
ハイパーテキスト フレームセットドキュメント タイプ定義:
&lt;&lt; " <!DOCTYPE"
システム識別子(systemId) 引用符で囲まれた "http://www.w3.org/TR/html4/strict.dtd"
最後に、
ブラウザの 2 つのドキュメント モードの歴史:
ブラウザはドキュメント モードをどのように判断するのでしょうか?
Doctype の検出
歴史的な理由により、初期の IE ブラウザ (IE 6 より前) では、ボックスのパディングと境界線をボックスのサイズに計算していました。このモデルは、IE ボックス モデルと呼ばれます。
現在、誰もが IE5 の存在を無視しています。互換性を高めるために、デフォルトでは doctype ステートメントを使用してはなりません。 <!DOCTYPE html> も使用できます。
CSS3のbox-sizing属性(サイズにも関係するのでまとめます)
ホームページ ウェブフロントエンド htmlチュートリアル 月明かりの下での想像 DOCTYPE モード serenade_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:39 AM

はじめに

私が今何をしていると思いますか?晴れた空のために言っておきますが、私はコンピューターの隣に座って真夜中のセレナーデを聞いています、そしてこのとき、私は音楽のメロディーがとても心地よく感じます。悲しいけど、心の柔らかさに触れるようで、とても美しいです。この美しい音楽の下で、私も悲しくなり、心を動かし、そして使用できるので、私は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 ステートメントが必要であるということです。 と記述することをお勧めします。この記事もナレッジポイントが多いので、一つ一つ詳しくは説明しません。ページレンダリングエンジンについては、よくわかっていないので、後ほどまとめます。

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

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

🎜🎜
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

See all articles