02 - use and compatibility of semantic tags
I. new semantic labels
New semantic label view address
new:H5 NEW
Not supported in HTML5: this element is defined in HTML4.01, not supported in HTML5
2. Common labels
Semantic label:
| Tag name | Effect |
|---|---|
| nav | Presentation navigation |
| header | Page header |
| footer | Representing footers |
| main | Article |
| article | Main contents of the document |
| aside | Beyond the subject matter |
Note: header (footer): can describe any header (bottom)
Three, code
Illustration:
[external link picture transfer failed (img-5hMMQNY6-1563187337009)(/img/biaoqian.png))
Code:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Semantic tags</title> <style> *{ margin: 0; padding: 0; } header{ height: 100px; width: 100%; line-height: 30px; background-color: aqua; } nav{ height: 50px; width: 100%; line-height: 30px; background-color:lightpink; } main{ height: 300px; width: 100%; line-height: 30px; background-color:aquamarine; } main > article{ height: 100%; width: 70%; line-height: 30px; background-color:yellow; float: left; } main > aside{ height: 100%; width: 30%; line-height: 30px; background-color:red; float: right; } footer{ height: 80px; width: 100%; line-height: 30px; background-color:burlywood; } </style> </head> <body> <header>head</header> <nav>Navigation</nav> <main> <article>left</article> <aside>Right</aside> </main> <footer>bottom</footer> </body> </html>
Result:
[failed to transfer the image out of the chain (img-AtS2JCUJ-1563187337010)(/img/jieguo.PNG))
IV. compatibility treatment
IE9 and above
Row level element is invalid when setting width
IE9 and above resolve all semantic tags to row level elements
Solution: convert row level elements to block level elements (display:block)
IE8 and below
Semantic tags are not supported at all (HTML5 is not supported)
In IE8, the semantic label is not recognized, so it cannot be parsed, which means that the style written is invalid.
Solve:
1. Create labels manually: the default label content is row level elements (display: block)
Such as:
Document.createElement("header");
2. Introduce third-party plug-ins
Html5shiv.min.js: by default, the IE version of IE8 and below does not support HTML5. You can make compatibility by importing this file.
<script src="js/html5shiv.min.js"></script>