第3次 列表
知識點
會使用有序列表實現(xiàn)數(shù)據(jù)展示
會使用無序列表實現(xiàn)數(shù)據(jù)展示【重點】
會使用定義列表實現(xiàn)數(shù)據(jù)展示【重點】
一齐苛、 列表
(一) 列表簡介
什么是列表疲牵？簡單來說击吱，列表就是數(shù)據(jù)的一種展示形式疏尿。如下圖所示瘟芝，數(shù)據(jù)信息就是采用列表完成的。
[圖片上傳失敗...(image-dff8a8-1551315831648)]
通過上圖褥琐，大家已經(jīng)大致了解了什么是列表锌俱，列表可以做什么，那么接下來再來看看在HTML中敌呈，列表是如何進行分類的贸宏。
(二) 列表分類
1. 無序列表
無序列表是一個項目列表，各個列表項之間沒有順序級別之分磕洪，它通常使用一個項目符號作為每個列表項的前綴吭练。
2. 有序列表
同樣，有序列表也由一個個列表項組成褐鸥，列表項目既可使用數(shù)字標記线脚，也可以使用字母進行標記。
3. 定義列表
定義列表是當無序列表和有序列表都不適合時，通過自定義列表來完成數(shù)據(jù)展示浑侥，所以定義列表不僅僅是一個項列表姊舵，而是項目及其注釋的組合。
定義列表在使用時寓落，在每一列項目前不會添加任何標記括丁。
[圖片上傳失敗...(image-b3950f-1551315831648)]
二、 列表的應用
通過前面的列表介紹伶选，大家已經(jīng)了解了HTML中列表的作用及使用列表的效果史飞。那么，該如何使用列表呢仰税？這就是下面將要講解的內(nèi)容—列表的使用方法
(一) 無序列表
1. 描述
(1) . 無序列表使用<ul>和<li>標簽組成构资，
(2) . <ul>作為無序列表的聲明，<li>作為每個列表項的起始陨簇。
2. 案例演示
效果
[圖片上傳失敗...(image-bdd562-1551315831648)]
核心代碼
<ul>
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ul>
3. 無序列表的類型
無序列表前面的符號吐绵，可以通過<ul>的type屬性來指定
type的取值
|
取值
|
說明
|
|
disc
|
項目符號顯示為實體圓心,****默認值
|
|
square
|
項目符號顯示為實體方心
|
|
circle
|
項目符號顯示為空心圓
|
案例演示
[圖片上傳失敗...(image-724a66-1551315831648)]
核心代碼
<h4>type=circle 時的無序列表：</h4>
<ul type="circle">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ul>
<h4>type=disc 時的無序列表：</h4>
<ul type="disc">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ul>
<h4>type=square 時的無序列表：</h4>
<ul type="square">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ul>
(二) 有序列表
1. 描述
(1) . 無序列表與有序列表的區(qū)別就在于，有序列表的各個列表項有先后順序河绽，所以會使用數(shù)字進行標識己单。
(2) . 有序列表使用<ol>和<li>標簽組成，使用<ol>標簽作為有序列表的聲明耙饰，同樣使用<li>標簽作為每個列表項的起始纹笼。
2. 案例演示
效果
[圖片上傳失敗...(image-a9ef08-1551315831647)]
3. 有序列表的類型
與無序列表一樣，也可以使用type改變有序列表的項目符號
type取值
|
取值
|
說明
|
|
1
|
使用數(shù)字作為項目符號
|
|
A/a
|
使用大寫/****小寫字母作為項目符號
|
|
I/i
|
使用大寫/****小寫羅馬數(shù)字作為項目符號
|
案例演示
[圖片上傳失敗...(image-438c4f-1551315831647)]
核心代碼
<table border="0">
<tr>
<td width="200" align="center">
<h4>type=1 時的有序列表</h4>
<ol type="1">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ol>
<h4>type=a 時的有序列表</h4>
<ol type="a">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ol>
</td>
<td width="200" align="center">
<h4>type=I 時的有序列表</h4>
<ol type="I">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ol>
<h4>type=i 時的有序列表</h4>
<ol type="i">
<li>桔子</li>
<li>香蕉</li>
<li>蘋果</li>
</ol>
</td>
</tr>
</table>
(三) 定義列表
1. 描述
(1) . 定義列表是一種很特殊的列表形式苟跪，它是標題及注釋的結合廷痘。
(2) . 它使用<dl>標簽作為列表的開始，使用<dt>標簽作為每個列表項的起始件已，而對于每個列表項的定義則使用<dd>標簽來完成牍疏。
2. 案例演示
實現(xiàn)效果
[圖片上傳失敗...(image-1f0e63-1551315831647)]
核心代碼
<dl>
<dt>所屬學院</dt>
<dd>計算機應用</dd>
<dt>所屬專業(yè)</dt>
<dd>計算機軟件工程</dd>
</dl>
三、 總結
到這里拨齐，我們已經(jīng)學習了在HTML中3種列表的使用方式，歸納起來如下表所示：
|
類型
|
說明
|
項目符號
|
|
無序列表
|
以<ul>標簽來實現(xiàn)
以<li>標簽表示列表項
|
通過type屬性設置項目符號
disc（默認）昨寞、square和circle
|
|
有序列表
|
以<ol>標簽來實現(xiàn)
以<li>標簽表示列表項
|
通過type屬性設置項目順序
1(數(shù)字瞻惋，默認)、A（大寫字母）援岩、a（小寫字母）歼狼、I（大寫羅馬數(shù)字）和i（小寫羅馬數(shù)字）
|
|
定義類表
|
以<dl>標簽是實現(xiàn)
以<dt>標簽定義列表項
以<dd>標簽定義內(nèi)容
|
無項目符號和顯示順序
|
最后總結一下列表常用的一些技巧，包括列表常用場合及列表使用中的注意事項享怀。
無序列表中的每項都是平級的羽峰，沒有級別之分，并且列表中的內(nèi)容一般都是相對簡單的標題性的網(wǎng)頁內(nèi)容。而有序列表則會依據(jù)列表項的順序進行顯示梅屉。
在實際的網(wǎng)頁應用中值纱，無序列表比有序列表應用更加廣泛。
定義列表dl-dt-dd,一般適用于帶有標題幾標題解釋性內(nèi)容或圖片和文本內(nèi)容混合排列的場合坯汤。
四虐唠、 課堂作業(yè)
(一) 制作樹形菜單
1. 需求說明
模擬我的電腦中的磁盤文件管理，顯示磁盤與文件夾之間的關系
2. 效果
[圖片上傳失敗...(image-ff35fe-1551315831646)]
(二) 制作模擬考試試卷
1. 需求說明
模擬考試試卷的選擇題的題型格式惰聂，使用有序列表完成模擬試卷
2. 效果
[圖片上傳失敗...(image-4ba716-1551315831646)]
(三) 制作易趣商品列表
1. 需求說明
使用定義列表制作易趣商品列表頁面
2. 效果
[圖片上傳失敗...(image-847f72-1551315831646)]
五疆偿、 課后作業(yè)
(一) 需求
制作百度知道頁面中的“品牌全知道”板塊，頁面效果如下圖所示：
[圖片上傳失敗...(image-76536-1551315831646)]
