HTML学习1：常用标签之列表标签

最新推荐文章于 2024-04-02 21:15:51 发布

lu18225857116

最新推荐文章于 2024-04-02 21:15:51 发布

阅读量739

点赞数

分类专栏： HTML+CSS

HTML+CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了HTML中的三种列表标签：无序列表（ul）、有序列表（ol）和定义列表（dl）。详细展示了每种列表的使用方法及效果，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

列表标签表格：

一无序列表

无序列表是一个项目的列表。无序列表项开始于 <ul> 标签，结束于</ul>标签。每个列表项开始于 <li>标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。在这里只是最基础的文字来演示。

[html]view plaincopyprint? 
   
 <html>  
        <head>  
        <title>列表标签演示</title>  
        </head>  
        <body>  
        <h1>这是一个无序列表标签演示</h1>  
        <ul>  
            <li>苹果</li>  
        <li>香蕉</li>  
        <li>葡萄</li>  
        <li>西瓜</li>  
        <li>荔枝</li>  
        </ul>  
        </body>  
 </html>  

浏览器结果显示为：

二有序列表
同样，有序列表也是一列项目，列表项目使用数字，字母等进行标记。有序列表开始于 <ol> 标签，结束于</ol>标签。每个列表项始于 <li> 标签，结束于</li>标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

[html]view plaincopyprint? 
   
 <html>  
        <head>  
        <title>列表标签演示</title>  
        </head>  
        <body>  
        <h1>这是一个有序列表标签演示</h1>  
        <ol type="a"><!--利用标签的属性设置属性值，从a开自增长-->  
            <li>苹果</li>  
        <li>香蕉</li>  
        <li>葡萄</li>  
        <li>西瓜</li>  
        <li>荔枝</li>  
        </ol>  
        </body>  
 </html>  

浏览器结果显示为：

[html]view plaincopyprint? 
   
 <html>  
        <head>  
        <title>列表标签演示</title>  
        </head>  
        <body>  
        <h1>这是一个有序列表标签演示</h1>  
        <ol type="1"><!--利用标签的属性设置属性值，从1开始自增长-->  
            <li>苹果</li>  
        <li>香蕉</li>  
        <li>葡萄</li>  
        <li>西瓜</li>  
        <li>荔枝</li>  
        </ol>  
        </body>  
 </html>  

浏览器结果显示为：

三定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始，结束于</dl>标签。每个自定义列表项以 <dt> 开始，结束于</dt>标签。每个自定义列表项的定义以 <dd> 开始，结束于</dd>标签。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

[html]view plaincopyprint? 
   
 <html>  
        <head>  
        <title>列表标签演示</title>  
        </head>  
        <body>  
        <h1>这是一个定义列表标签演示</h1>  
        <!--HTML注释：演示列表标签  
        列表标签：dl  
        上层项目：dt  
        下层项目：dd：封装的内容是会被缩进的，有自动缩进的效果。  
        -->  
        <dl>  
           <dt>游戏名称</dt>  
           <dd>红色警戒</dd>  
           <dd>三国无双</dd>  
           <dd>反恐精英</dd>  
           <dd>街头篮球</dd>  
        </dl>  
        </body>  
 </html>  