HTML列表-有序列表、无序列表、自定义列表

最新推荐文章于 2025-09-18 10:31:43 发布
原创 最新推荐文章于 2025-09-18 10:31:43 发布 · 290 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

本文介绍了HTML中的三种列表类型：有序列表(ol)、无序列表(ul)和自定义列表(dl)。有序列表常用于需要顺序呈现的内容，无序列表则广泛应用于网页布局中，而自定义列表常在网页底部的术语解释等场景出现。了解这些列表标签的使用，能更好地进行网页内容组织。

三种列表学习

列表比较简单，但是非常常用，基本所有的需求里都用到他，对于越简单的东西，我们越要搞清楚，狮子搏兔尚要全力，杀鸡就得用杀牛刀，射程之内即是真理，不好意思，跑偏了，回到学习中。

有序列表 - ol标签
这个用的就很少，我们随便了解一下。
ol标签创建有序列表，li标签展示内容。
在这里插入图片描述
在这里插入图片描述
无序列表 - ul标签
无序列表简直就是幽灵，默默出现在页面的任何可能出现的地方，打开网页，一个F12，一眼过去，都是ul，凑字数划水特别好用。
在这里插入图片描述
在这里插入图片描述
自定义列表 - dl标签
在这里插入图片描述
自定义列表常用场景一般在网页的最底部，比如菜鸟教程下面的
在这里插入图片描述
在这里插入图片描述

HTML列表指南：有序、无序与自定义列表的妙用
一起coding，一起嗨。
06-16 625
HTML列表指南：有序、无序与自定义列表的妙用
HTML-ul无序、ol有序和dl定义列表和列表嵌套
主营前端方向，技术栈是vue
11-03 1494
ul无序、ol有序和dl定义列表和列表嵌套
无序列表
程序员龙一
02-07 8972
无序列表的作用： 给一堆数据添加列表语义，没有顺序之分 格式： <ul> <li>需要显示的条目内容</li> </ul> li是list item的缩写 list：列表 item：条目 结合起来就是列表条目的意思。 ul和li标签是一个整体，组合，一起出现。ul标签中只会看到li标签。 应用场景 新闻列表 商品列表 导航条 练习 <!DOCTYPE html> <html lang="en"> <head>
HTML 无序列表 (`＜ul＞`) 深度解析：结构化非序列信息
最新发布
2501_93104808的博客
09-18 982
本文深入解析HTML无序列表(<ul>)的用法与语义价值。从基础语法、历史属性到现代CSS替代方案，全面介绍如何正确使用无序列表组织非序列信息。重点强调其语义化价值，包括提升信息架构、SEO优化和可访问性支持，特别是对屏幕阅读器用户的友好性。文章还详细探讨列表嵌套规则、CSS样式控制技巧，并提供最佳实践建议，如避免使用废弃属性、确保内容专注性等。通过多个代码示例，展示如何构建语义清晰、结构合理的无序列表，适用于导航菜单、功能列表等常见场景。
HTML列表练习：无序、有序与自定义列表的应用
在这个前端练习中，我们将关注HTML中的列表元素，包括无序列表、有序列表以及如何创建自定义列表。 列表是HTML中用于展示数据集的结构化方式，常见的列表类型有两种：无序列表（unordered list）和有序列表...
simple-draggable-list:简单的 HTML 和 CSS 拖放自定义列表，支持鼠标和触摸输入
05-29
列表项通常通过`<li>`标签创建，然后包裹在一个`<ul>`或`<ol>`（无序或有序列表）标签中。 在实现拖放功能时，JavaScript发挥了关键作用。JavaScript是一种动态编程语言，它可以与用户交互，改变HTML文档的内容和...
【零基础入门前端系列】—无序列表、有序列表、定义列表（五）
道阻且长，行则将至。
02-14 1196
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以标签开始，每个自定义列表项以开始。每个自定义类表项的定义以开始< dl > < dt > 水果 < /dt > < dd > 樱桃 < /dd > < dd > 草莓 < /dd > < /dl > < dl > < dt > 奶茶店 < /dt > < dd > 蜜雪冰城 < /dd > < dd > 古茗 < /dd > < /dl >练习题。
HTML的有序列表
weixin_30597269的博客
10-13 275
针对HTML的有序列表，由于平常使用的不是很多，刚开始使用的时候也是有遇到一些坑，有几个小问题： 　　1.li的宽度不能设置为100%，这样的话就没办法看到前面的序号 　　2.如果设置li的颜色字体大小，前面的序号会跟着变化，但是给Li设置背景颜色，需要是不会有背景色的 　　3.序号的所占空间约在两个字符之间，但是又不算在Li空间里面，所以在写css样式的时候可能要注意好 有序列表有...
HTML无序列表
又菜又爱玩的小熊
02-21 3836
文章目录一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignor
什么是无序列表
weixin_74900246的博客
02-24 207
保姆级教学
列表标签-无序列表
Blue_lan18的博客
01-17 1854
无序列表是用来布局的，无序列表的各个列表项之间没有顺序之分，是并列的。ul中只能嵌套li，不允许有其他标签或文字。li标签里可以放任何元素。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
无序列表的介绍
xiao_suan_cai的博客
06-12 9179
  列表分为两种类型：一种是有序列表；另一种是无序列表。前者使用编号来记录项目的顺序，而后者使用项目符号来标记无序的项目。   所谓有序列表，是指按照数字或字母顺序排列列表项目，如图1.1所示：   所谓无序列表，是指以全●、○、▽、▲等开头的，没有顺序的列表项目   ...
线性结构：无序列表
My apologize的博客
07-22 667
列表List是一种简单强大的数据集结构提供了丰富的操作接口但并不是所有的编程语言都提供了List数据类型，有时候需要程序员自己实现。一种数据项按照相对位置存放的数据集称为“无序表unordered list”其中数据项只按照存放位置来索引，如第1个、第2个……、最后一个等。(为了简单起见,假设表中不存在重复数据项)无序表操作定义List()：创建一个空列表add(item)：添加一个数据项到列表中，假设item原先不存在于列表中。
无序列表简介
king220022的博客
04-12 3099
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。在该语法中，使用标签表示一个无序列表的开始和结束，表示这是一个列表项。跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。上面代码是错误的，因为ul元素的子元素只能是li元素，不能是其他元素。
37-无序列表
weixin_45683698的博客
11-21 1351
2.列表标签 表格是用来显示数据的，那么列表就是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。 根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。 无序列表： 有序列表： 自定义列表： 2.1无序列表（重点） <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。 无序列表的基本语法格式如下： <ul> <li>列表项1</li>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值