DOCTYPE html 不是可选装饰，它强制浏览器启用标准模式，避免怪异模式导致Flexbox失效、box-sizing异常等深层渲染错误；语义化标签是DOM可维护性底线，须按规范使用header/nav/main等元素；Vite中index.html是模板而非静态文件，需遵循模块化注入规则。
为什么 DOCTYPE html 不是可选的装饰？
它直接决定浏览器用标准模式还是怪异模式解析整个文档。一旦漏写或写成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">，IE 或旧版 Edge 可能降级渲染，Flexbox 失效、box-sizing 行为异常、甚至 getBoundingClientRect() 返回值错乱——这些都不是 CSS 能修好的。
现代工程化流程里，这个声明必须硬编码在模板最顶部，且不能带空格或 BOM。Vite / Webpack 的 HTML 插件（如 vite-plugin-html 或 html-webpack-plugin）默认会注入，但如果你手写 index.html 并通过 public/ 目录托管，就得自己盯住这一行。
语义化标签不是“加分项”，而是 DOM 可维护性的底线
用一堆 <div class="header"> 替代 <header>，短期看不出问题；但当项目加到 20+ 页面、需要做无障碍审计或 SEO 优化时，你会发现：JS 里用 document.querySelector('div[role="banner"]') 查不到东西，自动化测试脚本因缺少语义锚点而频繁断言失败，Lighthouse 报出 “heading-levels 不合理” 和 “landmark-roles 缺失”。
真正落地的建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<header>、<nav>、<main>、<section>、<article>、<footer>当作 HTML 必填字段，而非“用了更好”的可选项 - 避免嵌套超过三层语义标签（比如
<section><article><section>），否则辅助技术容易迷失上下文 - 用
aria-labelledby或aria-label补充非文本内容的语义，比如图标按钮、纯 SVG 导航项
Vite 的 index.html 是入口，不是静态文件
很多人把 Vite 项目里的 index.html 当成传统静态页来改：手动加 script 标签、硬编码 CSS 路径、在 body 里塞大段 DOM。结果构建后资源路径 404、热更新不触发、import.meta.env 无法注入——因为 Vite 把它当作 HTML 模板处理，会解析 <script type="module">、自动注入 HMR 脚本、重写 href/src 为哈希路径。
正确做法：
- 所有 JS 入口只保留一个
<script type="module" src="/src/main.ts"></script>，其余逻辑进模块 - CSS 必须通过
import './style.css'在 JS 中引入，而不是靠<link rel="stylesheet">手动挂载 - 如果需动态插入内容（如多语言 title），用
<title>${import.meta.env.VITE_APP_TITLE}</title>模板语法，依赖vite-plugin-html
HTML 构建阶段最容易被忽略的检查点
工程化不是堆工具，而是堵漏。以下三项在 CI 流程中常被跳过，却直接导致上线后不可用：
-
<meta name="viewport">缺失或content值写成"width=320"（固定宽度）而非"width=device-width, initial-scale=1"，移动端页面直接缩成一团 -
<html lang="zh-CN">的lang属性未统一，影响屏幕阅读器语音引擎和部分翻译插件识别 - 使用
preconnect或dns-prefetch提前加载 CDN 资源时，忘了加crossorigin，导致字体或 API 请求被 CORS 阻断
这些都不是运行时能 catch 的错误，必须在构建产物生成后、部署前，用 html-validate 或自定义 Puppeteer 脚本做一次 DOM 结构快照校验。
