HTML页面不渲染或兼容性异常，八成源于DOCTYPE和根元素声明错误：必须顶格写<!DOCTYPE html>（无空格/BOM/注释），<html lang="zh-CN">需符合BCP 47标准，且仅有一个根元素。

DOCTYPE 和根元素是否正确声明

HTML 页面不渲染或兼容性异常，八成从这里开始。没有 <!DOCTYPE html> 或写成 <!doctype html>（大小写混用）会导致 IE 进入怪异模式；<html lang="zh-CN"> 缺失或 lang 值为空，会影响屏幕阅读器和 SEO 识别。

• 必须使用小写 <!DOCTYPE html>，不能省略、不能加空格或注释
• <html> 标签必须有且仅有一个，且是文档最外层容器
• lang 属性值需符合 BCP 47 标准，中文推荐 zh-CN 或 zh-Hans，避免写成 zh 或 cn
• 检查是否意外嵌套了第二个 <html>（常见于 SSR 模板拼接错误）

head 内关键元信息是否完整且合规

SEO 掉量、移动端缩放失效、字符乱码，往往就差这三四行。W3C 验证器报 charset 错误，90% 是因为 <meta charset="utf-8"> 不在 <head> 前三行内，或被 JS 动态插入。

• <meta charset="utf-8"> 必须是 <head> 中第一个 <meta>，且不能带引号以外的空格（如 charset = "utf-8" 无效）
• <meta name="viewport" content="width=device-width, initial-scale=1"> 缺失会导致移动端页面横向滚动，user-scalable=no 已不推荐，除非明确业务需要
• <title> 必须存在，长度建议 ≤55 字符；<meta name="description"> 非强制但强推荐，长度 ≤150 字符
• 避免重复 <meta http-equiv="X-UA-Compatible" content="IE=edge"> —— 现代项目已无需兼容 IE

语义化标签与可访问性基础是否落地

不是“用了 <header> 就算语义化”，而是结构是否真实反映内容层级。Chrome DevTools 的 Accessibility 面板里显示 “No landmark” 或 “Missing label”，基本就是语义和可访问性双崩。

seo-monitoring

当用户想构建SEO数据分析系统、监控索引/流量/关键词/反向链接，或设置基准时使用。也在用户提及相关需求时使用。

下载

• 每个页面应有且仅有一个 <main>，<header>/<footer> 可多组，但 <nav> 应只包裹导航链接
• <img> 必须有 alt：纯装饰图写 alt=""，重要内容描述需准确（如 alt="红色苹果图标，代表新鲜水果分类"）
• <input>、<textarea> 等表单控件必须关联 <label>（用 for + id，或包裹方式），否则屏幕阅读器无法读出提示
• 标题层级不能跳级：<h1> → <h2> → <h3>，禁止 <h1> 后直接 <h3>

内联脚本/样式与资源引用是否安全可控

线上突然白屏或控制台报 Uncaught SyntaxError: Unexpected token '<'，大概率是 HTML 里塞了未转义的 JS 字符串，或 <script> 放错位置导致阻塞解析。

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

• <script> 标签禁止出现在 <head> 里且无 defer 或 async —— 会阻塞 DOM 构建
• 禁止用 document.write()，现代浏览器已标记为高危操作
• style 属性内联写法（如 <div style="color:red">）应严格限制，仅用于动态样式；静态样式一律走 CSS 文件
• 外部资源路径需校验：CSS 的 rel="stylesheet" 不能漏，JS 的 type="module" 或 type="text/javascript" 要匹配实际内容类型

真正卡住上线的，往往不是某条规则没打钩，而是几处看似微小的组合问题：比如 lang 错了 + charset 位置偏移 + 图片缺 alt，会让 Lighthouse 可访问性得分掉到 30 以下，且无法通过自动化修复。人工过一遍 <head> 和首屏语义结构，比跑十遍 lint 更有效。