视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > JavaScript >

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

时间:2017-03-07 11:49web前端教程
在之前的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在线视频教学

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器