iT邦幫忙

2025 iThome 鐵人賽

DAY 5
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 5

Day - 05 HTML項目列表清單

  • 分享至 

  • xImage
  •  

html項目列表
有序列表,無序列表,定義列表說明

有序列表:

<ol><li>表示一組有順序列表標籤又稱 (Ordered List)且兩個都是雙標記
<ol> 標籤本身也支援 type 屬性,可以改變編號樣式,例如 type="A" 會變成大寫字母、type="i" 則是小寫羅馬數字。HTML5 還新增了 reversed 布林屬性,可以讓編號倒著數

程式

<ol>
 <li>冰淇淋</li>
 <li>蛋糕</li>
 <li>水果</li>
</ol> 

成果

https://ithelp.ithome.com.tw/upload/images/20250916/20178756wJ27An4Nd7.png
如果不想要從1開始的話那可以在li加上value屬性~

程式

<ol>
 <li value=5>冰淇淋</li>
 <li>蛋糕</li>
 <li>水果</li>
</ol> 

成果

https://ithelp.ithome.com.tw/upload/images/20250916/20178756wgN8m9g5iL.png

無序列表 (Unordered List)

<ul><li>用項目符號來表示,通常用於不強調順序的條列內容

雖然現在多半建議使用 CSS 的 list-style-type 屬性來客製化項目符號,但在 HTML 中,<ul> 標籤也支援 type 屬性,可以設定為 disc (實心圓點)、circle (空心圓)、square (實心方塊)

程式

<ul>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ul>  

成果

https://ithelp.ithome.com.tw/upload/images/20250916/201787567kT8tXfap4.png

定義列表 (Definition List)

還有一種較少見但非常實用的列表,專門用來呈現「名詞」與其「解釋」的對應關係,就像字典一樣。

它由三個標籤組成:
<dl> (Definition Lists): 為列表容器且被定義列表開始和結束。
<dt> (Definition Term): 要定義的項目主題。
<dd> (Definition Description): 對該主題的「描述」。

程式

<dl>
<dt>HTML</dt>
  <dd>用來建立網頁結構的標記語言。</dd>
<dt>CSS</dt>
  <dd>用來設計網頁樣式,如顏色、字體和排版。</dd>
</dl>

成果

HTML
  用來建立網頁結構的標記語言。
CSS
  用來設計網頁樣式,如顏色、字體和排版


上一篇
Day - 04語意為王:打造搜尋引擎秒懂的 HTML5 結構
下一篇
DAY06 - HTML表格
系列文
從骨架到靈魂:網頁構成三部曲8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言