HTML中,列表有三種類型:無序列表(符號列表)、有序列表(編號列表)、定義列表。
一、無序號條例式清單<ul>與<li>
1.格式:
<ul>
<li>…</li>
<li>…</li>
…
<li>…</li>
</ul>
<ul>無序條列清單的開始。</ul>表示結束。<li>…</li>表示一個項目
不能在<ul></ul>中輸入文字,必須要在<li></li>中輸入文字,才能顯示在網頁中。
<ul>與<li>是塊級元素,會自動換行。
2.<ul><li>的屬性
屬性名稱 屬性值 說明
type disc 實心圓(默認值)
circle 空心圓
square 實心方塊
style list-style:none; 清除列表前的項目符號
jpadding-left:0px; 設置列表前縮進(0px表示是0像素)
如:<ul type="circle" style="jpadding-left:10px;">表示設置該列表所有項的項目符號爲空心圓,左縮進爲10像素
<li style=" list-style:none; jpadding-left:0px;">清除當前列表項前的縮進和項目符號
3.列表嵌套:第一級默認實心圓,第二級默認空心圓,第三級默認實心方塊
二、有序號條例式清單<ol>與<li>
1.格式:
<ol>
<li>列表的項目</li>
<li>列表的項目</li>
<li>列表的項目</li>
<li>列表的項目</li>
<li>列表的項目</li>
<li>列表的項目</li>
</ol>
<ol>有序條列清單的開始。</ol>表示結束。<li>…</li>表示一個項目
2.<ol><li>的屬性
屬性名稱 屬性值 說明
type 1 表示以1,2,3來表示
a 表示以a,b,c來表示
A 表示以A,B,C來表示
i 表示以i,ii ,iii 來表示
I 表示以I,II,III 來表示
style list-style:none; 清除列表前的編號
jpadding-left:0px; 設置列表前縮進(0px表示是0像素)
start 數字 設置起始位置是第幾位(<li>沒有此屬性)
如:<ol type="A" start="6">表示列表的編號會從第六個大寫字母F開始編號。
其他屬性用法與<ul>類似,不再贅述
三、敘述式清單(定義列表)
1.格式:
<dl>
<dt>定義術語(項目標題)</dt>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dt>定義術語(項目標題)</dt>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dt>定義術語(項目標題)</dt>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
<dd>定義說明(標題小具體的內容)</dd>
</dl>
<dl>敘述清單的開始 <dt>表示一個項目 <dd>表示一個項目下的更詳細的內容