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

html和body標籤的差別有哪些

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

區別: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