Shiny

一分鐘學前端(7):項目清單

October 15, 2019 #HTML#一分鐘學前端

項目清單是非常實用的網頁元素,分別有

  • <ul>: 無序清單 (unordered list)

    會顯示一個小黑點在項目的前面,通常用在沒有順序性的清單上

  • <ol>: 有序清單 (ordered list)

    會顯示阿拉伯數字 (1, 2, 3, …),在項目的前面,通常用在有順序性的清單上

  • <dl>: 定義描述清單 (description list)

    沒有額外顯示的內容,但是會把描述的名詞與說明分別顯示出來

其中 <ol><ul> 會用到 <li> (list item) 來當作清單的項目,而 <dl> 則是會用到 <dt> (description term) 和 <dd> (description details),具體用法如下

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cookies</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
<dl>
  <dt>Term</dt>
  <dd>Details</dd>
  <dt>Term 2</dt>
  <dd>Details 2</dd>
</dl>

下載 HTML 後打開就會看到下圖:

CleanShot 2019 10 15 at 15 58 56 2x

最後附上完整的程式碼:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>我是標題</title>
    <link rel="shortcut icon" href="icon-48x48.png" />
  </head>
  <body>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Cookies</li>
    </ul>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ol>
    <dl>
      <dt>Term</dt>
      <dd>Details</dd>
      <dt>Term 2</dt>
      <dd>Details 2</dd>
    </dl>
  </body>
</html>

Shiny

Experienced JavaScript / Node.js engineer & team lead.
Twitter Facebook Medium LinkedIn GitHub Email