圖文詳解HTML中有序列表、無序列表和自訂列表的區別

在頁面佈局時，經常會用到列表，列表分為有序列表、無序列表和自訂列表，那你知道有序列表、無序列表和自訂列表之間的區別嗎？這篇文章就跟大家介紹有序列表、無序列表和自訂列表分別用什麼標籤，以及三者之間的區別，有一定的參考價值，有興趣的朋友可以看看。

一、無序列表

標籤用來定義無序列表，將
標籤與
• 標籤一起使用，就可以建立無序列表。

  範例：用無序列表列舉四大名著，程式碼如下：
  

  <ul>
     <li>红楼梦</li>
     <li>水浒传</li>
     <li>三国演义</li>
     <li>西游记</li>
  </ul>

  效果圖：

  

  ##無序列表屬性type，預設的樣式是小黑圓，就是disc，type屬性有disc（實心圓預設）、circle（空心圓）、square（實心正方形）、none（取消前綴）。

   二、有序列表

  標籤可以定義有序列表，將
  標籤與
  1. 標籤一起使用，就可以建立有序列表，列表排序以數字顯示。
     示範程式碼如下：

     <ol>
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
        <li>西游记</li>
     </ol>

     效果圖：

     

     #有序列表有兩個屬性，分別是type和start。 type有五個屬性值：1、a、A、i、I(羅馬數字)，用來表示列表前綴的樣式。 start表示從type類型的第幾個數字開始，例如當type=“a”，start=“4”，指選擇的是小寫字母類型，從第四個字母d開始列舉。

     三、自訂列表

     標籤可以定義描述列表，

     標籤與

     和

     一起使用，建立自訂清單（描述清單）。

     示範程式碼如下：

     <dl>
          <dt>中国四大名著</dt>
            <dd>红楼梦</dd>
           <dd>西游记</dd>
            <dd>水浒传</dd>
            <dd>三国演义</dd>
     </dl>

     效果圖：

     

     #自訂清單（描述清單）中，在dt和dd中有了一個縮排。

     有序列表、無序列表和自訂列表的區別：

     有序列表和無序列表都有前綴，但是有序列表是大寫字母、小寫字母、數字和羅馬數字等，而無序列表的前綴是實心圓、空心圓、實心正方形。自訂列表與有序列表，無序列表的差異是它有縮排而沒有前綴。

     【相關教學推薦】

     1. 

     CSS3影片教學2. 
     CSS線上手冊3. 
     # bootstrap教程

以上是圖文詳解HTML中有序列表、無序列表和自訂列表的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！