iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
2

在預設值中,瀏覽器會縮排清單,若要指定使用的編號類型,可用type屬性,但建議使用CSS list-style-type屬性。

HTML提供了三種不同的清單類型如下:

編號清單

編號清單的元素為<ol>,而清單中須加上<li>元素作為每一個項目的開始與結束
例如:

<ol>
  <li>性別</li>
  <li>年齡</li>
  <li>出生地</li>
  <li>連絡電話</li>
</ol>

以下會顯示出:
https://ithelp.ithome.com.tw/upload/images/20200918/20130509QNVa5fKxh4.jpg


項目清單

項目清單的元素為<ul>,清單內容一樣要先加上<li>屬性作為開始與結束。
例如:

<ul>
  <li>性別</li>
  <li>年齡</li>
  <li>出生地</li>
  <li>連絡電話</li>
</ul>

以下會顯示出:
https://ithelp.ithome.com.tw/upload/images/20200918/20130509deZG8heVfV.jpg


定義清單

項目清單的元素為<dl>,通常會由名詞和定義所組成,裡面會有<dt><dd>元素,
<dt>元素是用來定義名詞,<dd>這個元素是用來容納名詞的定義。
例如:

<dl> 
   <dt>驕兵之計</dt>
   <dd>故意向敵軍示弱,以助長其驕傲情緒,使其輕敵大意的計策。</dd>
   <dt>按兵不動</dt>
   <dd>按:止住。使軍隊暫不行動。現也比喻暫不開展工作。</dd>
   <dt>正氣凜然</dt>
   <dd>正氣:剛正之氣。凜然:可敬畏的樣子。形容正氣威嚴不可侵犯。</dd>
</dl>

會顯示為:

https://ithelp.ithome.com.tw/upload/images/20200918/20130509VXxvC9pLLO.jpg


巢式清單

將第二個清單放在<li>元素內,製作出一個巢式清單,也可稱為次清單。
例如:

<ul>
  <li>姓名</li>
  <li>生日</li>
  <li>電話
    <ul>
      <li>住家</li>
      <li>公司</li>
      <li>手機</li>
    </ul>  
  </li>
  <li>住址</li>
</ul> 

會顯示成:

https://ithelp.ithome.com.tw/upload/images/20200918/201305097FGbTAxBtb.jpg


參考來源:
書籍:HTML&CSS 網站設計建置優化之道
網頁前端工程入門:CSS 選擇器 - 詳細使用介紹By 彭彭
網頁前端工程入門:基礎 HTML 教學 By 彭彭


上一篇
第3天:HTML-文章內可使用的標籤
下一篇
第5天:HTML-網頁間的連結
系列文
我可以修改,所以先亂打30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言