亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

慕少3449830 · 更新于 2020-07-09

HTML 結構化元素標簽

網頁是由一個一個的區域組成，就像房子中的房間一樣，每個區域內可以放置 HTML 元素，然后可以對區域設置樣式從而將其與別的區域區分開來。這個區域在 HTML 中由結構元素實現，又可以將其稱之為容器元素。通過搭配 ID 屬性使用，結構元素將會幫助我們構建結構化條理分明的網站邏輯。本章我們介紹一下 結構元素的使用方式和場景。

1. div

1.1 適用場景

div 元素在 HTML 中用于定義一個區塊，用于對區塊內的元素統一布局或者隔離，它本身并不呈現視覺樣式，也沒有明確的語義，可適用于沒有明確語義化的場景，例如：

實例演示
預覽 復制
復制成功！
<div class="AppHeader-inner">
    <ul role="navigation" class="Tabs AppHeader-Tabs">
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink is-active" href="//www.zhihu.com/" data-za-not-track-link="true">首頁</a>
        </li>
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink" href="//www.zhihu.com/explore" data-za-not-track-link="true">發現</a>
        </li>
        <li role="tab" class="Tabs-item AppHeader-Tab Tabs-item--noMeta">
        <a class="Tabs-link AppHeader-TabsLink" href="//www.zhihu.com/question/waiting" data-za-not-track-link="true">等你來答</a>
        </li>
    </ul>
</div>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：上述代碼將網頁頭部使用 div 區塊定義，這樣定義的好處在于，一旦網頁需要隱藏頭部，或者給頭部設置一個特殊的樣式（例如顏色、字體）只需要通過 JavaScript 或者 css 操控 div 即可。
這樣對 div 設置文字顏色，div 中包含的元素統一生效。div 內部可以包含任意元素，理論上可以配合 css 模擬成任何樣式的元素，所以在 HTML5 之后原本跟樣式相關的元素屬性基本上不建議使用了，都可以用 css 替代。

1.2 避免濫用 div

div 作為一個沒有特殊意義的標簽，相比其它有明確用途的標簽，它沒有特殊屬性，也沒有特殊效果，實在想不出還沒有什么可以掌握的。但這并不妨礙 div 被濫用。一個標簽什么時候應該使用，是由這個標簽本身的語義，以及使用者想要表現的內容決定的。

div 沒有具體的語義
div 的語義是 division，一個很廣泛的語義，在使用 div 之前應該先想想，還有沒有更具語義的標簽，盡量使用語義明確的標簽。比如用 div 來標記文段（p）和列表（li）顯然是不合適的。

事實上，為了更好地使用 div，你需要全面了解 HTML 標準提供了哪些標簽，它們的語義是什么。如果你不知道 p、span、h1、h2、h3 的存在，只會用 div，必定寫出糟糕的 HTML 代碼。

實例演示
預覽 復制
復制成功！
<div class="container" id="header">
    <div class="header header-main"></div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">            </div>
        </div>
        <div class="article-section">
            <div class="article-header-level-2">            </div>
        </div>
    </div>
</div>
<div class="container" id="footer">
    <div class="contact-info">
        <p class="email">
            <a href="mailto:[email protected]"></a>
        </p>
        <div class="street-address">        </div>
    </div>
</div>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：例如上述代碼，完全使用 div 來定義網頁區域，這樣做雖然可以實現對應的效果，但是對于搜索引擎、爬蟲，甚至網站維護人員來說是一個糟糕的代碼，因為搜索引擎識別不出哪部分是頭部哪部分是尾部。

實例演示
預覽 復制
復制成功！
<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
    </article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:[email protected]"></a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress"></p>
            <p property="addressCountry"></p>
        </address>
    </section>
</footer>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：這段代碼使用 header 、nav、footer、section 等標簽，詳細且準確的根據語義化來定義網頁的布局。

2. 其他語義化相關機構元素

2.1 span

和 div 的作用類似，span 是通常用來作為文本容器，它沒有明確定義的語義，在沒有其他合適的元素標簽時，可以用 span 來包含文本，它是一個行內元素。例如：

實例演示
預覽 復制
復制成功！
<p><span>一些文字</span></p><!-- 定義一個段落 -->
運行案例 點擊 "運行案例" 可查看在線運行效果

header 元素通常用于包含頭部介紹性相關的元素，是 HTML5 中新增元素。它可以使用全局屬性。一個網頁中可以使用多個 header 元素，也可以在每個獨立的內容機構中使用 header 元素，例如：

實例演示
預覽 復制
復制成功！
<header>
  <h1>網站標題</h1>
  <img src="logo-sm.png" alt="logo">
</header>
運行案例 點擊 "運行案例" 可查看在線運行效果

注意： header 是 HTML5 新增的元素，可能不兼容低版本的 IE 瀏覽器

nav 是 Navigation 的簡稱，通常用于網頁中的導航欄，使用 nav 將網頁中導航欄相關的標簽歸攏在一個區域，這樣結構更清晰明了，例如：

實例演示
預覽 復制
復制成功！
<nav><!-- 定義一個導航欄 -->
    <ul>
        <li><a href="#">首頁</a></li> 
        <li><a href="#">新聞資訊</a></li>
        <li><a href="#">常見問題</a></li>
        <li><a href="#">更新日志</a></li>
        <li><a href="#">論壇</a></li>
    </ul> 
</nav>
運行案例 點擊 "運行案例" 可查看在線運行效果

注意： nav 是 HTML5 新增的元素，可能不兼容低版本的 IE 瀏覽器

2.4 article

article 用于定義網頁中文檔、章節、段落相關的文本結構，一個網頁中可以定義多個 article 標簽。與 span 不同的是，article 具有明確定義的語義。每個 article 中通常包含 header、H1-H6、address 等和文章標題、作者等相關信息的標簽。

實例演示
預覽 復制
復制成功！
<article>　<!-- 定義一篇文章 -->
    <header>
        <h1>article元素使用方法</h1>
        <p>發表日期：<time pubdate="pubdate">2017/2/9</time></p>
    </header>
    <p>此標簽里顯示的是article整個文章的主要內容</p>
</article>
運行案例 點擊 "運行案例" 可查看在線運行效果

注意： article 是 HTML5 新增的元素，可能不兼容低版本的 IE 瀏覽器。

2.5 aside

aside 元素用來定義當前頁面或者文章的復數信息部分，它主要包含相關的引用、側邊欄、廣告、導航條等其他類似的有別于主要內容的部分，通常結合 article 標簽使用。

2.6 section

section 元素用于對網頁中的內容分塊，與 div 不同的是它具有明確的分塊語義，但是 HTML 沒有對它定義更加細化的語義，所以說如果適用場景有比較明確的語義場景的話應該使用更加符合條件的標簽，例如 nav、article、header 等。如果需要對塊使用自定義的樣式，請盡量使用 div 標簽。使用 section 通常用于將一塊內容細分成多個小塊區域，例如：

實例演示
預覽 復制
復制成功！
<article>
    <h1>編程語言</h1>
    <p>編程語言常用的有 asp,asp.net,php,jsp </p>
    <section> 
        <h2>asp</h2> 
        <p>asp全稱Active Server Page</p> 
    </section>
    <section>
        <h2>asp.net</h2>
        <p>asp升級版</p> 
    </section>
    <section>
        <h2>php</h2> 
        <p>簡單、入門門檻低</p>
    </section>
</article>
運行案例 點擊 "運行案例" 可查看在線運行效果

注意： section 是 HTML5 新增的元素，可能不兼容低版本的 IE 瀏覽器。

footer 元素用于定義網頁的頁尾，與 header 元素類似，除了可以定義網頁的頁尾，還可以用于 article 元素的尾部，例如：

實例演示
預覽 復制
復制成功！
<article>
    <header>文章目錄</header>
    <p>文章內容</p> 
    <footer> 文章信息 </footer>
</article> 
<footer> 頁面底部 </footer>
運行案例 點擊 "運行案例" 可查看在線運行效果

注意： footer 是 HTML5 新增的元素，可能不兼容低版本的 IE 瀏覽器。

3. 小結

本章介紹 HTML 中特殊的標簽-結構化標簽，由于結構化標簽在默認狀態下不能呈現相關的視覺樣式，所以通常不太起眼，但是想要寫出一個結構分明、易擴展、易維護的網頁代碼，它是必不可少的。