前面
網(wǎng)頁中漂亮的導航御雕、整齊規(guī)范的文章標題列表和圖片列表等等。這些都是離不開HTML里一個重要的元素----列表削樊，在HTML中有無序列表豁生、有序列表和定義列表三種類型。其中漫贞，無序列表應用最為廣泛甸箱，下面，我們一塊認識一下HTML列表绕辖。
列表在文檔編輯中也是十分常見的摇肌，我們可以結(jié)合word里的列表來對比學習HTML的列表元素。在word中有符號列表仪际、編號列表围小、多級列表。在HTML中也提供了三種類型的列表树碱，分別是無序列表肯适、有序列表和定義列表。無序列表沒有先后順序之分成榜，類似word中的符號列表框舔，有序列表用數(shù)字或字母作為順序，類似word中的編號列表赎婚，注意：定義列表是不同于word中的多級列表刘绣。簡單說來，定義列表項可分為上下兩部分挣输，上面列出一個項目纬凤，下面是該項目的詳細內(nèi)容。
來個圖看下列表是個啥樣子撩嚼！
列表標簽及樣式
無序列表
無序列表以<ul>標簽開始停士，</ul>標簽結(jié)束挖帘，中間插入若干列表項，列表項以<li>標簽開始恋技，</li>標簽結(jié)束拇舀。語法格式如下：
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li> ……
</ul>
有序列表
有序列表以<ol>標簽開始，</ol>標簽結(jié)束蜻底，中間插入若干列表項骄崩，列表項以<li>標簽開始，</li>標簽結(jié)束朱躺。語法格式如下：
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li> ……
</ol>
定義列表
定義列表以<dl>標簽開始刁赖，</dl>標簽結(jié)束，中間插入的每個列表項都分為兩個部分长搀，<dt> </dt>里面添加項目名稱，<dd> </dd>里面添加項目內(nèi)容或描述鸡典。定義列表語法格式如下：
<dl>
<dt>項目名稱</dt>
<dd>項目內(nèi)容</dd> ……
</dl>
無序列表和有序列表的列表項前面都有標記源请，無序列表的項目前是符號（實心圓、空心圓或?qū)嵭恼叫危┏箍觯行蛄斜淼捻椖壳笆蔷幪枺梢允菙?shù)字谁尸、字母或羅馬數(shù)字）。我們有兩種方式來設(shè)置列表項前的符號類型纽甘，一種是直接在HTML的列表標簽中設(shè)置type屬性良蛮，另一種是用CSS的方式，設(shè)置CSS屬性list-style-type悍赢。有了CSS决瞳，在HTML中設(shè)置type屬性已經(jīng)被拋棄了，推薦使用CSS屬性list-style-type來設(shè)置列表項的標記類型左权。
示例代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
p{
font-family:微軟雅黑;
font-size:14pt;
color:red;
background-color:gray;
}
ol{ /*設(shè)置有序列表的編號為小寫羅馬數(shù)字*/
list-style-type:lower-roman;
}
</style>
</head>
<body>
<p>WEB開發(fā)教程（無序列表）</p>
<!--利用type屬性設(shè)置無序列表項目符號為實心正方形-->
<ul type="square"><!--這種方式已拋棄皮胡，建議使用CSS屬性list-style-type-->
<li>HTML&CSS</li>
<li>JavaScript</li>
<li>ASP.NET</li>
</ul>
<p>B/S三層結(jié)構(gòu)（有序列表）</p>
<ol><!--已在CSS中用list-style-type屬性設(shè)置列表項編號為小寫羅馬數(shù)字-->
<li>界面展示層</li>
<li>業(yè)務(wù)邏輯層</li>
<li>數(shù)據(jù)操縱層</li>
</ol>
<p>B/S與C/S（定義列表）</p>
<dl>
<dt>B/S模式</dt>
<dd>瀏覽器/服務(wù)器模式，只要安裝一個瀏覽器赏迟。</dd>
<dt>C/S模式</dt>
<dd>客戶端/服務(wù)器模式屡贺，需要安裝客戶端軟件。</dd>
</dl>
</body>
</html>
效果如下圖所示：
注：這三類列表中锌杀，無序列表使用最為廣泛甩栈，常用于導航、文章標題列表糕再、圖片列表等有規(guī)律列表類內(nèi)容的排版布局量没。在CSS屬性list-style-type中，還可以設(shè)置值為none亿鲜，表示去除列表項前的符號允蜈。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
ul{
list-style-type:none; /*取消項目符號*/
}
</style>
</head>
<body>
<p>電子產(chǎn)品</p>
<ul>
<li>顯示器</li>
<li>打印機</li>
<li>投影儀</li>
<li>掃描儀</li>
</ul>
</body>
</html>
自己整理了一份最全前端學習資料,從最基礎(chǔ)的HTML+CSS+JS [炫酷特效冤吨，游戲，插件封裝饶套，設(shè)計模式]到移動端HTML5的項目實戰(zhàn)的學習資料都有漩蟆，送給每一位前端小伙伴。企鵝裙：685910553（前端資料分享）妓蛮。有想學習web前端的怠李，或是轉(zhuǎn)行，或是大學生蛤克，還有工作中想提升自己能力的捺癞，正在學習的小伙伴歡迎加入學習。
