h5-语义化标签的兼容性问题

概述1.html代码   1 <header>头</header>2 <nav>导航栏</nav>3 <main>4 <article>左</article>5 <aside>右</aside>6 </main>7 <footer>底部</footer>   2.基本效果图：浏览器怎么改变大小，基本的排版都不会改变   3.css基本的排版，样式   1

1.HTML代码

 

1 <header>头</header>2 <nav>导航栏</nav>3 <main>4     <article>左</article>5     <asIDe>右</asIDe>6 </main>7 <footer>底部</footer>

 

2.基本效果图：浏览器怎么改变大小，基本的排版都不会改变

 

3.CSS基本的排版，样式

 

 1     <style> 2         *{ 3             margin: 0; 4             padding: 0; 5         } 6         header{ 7             wIDth: 100%; 8             height: 100px; 9             background-color: red;10         }11         nav{12             wIDth: 100%;13             height: 30px;14             background-color: green;15         }16         main{17             display: block;18             wIDth: 100%;19             height: 500px;20             background-color: chocolate;21         }22         main > article{23             display: block;24             wIDth: 80%;25             height: 100%;26             background-color: darkblue;27             float: left;28         }29         main > asIDe{30             display: block;31             wIDth: 20%;32             height: 100%;33             background-color: firebrick;34             float: right;35         }36         footer{37             wIDth: 100%;38             height: 80px;39             background-color: hotpink;40         }41     </style>

 

4.解决ie8以下版本的兼容性问题

 

 1 <!--<script> 2     /** 3      * 解决ie8及以下版本兼容问题 4      * 手动创建语义化标签 5      * 默认创建的都是行级元素 6      * 需要使用设置为块级元素：  display: block; 7      */ 8     document.createElement("header"); 9 10 </script>-->11 <!--第二种方式 导入第三方插件-->12 <!--<script src="http://cdn.bootCSS.com/HTML5shiv/3.7.2/HTML5shiv.min.Js"></script>-->13 <!--<script src="../Js/HTML5shiv.min.Js"></script>-->

总结

以上是内存溢出为你收集整理的h5-语义化标签的兼容性问题全部内容，希望文章能够帮你解决h5-语义化标签的兼容性问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。