1、语义元素 -- 有意义的元素

    如：<form>、<table>、<img> -- 元素名称就清楚的定义了内容

    无语义元素：<div>、<span> 


2、HTML5 新语义元素

    (1) <section>

        定义文档中的节(章节、页眉、页脚等)

        用法：包含在section标签里面的内容，它们的默认格式会和原始的有些区别。

<section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

    

    (2) <article>

        定义独立的内容

<article>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is....</p>
</article>


    (3) <nav>

        定义导航链接的部分

        用法：下面的html、JS、jQuery会自动排成一排，顶部导航的那种格式

<nav>
    <a href="/html/">html</a>
    <a href="/js/">JS</a>
    <a href="/jquery/">jQuery</a>
</nav>


    (4) <aside>

        定义页面主区域内容之外的内容

        aside的内容与主区域内容相关。如主区域是关于一个景点的介绍，aside的内容是该景点的联系方式。

        使用：

<p>My family and I visited The Epcot center this summer.</p> 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>


    (5) <header>

        描述文档的头部区域

        主要用于定义内容的介绍展示区域

        不会影响其包含的内容的默认样式

        可使用多个<header>

        实例：

    <article>
        <header>
            <h1>Internet Explorer 9</h1>
            <p><time pubdate datetime="2011-03-15"></time></p>
        </header>
        <p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
    </article>

   

    (6) <footer>

        描述文档的底部区域，页脚

        通常包含文档的作者、著作权、链接、联系信息等

        可多次使用<footer>

        实例：

    <footer>
        <p>Posted by: Hege Refsnes</p>
        <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>


    (7) <figure> <figcaption>

        <figure>：规定独立的流内容（图像、图表、照片、代码等等）。内容应该与主内容相关，但如果被删除，不对文档流产生影响。

        <figcaption> 标签：定义 <figure> 元素的标题。被置于 "figure" 元素的 第一个／最后一个 子元素的位置。

        使用：

    <figure>
        <p>Posted by: Hege Refsnes</p>
        <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>