必须嵌套在或内，孤立使用会导致结构错乱、css失效、无障碍问题；嵌套层级建议≤3层；list-style-type仅对display:list-item生效；废弃value/type属性，改用css或html5属性控制。

li 必须嵌套在 ul 或 ol 里，单独写会出问题

浏览器看到孤立的 <li> 会自动容错补全，但补得不可控——可能塞进前一个 <ul></ul> 末尾，也可能新建一个无样式容器。结果就是结构错乱、CSS 选中失效、屏幕阅读器读错层级。

常见错误现象：<li> 直接写在 里，以为能显示圆点，实际可能没缩进、没符号，甚至被压到页面顶部。

• 永远用 <ul>内容</ul> 或 <ol>内容</ol> 包裹 <li>
• 嵌套列表时，内部才能放另一个 <ul></ul>，不能把 <ul></ul> 放在 <ul></ul> 外面再塞 <li>
• 空列表 <ul></ul> 是合法的，不会报错，但也不会渲染任何东西

list-style-type 不生效？先看 display 是否被改掉

list-style-type 只对 display: list-item 的元素生效，而 <li> 默认就是它；一旦你给 <li> 设了 display: flex 或 display: inline，圆点/数字就消失了——不是属性失效，是元素不再被视为“列表项”。

使用场景：想让列表横向排列、加图标、或和按钮并排时，容易误删默认 display。

• 横向列表别直接改 <li> 的 display，优先用 ul { display: flex } + li { margin-right: 1em }
• 若必须用 display: inline-block，记得显式加回 list-style-position: inside 和 vertical-align: top 对齐符号
• list-style: none 是清空符号+位置+图片三合一，比只设 list-style-type: none 更彻底

嵌套列表要缩进书写，且语义层级不能超 3 层

嵌套本身合法，但可读性、可维护性和无障碍体验会随深度快速下降。屏幕阅读器靠 <ul></ul>/<ol></ol> 判断层级，超过 3 层容易迷失。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

正确写法示例（缩进非强制但强烈建议）：

• 一级项
  • 二级项
    • 三级项

• 嵌套的 <ul></ul> 或 <ol></ol> 必须完整位于父级 <li> 的开始与结束标签之间
• 不要用 <div> 替代嵌套，否则语义断裂，<code>role="list" 等 ARIA 手动补救反而干扰原生行为
• 如果只是视觉分组（比如同一栏里两组标签），用两个独立 <ul></ul>，而非一个 <ul></ul> 套两层

value 和 type 属性已废弃，别再用

value（仅限 <ol></ol>）和 type 属性在 HTML4.01 已被废弃，HTML5 完全不支持。现代实践中必须用 CSS 控制编号样式或起始值。

替代方案更可控、兼容性更好：

• 起始编号用 <ol start="5"></ol>，倒序用 <ol reversed></ol>（仅 <ol></ol> 支持）
• 字母/罗马数字编号优先用 CSS counter-reset + ::marker，比旧 type="A" 更灵活
• 自定义图标用 list-style-image 或伪元素 ::before，后者控制粒度更高

真正容易被忽略的是：语义不是“看起来像列表”，而是“告诉浏览器和辅助技术这是什么”。哪怕你用 CSS 把 <ul></ul> 渲染成横向导航栏，只要结构合规，读屏器仍会正确播报“列表，共 4 项”。这点在表单错误提示、筛选标签、多选菜单里尤为关键。