日誌 結構化 article out 爬蟲 簡單 art imp ubd

1、含義--用正確的標簽做正確對事情。

2、目的--讓頁面的內容結構化，便於瀏覽器，搜索引擎解析。

3、好處--在沒有css樣式的情況下，也以一種文檔格式顯示，易於閱讀；

搜索引擎的爬蟲依賴於標簽來確定上下文和各個關鍵字的權重，易於SEO；

使閱讀源代碼的人更加容易將網站分塊，便於閱讀和維護。

4、常用的標簽--

　　<header>

可以是網頁或任意section的頭部部分；

沒有個數限制；

如果<hgroup>或<h1>...<h6>自己能工作的很好，就不用。

　　<footer>跟<header>類似。

　　<hgroup>

如果只需要一個h1-h6標簽就不用hgroup；

　　　　如果有連續多個h1-h6標簽就用hgroup；

　　　　如果有連續多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽。

　　<nav>用在整個頁面主要導航部分上。

　　<aside>

　　　　aside在article內表示主要內容的附屬信息；

　　　　在article之外則可做側邊欄，沒有article與之對應，最好不用；

　　　　如果是廣告，其他日誌鏈接或者其他分類導航也可以用。

　　<section>

　　　　表示文檔中的節或者段；

　　　　article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div。

　　<article>--article內部嵌套article，有可能是評論或其他跟文章有關聯的內容。

<article>

　　<header>
　　　　<h1>一篇文章</h1>
　　　　<p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
　　</header>

　　<p>文章內容..</p>

　　<article>
　　　　<h2>評論</h2>

　　　　<article>
　　　　　　<header>
　　　　　　　　<h3>評論者: XXX</h3>
　　　　　　　　<p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
　　　　　　</header>
　　　　　　<p>哈哈哈</p>
　　　　</article>

　　　　<article>
　　　　　　<header>
　　　　　　　　<h3>評論者: XXX</h3>
　　　　　　　　<p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
　　　　　　</header>
　　　　　　<p>哈？哈？哈？</p>
　　　　</article>

　　</article>

</article>

上例是最好簡單的article標簽使用情況，如果在article內部再嵌套article，那就代表內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論，如下：

<article>

    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章內容..</p>

    <article>
        <h2>評論</h2>

        <article>
            <header>
                <h3>評論者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>評論者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈？哈？哈？</p>
        </article>

    </article>

</article>

文章裏的評論，一個article嵌套article來表示的實例

article內部嵌套article，有可能是評論或其他跟文章有關聯的內容。那article內部嵌套section一般是什麽情況呢。如下：

<article>

    <h1>前端技術</h1>
    <p>前端技術有那些</p>

    <section>
        <h2>CSS</h2>
        <p>樣式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>腳本</p>
    </section>

</article>

文章裏的章節，一個article裏的section實例：因為文章內section部分雖然也是獨立的部分，但是它門只能算是組成整體的一部分，從屬關系，article是大主體，section是構成這個大主體的一部分。本網站的全部文章都是article嵌套一個個section章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。

那section內部嵌套article又有哪些情況呢，如下

<section>
    
    <h1>介紹: 網站制作成員配備</h1>

    <article>
        <h2>設計師</h2>
        <p>設計網頁的...</p>
    </article>

    <article>
        <h2>程序員</h2>
        <p>後臺寫程序的..</p>
    </article>

    <article>
        <h2>前端工程師</h2>
        <p>給樓上兩位打雜的..</p>
    </article>

</section>

一個section裏的article實例：設計師、程序員、前端工程師都是一個獨立的整體，他們組成了網站制作基本配備，當然還有其他成員~~。設計師、程序員、前端工程師就像article，是一個個獨立的整體，而section將這些自成一體的article包裹，就組成了一個團體。

HTML語義化