ホームページ > 記事 > ウェブフロントエンド > htmlタグとbodyタグの違いは何ですか?

htmlタグとbodyタグの違いは何ですか?

青灯夜游オリジナル: 2021-09-13 11:51:425903ブラウズ

相違点: 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
##bgcolor
marginbottom
marginleft
marginright
margintop
text

#インライン属性 backgroundbackgroundbackgroundbackground-colormargin-bottommargin-leftmargin-rightmargin-topfontJavaScript の違い

#CSS プロパティ
	bgcolor
	marginbottom
	marginleft
	#marginright
	margintop
	text

上記は、CSS の 100db36a723c770d327fc0aef2ce13b1 と 6c04bd5ca3fcae76e30b72ad730ca86d の例です。この違いは実際には JavaScript に存在します。たとえば、html は document.documentElement に対応し、body は

document.body

に対応します。プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。！

以上がhtmlタグとbodyタグの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSって英語でなんて言うの？次の記事：CSSって英語でなんて言うの？

続きを見る