02-语义化标签的使用及兼容性处理
一、新语义标签
new:H5新推出的
HTML5中不支持:HTML4.01定义了该元素,HTML5不支持
二、常用标签
语义标签:
标签名 | 作用 |
---|---|
nav | 表示导航 |
header | 表示页眉 |
footer | 表示页脚 |
main | 文章 |
article | 文档主要内容 |
aside | 主题内容之外 |
注:header(footer):可以描述任何一块头部(底部)
三、代码
图解:
[外链图片转存失败(img-5hMMQNY6-1563187337009)(/img/biaoqian.png)]
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>语义标签</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>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>
结果:
[外链图片转存失败(img-AtS2JCUJ-1563187337010)(/img/jieguo.PNG)]
四、兼容性处理
IE9及以上
行级元素在设置宽度的时候是失效的
IE9及以上中将所以的语义标签解析为行级元素
解决:将行级元素转换成块级元素(display:block)
IE8及以下
完全不支持语义标签(不支持HTML5)
在IE8中不认识语义标签,所以无法解析,也就意味着所写的样式无效
解决:
1、手动创建标签:默认的标签内容都是行级元素(display:block)
列如:
Document.createElement(“header”);
2、引入第三方插件
Html5shiv.min.js:在默认情况下,IE8及以下的IE版本不支持HTML5,引入这个文件就可以做到兼容
<script src="js/html5shiv.min.js"></script>