·您当前的位置:主页 > 技术教程 > JavaScript >

[html5]html5最常用文档的结构标签(页面结构标签)

时间:2017-03-07 11:49来源:web前端教程  极酷网页播放器
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器

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

在讲这些新标签之前,我们先看一个普通的页面的布局方式:


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



相关的HTML代码是:

  1. <body> 
  2.  
  3.  <header>...</header> 
  4.  
  5.  <nav>...</nav> 
  6.  
  7.  <article> 
  8.  
  9.   <section>...</section> 
  10.  
  11.  </article> 
  12.  
  13.  <aside>...</aside> 
  14.  
  15.  <footer>...</footer> 
  16.  
  17. </body> 

 

html5在线课堂/html5在线视频教学