HTML中li列表项用法 HTML中li标签在布局中技巧

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

• 横向列表别直接改
• 的 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 层

嵌套本身合法，但可读性、可维护性和无障碍体验会随深度快速下降。屏幕阅读器靠

/
判断层级，超过 3 层容易迷失。

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

<ul>
  <li>一级项
    <ul>
      <li>二级项
        <ul>
          <li>三级项</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

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

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

     value（仅限

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

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

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

     真正容易被忽略的是：语义不是“看起来像列表”，而是“告诉浏览器和辅助技术这是什么”。哪怕你用 CSS 把

     渲染成横向导航栏，只要结构合规，读屏器仍会正确播报“列表，共 4 项”。这点在表单错误提示、筛选标签、多选菜单里尤为关键。

     文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中li列表项用法 HTML中li标签在布局中技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。