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

html和body標籤的差別有哪些

青灯夜游

發布： 2023-01-11 09:19:48

原創

5924 人瀏覽過

區別：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中文網其他相關文章！