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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Sep 13, 2021 am 11:51 AM

bodycsshtmljs

相違点: 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 サイトの他の関連記事を参照してください。

声明

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

Reactの限界は何ですか？May 02, 2025 am 12:26 AM

raceslimitationsinclude：1）asteeplearningcurveduetoitsvastecosystem、2）seochallengeswithsclient-siderEndering、3）潜在的なパフォーマンスのinlargeapplications、4）complenstatemanagementasappsgrow、and5）suneedtokeepupwithovolution

Reactの学習曲線：新しい開発者にとっての課題May 02, 2025 am 12:24 AM

ReactisChallengingを使用して、SteepLearNdParadigMshiftOconpontenAchitecture.1）startisofficialdocumentation forasolidfoundation.2）relondingjsxandjavascriptwithinit.3）LearntousefunctionalcompotontiTateを理解してください

反応の動的リストの安定したユニークなキーを生成するMay 02, 2025 am 12:22 AM

coreChallengeingEneratingは、duniqueys consinistinsidentifientiversre-renderseforeffiencedomupdates.1）aseenaturalKeysisisisisisisisedisederiableiableiaibuniqueandStable.2）denatekeysBaseTheBasedOnMultipreattributive.2）を無効にすることを非難することを解決します

JavaScriptの疲労：Reactとそのツールで最新の状態を維持しますMay 02, 2025 am 12:19 AM

javascriptfatigueinReactismainageable with rikeislikedivedingingindininginginformationscors.1）whatyouneedwhenyouneedit、focusingonprojectrelevance.2）

UseState（）フックを使用するコンポーネントをテストしますMay 02, 2025 am 12:13 AM

ESTESTROACTCOMPONENTSINGTHESESTATEHOOK、USEJESTANDREACTINTINGLIBRARYTOSIMULATE INTERACTIONSIONDANDVERIFYISTAMESISINTHEUI.1）RENDERTHECONCENTANDCHECKECHINITATA.2）SimulateUserIractionSionsionsionsionsionsionslikeClickSorformSubmissions.3）

Reactのキー：パフォーマンスの最適化技術への深い飛び込みMay 01, 2025 am 12:25 AM

keysinReactarecialforptimizingperformancebyididingineffictientListupdates.1）usekeystoidentifideidifyandtracklistelements.2）ArrayIndicesassyStopreventPerformanceSues.3）suoseStableidedifierslikeItem.idtomaincomentaindtateandiproveperift

Reactのキーとは何ですか？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiersiersiderSuredStrovereconconiniationEfficiency.1）theyctrackChangesinListitems、2）sultanduniqueidentifiersiirsiTeemidssisssississmendを使用して、3）ArrayIndicesAssayStopReventisSuseSUSEORINGを回避します

反応におけるユニークな鍵の重要性：一般的な落とし穴を避けるMay 01, 2025 am 12:19 AM

sinqueysarecrucialinReactforoptimizing andMaintainingcomponentStateIntegrity.1）useanaturaluniqueidentifierfromyourdataifaibable.2）ifnonaturalidentifierexists、発電済みのKeyusingingingingalibrarylikuuid.3）

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。