8.3前端之Html列表

列表的分類

• 有序列表

• 無序列表

• 自定義列表

對應標籤：

列表統一使用標籤<li>建立內容

有序列表--->支援全域性屬性、事件屬性

列表宣告使用標籤<ol>,可以用style標籤來宣告列表的樣式

        <h4>有序列表</h4>
        <ol type="I" reversed="reversed" start="10" style="list-style-type: armenian;">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
 

可以賦給<ol>標籤的屬性

可以在head定義好列表的屬性，然後再引用。也可以再CSS檔案種定義好屬性再引用

        <hr />
        <ol class="a">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="b">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="c">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
        <br />
        <ol class="d" start="2">
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ol>
 

ol.a{
    list-style-type: decimal-leading-zero;
}
ol.b{
    list-style-type: asterisks;
}
ol.c{
    list-style-type: ethiopic-abegede-am-et;
}
ol.d{
    list-style-type: binary;
}
ol.f{
    list-style-type: bengali;
}

無序列表--->支援全域性屬性、事件屬性，不可引用樣式(外部CSS)

列表宣告使用標籤<ul>,可以用style標籤來宣告列表的型別--->實心、空心、小方塊

<!--無序列表可以內巢狀列表-->
        <ul type="circle">
            <li>Coffee</li>
            <li>Tea</li>
                <ul type="disc">
                    <li>Green Tea</li>
                        <ul type="square">
                            <li>Matcha Green Tea</li>
                        </ul>
                    <li>Red Tea</li>
                </ul>
            <li>Milk</li>
        </ul>
 

<li>標籤可用在有序列表（<ol>）、無序列表（<ul>）和選單列表（<menu>）中。支援全域性屬性、巢狀屬性

自定義列表--->使用<dl>、<dt>、<dd>來定義

• dl宣告列表的標籤

• dt宣告列表的列表頭

• dd宣告列表的內容

這三個標籤均支援全域性屬性、事件屬性

        <dl>
            <dt>這是一個自定義列表,內容可以自行編輯</dt>
            <dd contenteditable="true">- 這是列表的內容</dd>
        </dl>

標籤的縮寫

ul是unordered lists的縮寫 (無序列表)

li是list item的縮寫 （列表專案）

ol是ordered lists的縮寫（有序列表）

dl是definition lists的英文縮寫 (自定義列表)

dt是definition term的縮寫 (自定義列表組)

dd是definition description的縮寫（自定義列表描述）

nl是navigation lists的英文縮寫 （導航列表）

tr是table row的縮寫 （表格中的一行）

th是table header cell的縮寫 （表格中的表頭）

td是table data cell的縮寫 （表格中的一個單元格）