HTML學習之html清單介紹（程式碼實例）-html教學-PHP中文網

首頁

web前端

html教學

HTML學習之html清單介紹（程式碼實例）

青灯夜游

Oct 16, 2018 pm 04:26 PM

html li ol 清單

本篇文章就帶給大家HTML學習之html清單介紹，透過簡單的程式碼範例來介紹。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

一，效果圖。

#二，程式碼。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>html 列表</title></head><body>    <!--无序列表-->    <h4>An Unordered list</h4>    <ul>        <li>Cofferr</li>        <li>tea</li>        <li>Mide</li>    </ul>    <!--有序列表-->    <ol start="50">        <li>Cooffee</li>        <li>Tea</li>        <li>Mike</li>    </ol>    <!--自定义列表-->    <dl>        <dt>Coffer</dt>        <dd>--black hot drink</dd>        <dt>mike</dt>        <dd>--white cold drink</dd>    </dl>    <!--不同类型的有序列表-->    <h4>Numbered list:</h4>    <ol>        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>    <h4>letters list:</h4>    <ol type="A">        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>
    <h4>Lowercase  letters list:</h4>
    <ol type="a">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>Roman numbers list:</h4>
    <ol type="I">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>lowercase Roman numbers list:</h4>
    <ol type="i">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <!--不同类型的无序列表-->
    <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>
    <h4>disc bullets list:</h4>
    <ul style="list-style-type:disc">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>circle bullets list:</h4>
    <ul style="list-style-type:circle">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>square bullets list:</h4>
    <ul style="list-style-type:square">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <!--嵌套列表-->
    <h4>A list inside a list:</h4>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <ul>
            <li>black tea</li>
            <li>green tea</li>
        </ul>
        <li>Mike</li>
    </ul>
    <!--嵌套列表2-->
    <h4>lists inside a list</h4>
    <ul>
        <li>coffee</li>
        <li>tea
            <ul>
                <li>black tea</li>
                <li>green tea
                    <ul>
                        <li>china</li>
                        <li>africa</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>mick</li>
    </ul>
    <!--自定义列表-->
    <h4>A definition List</h4>
    <dl>
        <dt>coffee</dt>
        <dd>-black hot drink</dd>
        <dt>mike</dt>
        <dd>-white cold drink</dd>
</body>

</html>

登入後複製

參考資料：《菜鳥教學》

#總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪 HTML影片教學，Html5影片教學，bootstrap影片教學！

以上是HTML學習之html清單介紹（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn