What are the differences between html and body tags?-Front-end Q&A-php.cn

What are the differences between html and body tags?

青灯夜游

Release： 2023-01-11 09:19:48

Original

5925 people have browsed it

Differences: 1. The html tag is the root element of the document; the body tag is the main element of the document; 2. The global styles that should be applied to the html and body tags are different; 3. In JS, html corresponds to "document.documentElement" ", body corresponds to "document.body".

What are the differences between html and body tags?

The operating environment of this tutorial: windows7 system, CSS3&&HTML5&&javascript version 1.8.5, Dell G3 computer.

In CSS, the difference between and is often ignored, and global styles are either defined on or on . In fact, there is a difference between the two, and both CSS veterans and novices should understand it.

How HTML and Body are related

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

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

Copy after login

According to the standard definition, is the root element of the document, , < ;body> are the only two child elements of . According to the specification, is the element that needs to be distinguished from .

Therefore, and are parent-child relationships. In an HTML document, the :root selector corresponds to the element.

:root {
}

html {  
}

Copy after login

It should be noted that the :root selector (pseudo-class) has a higher priority than the html selector: (0, 0, 1, 0) vs (0, 0, 0, 1).

Which global styles should be applied to HTML

html {  
  font-size: 62.5%;
}

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

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

Copy after login

Wacky background-color

CSS There are some weird behaviors in there. After applying background-color to , even if the elements in do not occupy the entire viewport, the background color will spread to the entire viewport.

Setting background-color on html can solve this problem.

height: 100%

If the height of and its sub-elements needs to be set to the height of the window, the element also needs to be added:

html,  
body {  
  height: 100%;
}

Copy after login

Which global styles should be applied to Body

In the earlier specification, had the following inline attributes:

background
##bgcolor
marginbottom
marginleft
marginright
margintop
text

these CSS styles corresponding to inline attributes should be applied to the .

backgroundbackgroundbgcolorbackgroundmarginbottommargin-bottommarginleftmargin-left##marginrightmargintoptext

Inline Attribute	CSS Property

	background-color


margin-right
margin-top
font

Differences in JavaScriptThe above are some examples of and in CSS The difference actually exists in JavaScript, for example, html corresponds to

document.documentElement

, and body corresponds to document.body. For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of What are the differences between html and body tags?. For more information, please follow other related articles on the PHP Chinese website!