【前端就业课 第一阶段】HTML5 零基础到实战（九）列表
注意：手機（APP）打開，內容顯示更佳，不會的私聊博主即可
想要拿代碼或加入學習計劃（** 博主會監督你并且教你寫文章 **）的拉到最下面（PC端Web打開）加博主即可，目錄也在最下面。
參加1_bit博主前端學習計劃發文時在頭部記得加上本專欄鏈接，示例如下：
我已加入 1_bit 博主的免費前端 站起來 學習計劃，專欄鏈接：https://blog.csdn.net/a757291228/category_11609526.html
一、列表的使用
1.1 無序列表
🐶1_bit：還記得之前出現的列表嗎？
👸小媛：就是一列一列的，有不同分享的 ul 元素？
🐶1_bit：對的，之前并沒有詳細說明這個 ul 元素，本節開始將會較為詳細的對 li 元素進行說明。
👸小媛：好勒。
🐶1_bit：之前咱們已經學過了列表的基本使用，一個列表的基本形式如下。
<ul><li>第1項</li><li>第2項</li><li>第3項</li> </ul>🐶1_bit：其中 ul 表示這個是一個無序列表，其中 li 是其中的每一個項，每一個項有一個 li 的開始標簽與結束標簽，并且由于這個列表是無序列表，所以在顯示時并沒有在每一項內容中添加對應項的序號，而是用原點代替。
👸小媛：這個明白，不過我想要問的是，這個原點可以去掉嗎？感覺不是很好看。
1.2 列項符號
🐶1_bit：當然可以，咱們可以在 ul 中添加對應的 type 屬性，type 屬性可以控制 ul 標簽中每一項的符號，你可以選擇 disc（實心圓形）、circle（空心圓形）、square（實心正方形），例如如下代碼將會給出對應的示例。
<ul type="disc"><li>disc 實心圓形第1項</li><li>disc 實心圓形第2項</li><li>disc 實心圓形第3項</li> </ul> <ul type="circle"><li>circle 空心圓形第1項</li><li>circle 空心圓形第2項</li><li>circle 空心圓形第3項</li> </ul> <ul type="square"><li>square 實心正方形第1項</li><li>square 實心正方形第2項</li><li>square 實心正方形第3項</li> </ul>🐶1_bit：對應的顯示內容如下。
👸小媛：正方形挺好看的，不過我問的是是否可以去掉，你走神了。
🐶1_bit：你想去掉直接給予 type 屬性 為 none 就可以了，例如如下示例。
<ul type="none"><li>none 無項符號第1項</li><li>none 無項符號第2項</li><li>none 無項符號第3項</li> </ul>🐶1_bit：成功了，剛剛拿這個去嘗試了問題不大。
🐶1_bit：當然你也可以為不同的 li 定義不同的項符號，例如如下代碼。
<ul type="none"><li type="circle">circle 空心圓形第1項</li><li>none 無項符號第2項</li><li type="square">square 實心正方形</li> </ul>👸小媛：哇，原來可以這樣，明白了。
1.3 有序列表
🐶1_bit：那接下來咱們學習一下有序列表吧。剛剛學習的是 ul 無須列表，咱們現在開始學習有序列表，有序列表使用 ol 標簽，例如如下示例。
<ol><li>有序列表第1項</li><li>有序列表第2項</li><li>有序列表第3項</li> </ol>🐶1_bit：此時在頁面中將會使用默認需序號在每一列前進行顯示。
👸小媛：哇，竟然還標序了。
🐶1_bit：對的，這個標序的符號咱們可以使用不同的方式進行標序，例如數字、大小寫字母。
<ol type="i"><li>type 使用i開頭 第1項</li><li>type 使用i開頭 第2項</li><li>type 使用i開頭 第3項</li><li>type 使用i開頭 第4項</li><li>type 使用i開頭 第5項</li> </ol> <ol type="I"><li>type 使用I開頭 第1項</li><li>type 使用I開頭 第2項</li><li>type 使用I開頭 第3項</li><li>type 使用I開頭 第4項</li><li>type 使用I開頭 第5項</li> </ol> <ol type="a"><li>type 使用a開頭 第1項</li><li>type 使用a開頭 第2項</li><li>type 使用a開頭 第3項</li> </ol> <ol type="A"><li>type 使用A開頭 第1項</li><li>type 使用A開頭 第2項</li><li>type 使用A開頭 第3項</li> </ol> <ol type="1"><li>type 使用1開頭 第1項</li><li>type 使用1開頭 第2項</li><li>type 使用1開頭 第3項</li> </ol>
👸小媛：哇，竟然可以這樣，明白了。
🐶1_bit：咱們還可以給予這個有序列表項的起始值，例如我想從4 開始只需要給一個值給 start 屬性即可，例如如下所示。
<ol type="i" start="4"><li>4 開始 type 使用i開頭 第1項</li><li>4 開始 type 使用i開頭 第2項</li><li>4 開始 type 使用i開頭 第3項</li><li>4 開始 type 使用i開頭 第4項</li><li>4 開始 type 使用i開頭 第5項</li> </ol> <ol type="I" start="7"><li>7 開始 type 使用I開頭 第1項</li><li>7 開始 type 使用I開頭 第2項</li><li>7 開始 type 使用I開頭 第3項</li><li>7 開始 type 使用I開頭 第4項</li><li>7 開始 type 使用I開頭 第5項</li> </ol> <ol type="a" start="3"><li>3 開始 type 使用a開頭 第1項</li><li>3 開始 type 使用a開頭 第2項</li><li>3 開始 type 使用a開頭 第3項</li> </ol>
👸小媛：哇，我第一次知道這些需要是長這樣的，明白了。
二、定義列表
🐶1_bit：接下來咱們學一個定義列表，這個標簽用于對某些名詞進行定義，也就是對某些名稱解說說明。
👸小媛：明白了。
🐶1_bit：咱們可以看看這個定義列表的使用方法。
<dl><dt>這是一個名詞1</dt><dd>這是這個名詞1的解釋</dd><dt>這是一個名詞2</dt><dd>這是這個名詞2的解釋</dd> </dl>🐶1_bit：在瀏覽器中演示如下。
👸小媛：唔，這個很簡單，直接使用就好了，例如這樣。
對的，你也可以使用多個 dt，或者多個 dd 都可以，例如這樣。
<dl><dt>個人計算機</dt><dt>計算機</dt><dd>個人計算機是指一種大小、價格和性能適用于個人使用的多用途計算機。臺式機、筆記本電腦到小型筆記本電腦和平板電腦以及超級本等都屬于個人計算機。</dd><dd>就是計算機</dd><dt>二進制</dt><dt>2進制</dt><dd>二進制（binary），發現者萊布尼茨，是在數學和數字電路中以2為基數的記數系統，是以2為基數代表系統的二進位制</dd> </dl>🐶1_bit：顯示如下。
👸小媛：明白了。
三、菜單列表
🐶1_bit：在 html 中，菜單也是屬于列表，并且這些列表都可以使用 css 轉換為菜單的樣子，當然 css 后面才會學到，在此并不需要了解，此處只是做個菜單列表介紹。
👸小媛：那菜單列表用什么標簽呢？
🐶1_bit：當然是 menu 標簽了，例如如下示例。
<menu><li>菜單1</li><li>菜單2</li><li>菜單3</li> </menu>
👸小媛：明白了。
四、列表嵌套使用
🐶1_bit：在 html 中，大多數標簽是可以互相嵌套使用的，例如你想在列表中嵌入列表或者其他元素改變其顯示，這都是可以的。
👸小媛：哇，列表也可以嵌入？
🐶1_bit：是這樣的，咱們現在把之前的所學的內容都雜亂嵌入一下，你可以看看效果。
<menu><li>菜單1</li><li>菜單2</li><li>菜單3</li></menu><dl><dt>個人計算機</dt><dt><span style="color: blue;">計算機</span></dt><dd>個人計算機是指一種大小、價格和性能適用于個人使用的多用途計算機。臺式機、筆記本電腦到小型筆記本電腦和平板電腦以及超級本等都屬于個人計算機。</dd><dd>就是計算機<ol type="i" start="4"><li>4 開始 type 使用i開頭 第1項</li><li>4 開始 type 使用i開頭 第2項</li><li>4 開始 type 使用i開頭 第3項</li><li>4 開始 type 使用i開頭 第4項</li><li>4 開始 type 使用i開頭 第5項</li></ol></dd><dt>二進制</dt><dt>2進制</dt><dd>二進制（binary），發現者萊布尼茨，是在數學和數字電路中以2為基數的記數系統，是以2為基數代表系統的二進位制</dd></dl><ol type="I" start="7"><li>7 開始 type 使用I開頭 第1項</li><li>7 開始 type 使用I開頭 第2項</li><ol type="a" start="3"><li>3 開始 type 使用a開頭 第1項</li><li>3 開始 type 使用a開頭 第2項</li><li>3 開始 type 使用a開頭 第3項</li></ol><li>7 開始 type 使用I開頭 第3項</li><li>7 開始 type 使用I開頭 第4項</li><li>7 開始 type 使用I開頭 第5項</li></ol><ol type="A"><li>type 使用A開頭 第1項</li><li>type 使用A開頭 第2項<ol type="1"><li>type 使用1開頭 第1項</li><li>type 使用1開頭 第2項</li><li>type 使用1開頭 第3項<ul type="none"><li type="circle">circle 空心圓形第1項</li><li>none 無項符號第2項</li><li type="square">square 實心正方形<ul type="circle"><li>circle 空心圓形第1項</li><li>circle 空心圓形第2項</li><li>circle 空心圓形第3項</li></ul></li></ul></li></ol></li><li>type 使用A開頭 第3項</li></ol><ul type="square"><li>square 實心正方形第1項</li><li>square 實心正方形第2項</li><li>square 實心正方形第3項</li></ul>👸小媛：哇，可以這樣。
目錄
【前端就業課 第一階段】HTML5 零基礎到實戰（十）JavaScript基礎一篇入門
【前端就業課 第一階段】HTML5 零基礎到實戰（九）列表
【前端就業課 第一階段】HTML5 零基礎到實戰（八）表單詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（七）文字及圖片樣式
【前端就業課 第一階段】HTML5 零基礎到實戰（六）表格詳解
【前端就業課 第一階段】HTML5 零基礎到實戰（五）基礎元素
【前端就業課 第一階段】HTML5 零基礎到實戰（四）偽類與偽元素
【前端就業課 第一階段】HTML5 零基礎到實戰（三）一篇文CSS基礎入門
【前端就業課 第一階段】HTML5 零基礎到實戰（二）超鏈接
【前端就業課 第一階段】HTML5 零基礎到實戰（一）基礎代碼結構詳解
總結
以上是生活随笔為你收集整理的【前端就业课 第一阶段】HTML5 零基础到实战（九）列表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【前端就业课 第一阶段】HTML5 零基
- 下一篇： 【前端就业课 第一阶段】HTML5 零基