iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0

列表標籤可以用來為頁面進行布局

主要分為無序列表、有序列表、自定義列表三大類

1.無序列表
無序列表主要使用的標籤如下

    <ul>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>鳳梨</li>
        <li>水蜜桃</li>
        <li>哈密瓜</li>
    </ul>

無序列表

使用無序列表注意事項 :
a. 每個列表項目中是沒有級別分別的都為同等級別
b. ul標籤內只能含有li標籤
c. li標籤中可以放入所有元素
d. 無序列表中前面會有樣式(ex:小圓點)若要去除一般使用CSS中list-style:none
無序列表去除樣式

2.有序列表
有序列表主要使用標籤如下

<ol>
        <li>披薩</li>
        <li>炸雞</li>
        <li>漢堡</li>
        <li>薯條</li>
        <li>雞塊</li>
    </ol>

有序列表

使用有序列表注意事項 :
a. ol標籤內只能含有li標籤
b. li標籤中可以放入所有元素
c. 有序列表前面預設會有數字,可使用CSS進行修改

3.自定義列表
自定義列表主要使用標籤如下

    <dl>
        <dt>我最愛的飲料:</dt>
        <dd>奶茶</dd>
        <dd>紅茶</dd>
        <dd>綠茶</dd>
    </dl>

自定義列表

使用自定義列表注意事項 :
a. dl標籤內只能有dt、dd標籤
b. dt和dd的數量沒有限制,通常是一個dt加上多個dd


上一篇
Day 02 HTML<表格標籤>
下一篇
Day 04 HTML<表單標籤>
系列文
從零開始前端學習筆記(HTML、CSS、JavaScript)10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言