HTML5初学

Html 5的优势在于1）可以跨平台开发，PC端的程序可以不经过任何修改就在移动端顺利运行；2）支持在线视频，不依赖于Flash插件，像微信里面的小视频就可以使用这种方法。

Html5主张行为（JavaScript）、样式（CSS）、结构（HTML）三者分离，以便于实现样式复用、以后修改也更方便，不会影响到其他内容。我们在做H5案例的时候应该先做到内容展示再加载行为，吸引用户访问网站。移动端开发相对于PC端尤其是IE6/7/8来说兼容性问题较少，主要分为三种类型：a.原生开发（IOS/android应用开发） b.html5开发 c.混合开发。目前第三种开发方法占据绝大多数，因为H5的技术可以直接嵌入到安卓系统中。

下面是笔者关于H5标签的理解和相应的Demo,但是因为个人水平问题，可能会存在错误，希望有小伙伴发现的话可以在评论里指出来。

首先，H5相比较Html4.0.1版本新增加了7个结构性标签，如下所示：

1.<header></header>

这个标签是表示页面中一个内容区块的头部内容或者整个页面的标题，是使用最普遍的H5新标签之一，用来代替以前版本里面的<div id="head"></div>这样的内容，两者谁更简便一目了然。

2.<section></section>

这个标签用来表示页面中一个内容区块，一个页面中可以有多个section,与之相对的是main标签，虽然也是规定文章的主要内容，但是页面中通常只能有一个，而且里面的元素对于文档来说是唯一的，类似侧边栏、导航栏、版权信息、站点标志都不能包含在main标签里面。

3.<footer></footer>

这个标签是指页面或页面一个区块中的页脚，一个页面中可以有多个这个标签。

4.<nav></nav>

这个标签是指网页的导航栏，而且是指主导航栏，如果文档中有前后按钮的必须包含在nav标签里面。

5.<article></article>

这个标签指页面中独立的、与其他内容不相干的内容，如一篇文章之类的。

6.<aside></aside>

表示<article>元素内容之外的并与<arti表cle>元素内容相关的辅助信息。实际开发中主要用于侧边栏，与article标签一起使用。

7.<figure></figure>

表示一段独立的流内容，一般表示主体文档内容中的一个独立单元。使用<figcaption>元素为<figure>元素组添加标题。

结构标签演示代码如下所示：

    
    
    

        
     
     
头部标签
    
    
    
    
    
    

     
     第一个section
    
    
    
    
    

     
     第二个section
    
    
    
    
    

     
     第三个section
    
    
    
    
    

        
     
     
页脚