HTML如何创建列表？ul和ol标签使用教程

HTML中的列表标签不仅是页面排版工具，更是传递语义、提升可访问性与协作效率的关键——正确使用`

`和`

`能明确表达“并列无序”或“严格有序”的真实意图，让屏幕阅读器精准播报、SEO爬虫准确理解、团队成员一目了然；而错误嵌套、滥用样式掩盖语义、在列表中混入非法元素或交互控件不补足角色声明等常见误区，不仅破坏结构完整性，更会直接损害残障用户的浏览体验。真正的专业，始于对每一个`
1. `为何存在、为何被包裹的清醒认知。

怎么用

和
写出语义正确的列表

浏览器不关心你写的是

还是
，但屏幕阅读器、SEO 爬虫和协作同事会在意。关键不是“能不能显示”，而是“是否表达了真实意图”。

无序列表

表示项目之间没有顺序依赖（比如菜单项、标签云）；有序列表
表示步骤、排名或时间先后（比如安装流程、排行榜）。别因为“看着都带点/数字”就混用。
• 里只能直接放
  • ，不能塞

    或

    （会触发 HTML5 的隐式闭合，导致结构错乱）
  • 支持 start、reversed、type 属性，但 type="A" 在部分旧 Android WebView 中失效，慎用于关键编号逻辑
    1. 嵌套时，子列表必须完整包裹在父
    2. 内部，而不是跟在后面——否则语义断裂，辅助技术可能跳过子项

  里面能写什么？哪些内容会破坏可访问性

• 是流内容容器，合法内容很多，但常见误用是往里塞交互控件却不补语义。
  • 如果
  • 里有 或 ，且它本身承担主要操作（比如“删除这项”），建议加 role="listitem" 显式声明，避免某些读屏器忽略父级
    不要用
    模拟段落缩进——

    + CSS text-indent 更准确；用列表假装排版，会让 AT 用户听到一堆无意义的“列表项 1”“列表项 2”

    不支持 value 属性（那是

    里才有的），写上去浏览器会忽略，别白费劲

  CSS 重置 list-style 后，序号/符号还存在吗

  设置 list-style: none 只是隐藏视觉符号，

  的计数逻辑、
  的语义层级依然保留。这对无障碍很关键——隐藏样式 ≠ 删除语义。
  • 用 list-style-type: none + 自定义伪元素（::marker）能精细控制序号样式，但 ::marker 在 Safari 15.4 之前不支持 content 动态值
  • 如果彻底去掉编号（比如想让
    行为像
    ），别只靠 CSS，直接改标签为
    ——语义比样式优先
    • 用 display: flex 或 display: grid 布局
    • 时，list-style 仍生效，但位置可能错位；此时需配合 list-style-position: inside 或伪元素手动对齐

    为什么用

    包裹导航链接比用
    更好

    不是因为“更标准”，而是因为导航本质是一组并列、无顺序的入口项，

    天然匹配这个含义。
    • 屏幕阅读器遇到