搜尋

無序清單 <ul><li>

<ul><li> 是 HTML 裡的無序清單元素,使用後會產生清單列表,並使用預設樣式 ( 或指定樣式 ) 產生清單符號,這篇文章會介紹 <ul><li> 無序清單元素的用法。

HTML 教學 - 無序清單 <ul>、<li>

認識 <ul><li>

HTML 的無序清單是由 <ul><li> 標籤所構成的元素,<ul> 是定義在最外層,表示該清單是無序清單 ( 不會由 123 或 abc 做為編號 ),<li> 則是清單裡的各個項目。

  • <ul> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,內容盡可能只放 <li> 元素。
  • <li> 屬於「容器元素」,需要有「起始標籤」以及「結束標籤」,也因為是容器元素,裡頭可以放入其他的子元素。
  • <li> 的父元素盡可能是 <ul><ol>
  • <ul><li> 顯示類型都是「block 塊級元素」,預設會強制換行。

下方的 HTML 開啟後,網頁中會出現一個無序清單,清單中包含三個項目。

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cat</li>
</ul>

HTML 教學 - 無序清單 <ul>、<li>

如果在 <li> 裡再放入 <ul><li>,就會形成第二層或第三層清單的巢狀清單,當第二層以上的清單出現後,項目也會自動根據所在的層級不同,而出現不同的圖示,以下方的 HTML 為例,三層清單的項目圖示就會有所不同。

<ul>
  <li >apple
    <ul>
      <li>iphone
        <ul>
          <li>14 Pro</li>
          <li>14 Plus</li>
          <li>14</li>
        </ul>
      </li>
      <li>ipad</li>
      <li>apple watch</li>
    </ul>
  </li>
  <li>banana</li>
  <li>cat</li>
</ul>

HTML 教學 - 無序清單 <ul>、<li>

<ul><li> 支援屬性

<ul><li> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」),例如下方的 HTML,會分別將三個 <li> 加入不同的 style 屬性,讓三個項目的文字呈現不同顏色。

<ul>
  <li style="color:#f00;">apple</li>
  <li style="color:#f90;">banana</li>
  <li style="color:#00f;">cat</li>
</ul>

HTML 教學 - 無序清單 <ul>、<li>

改變清單項目圖示

透過 CSS 的 list-style-type 屬性可以設定項目圖示,如果該屬性設定於 <ul>,則 <ul> 同一層的所有 <li> 項目圖示都會改變,如果該屬性設定於 <li>,則只有該項目會改變,常用的屬性值如下表所示:

CSS 屬性值 說明
disc 實心圓點
circle 空心圓點
square 實心正方形
decimal 十進位數字
lower-roman 小寫羅馬數字
upper-roman 大寫羅馬數字
lower-greek 小寫希臘字母
trad-chinese-informal 中文一二三
'-' 使用自訂符號「-」( 單引號內為自訂符號 )
none 不顯示符號

以下方的 HTML 為例,透過屬性設定,進一步改變了各個項目的圖示。

<ul style="list-style-type:square;">
  <li style="list-style-type:'>>> ';">apple
    <ul style="list-style-type:circle;">
      <li>iphone
        <ul style="list-style-type:decimal;">
          <li>14 Pro</li>
          <li>14 Plus</li>
          <li>14</li>
        </ul>
      </li>
      <li>ipad</li>
      <li>apple watch</li>
    </ul>
  </li>
  <li>banana</li>
  <li>cat</li>
</ul>

HTML 教學 - 無序清單 <ul>、<li>

<ul><li> 預設樣式

下方是 <ul><li> 的預設樣式:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

彈出視窗

alert() 警告視窗 confirm() 確認視窗 prompt() 輸入視窗

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片 嵌入 Canva 簡報 嵌入 Scratch 創作