htmlタグとbodyタグの違いは何ですか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2023-01-11 09:19:48

オリジナル

5964 人が閲覧しました

相違点: 1. html タグはドキュメントのルート要素であり、body タグはドキュメントのメイン要素です; 2. html タグと body タグに適用されるグローバルスタイルは異なります。 3. JSではhtmlが「document.documentElement」、bodyが「document.body」に相当します。

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

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5&&JavaScript バージョン 1.8.5、Dell G3 コンピューター。

CSS では、との違いは無視されることが多く、グローバルスタイルはまたはで定義されます。実際、この 2 つは違いがあり、CSS のベテランも初心者もそれを理解する必要があります。

HTML と本文の関係

<!DOCTYPE html>  
<html>  
  <head>
    <!-- Metadata and such -->
  </head>

  <body>
    <!-- Where the content begins -->
  <body>
</html>

ログイン後にコピー

標準定義によれば、はドキュメントのルート要素、< ;head>、< ;body> は、の 2 つの子要素のみです。仕様によれば、はと区別する必要がある要素です。

したがって、とは親子関係になります。 HTML ドキュメントでは、:root セレクターは要素に対応します。

: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%

とそのサブ要素の高さをウィンドウの高さに設定する必要がある場合、

html,  
body {  
  height: 100%;
}

ログイン後にコピー

どのグローバルスタイルを Body に適用する必要がありますか

以前の仕様では、次のインライン属性がありました:

background
##bgcolor
marginbottom
marginleft
marginright
margintop
text

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

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

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

document.body

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

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