HTML 經常使用列表標籤

關注我，不迷路~git

經常使用列表標籤

在書寫HTML文檔時，遇到相同類型的內容，須要考慮用列表來實現（導航、排名、相關文章等），瀏覽器

一般狀況下使用的列表有三種，有序列表、無序列表和自定義列表。微信

1、有序列表ol

有序列表：有必定時間、前後、高低等順序，如排名、熱度，區塊鏈

ol，order list 只有一個類型的子元素 li，list itemui

搜索熱點
    <!-- 默認排序樣式 -->
    <ol>
        <li>HTC區塊鏈手機</li>
        <li>軍運會獎牌榜第一</li>
        <li>切爾西1-0紐卡</li>
        <li>微信錢包銀行儲蓄</li>
        <li>小學生偷開奧迪</li>
    </ol>
    <!-- 按大寫字母排序 -->
    <ol type="A">
        <li>HTC區塊鏈手機</li>
        <li>軍運會獎牌榜第一</li>
        <li>切爾西1-0紐卡</li>
        <li>微信錢包銀行儲蓄</li>
        <li>小學生偷開奧迪</li>
    </ol>
    <!-- 按小寫字母排序 -->
    <ol type="a">
        <li>HTC區塊鏈手機</li>
        <li>軍運會獎牌榜第一</li>
        <li>切爾西1-0紐卡</li>
        <li>微信錢包銀行儲蓄</li>
        <li>小學生偷開奧迪</li>
    </ol>
    <!-- 按大寫羅馬數字排序 -->
    <ol type="I">
        <li>HTC區塊鏈手機</li>
        <li>軍運會獎牌榜第一</li>
        <li>切爾西1-0紐卡</li>
        <li>微信錢包銀行儲蓄</li>
        <li>小學生偷開奧迪</li>
    </ol>
    <!-- 按小寫羅馬數字排序 -->
    <ol type="i">
        <li>HTC區塊鏈手機</li>
        <li>軍運會獎牌榜第一</li>
        <li>切爾西1-0紐卡</li>
        <li>微信錢包銀行儲蓄</li>
        <li>小學生偷開奧迪</li>
    </ol>

2、無序列表ul

無序列表：類別相同，但沒有具體的順序，通常用於導航欄、相關資，code

ul，unorder list 只有一個類型的子元素 li，list itemblog

相關資訊
    <!-- 如下單詞內容批量隨機生成無心義 -->
    <!-- 和不設置type同樣，默認前置符號 -->
    <ul type="disc">
        <li>Temporibus asperiores incidunt laborum.</li>
        <li>Odit repellat placeat blanditiis!</li>
        <li>Sit ipsam error consequatur.</li>
        <li>Deserunt beatae molestiae assumenda.</li>
        <li>Reiciendis aut deserunt soluta?</li>
    </ul>
    <!-- 清除前置符號 -->
    <ul type="none">
        <li>Lorem ipsum dolor sit.</li>
        <li>Illo aliquid consequatur unde?</li>
        <li>Est sequi quia nulla.</li>
        <li>Voluptate enim officiis quas.</li>
        <li>Iusto, et. Eos, nam.</li>
    </ul>
<!-- 設置空心圓符號 -->
    <ul type="circle">
        <li>Maxime incidunt temporibus mollitia?</li>
        <li>Reprehenderit optio quibusdam ad.</li>
        <li>Natus labore impedit placeat?</li>
        <li>Tenetur rerum illum repellat!</li>
        <li>Ipsum officia laudantium distinctio!</li>
    </ul>
    <!-- 設置實心方塊符號 -->
    <ul type="square">
        <li>Veritatis id voluptatem vitae.</li>
        <li>Accusamus corrupti voluptate officiis?</li>
        <li>Exercitationem voluptatibus alias quod.</li>
        <li>Aut cumque ipsa dignissimos.</li>
        <li>Distinctio commodi eaque soluta?</li>
    </ul>

3、自定義列表dl

自定義列表：通常用於名詞解釋，用的蠻少的，排序

dl，defined list dt，表示關鍵字（詞） dd，表示對dt的描述內容圖片

名詞解釋
    <dl>
        <dt>計算機
            <dd>Lorem, ipsum dolor.</dd>
        </dt>
        <dt>CPU
            <dd>Quasi, aut beatae.</dd>
        </dt>
        <dt>主板
            <dd>Quam, assumenda fugit.</dd>
        </dt>
    </dl>
<dl>
        <dt>計算機</dt>
        <dd>Lorem, ipsum dolor.</dd>

        <dt>CPU </dt>
        <dd>Quasi, aut beatae.</dd>

        <dt>主板 </dt>
        <dd>Quam, assumenda fugit.</dd>
    </dl>

兩種同樣的喲，都認識ip

4、列表嵌套

無論是有序無序仍是自定義列表，列表項內部均可以使用段落、換行符、圖片、連接以及其餘列表等等。

使用其餘列表，就是列表嵌套

到底有序套無序仍是無序套有序，甚至相互套來套去...就看你喜歡和需求了。

列表嵌套
    <ul>
        <li>咖啡</li>
        <ol type="a">
            <li>紅茶</li>
            <li>綠茶</li>
        </ol>
        <li>茶
            <ol type="A">
                <li>紅茶</li>
                <li>綠茶</li>
            </ol>
        </li>
        <li>牛奶
            <ul type="circle">
                <li>酸奶</li>
                <li>純牛奶</li>
            </ul>
        </li>
    </ul></pre>

5、總結

基本上經常使用就這三個經常使用的列表，還有目錄列表之類，功能重複，漸漸就不用了。列表前面符號也能夠換成圖標小圖片，不過要依賴CSS幫助了。

上面說過ol或者ul只有一個子元素li，可是最後嵌套的時候，我用了一個ol和li並列做爲列表的子元素，結果瀏覽器識別出了我「」想要的「」結果，這是不可取的。

其實你寫一些其餘標籤，它也能顯示出來，雖然瀏覽器能識別，可是最好別這麼寫。這是風格，規範問題。

就好像人與人相處，都講究禮貌待人，可是總有那麼些人不是那麼好相處，能夠嗎？好像也沒什麼不能夠。可是禮貌老是好的。

因此最好按照通常規範、規則書寫，代碼寫多了，風格和規範是很重要的，很重要的，很重要的。