HTML列表标签学习博客：有序列表、无序列表、自定义列表详解

一、什么是HTML列表在网页开发中我们经常需要展示一组具有一定关系的数据例如新闻列表商品分类网站导航菜单文章目录课程章节如果直接使用大量文字堆叠结构会非常混乱。HTML提供了专门的列表标签List用于将相关内容按照一定格式排列。HTML中的列表主要分为三种无序列表unordered list有序列表ordered list自定义列表description list一、无序列表ul1. 什么是无序列表无序列表表示列表中的每一项没有先后顺序关系。例如苹果香蕉橘子这些水果没有排名关系只是一组数据。HTML中使用ul li苹果/li li香蕉/li li橘子/li /ul效果● 苹果 ● 香蕉 ● 橘子2. ul标签介绍ul是unordered list意思无序列表它负责定义一个列表区域。例如ul /ul但是注意ul里面不能直接写文字错误ul 苹果 香蕉 橘子 /ul正确ul li苹果/li li香蕉/li li橘子/li /ul3. li标签介绍lilist item意思列表项每一个列表内容都需要放在li里面。例如ul liHTML/li liCSS/li liJavaScript/li /ul表示● HTML ● CSS ● JavaScript4. 无序列表实际应用网站导航栏例如ul li首页/li li新闻/li li课程/li li联系我们/li /ul效果● 首页 ● 新闻 ● 课程 ● 联系我们实际开发中导航栏几乎都是使用ul li然后通过CSS去掉小圆点设置横向排列。二、有序列表ol1. 什么是有序列表有序列表表示列表中的内容具有明确的先后顺序。例如考试排名1. 张三 2. 李四 3. 王五HTMLol li张三/li li李四/li li王五/li /ol显示1. 张三 2. 李四 3. 王五2. ol标签介绍olordered list意思有序列表基本结构ol li内容1/li li内容2/li /ol浏览器会自动添加编号。3. ol常用属性type属性可以改变编号类型。默认ol type1显示1. 2. 3.使用字母编号ol typeA liHTML/li liCSS/li liJavaScript/li /ol显示A. HTML B. CSS C. JavaScript小写字母ol typea显示a. b. c.罗马数字ol typeI显示Ⅰ. Ⅱ. Ⅲ.4. start属性可以设置开始编号。例如ol start5 li第五章/li li第六章/li /ol效果5. 第五章 6. 第六章三、自定义列表dl1. 什么是自定义列表自定义列表用于一个标题对应多个描述内容。常用于网站底部信息商品介绍名词解释FAQ问题列表例如HTML 超文本标记语言 用于创建网页结构HTMLdl dtHTML/dt dd 超文本标记语言 /dd dd 用于创建网页结构 /dd /dl效果HTML 超文本标记语言 用于创建网页结构2. dl标签dl全称description list意思自定义列表负责包裹整个列表。结构dl /dl3. dt标签dt全称description term意思定义标题例如dtHTML/dt表示标题HTML4. dd标签dd全称description details意思描述内容例如dd 网页结构语言 /dd完整案例!DOCTYPE html html head title列表学习/title /head body h2无序列表/h2 ul li苹果/li li香蕉/li li西瓜/li /ul h2有序列表/h2 ol li打开电脑/li li启动VS Code/li li编写HTML/li /ol h2自定义列表/h2 dl dtHTML/dt dd 超文本标记语言 /dd dd 用于制作网页结构 /dd dtCSS/dt dd 层叠样式表 /dd /dl /body /html四、三种列表区别总结类型标签特点应用场景无序列表ul没有顺序小圆点显示导航栏、新闻列表有序列表ol有数字顺序排行榜、步骤说明自定义列表dl标题描述商品介绍、术语解释五、实际开发中的使用频率前端开发中最高频⭐ 无序列表 ul例如导航栏新闻列表商品列表使用ul li/li /ul中等频率有序列表 ol例如注册步骤教程流程排名较少自定义列表 dl例如网站底部链接产品参数问答模块六、前端开发规范推荐写法ul li内容1/li li内容2/li /ul不要ul div内容1/div div内容2/div /ul因为ul的直接子元素应该是li。七、总结HTML列表标签是网页结构中非常重要的一部分。核心记忆无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd实际开发中ul 使用最多ol 用于有明确步骤的内容dl 用于解释说明类内容。