iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
0
Modern Web

每個人都可以做出理想中的網站!系列 第 6

Day06-HTML標籤(4) / 清單

今天要來介紹的是具有清單功能的標籤:<ul></ul><ol></ol>
清單一共分為兩種,一個是有序列的,一個是沒有序列的。

無序清單 unordered list

取unordered list的第一個字母作為標籤,在<ul></ul>之間擺放的元素,就是前面放置同一符號的清單列點,通常是用在沒有先後順序問題的清單上,例如Day3我們講到body內可以使用很多種的標籤,就是採取無順序的列舉方式。來看看程式碼吧!

<ul>
<li>國文</li>
<li>英文</li>
<li>數學</li>
</ul>

執行出來的結果就會是這樣:

  • 國文
  • 英文
  • 數學

想要放多少個列點,只要在<ul></ul>裡面用<li></li>包住即可。

有序清單 ordered list

取ordered list的第一個字母作為標籤,在<ol></ol>之間擺放的元素,會以數字表示先後順序,像書店的暢銷排行榜就可以使用這類清單,可以很明確的讓消費者看到名次。

<ol>
<li>國文</li>
<li>英文</li>
<li>數學</li>
</ol>

執行出來的結果就會是這樣:

  1. 國文
  2. 英文
  3. 數學

你放了n個<li>進去,他就會列出1到n個點的清單。
試試看吧!


上一篇
Day05-HTML標籤(3) / 粗體換行
下一篇
Day07-HTML標籤(5) / 圖片
系列文
每個人都可以做出理想中的網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言