1. 程式人生 > >前端開發:HTML-列表

前端開發:HTML-列表

歷史 點列 light 字母 alt mage 嵌套列表 開發 圓點

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 列表標簽

技術分享圖片

前端開發:HTML-列表