What's the difference between html and body tags?
This article is to share with you about the difference between html and body tags. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
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 style that should be applied in the html and body tags is different; 3, in JS, html corresponds to "document.documentElement" and body corresponds to "document.body".
The operating environment of this tutorial: windows7 system, CSS3&&HTML5&&javascript1.8.5 version, Dell G3 computer.
In CSS, the difference between and is often ignored, and the global style is either defined on or defined on. In fact, there is a difference between the two, whether it is an old CSS bird or a novice, should understand.
How HTML and Body relate
According to the standard definition, it is the root element of the document, and is the only two child elements. According to the norm, it is the element that needs to be distinguished from the contrast.
Therefore, it is a father-son relationship. In the HTML document, the: root selector corresponds to the element.
: root {} html {}
It should be noted that the root selector (pseudo-class) takes precedence over 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.4remt; / * = 14px * /} H2 {font-size: 2.4remr; / * = 24px * /}
Weird background-color.
There is some strange behavior in CSS that when background-color is applied, the background color will spread to the entire viewport even if the elements in it do not fill the viewport.
Setting background-color for html can solve this problem.
Height: 100%
If the height of the element and its child elements needs to be set to the window height, the element also needs to be added:
Html, body {height: 100%;}
Which global styles should be applied to Body
In the earlier specification, there were the following inline attributes:
Background
Bgcolor
Marginbottom
Marginleft
Marginright
Margintop
Text
The CSS style corresponding to these inline attributes should be applied to.
Inline AttributeCSS Propertybackgroundbackgroundbgcolorbackground
Background-colormarginbottommargin-bottommarginleftmargin-leftmarginrightmargin-rightmargintopmargin-toptextfont
Differences in JavaScript
There are some differences between the above and CSS, but there are also differences in JavaScript, such as html corresponds to document.documentElement and body corresponds to document.body.
Thank you for reading! This is the end of the article on "what's the difference between html and body tags". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
