什么是列表標(biāo)簽？怎樣使用HTML列表標(biāo)簽？【demo演示】

更新時間:2022-09-14 來源:黑馬程序員瀏覽量:

列表標(biāo)簽是網(wǎng)頁結(jié)構(gòu)中常用的標(biāo)簽，網(wǎng)頁中的列表按照列表結(jié)構(gòu)劃分通常分為3類，分別是無序列表、有序列表和定義列表。下面對這3類列表標(biāo)簽進(jìn)行詳細(xì)講解。

（1）無序列表

無序列表一種沒有特定順序的列表，各個列表項之間沒有先后順序之分，通常是并列的。定義無序列表的基本語法格式如下：

<ul>
   <1i>列表項1</1i>
   <1i>列表項2</1i>
      <1i>列表項3</1i>
   ...
</ul>

在上述語法中，<u1>標(biāo)簽用于定義無序列表，<li>標(biāo)簽嵌套在<u1>標(biāo)簽中，用于描述具體的列表項，每<ul></ul>中至少應(yīng)包含一對<li></li>。

下面通過一個案例演示標(biāo)簽的使用。在chapterO1文件夾中創(chuàng)建一個名稱為htmlDemo07的HTML.文件，其關(guān)鍵代碼如文件1-7所示。

文件1-7 htmlDemo07.html

<body>
     <font size-"5">傳智教育學(xué)科</font><br />
     <ul>
          <li>web 前端</li>
          <!-指定type屬性值，disc為默認(rèn)值-->
          <li type="disc">JAVA<li>
          <li type-"sqeare">PHP<li>
          <litype-"circle">.NET</li>
     </ul>
</body>

在文件l-7中，<li>標(biāo)簽的type屬性用于指定列表項目符號，type常用的屬性值有3種：dise、square和circle，它們的顯示效果分別是●、■和O。type屬性的默認(rèn)值是disc，第4行代碼使用了此默認(rèn)值，第6行代碼設(shè)置了type屬性值為“disc”。使用瀏覽器打開文件1-7，結(jié)果如圖1-10所示。

（2）有序列表

有序列表是一種強(qiáng)調(diào)排列順序的列表，使用<ol>標(biāo)簽定義，內(nèi)部可以嵌套多個<li>標(biāo)簽。例如，網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。定有序列表的基本語法格式如下：

<ol>
   <1i>列表項1</1i>
   <1i>列表項2</1i>
   <1i>列表項3</1i>
   ...
</ol>

在上語法中，<ol>標(biāo)簽用于定義有序列表，<li>為具體的列表項。與無序列表類似，每對<ol></ol>中也至少應(yīng)包含一對<li></li>。序列表的使用與無序列表類似，此處不再贅述。

（3）列表標(biāo)簽

定義列表與有序列表、無序列表的使用不同，它包含了3個標(biāo)簽，即<dl>、<d>、<dd>。定義列表的基本語法格式如下：

<dl>
<dt>名詞1</dt>
    <dd>dd是名詞1的描述信息1</dd>
    <dd>dd是名詞2的描述信息2</dd>
<dt>名詞2</dt>
    <dd>dd是名詞2的描述信息1</dd>
    <dd>dd是名詞2的描述信息2</dd>
</dl>

在上述語法中，<dl>標(biāo)簽用于指定定義列表，<dt>標(biāo)簽和<dd>標(biāo)簽并列嵌套于<dl>標(biāo)簽中。其中，<dt>標(biāo)簽用于指定術(shù)語名詞，<dd>標(biāo)簽用于對名詞進(jìn)行解釋和描述。一對<dt></dt>可以對應(yīng)<dd></dd>多對，也就是說可以對一個名詞進(jìn)行多項解釋。下面通過一個案例演示定義列表標(biāo)簽的使用。在chapter01文件夾中創(chuàng)建一個名稱為htmlDemo08的HTML文件，其關(guān)鍵代碼如文件1-8所示。

文件1-8 htmlDemo08.html。

<body>
   <dl>
   <dt>紅色</dt>
       <dd>是光譜的三原色和四原色之一</dd>
       <dd>代表著吉祥、喜慶、火熱、幸福、豪放、斗志、革命、轟轟烈烈，激情激湃等</dd>
   <dt>綠色</dt>
       <dd>是自然界中常見的顏色</dd>
       <dd>綠色有無公害、健康的意思</dd>
   </dl>
</body>

文件1-8中定義了一個定義列表，其中，第35行代碼中的標(biāo)簽內(nèi)名詞為“紅色”，其后緊跟著2對<dd></dd>標(biāo)簽，用于對<dt>標(biāo)簽中“紅色”進(jìn)行解釋和描述;第68行代碼中的標(biāo)簽內(nèi)名詞為綠色”，其后緊跟著2對<dd></dd>標(biāo)簽，用于對<dt>標(biāo)簽中“綠色”進(jìn)行解釋和描述。使用瀏覽器打開文件1-8，顯示結(jié)果如圖1-11所示。

1663148235424_定義列表.png