一个标准的index.html文件必须包含<html lang="zh-CN">、<head>中<meta charset="UTF-8">和<title>、<body>三部分骨架，否则可能触发怪异模式或白屏；实际项目还需viewport、正确路径的资源引用、语义化容器；script位置、路径一致性及空格换行等细节影响首屏性能与部署。
一个标准的 index.html 文件必须能被浏览器直接加载、解析并呈现为可用页面，核心是结构合法、语义清晰、资源可访问。它不是越复杂越好，而是刚好够用且不埋坑。
必须存在的 HTML 结构骨架
缺一不可，否则可能触发怪异模式（Quirks Mode）或渲染异常：
-
<html>根元素，带lang属性（如lang="zh-CN"），利于 SEO 和屏幕阅读器 -
<head>区域：至少包含<meta charset="UTF-8">（没它，中文大概率乱码），以及<title>（空 title 会让 tab 标签显示为空白） -
<body>区域：哪怕只放一个<p>Hello</p>，也不能省略——某些旧版 WebView 会因 body 缺失而白屏
实际项目中几乎必加的几项
这些不是规范强制，但跳过它们会在开发、部署或维护阶段立刻出问题：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，移动端页面会缩成一团，用户得双指放大才能看清 - 外部资源引用：比如
<link rel="stylesheet" href="css/style.css">或<script src="js/main.js"></script>，路径必须相对于index.html所在位置——很多人把 CSS 放进assets/css/却在index.html里写href="css/style.css"，结果 404 - 基础语义容器：例如用
<header>包导航，<main>包主体内容，<footer>包版权信息——不为“好看”，而是让 JS 操作 DOM、SEO 抓取、无障碍访问都有明确锚点
容易被忽略但影响交付的细节
这些不报错，但上线后可能卡住整个流程：
立即学习“前端免费学习笔记（深入）”；
-
<script>标签的位置：放在</body>前是常规做法；若放在<head>里，又没加defer或async，JS 执行会阻塞 HTML 解析，首屏变慢 - 相对路径陷阱：Unity WebGL 模板里的
Build/VOXL.json路径、或者 Vue/Vite 生成的assets/index.XXX.js，都依赖index.html中 script src 的路径与实际部署结构严格一致 - 空格和换行不是无害的：在
<pre>或内联<code>里，回车会被渲染为<img>标签后多一个换行，可能在某些 inline-block 布局下产生 4px 高度空白
真正麻烦的从来不是写满功能，而是某处少了个引号、路径差了一级、charset 漏了声明——这些错误不会抛红字，只会让页面静默失效。检查时优先盯住 <head> 开头三行和所有 src/href 的路径拼写。
