Home >Web Front-end >Front-end Q&A >What are the differences between html and body tags?
What are the differences between html and body tags?
- 青灯夜游Original
- 2021-09-13 11:51:425958browse
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".
The operating environment of this tutorial: windows7 system, CSS3&&HTML5&&javascript version 1.8.5, Dell G3 computer.
In CSS, the difference between 100db36a723c770d327fc0aef2ce13b1 and 6c04bd5ca3fcae76e30b72ad730ca86d is often ignored, and global styles are either defined on 100db36a723c770d327fc0aef2ce13b1 or on 6c04bd5ca3fcae76e30b72ad730ca86d. 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>According to the standard definition, 100db36a723c770d327fc0aef2ce13b1 is the root element of the document, 93f0f5c25f18dab9d176bd4f6de5d30e, < ;body> are the only two child elements of 100db36a723c770d327fc0aef2ce13b1. According to the specification, 93f0f5c25f18dab9d176bd4f6de5d30e is the element that needs to be distinguished from 6c04bd5ca3fcae76e30b72ad730ca86d.
Therefore, 100db36a723c770d327fc0aef2ce13b1 and 6c04bd5ca3fcae76e30b72ad730ca86d are parent-child relationships. In an HTML document, the :root selector corresponds to the 100db36a723c770d327fc0aef2ce13b1 element.
:root {
}
html {
}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 */
}Wacky background-color
CSS There are some weird behaviors in there. After applying background-color to 6c04bd5ca3fcae76e30b72ad730ca86d, even if the elements in 6c04bd5ca3fcae76e30b72ad730ca86d 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 6c04bd5ca3fcae76e30b72ad730ca86d and its sub-elements needs to be set to the height of the window, the 100db36a723c770d327fc0aef2ce13b1 element also needs to be added:
html,
body {
height: 100%;
}Which global styles should be applied to Body
In the earlier specification, 6c04bd5ca3fcae76e30b72ad730ca86d had the following inline attributes:
background
- ##bgcolor
- marginbottom
- marginleft
- marginright
- margintop
- text
| Inline Attribute | CSS Property |
| background | |
| background | background-color |
| margin-bottom | |
| margin-left | |
| margin-right | |
| margin-top | |
| font |
Differences in JavaScriptThe above are some examples of 100db36a723c770d327fc0aef2ce13b1 and 6c04bd5ca3fcae76e30b72ad730ca86d 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:
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!