【web:html+css基础】列表标签

最新推荐文章于 2024-07-30 10:27:19 发布

码先生的幸福生活

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量208

点赞数

分类专栏： web 文章标签：前端 css

本文链接：https://blog.csdn.net/hk_is_my_dream/article/details/126249415

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.定义和分类

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。

在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局。

合理的使用列表布局可以有效提高 SEO。

根据使用情景不同，列表可以分为三大类： 无序列表、有序列表和自定义列表 。

标签名	定义	说明
<ul> </ul>	无序标签	里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签
<ol> </ol>	有序标签	里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签
<dl> </dl>	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

1.1无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li> 标签定义（开发中经常使用）。

无序列表的基本语法格式如下：


<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的

<ul> </ul> 中只能嵌套<li></li> ，直接在 <ul> </ul> 标签中输入其他标签或者文字的做法是不被允许的， li 列表中的任何内容都应该放在 <li> </li> 中

<li> 与 </li> 之间相当于一个容器，可以容纳所有的元素

无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置

1.2有序列表

有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义（开发中不太常用）。

在 HTML 标签中， <ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

有序列表的基本语法格式如下：


<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

<ol> </ol> 中只能嵌套 <li> </li> ，直接在 <ol> </ol> 标签中输入其他标签或者文字的做法是不被允许的

<li> 与之间相当于一个容器，可以容纳所有的元素 </li>

有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置

1.3自定义列表

自定义列表的使用场景：

自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）。

在 HTML 标签中， <dl>标签用于定义描述列表（或定义列表），该标签会与<dt> （定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

其基本语法如下：


<dl>
<dt>名词1</dt>表示自定义列表的主题
<dd>名词1解释1</dd>针对主题的每一项内容
<dd>名词1解释2</dd></dl>

<dl> </dl> 里面只包含、 <dt> <dd>

<dt> 和个数没有限制，经常是一个 <dt> 对应多个 <dd> <dd>

dd前会默认显示缩进效果

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>张三: 100</li>
        <li>李四: 80</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <!-- 表示自定义列表的主题 -->
         <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <!-- dd前会默认显示缩进效果 -->
    </dl>
       

    
</body>
</html>

码先生的幸福生活

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【web:html+css基础】列表标签

表格是用来显示数据的，那么列表就是用来布局的。列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局。合理的使用列表布局可以有效提高 SEO。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。标签名定义说明无序标签里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签有序标签。...
复制链接

扫一扫

专栏目录