直接双击运行HTML网页需满足三要素：文件名为index.html、编码为UTF-8、结构含。缺一不可，否则导致空白页、乱码或资源加载失败。

直接双击打开就能跑的 HTML 个人网页，核心就三件事：文件名必须是 index.html、编码必须是 UTF-8、结构必须含 + + + 。缺一不可，否则空白页、乱码、图片不显示全是它惹的祸。

怎么保存一个能双击打开的 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 就生成完整骨架，保存即用

为什么必须放在 最前面

浏览器解析 HTML 是从上往下流式读取的。如果 写晚了（比如在 后面），前面的中文标题或注释可能已被按系统默认编码（如 GBK）错解，导致乱码已发生，再改也救不回。

• 它必须是 里的第二行（第一行是 ）
• 别写成 —— 冗余且部分旧浏览器不认
• VS Code 状态栏右下角显示当前编码，如果不是 UTF-8，点它手动切过去

图片和 CSS 路径为什么总 404

本地双击打开 HTML 用的是 file:// 协议，不走服务器，所以路径必须严格按文件系统相对位置写，且大小写敏感。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 表示 photo.jpg 和 HTML 文件在同一目录
• 表示 photo.jpg 在 HTML 同级的 images/ 文件夹里，路径里的 images 必须小写（Windows 资源管理器显示不敏感，但浏览器加载时敏感）
• 同理，style.css 必须和 HTML 在同一目录；若在 css/style.css，就得写 href="css/style.css"
• 绝对路径如 href="/style.css" 在 file:// 下会指向磁盘根目录，几乎必 404

为什么手机打开页面缩成一团或字特别小

没加 viewport meta 标签。移动端浏览器默认按桌面宽度（通常 980px）渲染页面，再整体缩小显示，导致文字糊成一片、按钮点不准。

• 必须在 里紧挨着 后加：
• 别写死 content="width=375"——不同手机屏幕宽度不同，会适配失败
• 这个标签顺序不能错：charset → viewport → title，iOS Safari 有时会忽略顺序错的 viewport

真正卡住新手的，从来不是标签怎么写，而是文件名后缀、编码设置、路径大小写、viewport 顺序这四个看似琐碎却硬性生效的点。调通这四关，剩下的就是往 里填内容，浏览器立刻给你反馈。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！