第09篇：列表三种形态

第09篇列表三种形态列表是网页中最常用的信息组织方式之一。HTML 提供了三种列表类型分别适用于不同的场景。掌握它们让你的内容结构清晰、层次分明。学习目标掌握无序列表ul、有序列表ol、定义列表dl的用法学会嵌套列表构建层级结构理解ol的type、start、reversed属性能够根据内容语义选择正确的列表类型了解列表的默认样式及语义化注意事项核心知识点一、无序列表ulli无序列表Unordered List用于表示无顺序关系的项目集合每个项目前有一个默认的项目符号通常是圆点。ulliHTML/liliCSS/liliJavaScript/li/ul默认渲染效果• HTML • CSS • JavaScriptul的适用场景导航菜单项功能特性列表商品规格项任何不强调顺序的项目集合二、有序列表olli有序列表Ordered List用于表示有顺序关系的项目集合每个项目前有数字或字母编号。olli准备食材/lili清洗处理/lili烹饪加工/lili装盘上桌/li/ol默认渲染效果1. 准备食材 2. 清洗处理 3. 烹饪加工 4. 装盘上桌ol的专属属性属性作用示例效果type编号类型typeAA. B. C.start起始编号start55. 6. 7.reversed倒序编号reversed4. 3. 2. 1.!-- 大写字母编号 --oltypeAli选项一/lili选项二/li/ol!-- 从第 5 项开始 --olstart5li第五条/lili第六条/li/ol!-- 倒序排列 --olreversedli第一名/lili第二名/lili第三名/li/oltype取值值编号样式示例1阿拉伯数字默认1. 2. 3.A大写字母A. B. C.a小写字母a. b. c.I大写罗马数字I. II. III.i小写罗马数字i. ii. iii.⚠️注意虽然type属性可以控制编号样式但现代前端开发更推荐使用CSSlist-style-type来控制视觉效果HTML 的type仅作为语义补充。三、定义列表dldtdd定义列表Definition List用于表示术语-定义的键值对关系。dldtHTML/dtdd超文本标记语言用于创建网页的标准语言。/dddtCSS/dtdd层叠样式表用于描述网页的外观和格式。/dddtJavaScript/dtdd一种脚本语言用于实现网页的交互和动态效果。/dd/dl默认渲染效果HTML 超文本标记语言用于创建网页的标准语言。 CSS 层叠样式表用于描述网页的外观和格式。 JavaScript 一种脚本语言用于实现网页的交互和动态效果。dl的组成标签含义类比dlDefinition List定义列表整个字典dtDefinition Term定义术语词条如HTMLddDefinition Description定义描述词条解释dl的适用场景术语表 / 词汇表元数据展示作者、日期、分类FAQ问题-答案产品参数属性-值!-- FAQ 示例 --dldt什么是 HTML/dtddHTML 是超文本标记语言是网页的骨架。/dddt学习 HTML 需要什么基础/dtdd不需要编程基础只需要一台电脑和一颗好奇的心。/dd/dl一个dt可以对应多个dddldt作者/dtdd张三/dddd李四/dddd王五/dd/dl四、嵌套列表列表可以嵌套在其他列表项中构建层级结构。ulli前端开发ulliHTML/liliCSSulliFlexbox/liliGrid/li/ul/liliJavaScript/li/ul/lili后端开发ulliNode.js/liliPython/li/ul/li/ul嵌套列表的注意事项嵌套的列表必须是外层li的子元素嵌套列表通常会有不同的缩进和项目符号样式ul里可以嵌套olol里也可以嵌套ul!-- ✅ 正确嵌套列表在 li 内部 --ulli水果ulli苹果/lili香蕉/li/ul/li/ul!-- ❌ 错误嵌套列表在 li 外面 --ulli水果/liulli苹果/li/ul/ul五、三种列表选择指南要展示一组项目 │ ├── 有明确的顺序/排名 │ └── → ol有序列表 │ 步骤说明、排行榜、操作顺序 │ ├── 是术语-定义的关系 │ └── → dl定义列表 │ 词汇表、FAQ、产品参数、元数据 │ └── 无顺序只是项目集合 └── → ul无序列表 导航菜单、功能列表、商品特性选择对比示例内容列表类型原因制作蛋糕的步骤ol有先后顺序网站导航菜单ul无顺序关系技术词汇表dl术语-定义关系产品功能列表ul功能之间无顺序比赛排名ol有排名顺序产品规格参数dl属性-值键值对六、列表的默认样式与 CSS浏览器默认样式/* ul 默认样式 */ul{list-style-type:disc;/* 实心圆点 */padding-left:40px;/* 左侧缩进 */}/* ol 默认样式 */ol{list-style-type:decimal;/* 阿拉伯数字 */padding-left:40px;}/* dl 默认样式 */dl{margin:1em 0;}dd{margin-left:40px;/* dd 默认有左缩进 */}常见 CSS 列表样式了解即可/* 去掉列表符号 */ul{list-style:none;padding:0;}/* 改变符号样式 */ul{list-style-type:square;/* 方块 *//* 其他circle空心圆、disc实心圆默认 */} 第15篇会详细学习 HTML5 语义化导航其中nav包裹的ul是最常见的导航结构。动手练习练习 1列表类型辨析判断以下场景应该用哪种列表并说明理由场景列表类型理由一份沙拉的食材清单注册账号的操作步骤编程语言术语表月度销售排行榜网站页脚的服务链接产品详细规格重量、尺寸、颜色练习 2制作目录结构用嵌套列表展示你的电脑桌面文件夹结构使用无序列表ul至少包含 3 层嵌套包含文件夹和文件两种类型合理命名结构清晰练习 3创建食谱页面创建一个食谱页面综合运用三种列表用ol展示制作步骤有顺序用ul展示所需食材无顺序用dl展示营养信息术语-定义每个列表至少包含 5 项整体结构用h1食谱名h2各区块标题组织常见误区 ⚠️误区真相“用br或p模拟列表”列表有语义价值不要用换行或段落冒充列表“嵌套列表可以放在li外面”嵌套列表必须是li的直接子元素或后代元素“dl只能用于字典/词汇表”dl适合任何键值对关系FAQ、产品参数、元数据等“ol的type是最佳编号控制方式”样式控制优先用 CSSlist-style-typeHTMLtype仅做语义补充“列表里只能放文字”li和dd中可以放任何流式内容段落、图片、链接、甚至其他列表“ul和ol可以混用嵌套”可以ul里可以嵌套olol里也可以嵌套ul“dl里dt和dd必须一对一”一个dt可以对应多个dd也可以多个dt对应一个dd速查卡片 三种列表对比类型标签用途默认外观无序列表ulli无顺序的项目• 圆点有序列表olli有顺序的项目1. 数字定义列表dldtdd术语-定义缩进描述列表选择速查有顺序 → ol 键值对 → dl 其他 → ulol属性速查属性示例效果type1typeAA. B. C.typeatypeii. ii. iii.start5从 5 开始reversed倒序嵌套列表结构ulli父级项ul!-- 嵌套列表必须在 li 内部 --li子级项/li/ul/li/uldl多对多关系dldt术语A/dtdd定义1/dddd定义2/dd!-- 一个 dt 对应多个 dd --dt术语B/dtdt术语C/dt!-- 多个 dt 对应一个 dd --dd共同定义/dd/dl列表使用 checklist根据内容语义选择ul/ol/dl嵌套列表放在li内部不要仅用列表符号做装饰语义优先dl考虑用于 FAQ、产品参数、元数据等场景扩展阅读MDN:元素MDN:元素MDN:元素MDN:元素下一步列表组织了信息的层级。进入 第10篇表格基础与结构学习用表格展示二维数据。