HTML 列表完全指南：掌握有序、无序与嵌套列表，构建结构化网页内容

HTML 列表完全指南掌握有序、无序与嵌套列表构建结构化网页内容【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本文基于本仓库 HTML/CSS 课程archive/html_css 中的 列表lists课程文档 编写。列表是网页中最常用的内容组织方式——它不仅能呈现项目符号与编号还能构建水平导航栏、商品图片集等结构化内容并在很多场景下取代表格成为展示结构化数据的首选。读完本文你将掌握有序/无序列表的基本语法、列表嵌套技巧、列表元素的语义化用法并通过实战练习将列表应用到真实页面中。列表在 Web 中的地位有序列表ordered list和无序列表unordered list在大多数网站中被大量使用。它们的作用远不止展示项目符号和数字编号这么简单它们是构建水平导航栏的常用手段导航项本质上就是一组并列的列表项它们适合组织长集合对象例如一组待售商品图片的陈列它们经常取代表格成为展示结构化内容的首选方式。正如仓库 HTML/CSS 课程大纲 所示本课程在显示与输入数据Displaying and Inputting Data模块中将有序和无序列表Ordered and Unordered Lists与 表格Tables in HTML、HTML 表单 并列为三大数据展示手段足见其在网页结构中的重要地位。学习目标在深入学习之前先明确本章需要掌握的核心能力列表的基本语法是什么如何在列表内部嵌套列表除此之外结合仓库中更完整的 新版列表课程你还需要掌握如何创建无序列表unordered list如何创建有序列表ordered list如何选择正确的列表元素让页面具备良好的语义与可访问性。无序列表Unordered List当列表项之间的顺序无关紧要时使用无序列表。典型的例子是购物清单——你不需要按特定顺序购买商品。无序列表使用ul元素创建列表中的每一项使用列表项元素lilist item包裹ul li牛奶/li li鸡蛋/li li面包/li /ul无序列表中的每个列表项默认以**圆点bullet point**开头。在仓库的 新版列表课程 中这一部分被进一步强调只要你想表达一组顺序无关的条目ul就是正确的选择。有序列表Ordered List当列表项的顺序很重要时使用有序列表。典型的例子包括食谱中一步步的操作说明你最喜欢的 10 部电视剧排名任何编号流程或步骤。有序列表使用ol元素创建列表中的每一项同样使用li元素。与无序列表不同有序列表的每个列表项默认以**数字number**开头ol li预热烤箱至 180°C/li li混合面粉和鸡蛋/li li烘烤 25 分钟/li /ol从仓库的 新版列表课程 可以看出选择ul还是ol的判断标准非常直观顺序是否重要。购物清单用ul烹饪步骤用ol。嵌套列表在列表内部再创建列表原文档的学习目标之一就是掌握如何在列表内部嵌套列表。嵌套列表意味着一个li内部可以再包含另一个完整的ul或ol。这在构建多级菜单、目录结构或带有子项目的复杂清单时非常常见ul li水果 ul li苹果/li li香蕉/li /ul /li li蔬菜 ul li胡萝卜/li li西兰花/li /ul /li /ul嵌套时需注意子列表必须放在父级li内部而不能直接放在ul与li之间浏览器会自动对嵌套层级进行缩进并以不同的项目符号样式区分层级保持良好的缩进习惯能让嵌套结构的层级关系一目了然也便于后续用 CSS 精准选中某一层级。这一元素嵌套形成父子关系的概念在仓库的 元素与标签课程 中有基础铺垫——几乎所有的 HTML 页面元素都是内容被开闭标签包裹的容器嵌套层级的缩进约定每层缩进两个空格能大幅提升代码可读性。语义化与可访问性为什么应该用ul/ol而不是div列表元素的正确使用不仅是排版问题更是**语义化与可访问性accessibility**问题。仓库的 语义化 HTML 课程 明确指出当你想要向用户呈现某种列表时应该使用恰当的列表元素ol、ul或dl及其相关的列表项元素。这不仅能让用户借助辅助技术知道他们何时进入或离开一个列表还能知道列表中有多少项。如果仅仅用div拼接出看起来像列表的内容屏幕阅读器等辅助技术将无法识别其列表结构用户不知道这是一个列表、不知道列表从哪开始到哪结束、也不知道其中包含多少条目。而使用正确的列表元素后辅助技术可以播报列表共 3 项用户可以像操作原生控件一样在列表项间导航语义化标签还有助于搜索引擎更准确地理解页面内容结构。类似的道理同样适用于表格表格课程 提到表格曾是布局唯一手段如今应回归其展示结构化数据的本职——用正确的标签表达正确的内容是贯穿本课程始终的设计原则。补充定义列表Definition List仓库的 语义化 HTML 课程 在推荐列表元素时除了ol和ul还提到了dldefinition list定义列表。定义列表用于呈现术语—描述配对的内容其结构不同于前两者通常由dl、dtdefinition term术语和dddefinition description描述组成dl dtHTML/dt dd超文本标记语言用于定义网页的结构与内容。/dd dtCSS/dt dd层叠样式表用于控制网页的呈现样式。/dd /dl当内容属于名词解释或键值对性质时dl是比ul/ol更贴切的语义选择。实战练习亲手创建四类列表原文档布置了列表的实践作业Assignment。新建一个 HTML 文档在其中创建以下四类列表一个无序购物清单列出你最喜欢的食物一个有序待办清单列出你今天需要完成的事情一个无序清单列出你有朝一日想去的地方一个有序清单列出你最喜欢的 5 部电子游戏或电影Top 5 排名。完成后的 HTML 骨架大致如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title列表练习/title /head body h1购物清单/h1 ul li牛奶/li li鸡蛋/li li面包/li /ul h1今日待办/h1 ol li完成列表练习/li li提交代码/li li休息/li /ol h1想去的地方/h1 ul li京都/li li冰岛/li /ul h1最喜欢的电影 Top 5/h1 ol li电影 A/li li电影 B/li li电影 C/li li电影 D/li li电影 E/li /ol /body /html这个练习与本仓库 食谱项目Project: Recipes 的实战要求一脉相承在该项目中你需要在Ingredients配料部分使用无序列表列出配料在Steps步骤部分使用有序列表列出制作步骤并在首页用一个ul将所有食谱链接组织起来避免链接全部挤在一行。这些项目要求就是本列表课程知识的直接应用场景。知识检查完成学习后请确认你能回答以下问题对应 新版列表课程 的知识检查部分创建无序列表使用哪个 HTML 元素答案ul创建有序列表使用哪个 HTML 元素答案ol在无序列表和有序列表中创建列表项统一使用哪个元素答案li无序列表和有序列表各自的适用场景是什么顺序是否重要如何在列表中嵌套列表将子ul/ol放入父级li内部仓库中的相关资源如果你想继续深入仓库内还有以下与本主题直接相关的内容可供查阅新版列表课程HTML Foundations结构更完整的无序/有序列表教程含 CodePen 示例与知识检查食谱项目将列表用于真实多页面网站的实战项目元素与标签课程理解标签、元素与嵌套关系的基础语义化 HTML 课程列表元素在可访问性与语义化中的角色HTML/CSS 课程大纲了解列表在完整课程体系中的位置课程模板了解本仓库课程文档的统一结构规范。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考