5.1　新建列表

HTML列表結(jié)構(gòu)可以分為兩種基本類型：有序列表和無序列表。無序列表使用項目符號來標識列表，而有序列表則使用編號來標識列表的項目順序。

5.1.1　無序列表

視頻講解

無序列表是一種不分排序的列表結(jié)構(gòu)，使用<ul>標簽定義，在<ul>標簽中可以包含多個<li>標簽定義的列表項目。

【示例1】下面示例使用無序列表定義一元二次方程的求解方法，預覽效果如圖5.1所示。

無序列表可以分為一級無序列表和多級無序列表，一級無序列表在瀏覽器中解析后，會在每個列表項目前面添加一個小黑點的修飾符，而多級無序列表則會根據(jù)級數(shù)調(diào)整列表項目修飾符。

【示例2】下面示例在頁面中設(shè)計了三層嵌套的多級列表結(jié)構(gòu)，瀏覽器默認解析時顯示效果如圖5.2所示。

圖5.1　定義無序列表

圖5.2　多級無序列表的默認解析效果

通過觀察圖5.2，可以發(fā)現(xiàn)無序列表在嵌套結(jié)構(gòu)中隨著其所包含的列表級數(shù)的增加而逐漸縮進，并且隨著列表級數(shù)的增加而改變不同的修飾符。合理使用列表結(jié)構(gòu)能讓頁面的結(jié)構(gòu)更加清晰。

    <ul>
           <li>列表項目1</li>
           <li>列表項目2</li>
           <div>錯誤的無序列表嵌套結(jié)構(gòu)</div>
    </ul>

    <ul>
           <li>列表項目1</li>
           <ul>
               <li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
           </ul>
    </ul>

    <ul>
           <li><ul>
                    <li>嵌套列表項目</li>
           </ul></li>
    </ul>

    <ul>
           <li>列表項目1
           <ul>
                <li>錯誤的無序列表嵌套結(jié)構(gòu)</li>
           </ul>
           <li>列表項目2</li>
    </ul>

5.1.2　有序列表

視頻講解

有序列表是一種在意排序位置的列表結(jié)構(gòu)，使用<ol>標簽定義，其中包含多個<li>列表項目標簽構(gòu)成。

一般網(wǎng)頁設(shè)計中，列表結(jié)構(gòu)可以互用有序或無序列表標簽。但是，在強調(diào)項目排序的欄目中，選用有序列表會更科學，如新聞列表（根據(jù)新聞時間排序）、排行榜（強調(diào)項目的名次）等。

【示例1】列表結(jié)構(gòu)在網(wǎng)頁中比較常見，其應(yīng)用范疇比較寬泛，可以是新聞列表、產(chǎn)品列表，也可以是導航、菜單、圖表等。下面示例顯示3種列表應(yīng)用樣式，效果如圖5.3所示。

    <h1>列表應(yīng)用</h1>
    <h2>百度互聯(lián)網(wǎng)新聞分類列表</h2>
    <ol>
        <li>網(wǎng)友熱論網(wǎng)絡(luò)文學：漸入主流還是剎那流星？</li>
        <li>電信封殺路由器? 消費者質(zhì)疑：強迫交易</li>
        <li>大學生創(chuàng)業(yè)俱樂部為大學生自主創(chuàng)業(yè)助力</li>
    </ol>
    <h2>焊機產(chǎn)品型號列表</h2>
    <ul>
        <li>直流氬弧焊機系列 </li>
        <li>空氣等離子切割機系列</li>
        <li>氬焊/手弧/切割三用機系列</li>
    </ul>
    <h2>站點導航菜單列表</h2>
    <ul>
        <li>微博</li>
        <li>社區(qū)</li>
        <li>新聞</li>
    </ul>

【示例2】有序列表也可分為一級有序列表和多級有序列表，瀏覽器默認解析時都是將有序列表以阿拉伯數(shù)字表示，并增加縮進，如圖5.4所示。

圖5.3　列表的應(yīng)用形式

圖5.4　多級有序列表默認解析效果

<ol>標簽包含3個比較實用的屬性，這些屬性同時獲得HTML5支持，且其中reversed為新增屬性。具體說明如表5.1所示。

表5.1　<ol>標簽屬性

【示例3】下面示例設(shè)計有序列表降序顯示，序列的起始值為5，類型為大寫羅馬數(shù)字，效果如圖5.5所示。

    <ol type="I" start="5" reversed >
        <li>黃鶴樓 <span>崔顥</span> </li>
        <li>送元二使安西 <span>王維</span> </li>
        <li>涼州詞（黃河遠上） <span>王之渙</span> </li>
        <li> 登鸛雀樓 <span>王之渙</span> </li>
        <li> 登岳陽樓 <span>杜甫</span> </li>
    </ol>

圖5.5　在Firefox瀏覽器中預覽效果

5.1.3　描述列表

視頻講解

描述列表是一種特殊的結(jié)構(gòu)，它包括詞條和解釋兩塊內(nèi)容。包含的標簽說明如下：

　<dl>...</dl>：標識描述列表。

　<dt>...</dt>：標識詞條。

　<dd>...</dd>：標識解釋。

【示例1】下面示例定義了一個中藥詞條列表。

在上面結(jié)構(gòu)中，“丹皮”是詞條，而“為毛茛科多年生落葉小灌木植物牡丹的根皮。產(chǎn)于安徽、山東等地。秋季采收，曬干。生用或炒用。”是對詞條進行的描述（或解釋）。

【示例2】下面示例使用描述列表顯示兩個成語的解釋。

    <h1>成語詞條列表</h1>
    <dl>
       <dt>知無不言，言無不盡</dt>
       <dd>知道的就說，要說就毫無保留。</dd>
       <dt>智者千慮，必有一失</dt>
       <dd>不管多聰明的人，在很多次的考慮中，也一定會出現(xiàn)個別錯誤。</dd>
    </dl>

    <dl>
          <dt>描述列表標題</dt>
          <dd>描述列表內(nèi)容</dd>
    </dl>

    <dl>
          <dt>描述列表標題1</dt>
          <dd>描述列表內(nèi)容1.1</dd>
          <dd>描述列表內(nèi)容1.2</dd>
    </dl>

    <dl>
          <dt>描述列表標題1</dt>
          <dd>描述列表內(nèi)容1</dd>
          <dt>描述列表標題2</dt>
          <dd>描述列表內(nèi)容2</dd>
    </dl>

【示例3】同一個dl元素中可以包含多個詞條。例如，在下面這個描述列表中包含了兩個詞條，介紹花圃中花的種類，列表結(jié)構(gòu)代碼如下。

當列表結(jié)構(gòu)的內(nèi)容集中時，可以適當添加一個標題，描述列表內(nèi)部主要通過定義標題以及定義內(nèi)容項幫助瀏覽者明白該列表中所存在的關(guān)系以及相關(guān)介紹。

當介紹花圃中花的品種時，先說明主題，其次再分別介紹花的種類以及針對不同種類的花進行詳細介紹，演示效果如圖5.6所示。

圖5.6　描述列表結(jié)構(gòu)分析圖

dl、dt和dd元素不僅僅是為了解釋詞條，在語義結(jié)構(gòu)中，不再把描述列表看作是一種詞條解釋結(jié)構(gòu)。至于dt元素包含的內(nèi)容是一個真正意義上的詞條，還是dd元素包含的是一個真正意義上的解釋，對于和搜索引擎來說都不重要了。

一般來說，搜索引擎僅認為dt元素包含的是抽象、概括或簡練的內(nèi)容，對應(yīng)的dd元素包含的是與dt內(nèi)容相關(guān)聯(lián)的具體、詳細或生動說明。

【示例4】下面代碼使用<ul>標簽設(shè)計一個列表結(jié)構(gòu)。

【示例5】從結(jié)構(gòu)分析，示例4的代碼設(shè)計沒有問題，在表現(xiàn)效果上也許會更容易控制。不過從語義角度來考慮，對于這類的信息使用定義結(jié)構(gòu)會更恰當一些。

對于“<li>軟件大小：2431 KB </li>”這個項目，它實際上包含了兩部分信息：第一部分是信息的名稱（即“軟件大小”），第二部分是信息的具體內(nèi)容（即“2431 KB”）。對于描述列表來說，當自動檢索到“<dt>軟件大小</dt>”時，立即知道它是一個標題，而檢索到“<dd>2431 KB</dd>”時就知道它是上面標題對應(yīng)的具體信息。

5.1.4　菜單列表

視頻講解

HTML5重新定義了被HTML4棄用的<menu>標簽。使用<menu>標簽可以定義命令的列表或菜單，如上下文菜單、工具欄，以及列出表單控件和命令。<menu>標簽中可以包含<command>和<menuitem>標簽，用于定義命令和項目。

【示例1】下面示例配合使用<menu>和<command>標簽，定義一個命令，當單擊該命令時，將彈出提示對話框，如圖5.7所示。

    <menu>
        <command onclick="alert('Hello World')">命令</command>
    </menu>

<command>標簽可以定義命令按鈕，如單選按鈕、復選框或按鈕。只有當command元素位于menu元素內(nèi)時，該元素才是可見的，否則不會顯示這個元素，但是可以用它定義鍵盤快捷鍵。

目前，只有IE 9（更早或更晚的版本都不支持）和最新版本的Firefox支持<command>標簽。

<command>標簽包含很多屬性，專門用來定制命令的顯示樣式和行為，說明如表5.2所示。

表5.2　<command>標簽屬性

【示例2】下面示例使用<command>標簽各種屬性定義一組單選按鈕命令組，演示效果如圖5.8所示。目前還沒有瀏覽器完全支持這些屬性。

   <menu>
       <command icon="images/1.png" onclick="alert('男士')" type="radio" radiogroup="group1" label="男士">男
士</command>
       <command icon="images/2.png" onclick="alert('女士')" type="radio" radiogroup="group1" label="女士">女
士</command>
       <command icon="images/3.png" onclick="alert('未知')" type="radio" radiogroup="group1" label="未知">未
知</command>
   </menu>

圖5.7　定義菜單命令

圖5.8　定義單選按鈕命令組

<menu>標簽也包含兩個專用屬性，簡單說明如下：

　label：定義菜單的可見標簽。

　type：定義要顯示哪種菜單類型，取值說明如下。

　list：默認值，描述列表菜單。一個用戶可執(zhí)行或激活的命令列表（li元素）。

　context：定義上下文菜單。該菜單必須在用戶能夠與命令進行交互之前被激活。

　toolbar：定義工具欄菜單。活動式命令，允許用戶立即與命令進行交互。

【示例3】下面示例使用type屬性定義了兩組工具條按鈕，演示效果如圖5.9所示。

圖5.9　定義工具條命令組

5.1.5　快捷菜單

視頻講解

<menuitem>標簽用來定義菜單項目，這些菜單項目僅用作彈出菜單的命令，方便用戶快捷調(diào)用。

目前，僅有Firefox 8.0+版本瀏覽器支持<menuitem>標簽。

【示例1】menu和menuitem元素一起使用，將把新的菜單合并到本地的上下文菜單中。例如，給body添加一個“Hello World”的菜單。

    <style type="text/css">
    html, body{ height:100%;}
    </style>
    <body contextmenu="new-context-menu">
    <menu id="new-context-menu" type="context">
       <menuitem>Hello World</menuitem>
    </menu>

在上面示例代碼中，包含的基本屬性有id、type和contextmenu，指定了菜單類型是context，同時也指定了新的菜單項應(yīng)該被顯示的區(qū)域。在本示例中，當右擊后，新的菜單項將出現(xiàn)在文檔的任何地方，效果如圖5.10所示。

【示例2】也可以通過在特定的元素上給contextmenu屬性賦值，來限制新菜單項的作用區(qū)域。下面示例將為<h1>標簽綁定一個上下文菜單。

    <h1 contextmenu="new-context-menu">使用<menuitem>標簽設(shè)計彈出菜單</h1>
    <menu id="new-context-menu" type="context">
        <menuitem>Hello World</menuitem>
    </menu>

當在Firefox中查看時，會發(fā)現(xiàn)新添加的菜單項被添加到右鍵快捷菜單最頂部。

【示例3】為快捷菜單添加子菜單和圖標。子菜單由一組相似或相互的菜單項組成。下面示例演示如何使用menu添加4個子菜單，演示效果如圖5.11所示。

圖5.10　為body添加上下文菜單

圖5.11　為圖片添加子菜單項目

<menuitem>標簽包含很多屬性，具體說明如表5.3所示。

表5.3　<menuitem>標簽屬性

【示例4】下面示例使用icon屬性在菜單的旁邊添加圖標，演示效果如圖5.12所示。

圖5.12　為菜單項目添加圖標