HTML 列表标签有哪些？常用标签与差异
在网页结构中，列表标签提供了清晰的信息分组和层级关系。了解它们的语义对于搜索引擎优化（SEO）和无障碍访问都至关重要。
本节将介绍最常用的三大类列表标签：无序列表（ul）、有序列表（ol）和描述列表（dl），以及如何正确嵌套和使用它们来表达不同的内容结构。
无序列表：UL 及 LI 的基本用法
无序列表（ul）用于展示没有固定顺序的项，通常以圆点、方块或自定义符号表示单项。每个条目必须是一个 <li> 项，子列表可以嵌套在任意 <li> 内，从而实现分层结构。
在可访问性方面，屏幕阅读器会将 <ul> 与其 <li> 逐项朗读，确保用户理解列表的层级和数量。为了保持清晰，建议每个 <li> 内的内容简洁明确，并在需要时使用嵌套的子列表。
<ul><li>项目 A</li><li>项目 B<ul><li>子项 1</li><li>子项 2</li></ul></li><li>项目 C</li>
</ul>有序列表：OL 的使用要点
有序列表（ol）用于需要表达顺序或步骤的内容。默认情况下，列表项以数字标注，start、type等属性可以自定义编号方式，帮助阅读者理解执行顺序。
有序列表在教程、操作步骤、流程描述等情境尤为适用。嵌套的 <ol> 也能清晰呈现主次层级，但应避免在复杂场景中造成阅读混乱，必要时配合合适的段落文本。
<ol type="1" start="1"><li>步骤一</li><li>步骤二<ol><li>子步骤 a</li><li>子步骤 b</li></ol></li><li>步骤三</li>
</ol>描述列表：DL、DT、DD 的含义
描述列表（dl）用于一组术语及其描述的场景。<dt> 表示一个术语，<dd> 则给出该术语的描述。它非常适合构建术语表、问答摘要或词汇解释。
为了可访问性，确保每个 <dt> 与其描述 <dd> 成对出现，且描述内容简洁清晰。对较长的描述，可以把 <dd> 拆分为多段文本段落，提升可读性。
<dl><dt>HTML</dt><dd>一种用于创建网页结构的标记语言</dd><dt>CSS</dt><dd>用于描述网页外观与布局的样式语言</dd>
</dl>嵌套与可访问性
在实际使用中，嵌套列表能够表达更丰富的层级关系，但应确保层级清晰、缩进一致，以便屏幕阅读器正确解析。为提高可访问性，尽量在每个列表层级内提供简短的文本描述，必要时结合 ARIA 属性进行辅助信息标注。
另外，若涉及复杂信息，考虑对关键步骤使用有序列表，对要点信息使用无序列表，混合使用时要避免混乱的标注结构。
其它相关标签的使用建议
HTML 还提供了 <menu>、<li> 的不同上下文用法，但它们在现代网页中的使用场景相对较窄，常见于命令式选单或浏览器扩展的轻量选项。若在语义上需要明确“操作项集合”，可以考虑使用 <menu> 搭配 <li>，并结合 CSS 进行可访问的交互设计。
新手在本地快速运行一个 HTML 文件的完整指南
准备工作：环境与工具
在开始之前，确保你具备一个文本编辑器和一个浏览器。文本编辑器用于编写 HTML；常见选择包括 VSCode、Sublime Text、Notepad++ 等。浏览器用于本地预览，例如 Chrome、Firefox、Edge 等。
对于静态页面，只需要一个 .html 文件即可在本地打开查看。为了提升开发体验，你可以追加一个简单的本地服务器，用于模拟真实环境并解决跨域等问题。
编写一个简单的 HTML 文件
下面是一个最小可运行的模板，你可以将其保存为 index.html，并使用浏览器直接打开。请注意 、、、 等基本结构，以及字符集设定以确保文本正确显示。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单示例</title>
</head>
<body><h2>欢迎使用 HTML 列表</h2><ul><li>无序项 1</li><li>无序项 2</li></ul><h3>有序列表示例</h3><ol><li>步骤一</li><li>步骤二</li></ol>
</body>
</html>本地查看：直接打开还是使用本地服务器
如果只是查看一个简单的静态 HTML 文件，直接使用文件协议（file://）打开即可，例如在浏览器中将 index.html 拖放到浏览器窗口。
为了获得更贴近真实环境的体验，或者在后续添加脚本、掌握 AJAX 等内容时，建议使用本地服务器。这样可以避免跨域限制并模拟服务器行为。
# 使用 Python 搭建本地服务器（推荐简单快速）
cd 路径/到/你的/项目
python3 -m http.server 8000
# 然后在浏览器访问 http://localhost:8000/index.html
# 使用 Node.js 的 http-server（需先安装 Node.js）
npm install -g http-server
http-server . -p 8000
# 然后在浏览器访问 http://localhost:8000/index.html
使用常用工具快速上线
如果你已经有一个以上的前端项目，推荐使用更高效的本地服务器工具：http-server、Live Server（VSCode 插件） 等。它们能够实时刷新页面、支持路径别名等便利功能。
通过以下步骤可以快速启动一个本地服务并查看页面：
# 使用 http-server 运行当前目录
http-server . -p 8080
# 打开 http://localhost:8080/index.html
常见问题排错
如果页面无法正确加载，先确认 文件路径正确，以及浏览器缓存是否需要刷新。对于需要连接外部资源的情况，请确保网络连通性和资源链接有效性。
在使用本地服务器时，遇到端口冲突或权限问题，可以尝试更换端口，例如 8000、8080、3000 等；确保防火墙没有阻止该端口访问。
