HTML5新增的语义化布局标签是什么意思

这篇文章主要讲解了“HTML5新增的语义化布局标签是什么意思”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML5新增的语义化布局标签是什么意思”吧！

　　在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

　　HTML5布局

　　< header>...< /header> 头部

　　< nav>...< /nav> 导航

　　< section>...< /section> 定义文档中的节。比如章节、页眉、页脚或文档中的其它部分

　　< aside>...< /aside> 侧边栏

　　< footer>...< /footer> 页脚

　　< article>...< /article> 代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

　　使用HTML5的新的结构标签，做出上面的布局，代码如下：

　　< header>定义一个页面或是区域的头部< /header>

　　< div>

　　< section>定义一个区域< /section>

　　< aside>定义页面内容的侧边框部分< /aside>

　　< /div>

　　< footer>定义一个页面或是区域的底部< /footer>

　　/*页面顶部 header*/

　　header{

　　height:150px;

　　background-color:#abcdef;

　　}

　　/*页面中间 div*/

　　div{

　　margin-top:10px;

　　height:300px;

　　}

　　section{

　　height:300px;

　　background-color:#abcdef;

　　width:70%;

　　float:left;

　　}

　　article{

　　background-color:#F33;

　　width:500px;

　　text-align:center;

　　margin:0px auto;

　　}

　　aside{

　　height:300px;

　　background-color:#abcdef;

　　width:28%;

　　float:right;

　　}

　　/*页面底部*/

　　footer{

　　height:100px;

　　background-color:#abcdef;

　　clear:both;

　　margin-top:10px;

　　}

感谢各位的阅读，以上就是“HTML5新增的语义化布局标签是什么意思”的内容了，经过本文的学习后，相信大家对HTML5新增的语义化布局标签是什么意思这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！