iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

我要努力成為軟體後端工程師!系列 第 4

Day 4-HTML中的列表標籤介紹

  • 分享至 

  • xImage
  •  

-前集提要-

講的HTML的一些主要標籤的意思及功用,就像是跟人一樣,從頭、身體核心區域、下層底部。

各代表不同的語法結構以及作用,然而最主要的就是核心區域,也是整個網頁的核心。


這次就要來講講 規律資料的呈現

可以分為 Lists 列表Table 表格

List可分為無序列表有序列表定義列表

  • 無序列表
    是使用< ul >標籤語法指令來完成,其中有使用< li >來包著內容,如下圖所示。
    無序列標籤
    網頁

在上述範例中,每一筆資料之前都有個小黑點,代表每一筆資料的提示符號,我們可以改變 type 的屬性值
來選用不同的提示符號。
type變更
顯示

  • 有序列表
    照字面解釋,就是有順序的排列,使用< ol > 標籤語法指令來完成,至於是什麼樣的呈現,參考下圖範例。
    有序列
    有序列顯示

    數目字是預設的編號方法,若要選用不同的編號方法,還可以在有序列表中加入第二層的列表,只需要在type設定不同的屬性值就可以了,一些可用的type屬性值可說明如下:

  • TYPE="a":代表用小寫英文字母(a-z)來編號。
  • TYPE="I":代表用大寫羅馬數字(I, II, III, ...)來編號。
  • TYPE="i":代表用小寫羅馬數字(i, ii, iii, ...)來編號。
    二層列表
    顯示
  • 定義列表
    其功能就像是在定義一堆特殊名詞,如下圖範例顯示。
    定義列表
    顯示

以上就是HTML的列表標籤與語法指令的介紹。


上一篇
Day 3-初步認識HTML的標籤語法
下一篇
Day 5-HTML的文字表示方法
系列文
我要努力成為軟體後端工程師!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言