必须包含的最小合法结构是：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title></head><body></body></html>。缺DOCTYPE会触发怪异模式，缺lang影响可访问性与CSS行为，charset位置错误导致乱码，无viewport使移动端渲染异常。
直接写 index.html 不是“怎么写”的问题，而是“写什么、为什么这么写、不这么写会出什么问题”的问题。一个能被浏览器正确加载、兼容主流环境、且后续好维护的 index.html，核心就三点：DOCTYPE 声明、<html> 结构合法、关键元信息不缺。
必须包含的最小合法结构是什么？
浏览器对 HTML 的容错性很强，但省略关键部分会导致渲染模式异常（比如触发怪异模式）、字符乱码、移动端缩放失效等隐性问题。
- 开头必须有
<!DOCTYPE html>—— 缺失时 IE 会降级为 Quirks Mode，CSS 盒模型和 JS 行为都可能错乱 -
<html lang="zh-CN">必须带lang属性 —— 不仅影响屏幕阅读器，还关系到字体 fallback 和某些 CSS 伪类（如:lang()）行为 -
<meta charset="UTF-8">必须在<head>最前面 —— 放错位置（比如在<title>后）可能导致中文显示为 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">是移动端基础 —— 没它，手机上页面会默认按 980px 渲染，文字小得看不清
script 和 link 标签该放哪儿？顺序有影响吗？
位置直接影响资源加载时机、执行顺序和首屏性能。不是“能跑就行”，而是“放错地方就卡住用户”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- CSS
<link rel="stylesheet">必须放在<head>内 —— 放在<body>底部会导致 FOUC（闪白）或重绘 - JS
<script>默认阻塞解析：放在<head>里会停住 HTML 解析，等 JS 下载执行完才继续 —— 所以非必要逻辑应加defer或移至</body>前 - 多个
<script defer>按书写顺序执行，但不阻塞 HTML 解析 —— 适合依赖顺序的模块化脚本 - 用
type="module"的脚本默认是defer行为，且有严格同源/HTTPS 要求 —— 本地双击打开file://会直接报错Cross-Origin Read Blocking
常见错误：本地双击打开就空白或报错
这不是代码写错了，而是运行环境和协议限制被忽略了。很多新手在 VS Code 里写完 index.html 双击打开，发现 JS 不执行、fetch 失败、图片 404 —— 全是因为浏览器对 file:// 协议的封禁。
立即学习“前端免费学习笔记（深入）”；
-
fetch('./data.json')在file://下直接被 CORS 策略拦截，控制台报Failed to load resource: net::ERR_FAILED -
import语句（ESM）在file://下无法解析相对路径，报Failed to resolve module specifier - 解决办法只有两个：
npx serve、python3 -m http.server或 VS Code 的 Live Server 插件 —— 必须走http://或https:// - 连
<img src="logo.png">都可能 404：如果文件路径大小写不符（macOS 不敏感，Linux/Windows 敏感），或者用了反斜杠\（Windows 资源管理器习惯，但 HTML 只认正斜杠/）
真正麻烦的从来不是“怎么写出第一行”，而是“哪一行少写了、哪一行多写了、哪一行在什么环境下会突然失效”。index.html 看似简单，实则是整个前端链路的第一道关卡 —— 它不报错，不代表它没埋雷。
