有序列表
經(jīng)過(guò)之前關(guān)于表格玻蝌、表單的學(xué)習(xí)后蟹肘，再來(lái)學(xué)習(xí)列表，就顯得非常的簡(jiǎn)單和容易理解了俯树。
學(xué)習(xí)是構(gòu)建知識(shí)體系的過(guò)程帘腹，沒有形成體系的知識(shí)學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的许饿，因此阳欲，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話球化，請(qǐng)務(wù)必從目錄中找尋第一篇秽晚，循序漸進(jìn)的學(xué)習(xí)。
列表分為有序列表筒愚、無(wú)序列表和定義列表赴蝇，同時(shí)列表之中還能嵌套列表，和表格非常相似巢掺。
首先介紹有序列表
要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表句伶。
然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可址遇。
示例代碼如下
<p>我喜歡的水果</p><ol> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>
大家可以把它放到一個(gè)新的html框架中看看效果熄阻。
完整代碼如下：
<!DOCTYPE HTML> <html> <head> <title>列表</title> </head> <body> <h>有序列表</h> <p>我喜歡的水果</p> <ol> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li> </ol> </body> </html>
頁(yè)面效果如下：
通過(guò)修改<ol>標(biāo)簽中的type屬性我們可以改變序號(hào)顯示的樣式，默認(rèn)的是數(shù)字倔约，大家看一下不同的type值的不同效果吧秃殉！示例代碼如下：
<ol type="A"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol><ol type="a"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li> 、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>
頁(yè)面效果如下：
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字浸剩。
step1.點(diǎn)擊"輸入方式"
step2.點(diǎn)擊"特殊符號(hào)"后選擇數(shù)字序號(hào)钾军，找到羅馬數(shù)字即可
除此之外我們還可以使用CSS的方法為有序列表的序號(hào)提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性绢要。寫法是style="list-style-type:屬性值吏恭；"
示例代碼如下：(使用日語(yǔ)中的片假名表示序號(hào))
<ol style="list-style-type:hiragana;"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>
頁(yè)面效果如圖所示：
是不是很有趣，這里的測(cè)試就不一一做了重罪。為大家奉上list-style-type的值的列表與說(shuō)明樱哼，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無(wú)序列表的值剿配。
如圖：
資料來(lái)自w3school
無(wú)序列表
無(wú)序列表與有序列表的區(qū)別在于最外層的標(biāo)簽搅幅，它的寫法是這樣的：<ul></ul>。
有一個(gè)記憶的小技巧呼胚，有序的英文是order茄唐，故有序列表為order list（列表），縮寫為ol蝇更。
無(wú)序?yàn)閡norder沪编，無(wú)序列表為unorder list，縮寫為ul年扩。
無(wú)序列表<ul>標(biāo)簽的type屬性用來(lái)控制列表前的標(biāo)記顯示演示蚁廓。
示例代碼如下：
<h>無(wú)序列表</h><p>我喜歡的水果</p><ul> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ul><ul type="disc"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ul><ul type="circle"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ul><ul type="square"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ul>
頁(yè)面效果如下：
通過(guò)圖片我們可知，無(wú)序列表默認(rèn)的列表標(biāo)識(shí)就是type="disc"厨幻。
style屬性的話大家自己試試吧纳令，這里就不啰嗦了挽荠。
定義列表
這個(gè)列表比較特殊，也比較不常見平绩，主要就是顯示名詞定義的圈匆。
首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表捏雌，和<ol>或<ul>一樣跃赚。
定義的英文是definition，定義列表就是definition list性湿，縮寫是dl纬傲。
下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。
與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）肤频。
示例代碼如下：
<dl> <dt>計(jì)算機(jī)</dt> <dd>用來(lái)計(jì)算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 ... ...</dd></dl>
頁(yè)面效果如下：
今天的內(nèi)容結(jié)束了叹括！
列表嵌套列表的測(cè)試大家自己試試吧，學(xué)到現(xiàn)在宵荒，相信你們都可以完成了汁雷！
如果您喜歡我的教程請(qǐng)關(guān)注我，點(diǎn)贊也能讓我充滿動(dòng)力报咳！
如果您有任何疑問(wèn)請(qǐng)給我留言侠讯，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！
