浅谈列表<ul>跟<dl>使用注意点及使用的场景

1.无序列表标签<ul>简单介绍：

1.1语义：<ul>标签作用给一组类型相同的数据添加 列表的语 义，告诉浏览器、搜索引擎<ul>无序列表里的数据是一个整体，他们是没有类似于排行榜上的 先后、重要、次要 排名上分别的，他们的重要性都一样的。

1.2注意点:<ul>标签里只能 嵌套<li>标签 ，除此之外不能嵌套其他标签，但在<li>标签里可以可以嵌套其他的标签，像它的父级<ul>标签都可以嵌套在里面。

1.3使用的场景:在企业敬薯项目开发中，<ul>标签通常用于网站导航条的链接、新闻网站的新闻列表、视频列表，或者用于电商网慎稿激站商品导航目录的列表或者产品详细列表。如图：

导航条：凤凰网

新闻列表：网易

电商网站商品目录的导航：天猫

2.<dl>标签的介绍：

2.1<dl>标签使用格式：如图

<dt>是自定义列表里的宽袜列表项，也是列表的标题英文是definition title，<dd>列表项是对列表项进行描述的，英文是definition description。

2.2<dl>标签语义：<dl>标签也是对一组数据添加列表语义，告诉浏览器这是一个整体，那<dd>标签里的内容时对<dt>里的标题进行描述、解释。例如下图里第一个<dd>标签的文字信息是对<dt>标题里北京进行解释说明。

2.3<dl>标签使用注意：<dl>标签可以嵌套多对<dt><dd>标签，<dt>标签可以有多个<dd>个列表项说明、描述，也可以没有；但一般推荐一个<dd>标签跟一个<dt>标签。<dd>标签可以嵌套其他标签，但列表项<dt>不不能嵌套其他标签。

2.4<dl>标签使用的场合：图文混排、网站底部链接：电商网站底部-购物指南、支付方式。

1，列表的方式不同，ul是无序列表，dl是定义列表。

2，表示的方法方式也不同。

（1）ul是无序列表，也就是说没有排列限制可以随意加li。

举例：

（li）可以随意放置（/li）

（li）可以随意放置(/li)

（li）可以随意放置(/li)

（2）dl是定义列表，会默认前后层级关系。

举例：

（dt）我是头（/dt）

（dd）我是内容（/dd）

（dd）我是内容（/dd）

扩展资料：

一，HTML列表中的dl，dt，dd，ul，li，ol区别及应用：

1，无序列表：

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

②无序列表始于（ul）标签，每个列表项始于（li）。

2，有序列表

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

②有序列表始于（ol）标签，每个列表项始于（li）标签。

3，定义列表：

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

②自定义列表以（dl）标签开始，每个自定义列表项以（dt）开始谨穗，每个自定义列表项的定义以

（dd）开始。

二，HTML简介：

1，超文本标记语言(Hyper Text 祥轿卜Markup Language)，标准通用标记语言下的一个应用。

2，HTML不是一种编程语言，而是一种标记语言(markuplanguage)，是网页制作所必的。“超

文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文

本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主

体”部分提供网页的具体内容。

三，HTML标志标签:

1，（ul）（/ul）创建一个无序的列表，默认前面标有圆点，也可以自己设置为none或者其他形

状，如空心圆、方块等。（无序列表、外语全称：U norderedL ists）

2，（palign=""）将段落按左、中、右对齐。

3，（br/）定义新行。

4，（blockquote）（/blockquote）从两边缩进文本。

5，（dl）（/dl）定义列表（英文全称： Definition List）。

6，（dt）放在每个定义术语词前（定义术语、英文全称：D efinitionT erm）。

7，（dd）放在每个定义之前（定义说明、英文全称：D efinitionD escription）。

8，（p）（/p）创建一个段落（英文全称： Paragraphs）。

9，（li）放在每个列表项之前帆纤，若在（ol）（/ol）<><>之间，则每个列表项加上一个数字。

---