Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.