【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML ul

HTML語法當中,ul 與 ol 是非常熱門的標籤樣式,而你知道怎麼使用嗎?

無論 ul 或 ol 都有整合資訊和重點整理的效果,用的好對於文章或網頁會有加分作用

趕快來看看HTML ul 和 ol 介紹與教學吧!

本篇內容包含 :

  • HTML 的 ul、ol 是什麼?
  • ul、ol 怎麼用?
  • ul、ol 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML 的 ul、ol 是什麼?

ul 無自動排序

ul 的英文全寫為 unordered list,因此簡寫為 ul ,而這也是一個樣式標籤,會與 li 一起使用,也就是說 ul 裡面會有 li

把 ul 想成一個代辦事項列表,裡面包含一條一條的 li ,也就是你的代辦事項

而 ul 他的樣式在網頁上是一個黑色的實心圓點「」,也可以利用 type 屬性更改樣式,這個下面會介紹


ol 自動排序

ol 的英文全寫為 ordered list ,因此簡寫為 ol ,他用法和上面提到的 ul 一樣,差別在於他在網頁上是顯示自動排列的數字而不是實心圓點

ol 就無法改變樣式了,但也是可以透過CSS更改字體顏色、大小等等,而 ol 裡面有多少 li ,網頁上顯示的數字就有多少個,它可以到無限大


ul 範例影片 (英文版)

ol 與 ul 寫法是一樣的,所以如果想用 ol 就把影片中的 ul 替換成 ol 就好




ul、ol 怎麼用?

ul 用法

ul 的寫法為「<ul> </ul>」,要有起始標籤與結束標籤,裡面會包含 li 標籤,像是這樣「<ul> <li>代辦事項</li> </ul>

而 ul 預設是實心圓點,如果要其他樣式就增加一個 type 屬性,像是
<ul type=”square”> <li>代辦事項</li> </ul>

不帶type屬性程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <ul>
        <li>第 1 條代辦事項</li>
        <li>第 2 條代辦事項</li>
        <li>第 3 條代辦事項</li>
    </ul>
    
</body>
</html>
HTML ul
不帶 type 屬性 ul 程式碼範例

不帶type屬性輸出結果

ul 輸出結果
不帶type屬性輸出結果

帶type屬性程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <ul type="square">
        <li>第 1 條代辦事項</li>
        <li>第 2 條代辦事項</li>
        <li>第 3 條代辦事項</li>
    </ul>
    
</body>
</html>
HTML ul square type code
帶 type 屬性 ul 程式碼範例

帶type屬性輸出結果

ul square type result
帶type屬性輸出結果

ol 用法

ol 的寫法為「<ol> </ol>」,和 ul 其實是一樣的,裡面也需要放 li ,網頁上才會有清單列表,而 ol 就沒有 type 可以用了

程式碼範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>

    <ol>
        <li>第 1 條代辦事項</li>
        <li>第 2 條代辦事項</li>
        <li>第 3 條代辦事項</li>
    </ol>
    
</body>
</html>
HTML ol code
ol 程式碼範例

輸出結果

ol 輸出結果
ol 輸出結果


ul、ol 的 Q&A

Q1 : ul 的 type 屬性有哪些?

A1 :

ul 的 type 屬性總共有 3 種,disc 實心圓、circle 空心圓、square 實心方塊

但其實不建議使用,因為有些瀏覽器並不支援這種樣式,所以如果想要更改樣式還是用CSS更改會較好


Q2 : ul 與 ol 可以混在一起用嗎?

A2 :

可以,但是要注意輸出結果會不會不容易閱讀,而影響到使用者體驗

但如果使用的好也會對文章或是網頁大大加分!


Q3 : ul 與 ol 裡面的 li 最多裝可以幾個?

A3 :

無限多個,想要放幾個就放幾個,但是通常不會用到很多,因為太過冗長會很難看

但用來做分類清單其實是個不錯的選擇,即使很多個 li ,但適當的分類反而是很好的效果



總結

ul 與 ol 用起來沒有特別難,但用的好卻是個挑戰,如果是在做重點整理或資訊整合的文章

非常推薦用 ul 和 ol,簡單明瞭、清晰易懂

希望這篇有幫助到不知道怎麼使用 HTML ul 和 ol 的人,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top