直接双击运行HTML网页需满足三要素：文件名为index.html、编码为UTF-8、结构含。缺一不可，否则导致空白页、乱码或资源加载失败。
直接双击打开就能跑的 HTML 个人网页，核心就三件事：文件名必须是 index.html、编码必须是 UTF-8、结构必须含 + <code> + + 。缺一不可，否则空白页、乱码、图片不显示全是它惹的祸。
怎么保存一个能双击打开的 index.html 文件
别用 Word / WPS / TextEdit 直接另存为 HTML——它们会塞进一堆私有标签，浏览器根本认不出。用 VS Code、Sublime 或记事本这类纯文本编辑器：
- 新建文件 → 输入基础结构 → 保存时手动选“UTF-8 编码” + 文件名写成
index.html（不是index.html.txt） - Windows 记事本容易偷偷加 .txt 后缀，务必在“另存为”对话框里把“保存类型”设为“所有文件”，再输
index.html - Mac 上 TextEdit 默认存成 .rtf，得先点菜单栏「格式 → 制作纯文本」，再保存为
index.html - VS Code 最省心：新建文件自动 UTF-8，输入
html:5+ Tab 就生成完整骨架，保存即用
<meta charset="UTF-8"> 为什么必须放在
浏览器解析 HTML 是从上往下流式读取的。如果 <meta charset="UTF-8"> 写晚了（比如在 <title></title> 后面），前面的中文标题或注释可能已被按系统默认编码（如 GBK）错解，导致乱码已发生，再改也救不回。
- 它必须是
里的第二行（第一行是） - 别写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 冗余且部分旧浏览器不认 - VS Code 状态栏右下角显示当前编码，如果不是 UTF-8，点它手动切过去
图片和 CSS 路径为什么总 404
本地双击打开 HTML 用的是 file:// 协议，不走服务器，所以路径必须严格按文件系统相对位置写，且大小写敏感。
立即学习“前端免费学习笔记（深入）”；
-
<img src="photo.jpg" alt="个人网页怎么用HTML制作？新手搭建完整流程" >表示 photo.jpg 和 HTML 文件在同一目录 -
<img src="images/photo.jpg" alt="个人网页怎么用HTML制作？新手搭建完整流程" >表示 photo.jpg 在 HTML 同级的images/文件夹里，路径里的images必须小写（Windows 资源管理器显示不敏感，但浏览器加载时敏感） -
<link rel="stylesheet" href="style.css">同理，style.css必须和 HTML 在同一目录；若在css/style.css，就得写href="css/style.css" - 绝对路径如
href="/style.css"在file://下会指向磁盘根目录，几乎必 404
为什么手机打开页面缩成一团或字特别小
没加 viewport meta 标签。移动端浏览器默认按桌面宽度（通常 980px）渲染页面，再整体缩小显示，导致文字糊成一片、按钮点不准。
- 必须在
里紧挨着<meta charset="UTF-8">后加：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 别写死
content="width=375"——不同手机屏幕宽度不同，会适配失败 - 这个标签顺序不能错：charset → viewport → title，iOS Safari 有时会忽略顺序错的 viewport
真正卡住新手的，从来不是标签怎么写，而是文件名后缀、编码设置、路径大小写、viewport 顺序这四个看似琐碎却硬性生效的点。调通这四关，剩下的就是往 里填内容，浏览器立刻给你反馈。
