HTML5系列之启动篇--语义化标签

       切面试的时候，经常都被问到H5的东西，想了一下，还是总结总结吧。之前听人说H5很牛，其实因为很多是配合了CSS3才形成了那么炫酷的效果，买了一本H5的书，才发现最开始认识的H5还是很初级，特别在应用上面，往往就知道几个语义化标签、一些新增的表单元素及属性，还有画布，但是H5真的只有这些吗？我想不是的。闲话不说了，回归正题啦~~~~

（一）语义化标签

1、作用：方便搜索引擎或辅助技术（如屏幕阅读器）更好理解页面；

2、结构图：

3、标签元素：

  1）header：标题，可重复使用；

2）hgroup：对区段（section）的标题进行组合；

    <header>
        <hgroup>
            <h1>my name </h1>
            <h2>my slogan</h2>
        </hgroup>
    </header>

3）nav：页面的链接区域，主要的导航区域；

    <nav>
        <ul>
            <li>demo1</li>
            <li>demo2</li>
            <li>demo3</li>
        </ul>
    </nav>

4）section：定义大块的内容，如关键的文章区块，当然区块可以有自己的标题、导航；

5）article：标记独立可发布的内容，如博客文章等；

<section>
    <header>
        <h1>title</h1>
        <p>publish by Jole</p>
    </header>
   <article>
        blog content
   </article>
</section>

6）aside：页面中独立于主要内容的区域，如边栏之类的；

  7）mark：展示文档中应被标记或者突出显示的文本，CHROME默认是黄色的填充色

8）figure：独立的流内容，比如图像、图表、照片、代码等，与主内容有关，但删除后对主文档不会有其他影响；

9）figcaption:figure的标题内容；

<figure>
  <img src="1.jpg"  width="304" height="228">
  <figcaption>FLOGE IMG</figcaption>
</figure>

10）footer：页尾区域，通过包含链接、版权信息等