HTML 列表

最新推荐文章于 2024-07-08 20:49:03 发布

c323u2bdf

最新推荐文章于 2024-07-08 20:49:03 发布

阅读量1.1k

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_60212533/article/details/127188695

版权

HTML 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

HTML 支持有序、无序和定义列表

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

示例：

<html>
    <body>
        <ul>
            <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
        </ul>  
    </body>
</html>

浏览器显示如下：

不同类型无序列表

示例：

<html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
    <li>篮球</li>
    <li>足球</li>
    <li>排球</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
    <li>篮球</li>
    <li>足球</li>
    <li>排球</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
    <li>篮球</li>
    <li>足球</li>
    <li>排球</li>
</ul>  

</body>
</html>

浏览器显示如下：

嵌套列表

示例：

<html>
    <body>
        <h4>一个嵌套列表：</h4>
            <ul>
                <li>咖啡</li>
                <li>茶
                    <ul>
                        <li>红茶</li>
                        <li>绿茶
                            <ul>
                                <li>中国茶</li>
                                <li>非洲茶</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>牛奶</li>
            </ul>
        </body>
</html>

浏览器显示如下：

2. 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

示例：

<html>
    <body>
        <ol>
            <li>篮球</li>
            <li>足球</li>
            <li>排球</li>
        </ol>  
    </body>
</html>

浏览器显示如下：

不同类型的有序列表

示例：

<html>
    <body>
        <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" start="5">
                <li>语文</li>
                <li>英语</li>
                <li>数学</li>
            </ol>  

        <h4>罗马字母列表：</h4>
            <ol type="I">
                <li>语文</li>
                <li>英语</li>
                <li>数学</li>
            </ol>  

        <h4>小写罗马字母列表：</h4>
            <ol type="i" start="7">
                <li>语文</li>
                <li>英语</li>
                <li>数学</li>
            </ol>  
    </body>
</html>

浏览器显示如下：

3.定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

示例：

<html>
    <body>
        <dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
        </dl>
    </body>
</html>

浏览器显示如下：