HTML5标准列表用（无序）和（有序）标签，均需嵌套项；语义决定用途：表并列项，表逻辑顺序；嵌套须严格闭合，禁直接子元素嵌套；横向布局优先用flex/grid；术语定义用。
怎么用 <ul></ul> 和 <ol></ol> 写出标准列表
HTML5 里做静态网页列表，核心就两个标签：<ul></ul>（无序列表）和 <ol></ol>（有序列表）。它们都必须用 <li> 包裹每一项，不能直接往里面塞文字或其它块级元素（比如 <p></p>），否则语义错乱、样式难控。
正确写法示例：
<ul> <li>JavaScript</li> <li>CSS</li> <li>HTML5</li> </ul> <ol> <li>需求分析</li> <li>原型设计</li> <li>前端开发</li> </ol>
注意：<ul></ul> 默认渲染为圆点，<ol></ol> 默认是阿拉伯数字。这不是“样式问题”，而是浏览器对语义的默认呈现。
<ul></ul> 和 <ol></ol> 的本质区别不是“有没有序号”
关键在语义，不是视觉。搜索引擎、读屏软件、代码审查工具都依赖这个区分。
立即学习“前端免费学习笔记（深入）”；
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
-
<ul></ul>表示项目之间无先后、无权重、可互换，比如技术栈列表、菜单项、标签云 -
<ol></ol>表示项目之间有逻辑顺序、步骤依赖、数值意义，比如安装步骤、排行榜、法律条款编号 - 即使你用 CSS 把
<ol></ol>的数字改成圆点，它仍是有序列表——语义没变，只是视觉被覆盖了 - 反过来，如果把购物清单写成
<ol></ol>，但实际顺序不重要，反而会误导辅助技术用户
常见踩坑：嵌套、属性滥用、和 CSS 混淆
很多人以为加个 type 或 start 就算“高级用法”，其实容易引发兼容和可访问性问题。
-
type属性（如<ol type="A"></ol>）在 HTML5 中已过时，应改用 CSS 的list-style-type -
start属性虽仍有效，但只适用于纯数字序列；若中间插入<li value="5">，后续编号可能意外跳变，尤其在旧版 Safari 中表现不一致 - 嵌套列表必须严格闭合：
<ul> <li>一级</li> <li>一级</li> <ul><li>二级</li></ul> </ul>是错误的——<ul></ul>不能直接子元素是另一个<ul></ul>，必须包在<li>里 - 想让列表横向排列？别用
float或inline硬改，优先用display: flex或display: grid，并保留原始语义结构
静态页里要不要加 <dl></dl>？什么场景用
当列表不是“一堆并列项”，而是“术语 + 定义”或“键值对”时，<dl></dl> 才是语义正确的选择，比硬套 <ul></ul> 更合适。
例如配置说明、API 参数表、FAQ：
<dl> <dt>timeout</dt> <dd>请求超时时间，单位毫秒，默认 5000</dd> <dt>retry</dt> <dd>失败重试次数，默认 2</dd> </dl>
注意：<dt></dt> 和 <dd></dd> 必须成对出现在 <dl></dl> 内，且一个 <dt></dt> 可对应多个 <dd></dd>（比如同义词解释），但不能反过来。
真正需要关注的，从来不是“怎么做出序号”，而是“浏览器和用户凭什么相信你列的这些内容有逻辑关系”。静态页没有后端校验，语义写错，就真的错了。
