HTML网页上线前须经结构解析、样式渲染、API可用性、真机交互四层验证；缺一不可，否则会导致标签不识别、布局塌陷、API失效等问题。
HTML网页做完不能直接上线，必须分层验证——结构解析、样式渲染、API可用性、真机交互，四层缺一不可。
怎么确认浏览器真的“认得”你的 HTML 标签
很多布局塌陷、querySelector 找不到元素、CSS margin 不生效，根源是浏览器压根没把 header、main 当成合法标签，而是当未知 inline 元素丢弃了。
- 打开 Chrome DevTools 的 Elements 面板，手动展开 DOM 树，看
nav、section是否完整存在，而不是被自动闭合或包进div - 在 Console 中执行：
document.querySelectorAll('header, main, nav, footer').length，返回0就说明未识别（常见于 IE8–10 或旧 Android WebView） - 检查
是否独占第一行、前面**无空格、无注释、无 BOM**；Elements 顶部必须显示 <code>Standards，不是Quirks - IE8 及以下需
html5shiv+ 手动 CSS：header, nav, section, article, aside, footer { display: block; }；只引脚本不够
怎么判断 HTML5 API 能不能真正用起来
查 caniuse.com 是第一步，但“支持”不等于“能用”。比如 localStorage 在 Safari 无痕模式下存在却会抛错；dialog.showModal() 在 Safari 16.2 返回 true 却不触发 close 事件。
- 别只写
'localStorage' in window，要加try/catch运行时验证： try { localStorage.setItem('test', 'ok'); localStorage.removeItem('test'); } catch (e) { // 降级到 cookie 或内存缓存 }- 检测构造函数比检测方法更可靠：
typeof HTMLDialogElement !== 'undefined'比'showModal' in document.createElement('dialog')更准（后者在 Safari 16.0–16.3 会误报） - 对
inert这类属性，必须创建元素并赋值验证：const el = document.createElement('div'); el.inert = true; return el.inert === true;，不能查'inert' in document.body
怎么用 CSS 做渐进式降级而不写两套样式
@supports 不是锦上添花的玩具，它是让现代样式安全落地的护栏。它不覆盖 IE（IE 完全不支持），也不能替代 DOCTYPE 和语义标签基础。
立即学习“前端免费学习笔记（深入）”；
- 只在关键新特性上用：
@supports (display: grid) { ... }或@supports (inset-block: 0) { ... } - 别和媒体查询混用——
@supports (width: min(100%, 400px)) and (max-width: 768px)逻辑难维护，拆开写更清晰 - 避免用
all: unset或all: revert：它们在 Safari 和旧版 Chrome 表现不稳定，容易导致表单控件失焦或字体重置异常 - 确保
normalize.css在所有自定义 CSS 之前加载，并加全局重置：* { box-sizing: border-box; }
本地测试时最容易忽略的三件事
真机测试前，本地环境就可能埋雷。很多“上线才崩”的问题，其实在本地就能暴露。
- 别用
file://协议打开页面：fetch、WebGL、localStorage在该协议下会被禁用或行为异常；务必起本地 HTTP 服务（npx serve、python3 -m http.server或 VS Code Live Server） - W3C Validator 报的嵌套错误看似不致命，但会导致 DOM 结构意外变更：比如
p内写div，浏览器会自动闭合p并把div提为兄弟节点，使p > div选择器失效 - 控制台报错别只扫一眼：
SecurityError、NotSupportedError、TypeError: xxx is not a function这三类必须逐个点开堆栈，定位到具体调用行——它们往往指向 API 兼容性断层，而非代码逻辑错误
