<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
header {
display: block;
width: 100%;
height: 500px;
background: #008c8c;
}
nav {
display: block;
width: 100%;
height: 300px;
background: skyblue;
}
/*IE9: 行级元素在设置宽高的时候是无效的。 解决方法:就是给那些元素添加 display: block;
IE8: 完全不支持语义标签(不支持html5):在IE8中,它不认识语义标签,所以无法解析这些标签,也就意味着所写的样式无效。 第一种方法:手动创建标签
第二种方法:插入第三方插件*/
main {
/* 将行级元素转换为块级元素 */
display: block;
width: 100%;
height: 300px;
background: gray;
}
main>article {
display: block;
width: 80%;
height: 100%;
background: wheat;
float: left;
}
main>aside {
display: block;
width: 20%;
height: 100%;
background: lemonchiffon;
float: right;
}
footer {
display: block;
width: 100%;
height: 200px;
background: palevioletred;
}
</style>
</head>
<body>
<!-- 第一种方法 -->
<script>
/* 手动创建标签:默认的标签的类型都是行级元素 */
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
</script>
<!-- 第二种方式:引入第三方插件 -->
<!-- <script src="../js/index.js"></script> -->
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
</html>
HTML5中语义标签的兼容性
最新推荐文章于 2024-07-18 15:09:36 发布