源码时代UI干货分享|史上最全的HTML三大列表的写法总结，快来收藏吧！

悠悠 2024-04-17 19:11 75阅读 0赞

今天给大家介绍网页中列表的写法，网页中的列表共分三种，分别是无序列表、有序列表和定义列表。

*  **无序列表**
    
    1.  什么是无序列表？

无序列表就是没有顺序的列表，主要用于描述一组没有顺序的数据。

1.  1.  无序列表的语法

语法1：

<ul>

<li>列表项目1</li>

<li>列表项目2</li>

......

</ul>

结构说明:

1 列表标签：ul ,li ->块标签,**并且必须组合出现。**

2 ul代表整个列表， li代表列表中的每个成员。

3 ul标签：用于定义列表的位置（外壳）

4 li标签：用于定义列表的每一项，列表可以有多项（多个li标签对）

注意事项:

1 <ul>标签和<li>标签是固定结构，其它标签写在<li>标签中。

2无序列表通常会自动生成一个小圆点效果，可以给ul标签书写type属性来修改默认的标记类型,但是在实际应用中通常要去除，使用css来修饰。

3 无序列表也可以嵌套。

1.  1.  案例：

无序列表可以用来做导航、产品列表等。

比如导航:

*  **有序列表**

2.1什么是有序列表？

有顺序的数据组成的列表，叫有序列表。

2.2 语法：

基本语法：

<ol>

<li>列表项目1</li>

<li>列表项目2</li>

......

</ol>

结构说明:

列表标签：ol,li ->块标签 ，**并且必须组合出现。**

ol代表整个列表， li代表列表中的每个成员。

注意事项：

1 <ol>标签和<li>标签是固定结构，其它标签写在<li>标签中。

2 有序列表通常会自动生成数字，可以给ol标签书写type属性来修改默认的标记类型但是在实际应用中通常要去除掉，使用css来修饰。

2.3案例:

*  **定义列表**

3.1什么是定义列表?

用于描述事物的数据称为定义列表。

3.2 语法：

<dl>

<dt>描述的对象</dt>

<dd>描述的细节1</dd>

<dd>描述的细节2</dd>

</dl>

结构说明:

dl:标记定义了一个定义列表。

dt:标签定义了描述的事物。

dd:标签定义了描述的细节。

注意事项：

1 <dl> <dt> <dd> 通常是配合使用的，不能单独使用。

2 <dt>和<dd>都必须放在<dl></dl>标志对之间。

3.3案例

小结：

三种列表标签都是固定的结构，使用时要配合使用，不能单独使用；其中无序列表使用频率最高，需要重点掌握。

（本文由源码时代技术老师撰写，转载请注明出处）

发表评论取消回复

表情：

评论列表（有 0 条评论，75人围观）

还没有评论，来说两句吧...

相关阅读

相关源码时代Python干货分享 |史上最全python关键字驱动自动化测试信解决方案

. **课程介绍** 1. 什么是关键字驱动？ 2. 如何设计关键字驱动？ 3. 具体如何实现的？ 4. 框架分析 1. **什么是关键字驱动** ...

左手的ㄟ右手/ 2024年04月17日 19:11/ 0 赞/ 80 阅读

相关源码时代UI干货分享|史上最全的HTML三大列表的写法总结，快来收藏吧！

天给大家介绍网页中列表的写法，网页中的列表共分三种，分别是无序列表、有序列表和定义列表。 * **无序列表** 1. 什么是无序列表？ ...

悠悠/ 2024年04月17日 19:11/ 0 赞/ 76 阅读

相关源码时代软件测试干货|史上最全的mysql数据库优化方法，软件测试人手必备！史上最全的mysql数据库优化方法，软件测试人手必备！

*1. 课程介绍** Ø 1.介绍什么是mysql优化 Ø 2.mysql优化方法 Ø 3.Mysql索引的使用 Ø 4.分表技术 **2. mysql优化概述...

亦凉/ 2024年04月17日 05:28/ 0 赞/ 76 阅读

相关源码时代软件测试干货来了 | 堪称史上最全的CMM/CMMI能力成熟度模型集成简介

将各种能力成熟度模型（即：Software CMM、Systems Eng-CMM、People CMM和Acquisition CMM）整合到同一架构中去，由此建立起包括软件

ゞ浴缸里的玫瑰/ 2023年08月17日 15:33/ 0 赞/ 132 阅读

相关源码时代UI干货分享|Axure基础教程

主界面介绍 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

悠悠/ 2023年06月22日 07:24/ 0 赞/ 14 阅读

相关源码时代前端干货分享|前端大牛总结的常见安全攻击及防御技巧！赶紧收藏！

今天主要给大家分享一下web安全这方面的知识点,对于一个web从业者来讲,不得不说这是一个非常有份量的课题,近几年网络上频繁出现,相关安全的危害问题,所有以今天主要是总结

左手的ㄟ右手/ 2023年05月31日 03:15/ 0 赞/ 23 阅读

相关英语时态表！史上超全的英语时态总结！收藏吧

孩子从三年级才开始学英语，很多英语语法和英语时态都没接触到！但是上初中了之后，英语是很拉分数的一科！所以让孩子在外边也补习了英语。孩子拿回来了一些老师给的英语时态的学习资料，包

刺骨的言语ヽ痛彻心扉/ 2022年08月24日 14:28/ 0 赞/ 265 阅读

相关新手入门必备，史上最全源码时代软件测试基础知识分享！

软件测试在软件开发中占据了一半以上的工作量，岗位需求大，人才缺口也很大，在IT培训领域，软件测试入门不难，只要你愿意努力学，不论你是什么专业都可以进入软件测试行业。本文面向

ゞ浴缸里的玫瑰/ 2021年10月29日 14:20/ 0 赞/ 205 阅读

相关全网最全Linux命令总结！！（史上最全，建议收藏）

大家好，我是冰河~~ 最近家里的事情太多了，很久没更新技术文了。期间，也收到了很多小伙伴的鼓励，谢谢大家的帮助和支持，我想感谢大家最好的方式就是持续分享好的技术文章了吧，让自

刺骨的言语ヽ痛彻心扉/ 2021年09月08日 08:44/ 0 赞/ 652 阅读

相关史上最全的 Linux Shell 文本处理工具集锦，快收藏！

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达 -------------------- 来自：大CC 链接：www.cnblogs.com

╰半夏微凉°/ 2021年08月31日 04:32/ 0 赞/ 305 阅读