首頁 > 文章 > web前端 > html和body標籤的差別有哪些

html和body標籤的差別有哪些

青灯夜游原創: 2021-09-13 11:51:425922瀏覽

區別：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 中，100db36a723c770d327fc0aef2ce13b1 和 6c04bd5ca3fcae76e30b72ad730ca86d 的差異往往被忽略，全域樣式或定義在 100db36a723c770d327fc0aef2ce13b1 上，或定義在 6c04bd5ca3fcae76e30b72ad730ca86d 上。實際上，兩者是有區別的，不論是 CSS 老鳥還是新手，都應該了解。

HTML 和Body 如何關聯

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

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

根據標準定義，100db36a723c770d327fc0aef2ce13b1 是文件的根元素，93f0f5c25f18dab9d176bd4f6de5d30e、< ;body> 是100db36a723c770d327fc0aef2ce13b1 唯一的兩個子元素。依照規範，93f0f5c25f18dab9d176bd4f6de5d30e 是和 6c04bd5ca3fcae76e30b72ad730ca86d 相對對照、需要加以區別的元素。

因此，100db36a723c770d327fc0aef2ce13b1 和 6c04bd5ca3fcae76e30b72ad730ca86d 是父子關係。在 HTML 文件中，:root 選擇符對應 100db36a723c770d327fc0aef2ce13b1 元素。

: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 應用到6c04bd5ca3fcae76e30b72ad730ca86d 以後，即便6c04bd5ca3fcae76e30b72ad730ca86d 裡的元素沒有佔滿視口，背景顏色也會蔓延到整個視口。

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

height: 100%

如果6c04bd5ca3fcae76e30b72ad730ca86d 及其子元素的高度需要設定為視窗高度時，100db36a723c770d327fc0aef2ce13b1 元素上也需要加入：

html,  
body {  
  height: 100%;
}

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

早期的規格中，6c04bd5ca3fcae76e30b72ad730ca86d 有以下行內屬性：

background
bgcolor
#marginbottom
marginleft
marginright
margintop
text

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

##backgroundbgcolorbackground-color# #marginbottommargin-bottommarginleft

Inline Attribute	#CSS Property
background
background

margin-leftmarginright

margin-rightmargintop

margin-top

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

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

陳述：

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

上一篇：css英文是什麼意思下一篇：css英文是什麼意思

看更多