前端開發：HTML-列表

HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表使用 <ul> 標籤

<ul>
    <li>
        語文
    </li>
    <li>
        數學
    </li>
</ul>

　　

HTML 有序列表

一樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

列表項使用數字來標記。

<ol>
    <li>
        語文
    </li>
    <li>
        數學
    </li>
</ol>

　　

HTML 自定義列表

自定義列表不單單是一列項目，而是項目及其註釋的組合。

自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。

<dl>
    <dt>語文</dt>
    <dd>- 語文做文很難寫</dd>
    <dt>數學</dt>
    <dd>- 公式不少</dd>
</dl>

　　

實例：

不一樣類型的有序列表：

<h4>編號列表：</h4>
<ol>
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ol>

<h4>大寫字母列表</h4>
<ol type="A">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ol>
<h4>小寫字母列表</h4>
<ol type="a">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ol>

<h4>羅馬數字列表</h4>
<ol type="I">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ol>

<h4>小寫羅馬數字列表</h4>
<ol type="i">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ol>

　　

不一樣類型的無序列表：

<h4>圓點列表：</h4>
<ul style="list-style-type: disc">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ul>

<h4>圓圈列表:</h4>
<ul style="list-style-type: circle">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ul>

<h4>正方形：</h4>
<ul style="list-style-type: square">
    <li>語文</li>
    <li>數學</li>
    <li>歷史</li>
</ul>

　　

嵌套列表

<ul>
    <li>語文</li>
    <li>數學
        <ul>
            <li>高等數學</li>
            <li>機率論</li>
        </ul>
    </li>
    <li>歷史</li>
</ul>

　　

HTML 列表標籤