html5常用语义化标签,html5新增的语义标签及作用

　　我模仿HTML5 CSS3做了一个博客页面。整体效果布局如下：

　　页面布局基于html5元素。所以在开始之前熟悉HTML5元素很重要，然后检查它的语义是否适合你的布局。

　　HTML5结构

　　重要的是，在编写html5代码时，不要简单地用HTML5中的section标签替换div标签。有时div元素在语义上

　　在世界上还是不错的选择。如包装或容器分区

　　可以用来替换传统div元素的新标签之一是header元素。在header元素中，我们还可以放置用于包装页面的主导航菜单。

　　的nav元素。包含锚点的H1元素是我们博客的标题。

　　一开始我是用section来包装页面的内容，但是看了一些文档后，觉得这在语义上并不是100%正确的。或者选择了div元素，

　　在div元素中，每个博客都包装在自己的article元素中。

　　在一系列博客的底部，有一对分页链接。分页链接通常没有nav(可以用在很多地方，不仅仅是主导航)元素重要。

　　等价。但是这个博客布局仍然将分页链接作为主要导航。

　　在side元素被修改之前，语义上并没有特殊的元素作为侧边栏。然而，现在您可以安全地使用aside元素，而不用担心语法。

　　在本例中，side元素包含几个section元素。侧边栏底部有一个简单的搜索框。它可以向我们展示HTML5表单的一些新特性。

　　其中之一是占位符属性。

　　布局以页脚元素结束。在这个例子中，footer元素需要放在div容器的外面，这样footer元素的宽度就可以跨越整个页面。

　　关于完整的源代码和CSS3部分，请参见原始的http://line 25 . com/tutorials/create-a-topology-based-blog-layout-in-html 5。

　　以上关于HTML5语义标签(博客页面)的练习，就是边肖分享的全部内容。希望能给你一个参考和支持。

　　原地址：http://www.cnblogs.com/androidshouce/archive/2016/07.html

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。