HTML5分节元素和语义元素

<base>

<base> 元素为文档中的所有链接指定基地址。如果URL中含有协议名或"//"则会忽略 <base> 指定的基地址。

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <base href="http://www.baidu.com/img/">
        </head>
        <body>
            <!-- http://www.baidu.com/img/a.jpg -->
            <img src="a.jpg">  

            <!-- 如果带协议头，则忽略 base 指定的基URL -->
            <!-- http://www.baidu.com/img/b.jpg -->
            <img src="http://www.baidu.com/img/b.jpg">  

            <!-- 省略协议头但保留"//"，仍然会忽略 base 指定的基URL -->
            <!-- 这也是谷歌前端编码规范推荐使用的一种方式 -->
            <!-- http://www.baidu.com/img/c.jpg -->
            <img src="//www.baidu.com/img/c.jpg">
        </body>
    </html>  

<link>

<link> 元素为文档指定外部样式表

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="css/style.css">
        </head>
        <body>  

        </body>
    </html>  

<article>

代表独立的、完整的一篇”文章“，如一个贴子、一篇文章、一条回复。可以包含 <header> 、 <footer> 、 <section> 等元素。

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!-- 一篇文章 -->
            <article>
                <header>
                    <h1>The Very First Rule of Life</h1>
                    <p><time datetime="2009-10-09">3 days ago</time></p>
                </header>
                <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
                <p>...</p>
                <section>
                    <h1>Comments</h1>
                    <!-- 一条评论 -->
                    <article>
                        <footer>
                            <p>Posted by: <span>George Washington</span></p>
                            <p><time datetime="2009-10-10">15 minutes ago</time></p>
                        </footer>
                        <p>Yeah! Especially when talking about your lobbyist friends!</p>
                    </article>
                    <!-- 一条评论 -->
                    <article>
                        <footer>
                            <p>Posted by: <span>George Hammond</span></p>
                            <p><time datetime="2009-10-10">5 minutes ago</time></p>
                        </footer>
                        <p>Hey, you have the same first name as me.</p>
                    </article>
                </section>
            </article>
        </body>
    </html>  

<section>

代表页面或某一部分的一节或一个部分，每个 <section> 一般都有一个主题思想，但未必一定要有 <h> 元素。

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <article>
                <header>
                    <h2>Apples</h2>
                    <p>Tasty, delicious fruit!</p>
                </header>
                <p>The apple is the pomaceous fruit of the apple tree.</p>
                <!-- 此处表示文章的一个小主题 -->
                <section>
                    <h3>Red Delicious</h3>
                    <p>These bright red apples are the most common found in many supermarkets.</p>
                </section>
                <section>
                    <h3>Granny Smith</h3>
                    <p>These juicy, green apples make a great filling for apple pies.</p>
                </section>
            </article>
        </body>
    </html>  

<nav>

任何具有导航性质的链接组都可以用 <nav> 元素，不管是主导航、还是侧边栏中的导航、还是面包屑导航、还是页面内的锚点导航

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <header>
                <nav>
                    <h1>Navigation</h1>
                    <ul>
                        <li><a href="articles.html">Index of all articles</a></li>
                        <li><a href="today.html">Things sheeple need to wake up for today</a></li>
                        <li><a href="successes.html">Sheeple we have managed to wake</a></li>
                    </ul>
                </nav>
            </header>
            <main>
                <header>
                    <h1>Demos in Exampland</h1>
                    <p>Written by A. N. Other.</p>
                </header>
                <nav>
                    <ul>
                        <li><a href="#public">Public demonstrations</a></li>
                        <li><a href="#destroy">Demolitions</a></li>
                        ...more...
                    </ul>
                </nav>
                <div>
                    <section id="public">
                        <h1>Public demonstrations</h1>
                        <p>...more...</p>
                    </section>
                    <section id="destroy">
                        <h1>Demolitions</h1>
                        <p>...more...</p>
                    </section>
                    ...more...
                </div>
                <footer>  

                </footer>
             </main>
        </body>
    </html>  

<aside>

<aside> 元素用于突出的引用、广告、侧边栏。

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            ...
            <p>He later joined a large company, continuing on the same work.
            <q>I love my job. People ask me what I do for fun ...</q></p>  

            <!-- 突出的引用 -->
            <aside>
             <q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q>
            </aside>  

            <p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p>
            ...
        </body>
    </html>  

<address>

<address> 代表联系信息，不仅仅是”地址“。

    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <footer>
                <address>
                    For more details, contact
                    <a href="mailto:js@example.com">John Smith</a>.
                </address>
                <p><small>© copyright 2038 Example Corp.</small></p>
            </footer>
        </body>
    </html>  

<pre>

<pre> 元素用于定义预格式化的文本，被包围在 <pre> 元素中的文本通常会保留空格和换行符，常用来表示程序的源代码

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <pre>
                <h1>hello world</h1>
                echo "hello world";
                print("hello world")
            </pre>
        </body>
    </html>  

<blockquote>

<blockquote> 元素用于定义引用块。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!-- 下面是引用内容 -->
            <blockquote>
                <p>Hello World</p>
            </blockquote>
        </body>
    </html>  

<figure>

<figcaption>

<figure> 元素表示独立的流内容（图像、图表、照片、代码等等）， <figcaption> 元素给 <figure> 元素添加标题。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <figure>
                <figcaption>Ubuntu诞生那一年</figcaption>
                <img src="ubuntu.jpg" width="350" height="234" />
            </figure>
        </body>
    </html>  

<code>

<code> 元素用于表示计算机源代码或者其他机器可以阅读的文本内容。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <p>又是<code>println("hello world")</code></p>
        </body>
    </html>  

<mark>

<mark> 元素突出显示文本。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <p>Do not forget to buy <mark>milk</mark> today.</p>
        </body>
    </html>  

<del>

<del> 元素定义文档中已被删除的文本。

<ins> 与 <del> 常配合使用：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <p>I love <del>java</del><ins>javascript</ins></p>
        </body>
    </html>  

<canvas>

<canvas> 元素定义图形。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                table {width: 100%;}
            </style>
        </head>
        <body>
            <canvas id="myCanvas" width="500" height="300"></canvas>
        </body>
    </html>