HTML列表应使用语义化标签和,而非CSS实现;判断依据是内容是否存在固有次序:用于有序场景(步骤、排名、时间线),用于并列关系;必须嵌套在或内,禁止裸放;样式应通过CSS控制,避免废弃的HTML属性;需兼顾无障碍与SEO,确保语义准确。

HTML 列表不是靠 CSS 实现的,而是用原生语义化标签: 和 。用错标签或嵌套不当,会导致语义丢失、屏幕阅读器误读、SEO 减分,甚至影响后续 CSS 选择器的精准控制。
用
还是
?看内容是否有逻辑顺序
关键判断依据不是“要不要编号”,而是“项与项之间是否存在固有次序”:
-
:适合步骤(如安装流程)、排名(如 Top 5)、时间线(如版本更新日志)——浏览器默认渲染为 1. 2. 3.,但序号可被type或 CSScounter-reset修改 -
:适合并列关系(如导航菜单、功能特性列表、标签集合)——默认用圆点●,但本质是“无序”,不是“不能编号” - 别为了视觉编号硬套
:比如“热门城市:北京、上海、广州”,城市间无先后,该用+ CSS 自定义标记
必须直接嵌套在
或
内,不能裸放
常见错误是把
注意: 功能列表:底层程序与前台页面分离的效果,对页面的修改无需改动任何程序代码。完善的标签系统,支持自定义标签,公用标签,快捷标签,动态标签,静态标签等等,支持标签内的vbs语法,原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统,可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率,稳定性和容错性,即使模版中有错误的标签也不会影响页面的显示。所有的标 仅靠视觉样式无法传达列表结构。辅助技术依赖 HTML 语义: 直接写在 或 ),但 DOM 结构不可控,CSS 选择器可能失效:
支持嵌套,但子列表必须包在父 内部,而非同级:
自定义列表样式时,优先用 CSS 而非 HTML 属性
的 type(如 type="A")、start(如 start="3")和 的 type(如 type="square")已废弃或兼容性差(尤其 type 在 中被现代浏览器忽略):
list-style-type 替代:ul { list-style-type: square; }
counter-reset/counter-increment 精确控制 编号逻辑,比如跳过某项、多级编号对齐list-style: none,再用 ::before 伪元素+背景图或 Unicode 字符实现定制图标无障碍与 SEO 容易被忽略的细节
模拟列表——屏幕阅读器不会宣布“这是一个包含 3 项的列表” 标题,并用 aria-labelledby 关联(如 ) 的 reversed 属性(倒序编号)支持有限,且语义模糊,慎用;如需倒序展示,建议后端/JS 控制数据顺序,保持 HTML 自然序









