HTML5标准列表用(无序)和(有序)标签,均需嵌套项;语义决定用途:表并列项,表逻辑顺序;嵌套须严格闭合,禁直接子元素嵌套;横向布局优先用flex/grid;术语定义用。

怎么用
和
写出标准列表
HTML5 里做静态网页列表,核心就两个标签:(无序列表)和 (有序列表)。它们都必须用 包裹每一项,不能直接往里面塞文字或其它块级元素(比如 ),否则语义错乱、样式难控。
正确写法示例:
- JavaScript
- CSS
- HTML5
- 需求分析
- 原型设计
- 前端开发
注意: 默认渲染为圆点, 默认是阿拉伯数字。这不是“样式问题”,而是浏览器对语义的默认呈现。
和
的本质区别不是“有没有序号”
关键在语义,不是视觉。搜索引擎、读屏软件、代码审查工具都依赖这个区分。
立即学习“前端免费学习笔记(深入)”;
-
表示项目之间无先后、无权重、可互换,比如技术栈列表、菜单项、标签云 -
表示项目之间有逻辑顺序、步骤依赖、数值意义,比如安装步骤、排行榜、法律条款编号 - 即使你用 CSS 把
的数字改成圆点,它仍是有序列表——语义没变,只是视觉被覆盖了 - 反过来,如果把购物清单写成
,但实际顺序不重要,反而会误导辅助技术用户
常见踩坑:嵌套、属性滥用、和 CSS 混淆
很多人以为加个 type 或 start 就算“高级用法”,其实容易引发兼容和可访问性问题。
-
type属性(如)在 HTML5 中已过时,应改用 CSS 的list-style-type -
start属性虽仍有效,但只适用于纯数字序列;若中间插入,后续编号可能意外跳变,尤其在旧版 Safari 中表现不一致 - 嵌套列表必须严格闭合:
是错误的——- 一级
- 一级
- 二级
不能直接子元素是另一个,必须包在里 - 想让列表横向排列?别用
float或inline硬改,优先用display: flex或display: grid,并保留原始语义结构
静态页里要不要加
?什么场景用
当列表不是“一堆并列项”,而是“术语 + 定义”或“键值对”时, 才是语义正确的选择,比硬套 更合适。
例如配置说明、API 参数表、FAQ:
- timeout
- 请求超时时间,单位毫秒,默认 5000
- retry
- 失败重试次数,默认 2
注意: 和 必须成对出现在 内,且一个 可对应多个 (比如同义词解释),但不能反过来。
真正需要关注的,从来不是“怎么做出序号”,而是“浏览器和用户凭什么相信你列的这些内容有逻辑关系”。静态页没有后端校验,语义写错,就真的错了。










