有序列表
經過之前關於表格、表單的學習後，再來學習列表，就顯得非常的簡單和容易理解了。
學習是構建知識體系的過程，沒有形成體系的知識學習再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎的初學者，第一次看我的教程，如果時間允許的話，請務必從目錄中找尋第一篇，循序漸進的學習。
列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。
首先介紹有序列表
要用<ol></ol>標籤告訴瀏覽器這裡是列表。
然後在裡面添加<li></li>標籤，在這個標籤中添加內容即可。
示例代碼如下
<p>我喜歡的水果</p><ol> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>大家可以把它放到一個新的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>頁面效果如下：
通過修改<ol>標籤中的type屬性我們可以改變序號顯示的樣式，默認的是數字，大家看一下不同的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>頁面效果如下：
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。
step1.點擊"輸入方式"
step2.點擊"特殊符號"後選擇數字序號，找到羅馬數字即可
除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標籤中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值；"
示例代碼如下：(使用日語中的片假名表示序號)
<ol style="list-style-type:hiragana;"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>頁面效果如圖所示：
是不是很有趣，這裡的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。
如圖：
資料來自w3school
無序列表
無序列表與有序列表的區別在於最外層的標籤，它的寫法是這樣的：<ul></ul>。
有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。
無序為unorder，無序列表為unorder list，縮寫為ul。
無序列表<ul>標籤的type屬性用來控制列表前的標記顯示演示。
示例代碼如下：
<h>無序列表</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>頁面效果如下：
通過圖片我們可知，無序列表默認的列表標識就是type="disc"。
style屬性的話大家自己試試吧，這裡就不囉嗦了。
定義列表
這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。
首先要寫入<dl></dl>標籤。這是告訴瀏覽器這裡是個定義列表，和<ol>或<ul>一樣。
定義的英文是definition，定義列表就是definition list，縮寫是dl。
下面在<dl></dl>標籤中間寫入定義的名稱<dt></dt>,即definition title（標題）。
與定義名稱標籤並列的是定義描述<dd></dd>,即definition describe（描述）。
示例代碼如下：
<dl> <dt>計算機</dt> <dd>用來計算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 ... ...</dd></dl>頁面效果如下：
今天的內容結束了！
列表嵌套列表的測試大家自己試試吧，學到現在，相信你們都可以完成了！
如果您喜歡我的教程請關注我，點讚也能讓我充滿動力！
如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！