列表必须用或包裹，纯文本直接写在内无效；有序列表可用start和type属性调整编号，嵌套需语义正确且≤3层，必须显式包裹内容以确保语义、SEO和无障碍。
直接用 <ul></ul> 和 <ol></ol> 就能插入，但必须套上 <li>，否则浏览器不认作列表项。
无序列表必须用 <ul></ul> 包裹 <li>
常见错误是把文字直接写在 <ul></ul> 里，比如：
<ul> 苹果 香蕉 </ul>
这样不会渲染成带圆点的列表——浏览器会忽略这些纯文本。正确写法是每个项目都得用 <li> 包一层：
- 苹果
- 香蕉
- 橙子
要点：
立即学习“前端免费学习笔记（深入）”；
-
<ul></ul>内部只允许出现<li>（或嵌套其他列表），不能有直接文本、<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<div> 等 <li>旧版 HTML 允许 <code>type属性（如<ul type="square"></ul>），但已废弃，应改用 CSS 的list-style-type - 符号默认是实心圆（
disc），想换空心圆或方块，加 CSS：ul { list-style-type: circle; } - 配置环境
- 安装依赖
- 运行测试
-
start是整数，不是字符串；type="a"表示小写字母，"A"是大写，"i"是小写罗马数字 -
type属性可作用于整个<ol></ol>，也可单独加在某个<li>上（但兼容性差，不推荐） - 如果列表被 JS 动态插入或 DOM 操作打乱顺序，
start不会自动重算，得手动控制 - 前端框架
- 后端语言
- Node.js
- Python
- 数据库
- 嵌套层级建议 ≤ 3 层，再深就该考虑用
<dl></dl>或表格替代 - 嵌套时，子
<ul></ul>或<ol></ol>必须完整闭合，不能漏掉 - CSS 中
list-style-position: inside会让符号进入内容区，嵌套时易造成文字错位，慎用
有序列表靠 <ol></ol> 自动编号，但起始值和类型要小心
浏览器默认从 1 开始用阿拉伯数字编号，但实际开发中常需要调整。比如步骤从第 3 步开始，或用字母代替数字：
注意点：
嵌套列表要语义对齐，别为了缩进硬套
嵌套本身很简单：在某个 <li> 里再放一个 <ul></ul> 或 <ol></ol>。但容易出问题的是语义错位：
这里第二项“后端语言”是主列表项，子项是具体语言——逻辑清晰。反例是把子列表当装饰用，比如只为缩进而套一层 <ul></ul>，这会破坏屏幕阅读器的理解路径。
最常被忽略的是：列表项必须用 <li> 显式包裹，哪怕内容只是个链接或图片；另外，<ul></ul> 和 <ol></ol> 不是样式容器，它们传递的是「并列」或「顺序」的语义，这点影响 SEO 和无障碍访问，不能只靠 CSS 模拟。
