HTML5教程结构化标签-职坐标

HTML5教程结构化标签

沉沙 2018-09-11 来源：阅读 1074 评论 0

摘要：本篇教程探讨了HTML5教程结构化标签，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5教程结构化标签，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

一结构化标签
在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。
在讲这些新标签之前，我们先看一个普通的页面的布局方式：

　　上图中我们非常清晰的看到了，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块，而我们是通过class进行区分，并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范，搜索引擎只能去猜测某部分的功能，另外就是此页面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况：　　

二 article与section 区别
article：一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
section:定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
总结：
article元素可以看成是一种特殊类型的section元素，它比section元素更强调独立性、局部整体性。
section元素强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article元素，但是如果你想将一块内容分成几段的时候，应该使用section元素。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

html5+css3从入门到精通源码 html5登录页面图片 html5进度条

本文由 @沉沙发布于职坐标。未经许可，禁止转载。