正在加载...

HTML 列表

配料菜单、早晨流程、功能要点和打包清单用列表更容易扫读。HTML 提供两种日常结构：无序列表和有序列表。在 plug-in 警示（历史说明、无代码示例）之后，本课回到几乎每张内容页都会复用的动手标记。把列表看作集合与顺序的含义——而不是多列 layout 的捷径。

列表用来做什么

列表把一组相关条目标成一个组。浏览器和辅助技术可以播报有多少项，并逐项浏览。这种结构有助于略读、大纲和食谱。若用段落里随意的破折号假装项目符号，或仅为把文字塞进视觉列而硬拉 ul，含义就会消失。只有内容确实是集合或序列时才选用列表标记。装饰性间距与网格 layout 留给之后的 CSS。

直接回答

  • ul — 无序列表（浏览器默认项目符号）
  • ol — 有序列表（默认编号）
  • li — 每个列表项
    需要子项时，把另一个 ul 或 ol 放进某个 li 里。不要让 li 漂在父列表外面。闭合标签必须按打开的逆序嵌套，尤其是在某一步下加了子列表之后。

何时用哪种列表

选择与你所写含义匹配的元素，而不是指望 CSS 之后带来的外观。项目符号和数字只是默认呈现；HTML 的决定是：顺序是否属于含义的一部分。

📊 初学者的 ul 与 ol

Need Prefer Why
相关项且无必需顺序 ul 顺序不是含义的一部分
按顺序的步骤、排名或说明 ol 序列是含义的一部分
某项下的子要点 nest ul/ol inside that li 保持层次诚实
页面栏或侧栏 layout not lists alone 之后用 CSS 与结构 layout

无序列表

购物式项目符号列表是经典的 ul 演示。每个条目是一个 li。当条目彼此平级时从这里开始——水果名、爱好标签，或打乱顺序也不影响课程的功能亮点。

Unordered list

html
HTML Code 
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>

阅读无序示例

  • ul 打开无序列表容器
  • 每个 li 是该组中的一项
  • 闭合标签必须正确嵌套：先结束每个 li，再关闭 ul
  • 默认项目符号是浏览器样式；之后 CSS 可改标记，但 HTML 含义仍是「无序集合」
  • 空的 li 和漏写闭合是常见笔误——尽早查看页面以便发现

带嵌套子列表的有序列表

编号步骤常常需要在某一步下加一小撮项目符号——要创建的文件、要打开的工具，或仅该步的材料。把内层列表放进该步的 li 里，而不是作为整个 ol 旁边的兄弟。外层编号保持可读，内层项目符号澄清细节。

Ordered list with a nested list

html
HTML Code 
<ol>
<li>Open the editor</li>
<li>
Create files
<ul>
<li>index.html</li>
<li>styles.css</li>
</ul>
</li>
<li>Save and refresh</li>
</ol>

阅读嵌套示例

  • 外层 ol 按顺序给主步骤编号
  • 第二个 li 含有引导文字加上子级 ul
  • 内层 li 属于嵌套的 ul；该 ul 在父级 li 关闭前关闭
  • 嵌套块结束后，第三步继续外层有序序列
  • 此模式可加深嵌套，但初学者树保持浅层，使开闭顺序一目了然
  • 若编号看起来「不对」，检查是否过早关闭了 li 并把嵌套列表推到了外面

先含义，后样式

浏览器无需额外 CSS 就会画出项目符号和编号。这种便利诱使人把列表当成缩进机器或假侧栏。在这里抵制。若内容是集合或序列，即使尚未重设标记样式，列表标记也是正确的语义选择。若需要并排卡片、导航栏网格或杂志栏，请等待 CSS 与结构 layout 课程——不要只因菜单有时会精心样式化列表，就把 ul 扭成页面框架。

无障碍与扫读习惯

列表有助于略读，也帮助辅助技术播报「共三项的列表」等短语。尽量让每个 li 聚焦一个想法。除非内容真需要那种深度，否则不要把大段无关段落塞进每一项。仅在层次真实时嵌套——仅为缩进而假嵌套会迷惑人和工具。列表上方的短标题常常能在第一个项目符号出现前说明这组内容是什么。

在编辑器中练习

  1. 做一个含三项爱好的 ul（或三种食物——条目保持简短）。
  2. 按你真实执行的顺序做一个含三步早晨流程的 ol。
  3. 在其中一个 li 下嵌套一个小 ul（例如要打开的文件或要拿的工具）。
  4. 心里校验：每个 li 都在 ul 或 ol 内；嵌套列表在某个 li 内。
  5. 互换一种列表类型（ul ↔ ol），并问含义是否仍匹配内容。
  6. 在浏览器中查看页面，确认尚未写任何 CSS 时也出现项目符号/编号。
  7. 故意弄坏一次嵌套，观察大纲有多不对，然后修好闭合。

容易犯的错

  • 在任何 ul/ol 外写 li（孤儿项）
  • 仅为缩进随意段落或伪造栏而用列表
  • 忘记按正确顺序关闭嵌套列表
  • 把嵌套 ul 放成 li 的兄弟，而不是放进某个 li
  • 不考虑含义就对无序项选 ol（或对严格步骤编号选 ul）
  • 从只讲 layout、把 ul 当菜单网格却不先教语义的教程复制列表标记
  • 长嵌套块之后忘了关闭外层列表

小结

  • ul + li 用于无序集合（默认项目符号）
  • ol + li 用于有序序列（默认编号）
  • 把子列表嵌进 li，不要放在父列表旁边
  • 选择与含义匹配的列表类型
  • 不要用列表代替 CSS layout 栏
  • 在 plug-in 历史说明之后，列表让你回到会持续复用的日常结构 HTML

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程