HTML之列表標簽（筆記三）

2024-04-27 15:15:16

字體：大中小

來源：轉載

供稿：網友

1. HTML中的列表標簽 1.1 無序列表Unordered List(使用最多) 注意點使用場景1.2 有序列表Ordered List(使用最少)1.3 定義列表Definition List(其次) 使用場景注意點練習

HTML中的列表標簽

回到目錄

列表標簽主要是給一些數據添加列表語義，就是告訴瀏覽器哪些數據是一個整體。

無序列表

回到目錄

給一堆數據添加列表語義，并且這一堆數據中所有的數據沒有先后順序。<ul> Unordered List 縮寫 <li>需要顯示的條目內容</li> List Item 縮寫 <li>需要顯示的條目內容</li> <li>需要顯示的條目內容</li></ul>

案例01 :

效果如下 :

太原大同呂梁朔州運城

注意點 :

回到目錄

無序列表標簽只為一堆數據添加列表語義，并不改變樣式 ul標簽和li標簽是一個整體，所以它們都是一起出現的，不會單個出現，是結合在一起使用的正是因為ul標簽和li標簽是一個組合，所以ul標簽中不建議包含其他的標簽，也就是說ul標簽中一般只會見到li標簽雖然ul標簽內盡量只包含li標簽，但是對與復雜的界面來說，還可以在li標簽內部再包含其他標簽，如再包含個ul標簽都是可以的

使用場景

回到目錄

新聞列表條目展示商品列表導航條

案例02 ：

<h4>全國的省份</h4> <ul> <li> <h5>山西省</h5> <ul> <li>大同市</li> <li>太原市</li> </ul> </li> <li> <h5>山東省</h5> <ul> <li>濟南市</li> <li>青島市</li> </ul> </li> </ul>

效果如下 :

全國的省份

山西省

大同市太原市

山東省

濟南市青島市

在WebStrom中快速創建ul標簽

快捷方式 : ul>li*N N代表生成幾個li標簽然后按tab鍵 ul>li*N>h1+ul>li*N 這個也是同理

有序列表

回到目錄

有序列表標簽是給一堆數據添加列表語義的，并且這一堆數據中的所有數據時有先后順序的,而且注意事項和用法跟無序列表大致相同<ol type="A"> <h3>成績單</h3> <li>小紅98分</li> <li>小明60分</li> <li>小剛59分</li></ol>

效果如下 :

成績單

小紅98分小明60分小剛59分

定義列表

回到目錄

定義列表標簽是給一堆數據添加列表語義的，通過dt標簽給所有的列表條目添加標題，dd標簽來添加描述。其中dt（Definition Title）標簽用來定義列表條目的標題；dd（Definition Description）標簽用于定義列表條目的描述。<dl> <dt>潮服</dt> <dd>韓國服裝</dd> <dd>巴黎時尚</dd> <dt>家居</dt> <dd>瑞士家居</dd> <dd>哥特式家居</dd></dl>

效果如下 :

潮服韓國服裝巴黎時尚家居瑞士家居哥特式家居

使用場景

回到目錄

01. 用來制作網頁底部的相關信息02. 用來做圖文混排

注意點 :

回到目錄

01. dl標簽與dt標簽和dd標簽是組合標簽，所以不能單獨出現，都是一起出現的。02. dt標簽和dd標簽建議是一對一的成對出現，雖然也可以1個dt對應多個dd或一個dt沒有對應的dd標簽。03. 一般在一個dl標簽內只會出現dt和dl標簽，若頁面復雜，可以在dt和dd標簽內部再添加其他標簽。

定義列表標簽練習

回到目錄

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>UnorderedList</title> <style type="text/CSS"> *{ margin:0; padding:0; border: 0;} </style></head><body> <dl> <dt><h4>購物指南</h4></dt> <dd> <p><a href="javascript:">購物流程</a></p> <p><a href="Javascript:">全員介紹</a></p> <p><a href="javascript:">生活旅行/團購</a></p> <p><a href="javascript:">常見問題</a></p> <p><a href="javascript:">大家電</a></p> <p><a href="javascript:">聯系客服</a></p> </dd> </dl></body></html>

效果如下 :