HTML列表标签怎么创建_HTMLulol元素列表功能详解【汇总】

语义正确的列表需按意图选用：无序列表用于无顺序依赖项（如菜单），有序列表用于有顺序项（如步骤）；嵌套时子列表须完整置于父内，中禁用等非法子元素。

怎么用 <ul></ul> 和 <ol></ol> 写出语义正确的列表

浏览器不关心你写的是 <ul></ul> 还是 <ol></ol>，但屏幕阅读器、seo 爬虫和协作同事会在意。关键不是“能不能显示”，而是“是否表达了真实意图”。

无序列表 <ul></ul> 表示项目之间没有顺序依赖（比如菜单项、标签云）；有序列表 <ol></ol> 表示步骤、排名或时间先后（比如安装流程、排行榜）。别因为“看着都带点/数字”就混用。

• <ul></ul> 里只能直接放 <li>，不能塞 <p></p> 或 <div>（会触发 html5 的隐式闭合，导致结构错乱） <li> <code><ol></ol> 支持 start、reversed、type 属性，但 type="A" 在部分旧 android webview 中失效，慎用于关键编号逻辑
• 嵌套时，子列表必须完整包裹在父 <li> 内部，而不是跟在后面——否则语义断裂，辅助技术可能跳过子项

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

<li> 是流内容容器，合法内容很多，但常见误用是往里塞交互控件却不补语义。

• 如果 <li> 里有 <button></button> 或 <a></a>，且它本身承担主要操作（比如“删除这项”），建议加 role="listitem" 显式声明，避免某些读屏器忽略父级 <li>
• 不要用 <li> 模拟段落缩进——<p></p> + CSS text-indent 更准确；用列表假装排版，会让 AT 用户听到一堆无意义的“列表项 1”“列表项 2”
• <li> 不支持 value 属性（那是 <ol></ol> 里才有的），写上去浏览器会忽略，别白费劲

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

设置 list-style: none 只是隐藏视觉符号，<ol></ol> 的计数逻辑、<ul></ul> 的语义层级依然保留。这对无障碍很关键——隐藏样式 ≠ 删除语义。

立即学习“前端免费学习笔记（深入）”；

• 用 list-style-type: none + 自定义伪元素（::marker）能精细控制序号样式，但 ::marker 在 safari 15.4 之前不支持 content 动态值
• 如果彻底去掉编号（比如想让 <ol></ol> 行为像 <ul></ul>），别只靠 CSS，直接改标签为 <ul></ul>——语义比样式优先
• 用 display: flex 或 display: grid 布局 <li> 时，list-style 仍生效，但位置可能错位；此时需配合 list-style-position: inside 或伪元素手动对齐

为什么用 <ul></ul> 包裹导航链接比用 <div> 更好 <p>不是因为“更标准”，而是因为导航本质是一组并列、无顺序的入口项，<code><ul></ul> 天然匹配这个含义。

• 屏幕阅读器遇到 <nav><ul><li> <a></a> </li></ul></nav> 结构，会主动播报“导航栏，列表，共 5 项”，用户可快速跳过整块区域；换成 <div> 就只剩逐个读链接 <li>JavaScript 操作时，<code>document.querySelectorAll('nav ul li') 比 document.querySelectorAll('nav div a') 更稳定——后者容易误选图标、文字等非导航子节点
• 某些 CMS 或静态站生成器（如 Jekyll 的 {% for item in site.nav %}）默认输出 <ul></ul>，硬改成 <div> 可能破坏模板逻辑 <p>真正容易被忽略的点：列表项之间的空格/换行在 HTML 中会被压缩成单个空格，如果用 inline-block 布局 <code><li> 又没处理间隙，会出现意外的空白——这不是语义问题，但会干扰视觉对齐，得用 font-size: 0 或注释掉换行来解决。