html和body標籤的差別有哪些-前端問答-PHP中文網

首頁

web前端

前端問答

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標籤的差別有哪些

本教學操作環境：windows7系統、CSS3&&HTML5&&javascript1.8.5版、Dell G3電腦。

在 CSS 中，和

的差異往往被忽略，全域樣式或定義在上，或定義在上。實際上，兩者是有區別的，不論是 CSS 老鳥還是新手，都應該了解。

HTML 和Body 如何關聯

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

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

根據標準定義，是文件的根元素，

、< ;body> 是唯一的兩個子元素。依照規範，是和相對對照、需要加以區別的元素。

因此，和

是父子關係。在 HTML 文件中，:root 選擇符對應元素。

:root {
}

html {  
}

要注意的是，:root 選擇符（偽類）的優先權大於 html 選擇子：(0, 0, 1, 0) vs (0, 0, 0, 1)。

哪些全域樣式應該應用在HTML

html {  
  font-size: 62.5%;
}

body {  
  font-size: 1.4rem; /* =14px */
}

h1 {  
  font-size: 2.4rem; /* =24px */
}

古怪的background-color

CSS中有一些古怪的行為，將background-color 應用到

以後，即便裡的元素沒有佔滿視口，背景顏色也會蔓延到整個視口。

給 html 設定 background-color 可以解決這個問題。

height: 100%

如果

及其子元素的高度需要設定為視窗高度時，元素上也需要加入：

html,  
body {  
  height: 100%;
}

哪些全域樣式應該應用在Body

早期的規格中，

有以下行內屬性：

background
bgcolor
#marginbottom
marginleft
marginright
margintop
text

##這些行內屬性對應的CSS 樣式應該應用在。

##backgroundbgcolorbackground-color# #marginbottommargin-bottommarginleft

Inline Attribute	#CSS Property
background
background

margin-leftmarginright

margin-rightmargintop

margin-top

###text######font### ##################JavaScript 中的差異#############上面舉了一些和在CSS 中的區別，其實在JavaScript 中同樣存在區別，例如 html 對應 ###document.documentElement###、body 對應 ###document.body###。 ######更多程式相關知識，請造訪：###程式設計入門###！！ ###

以上是html和body標籤的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

反應的局限性是什麼？May 02, 2025 am 12:26 AM

Include：1）AsteeplearningCurvedUetoItsVasteCosystem，2）SeochallengesWithClient-SiderEndering，3）潛在的PersperformanceissuesInsuesInlArgeApplications，4）ComplexStateStateManagementAsappsgrow和5）TheneedtokeEedtokeEedtokeEppwithitsrapideDrapidevoltolution.thereedtokeEppectortorservolution.thereedthersrapidevolution.ththesefactorsshesssheou

React的學習曲線：新開發人員的挑戰May 02, 2025 am 12:24 AM

reactischallengingforbeginnersduetoitssteplearningcurveandparadigmshifttocoment oparchitecent.1）startwithofficialdocumentationforasolidFoundation.2）了解jsxandhowtoembedjavascriptwithinit.3）

為React中的動態列表生成穩定且獨特的鍵May 02, 2025 am 12:22 AM

ThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute

JavaScript疲勞：與React及其工具保持最新May 02, 2025 am 12:19 AM

javascriptfatigueinrectismanagbaiblewithstrategiesLike just just in-timelearninganning and CuratedInformationsources.1）學習whatyouneedwhenyouneedit

使用USESTATE（）掛鉤的測試組件May 02, 2025 am 12:13 AM

tateractComponents通過theusestatehook，使用jestandReaCtTestingLibraryToSigulationsimintionsandIntractions and verifyStateChangesInTheUI.1）underthecomponentAndComponentAndComponentAndConconentAndCheckInitialState.2）模擬useruseruserusertactionslikeclicksorformsorformsormissions.3）

React中的鑰匙：深入研究性能優化技術May 01, 2025 am 12:25 AM

KeysinreactarecrucialforopTimizingPerformanceByingIneFefitedListupDates.1）useKeyStoIndentifyAndTrackListelements.2）避免使用ArrayIndicesasKeystopreventperformansissues.3）ChooSestableIdentifierslikeIdentifierSlikeItem.idtomaintainAinainCommaintOnconMaintOmentStateAteanDimpperperFermerfermperfermerformperfermerformfermerformfermerformfermerment.ChosestopReventPerformissues.3）

反應中的鍵是什麼？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiers usedwhenrenderingListstoimprovereConciliation效率。 1）heelPreactrackChangesInListItems，2）使用StableanDuniqueIdentifiersLikeItifiersLikeItemidSisRecumended，3）避免使用ArrayIndicesaskeyindicesaskeystopreventopReventOpReventSissUseSuseSuseWithReRefers和4）

反應中獨特鍵的重要性：避免常見的陷阱May 01, 2025 am 12:19 AM

獨特的keysarecrucialinreactforoptimizingRendering和MaintainingComponentStateTegrity.1）useanaturalAlaluniqueIdentifierFromyourDataiFabable.2）ifnonaturalalientedifierexistsistsists，generateauniqueKeyniqueKeyKeyLiquekeyperaliqeyAliqueLiqueAlighatiSaliqueLiberaryLlikikeuuId.3）deversearrayIndiceSaskeyseSecialIndiceSeasseAsialIndiceAseAsialIndiceAsiall

See all articles