【30天-从前端入门到前端开发工程师Day3】告别死记硬背！HTML列表标签有序/无序实战详解，导航栏底层实现（源码+面试问答）-171主机测评

专栏：30天从零逆袭前端初级工程师｜日更1篇｜每日1知识点+实战代码+面试真题

学习前置：已掌握Day1 HTML5页面骨架、Day2 全套文本标签用法，熟练搭建基础网页结构

本篇核心标准：1个列表全套核心知识点 + 3套可落地实战代码（基础+导航实战）+ 5道前端大厂高频面试真题

前言

在前面两天的学习中，我们已经掌握了HTML标准页面骨架、文本标题、段落、超链接等基础内容标签，能够独立完成简单的文字排版页面。但当我们需要展示一系列并列的条目，比如技能清单、待办事项、目录导航时，单纯用段落和换行就会显得杂乱无章，阅读体验很差。

HTML 专门提供了列表标签来解决这类结构化内容的展示问题。列表是网页中最常用的内容组织形式之一，小到一篇文章的要点总结，大到网站的导航菜单，都离不开列表标签的支撑。掌握列表的正确用法，能让你的网页内容逻辑更清晰、层级更分明。

今天我们进阶学习HTML列表标签，这是前端开发中使用率TOP3的核心标签！

如果你观察过主流网站，会发现：网站顶部导航、侧边栏菜单、新闻列表、商品列表、步骤流程、项目清单，99%的结构化罗列内容，全部都是用HTML列表实现的。

很多前端小白只会生硬背诵有序、无序列表，却不知道列表是网页导航栏的底层核心，不懂企业开发规范、不会嵌套写法、不清楚列表的语义化价值，导致后续写项目、面试频频踩坑。

本篇文章将从零拆解无序列表ul、有序列表ol、列表项li的全部语法、属性、使用场景、嵌套规则，从基础用法到企业级导航栏实战全覆盖，搭配可直接运行的完整源码，最后详解面试必考真题，学完直接掌握前端结构化布局核心能力！

一、HTML 列表标签全套体系深度拆解

精通HTML有序/无序列表的语法特性、属性配置、嵌套规范，理解列表语义化优势，掌握网页导航栏、结构列表的底层实现逻辑，区分两类列表的企业级使用场景。

HTML 基础列表标签共分为三类，两两组合即可实现绝大多数结构化内容的展示：

标签标签名作用适用场景

<ul>	无序列表	定义一组没有顺序的并列项目	技能清单、特点罗列、导航菜单
<ol>	有序列表	定义一组有先后顺序的项目	步骤教程、排名榜单、学习计划
<li>	列表项	定义列表中的每一个具体项目	必须嵌套在<ul>或<ol>内部使用

所有有序/无序列表内容必须依托<li>列表项承载，标签嵌套有严格的官方规范。

列表标签属于块级元素，每个列表项都会独占一行，并且浏览器会自动为列表添加默认的缩进和项目符号，无需手动设置样式。

1.1 无序列表 <ul>（开发最常用）

无序列表是前端项目中使用频率最高的列表组件，用于无先后顺序、无排名、无步骤要求的罗列内容。

1.1.1 核心特性

默认样式：自带实心小圆点符号、默认左侧内边距、独占一行

语义特性：代表一组并列、同级、无序的内容清单

使用场景：网站导航、侧边菜单、商品列表、新闻列表、功能清单、知识点罗列

1.1.2 基础语法格式规范

ul 是列表容器，li 是列表项，ul内部只能嵌套li标签，li标签内部可以嵌套任意内容（文本、链接、图片、div等）。

效果：页面渲染后会显示三行带实心圆点的文本，整体向右缩进一定距离，形成清晰的列表结构。

注意事项：

子元素限制：<ul>标签的直接子元素只能是<li>标签，不能直接放置文本或其他标签，所有内容都必须写在<li>里面。

项目符号：默认的实心圆点可以通过 CSS 修改为空心圆、方块，甚至自定义图片，后续 CSS 章节会详细讲解。

语义化场景：只要是并列、不分先后的内容，都优先使用无序列表，而不是用<br>换行手动加符号。

1.1.3 自定义符号属性type

type="disc"：默认实心圆点
type="circle"：空心圆点
type="square"：实心方块

1.2 有序列表 <ol> + <li>

有序列表用于有明确先后顺序、排名、步骤、序号要求的内容展示，自带数字序号排序。

1.2.1 核心特性

默认样式：默认从1开始数字排序、自带左侧内边距
语义特性：代表有层级、有顺序、有优先级的内容
适用场景：操作步骤、排名榜单、考试题号、流程指南、有序清单

1.2.2 语法格式

效果：页面渲染后会显示三行带数字编号的文本，同样带有默认缩进，适合展示步骤、排名等有顺序的内容。

注意事项：

编号自动递增：有序列表的编号是浏览器自动生成的，不需要手动填写，增加或删除列表项时，编号会自动更新。

起始序号：可以通过start属性指定列表的起始编号，比如start="5"就会从 5 开始计数，这是原文基础上的实用拓展属性。

适用场景：操作步骤、排行榜、时间线、学习计划等强调顺序的内容，必须使用有序列表，保证语义准确。

1.2.3 核心属性配置

type：修改序号样式（1数字、A大写字母、a小写字母、I大写罗马、i小写罗马）
start：设置序号起始值（例：start="3" 从3开始排序）
reversed：倒序排序（数值从大到小排列）

1.3 列表通用核心规范（必考）

<li>是列表的基本单元，既可以放在无序列表中，也可以放在有序列表中，是所有列表的通用子标签。

1.3.1 核心特性

内容包容性强：<li>标签内部不仅可以放文本，还可以嵌套段落、图片、链接，甚至再嵌套一层列表，实现多级列表结构。

块级特性：每个<li>默认独占一行，自动换行，不需要额外添加换行标签。

不能单独使用：<li>必须作为<ul>或<ol>的子元素存在，单独在页面中使用<li>不符合 HTML 规范。

嵌套规则：列表支持多层嵌套，常用于多级导航、下拉菜单、分类目录

语义优势：列表结构整齐、层级清晰，搜索引擎优先抓取，SEO优化效果远优于纯div拼接

1.3.2 简单嵌套列表

在实际开发中，我们经常需要多级列表，比如分类目录。只需要在<li>内部再嵌套一层<ul>或<ol>即可，浏览器会自动调整缩进和项目符号：

<ul>
<li>前端基础
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>前端框架
<ul>
<li>Vue</li>
<li>React</li>
</ul>
</li>
</ul>

效果展示：

提示：嵌套列表是初级开发的常用技巧，核心逻辑依然基于原文的三个基础标签，没有引入新标签，符合学习路径。

二、可运行实战代码

在此我们基于上一篇的个人介绍网页，新增技能清单和学习计划模块，综合运用无序列表和有序列表。同时，提供两套可直接运行源码，从基础入门到企业实战层层递进，复制即可运行，适配新手练习、项目复用。

2.1 打造个人技能清单与学习计划页面

个人介绍网页，直接复制代码保存为list.html，用浏览器直接打开查看效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的技能与学习计划</title>
</head>
<body>
<!– 页面主标题 –>
<h1>前端学习成长档案</h1>
<hr/>

<!– 个人简介（承接上一篇知识点） –>
<h2>个人简介</h2>
<p>我是一名前端入门学习者，正在通过30天系统学习计划，从零掌握前端开发核心技能。</p>

<!– 无序列表：技能清单 –>
<h2>已掌握技能</h2>
<ul>
<li>HTML基本结构与语法规范</li>
<li>HTML文本标签（标题、段落、链接、图片）</li>
<li>HTML列表标签（有序列表、无序列表）</li>
<li>基础的代码书写与调试能力</li>
</ul>

<!– 有序列表：30天学习计划 –>
<h2>30天学习计划</h2>
<ol>
<li>第1-8天：精通HTML全部核心标签，能独立编写静态页面结构</li>
<li>第9-18天：掌握CSS样式与布局，实现精美网页美化效果</li>
<li>第19-28天：攻克JavaScript基础，为网页添加动态交互能力</li>
<li>第29-30天：综合实战项目+面试考点梳理，完成入门到求职过渡</li>
</ol>

<!– 嵌套列表：学习资源分类 –>
<h2>常用学习资源</h2>
<ul>
<li>文档类
<ul>
<li>MDN Web 官方文档</li>
<li>CSDN 技术博客</li>
</ul>
</li>
<li>练习类
<ul>
<li>手写静态网页实战</li>
<li>面试题每日一练</li>
</ul>
</li>
</ul>

<!– 底部信息 –>
<hr/>
<p><b>更新时间：</b>2024年6月 · 持续更新中</p>
<p>返回<a href="#">首页</a> | 查看<a href="#">上一篇：HTML文本标签</a></p>
</body>
</html>

代码说明：

① 复用了上一篇学到的<h1>/<h2>标题、<p>段落、<b>加粗、<hr/>分隔线、<a>超链接等文本标签，实现知识点前后衔接

② 使用<ul>+<li>实现了无序列表，用于展示已掌握技能和学习资源分类

③ 使用<ol>+<li>实现了有序列表，用于展示有先后顺序的 30 天学习计划

④ 实现了二级嵌套列表，在列表项中再次嵌套无序列表，展示分类内容

⑤ 所有代码严格遵循 HTML 规范，列表项全部放置在<ul>/<ol>内部

2.2 基础有序+无序列表综合演示

（basic-lists.html）实现知识点清单、学习步骤排序，覆盖所有基础属性用法，适合新手巩固基础。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Day3-HTML列表基础实战</title>
</head>
<body>
<h2>30天前端学习清单（无序列表）</h2>
<!– 无序列表：自定义方块符号 –>
<ul type="square">
<li>Day1：HTML5页面骨架搭建</li>
<li>Day2：HTML文本标签排版</li>
<li>Day3：HTML列表布局实战</li>
<li>Day4：HTML表格开发详解</li>
</ul>

<h2>前端页面开发步骤（有序列表）</h2>
<!– 有序列表：大写字母排序，从A开始 –>
<ol type="A">
<li>搭建HTML页面骨架结构</li>
<li>使用标签填充页面内容</li>
<li>CSS美化页面样式布局</li>
<li>JS实现页面交互动态效果</li>
</ol>

<h2>前端面试难度排名（倒序列表）</h2>
<!– 有序列表：倒序排序，从10开始 –>
<ol start="10" reversed>
<li>框架进阶面试题</li>
<li>原生JS高频面试题</li>
<li>CSS布局面试题</li>
<li>HTML基础面试题</li>
</ol>
</body>
</html>

2.3 企业级实战｜原生HTML实现顶部导航栏（核心重点）

网站导航栏是列表标签最核心的就业场景，所有企业官网、后台系统、电商网站的导航，底层全部采用 ul+li+a 结构实现，以下代码为行业通用标准结构，可直接用于简历项目、实战开发。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Day3-列表实现顶部导航栏</title>
</head>
<body>
<h2>前端官网导航栏（ul列表标准实现）</h2>
<!– 导航栏底层：无序列表实现，行业通用规范 –>
<ul>
<li><a href="#" target="_blank">首页</a></li>
<li><a href="#" target="_blank">前端教程</a></li>
<li><a href="#" target="_blank">实战项目</a></li>
<li><a href="#" target="_blank">面试题库</a></li>
<li><a href="#" target="_blank">关于我们</a></li>
</ul>

<h2>多级嵌套列表｜侧边分类菜单</h2>
<!– 列表嵌套：实现二级分类菜单 –>
<ul>
<li>前端基础
<ul>
<li>HTML零基础入门</li>
<li>CSS布局美化</li>
<li>原生JavaScript交互</li>
</ul>
</li>
<li>前端框架
<ul>
<li>Vue2/3实战开发</li>
<li>React入门教程</li>
uniapp移动端开发面试求职
基础面试题项目面试拆解简历优化技巧
</body>
</html>

代码运行效果说明：

基础案例完美展示无序、有序、倒序列表的不同样式效果；

导航案例还原企业真实开发结构，<ul>承载导航列表、<li>承载单个导航项、<a>承载跳转功能；

嵌套列表实现二级分类菜单，完美适配网站侧边栏、分类栏目场景；

所有代码符合W3C官方规范，无冗余、无错误，可直接复用。

三、前端企业级列表开发规范与新手高频坑点

很多新手写的列表代码能运行，但不符合企业开发标准，存在语义混乱、结构错误、兼容性问题，面试和项目中直接扣分！本节整理大厂通用开发规范和避坑指南。

3.1 强制开发规范（必须遵守）

结构唯一性：<ul>/<ol>的直接子元素只能是li，不允许直接嵌套文本、<a>、<div>等标签，属于语法错误
li灵活嵌套：<li>内部可以嵌套任意行内、块级标签（文本、超链接、图片、<div>、嵌套列表）
场景强制区分：无序并列内容用<ul>，有序步骤内容用<ol>，禁止混用
导航统一规范：网页导航、菜单、分类列表，统一使用ul实现，禁止用<div>拼接（语义化不达标）

3.2 新手高频易错坑点

坑点1：单独使用li标签，不包裹在<ul>/<ol>中，导致语义失效、浏览器解析异常
坑点2：用有序列表展示无顺序导航，结构混乱，不利于SEO抓取
坑点3：多层嵌套层级混乱，父级子级嵌套错乱，导致页面布局塌陷
坑点4：过度使用<type>属性修改符号，企业开发中列表样式统一由CSS控制，HTML只负责结构

3.3 列表语义化核心价值

相比于单纯用<div>+文本拼接列表内容，<ul>/<ol>列表拥有天然语义化优势：结构层级清晰、代码可读性高、搜索引擎权重更高、适配屏幕阅读器（无障碍访问），是前端标准化开发的必备规范。

四、高频面试考点

4.1 <ul>无序列表和<ol>有序列表的核心区别？分别适用于什么场景？实际项目如何选型？

语义区别：<ul>表示无序列表，列表项之间没有先后顺序；<ol>表示有序列表，列表项之间有明确的先后、等级或步骤关系。

排序区别：<ul>默认无序号，以符号展示；<ol>默认有序号，自带数字/字母排序；

默认样式区别：<ul>默认显示实心圆点项目符号；<ol>默认显示阿拉伯数字序号。

适用场景：

<ul>适用于技能清单、导航菜单、特点罗列、分类目录等不分先后的并列内容
<ol>适用于操作步骤、排名榜单、时间线、计划流程等强调顺序的内容

项目选型：网站导航、菜单、商品、新闻列表统一用<ul>；操作步骤、排名榜单、题号排序、流程指南统一用<ol>。

4.2 为什么企业开发中网页导航栏优先使用<ul>列表，而不直接用<div>？

语义化更强：<ul>专门用于结构化罗列内容，结构语义清晰，<div>仅为通用容器，无语义；

SEO优化更好：搜索引擎可精准识别列表结构，抓取导航权重，提升网页排名；

代码规范性高：列表结构层级统一，可读性、可维护性远超<div>拼接；

适配性更好：天然适配多级嵌套导航、下拉菜单，拓展性更强，符合前端标准化开发规范。

4.3 HTML列表的嵌套规则是什么？li标签能否单独使用？

嵌套规则：<ul>/<ol>的直接子元素只能是li，li内部可以嵌套任意标签（文本、链接、图片、嵌套列表等）；

<li>不可以单独使用，必须包裹在<ul>或<ol>容器中，单独li属于不规范代码，会导致浏览器解析异常、语义失效，不符合W3C标准。

4.4 使用列表标签时有哪些必须遵守的规范？

① <ul>和<ol>的直接子元素只能是<li>标签，不能直接放置文本、<div>或其他标签，所有内容必须写在<li>内部。

② <li>标签不能单独使用，必须嵌套在<ul>或<ol>标签内部。

③ 优先根据内容语义选择列表类型，而不是根据想要的符号样式选择，样式可以通过 CSS 修改，语义不能出错。

④ 列表可以多层嵌套，但嵌套层级建议不超过 3 级，避免页面结构过于复杂。

4.5 为什么不建议用<div>+ 文本符号手动模拟列表，而要使用原生列表标签？

核心原因是语义化和可访问性：

语义化优势：原生列表标签自带明确的语义，浏览器、搜索引擎、屏幕阅读器都能识别出这是一组列表内容，有利于 SEO 和无障碍访问。

开发效率：原生列表自动处理缩进、换行、项目符号，代码更简洁，维护成本更低。

可维护性：使用标准标签的代码更符合行业规范，团队协作时可读性更强，后续修改样式也更方便。

五、练习

基于本文的代码示例，制作一份属于你自己的学习计划与技能清单网页
尝试给列表添加更多层级，比如在学习计划的每个阶段里再列出具体的学习内容
思考：如果需要展示班级成绩单这种行列结构的数据，用列表合适吗？应该用什么标签？

六、下期内容（Day4学习方向）

table/tr/th/td表格全套标签语法与属性；
边框、边距、对齐、背景等表格样式配置；
重难点：colspan跨列合并、rowspan跨行合并实战；
完整成绩表格实战代码；
表格cellpadding/cellspacing高频面试题解析。

七、总结

🎈 今天是我们 30 天前端入门之旅的第 3 天，我们一起系统学习了 HTML 的三大列表标签，完成了个人技能清单与学习计划页面的开发。

今日核心知识点回顾：

无序列表<ul>：用于展示不分先后的并列内容，默认带实心圆点
有序列表<ol>：用于展示有顺序的步骤 / 排名，默认带数字编号
列表项<li>：列表的基本单元，必须嵌套在 ul/ol 内部，支持内容嵌套
列表使用规范：语义优先、结构规范、合理嵌套

学习进度：已完成 HTML 列表标签（3/8），距离成为初级前端工程师还有 27 天！

💡 如果你觉得这篇文章对你有帮助，欢迎点赞👍+ 收藏⭐+ 关注我，后续会持续更新 30 天前端入门系列文章。有任何问题都可以在评论区留言，我会一一回复。

📚 专栏导航：30 天从入门到前端开发工程师：每日精进实战指南

海漫浩浩，我亦苦作舟！大家一起学习，一起进步！🚀

【30天-从前端入门到前端开发工程师Day3】告别死记硬背！HTML列表标签有序/无序实战详解，导航栏底层实现（源码+面试问答）

前言