当前位置: 首页 > 資訊 >

Day 03 HTML<列表標籤>

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

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

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

蘋果
香蕉
鳳梨
水蜜桃
哈密瓜

無序列表

使用無序列表注意事項 :
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