検索

ホームページ  >  記事  >  ウェブフロントエンド  >  HTML ドキュメント mode_html/css_WEB-ITnose に関する簡単な説明

HTML ドキュメント mode_html/css_WEB-ITnose に関する簡単な説明

WBOY
WBOYオリジナル
2016-06-24 11:22:44978ブラウズ

HTML コードを書くときに考えたことがあるかどうかはわかりません 8b05045a5be5764f313ed5b9168a17e6 または、理解できないこの長いリスト 4667f5dc9a1e48e2ce8716229a5933b5 宣言は、HTML ドキュメントの最初の行、100db36a723c770d327fc0aef2ce13b1 の前になければなりません。

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

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

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

    1. c8701119ec43e422c5e69c36858c5c56 タグとまったく同じですが、0fbeb0186b4d596a0e4be58ad76b2485 など) を指定します。html は html (など) html5 の例として 8b05045a5be5764f313ed5b9168a17e6 )
    2. PUBLIC 説明 指定された DTD ファイルは、プライベート ファイルに対して相対的なパブリック ファイルです。つまり、次の URL は誰でもアクセスできます。または、SYSTEM (DTD ファイル)ローカル システムからロードされます)。
    3. "-//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 は、指定されたパブリック テキスト言語が英語であることを示します。
    4. URL は、参照される DTD オブジェクトの場所を指定します

    DTD (文書型定義):

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

    詳細な説明:

    ドキュメントの先頭にドキュメント タイプ宣言が見つからない場合、すべてのブラウザはデフォルトでプロミスキャス モードをオンにします。このモードでの動作は、ブラウザによって大きく異なります。特定のハックを使用する 技術的には、ブラウザ間で動作に一貫性がありません。

    (1). 混合モード: ドキュメントのレンダリングに大きな影響を与えるドキュメント タイプ定義を参照しません。

    (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">

    (3). 準標準モード: トリガーに移行ドキュメントまたはフレームセット ドキュメントを使用します。

    すごいです

    すべての HTML5/HTML 4.01/XHTML 要素と、それらが表示されるドキュメント タイプ (DTD) については、「HTML 要素と有効な DTD」を参照してください。

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

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

    css に影響する状況

    主に IE ブラウザ、その他の Chrome、FF、IE 上位バージョンのブラウザは、ディスプレイのどのモードであっても正常に動作します

      ボックス モデルは、混合モードと標準モードの主な違いです
    1. <=IE6 は、ボックスのパディングと境界線をボックス サイズに計算します。これは、IE ボックス モデルと呼ばれます。
      W3C 標準ボックス モデルでは、ボックス サイズがコンテンツ サイズになります。
      この違いにより、ページを描画するときにすべてのブロックレベルの要素が大きく異なるため、2 つの異なるドキュメント モードのページも大きく異なります。
      2. 画像要素の垂直方向の配置に影響します。これは、IE の奇妙なモードではベースラインとしてボトムラインが使用され、標準モードではベースラインとしてベースラインが使用されます。
      3. フォントの一部の属性を継承するテーブル要素に影響します。IE5 の奇妙なモードでは、要素の一部の属性、特に font-size 属性が継承されません。
      4. インライン要素のサイズは IE5 の奇数モードで定義できます
      5. IE 標準モードでは、オーバーフロー値が表示されます。つまり、奇数モードでは、オーバーフローが拡張ボックスとして扱われ、要素のサイズはそのコンテンツによって決まります。オーバーフローは切り取られませんが、親要素は含まれるコンテンツに完全にフィットするように幅と高さを自動的に調整します。

    JavaScript への影響

    以下に紹介するプロパティの値はすべて整数であり、計算時に小数点以下は四捨五入されることに注意してください。ブラウザで。

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

      IE9+、Safari、FF: externalWidth、outerHeight は、ブラウザ ウィンドウ自体のサイズを返します (最も外側のウィンドウ オブジェクトからアクセスされたか、フレームからアクセスされたかに関係なく)。 innerWidth と innerHeight は、それぞれのビュー領域の高さ (境界線の幅を引いたもの) を返します。
      2. Opera: externalWidth、outerHeight はページ ビュー コンテナーのサイズを表します。 innerWidth と innerHeight は、ページがコンテナー内のページ ビュー領域のサイズ (境界線の幅を差し引いたもの) を表すことを示します。
      3. Chrome: JavaScript の昇格では、outerWidth と innerHeight は innerWidth と innerHeight と同じ値を返します。これはブラウザー ウィンドウのサイズではなくビューポートのサイズです。 (?? テスト後、存在しません。ブラウザのウィンドウ サイズやビューポート領域のサイズに関しては、他のブラウザと同じように動作します) ページの表示領域に関する情報: ページのサイズは異なりますが、ブラウザ ウィンドウ自体は最終的に決定できませんが、ページのビューポート サイズを取得できます。
    3. 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 が異常です。
      4. (1) FF44.0.2 バージョンのブラウザテスト: 標準モードでは正常に動作しますが、混合モードでは document.body の計算値は正しいですが、document.documentElement の計算値が正しくありません。

    （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高级程序设计》

    HTML1a309583e26acea4f04ca31122d8c535标签

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

    DOCTYPE作用及用法详解

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

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：アニメーションアニメーションの詳しい解説(12) --animateLayoutChangesとLayoutTransition_html/css_WEB-ITnose次の記事：アニメーションアニメーションの詳しい解説(12) --animateLayoutChangesとLayoutTransition_html/css_WEB-ITnose

    関連記事

    続きを見る