首页 / 笔记 / 正文

上线前我会走的 HTML 自查清单

2026-10-05 · 速查 · 21 条

每次手动改完页面、推上去之前，我会把这 21 条从头念一遍。它不难，但每次都能拦下一两个真实问题。清单写成了能直接对照的动作，不写原则，先看总览再按组抄。

文档与元信息

1. charset 写在 head 最前面，早于任何中文出现。
2. viewport 那行还在，手机上是等比缩放而不是缩小截图。
3. title 是「本页主题 · 站点名」，全站没有两页共用同一个标题。
4. description 说的是本页真正讲的东西，不是站点简介复制粘贴。
5. canonical 指回本站这个文件，路径和文件名大小写完全一致。

结构与语义

1. 整页只有一个 h1，且它的文字等于标题。
2. 标题不跳级，h2 下面接 h3，没有为了字号乱选层级。
3. 外层用 header、main、nav、footer，不是一片 div。
4. 并列内容用 ul 或 ol，数据用 table 并给表头 th。
5. 换段用的是 p，没有连排的空 br 撑出来的「留白」。

资源与性能

1. 每张 img 都带 width 和 height，图片到达时不顶开布局。
2. 样式表只有一个 link，页面里没有 style 标签，也没有内联 style。
3. 没有为了省一件事引入外部字体、图标库或第三方统计脚本。
4. 装饰性图片写 alt=""，有信息量的图片 alt 能独立读懂。

可访问性

1. 键盘 Tab 能从页首走到页尾，顺序和视觉顺序一致，中途不丢焦点。
2. 只有图标的可点元素补了文字或 aria-label。
3. html 上写了 lang，屏幕阅读器不会用错发音。
4. 正文和背景在小屏、强光下对比够读，颜色不是唯一的信息载体。

部署与缓存

1. 子目录里的相对路径全部点得开，../assets/ 的层数没写错。
2. 404.html 已经放在站点根目录，全站只有这一个错误页。
3. HTML 走短缓存或 no-cache，带扩展名的静态资源才设长缓存。

使用说明：这份清单我只在手动改页面时用；页面一多就该把检查交给构建步骤，靠人念是撑不住的。