ホームページ >ウェブフロントエンド >フロントエンドQ&A >htmlタグとbodyタグの違いは何ですか?
相違点: 1. html タグはドキュメントのルート要素であり、body タグはドキュメントのメイン要素です; 2. html タグと body タグに適用されるグローバル スタイルは異なります。 3. JSではhtmlが「document.documentElement」、bodyが「document.body」に相当します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5&&JavaScript バージョン 1.8.5、Dell G3 コンピューター。
CSS では、100db36a723c770d327fc0aef2ce13b1 と 6c04bd5ca3fcae76e30b72ad730ca86d の違いは無視されることが多く、グローバル スタイルは 100db36a723c770d327fc0aef2ce13b1 または 6c04bd5ca3fcae76e30b72ad730ca86d で定義されます。実際、この 2 つは違いがあり、CSS のベテランも初心者もそれを理解する必要があります。
HTML と本文の関係
<!DOCTYPE html> <html> <head> <!-- Metadata and such --> </head> <body> <!-- Where the content begins --> <body> </html>
標準定義によれば、100db36a723c770d327fc0aef2ce13b1 はドキュメントのルート要素、< ;head>、< ;body> は、100db36a723c770d327fc0aef2ce13b1 の 2 つの子要素のみです。仕様によれば、
はと区別する必要がある要素です。したがって、100db36a723c770d327fc0aef2ce13b1 と 6c04bd5ca3fcae76e30b72ad730ca86d は親子関係になります。 HTML ドキュメントでは、:root セレクターは 100db36a723c770d327fc0aef2ce13b1 要素に対応します。
:root { } html { }
:root セレクター (疑似クラス) は、HTML セレクターよりも優先順位が高いことに注意してください: (0, 0, 1, 0) と (0, 0, 0, 1)。
HTML に適用するグローバル スタイル
html { font-size: 62.5%; } body { font-size: 1.4rem; /* =14px */ } h1 { font-size: 2.4rem; /* =24px */ }
奇抜な背景色
CSS
に背景色を適用すると、 内の要素がビューポート全体を占めていない場合でも、背景色がビューポート全体に広がります。HTML で背景色を設定すると、この問題を解決できます。
height: 100%
6c04bd5ca3fcae76e30b72ad730ca86d とそのサブ要素の高さをウィンドウの高さに設定する必要がある場合、
html, body { height: 100%; }
どのグローバル スタイルを Body に適用する必要がありますか
以前の仕様では、6c04bd5ca3fcae76e30b72ad730ca86d次のインライン属性がありました:
background
#CSS プロパティ | |
bgcolor | |
marginbottom |
|
marginleft | |
#marginright | |
margintop | |
text | |
上記は、CSS の 100db36a723c770d327fc0aef2ce13b1 と 6c04bd5ca3fcae76e30b72ad730ca86d の例です。この違いは実際には JavaScript に存在します。たとえば、html は document.documentElement に対応し、body は
document.body に対応します。 プログラミング関連の知識について詳しくは、
プログラミング入門
をご覧ください。 !
以上がhtmlタグとbodyタグの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。