能双击运行的最简index.html结构是：我的主页张三前端爱好者 | 每天写点代码GitHub，需确保文件后缀为.html、编码为UTF-8、资源用相对路径。
直接用纯 HTML 写一个能打开、能看、能点的 index.html 个人主页，不需要框架、不依赖服务器，双击就能在浏览器里运行——这事五分钟能搞定，但很多人卡在路径错、标签漏、CSS 不生效这三处。
怎么写最简可用的 index.html 结构
浏览器只认标准 HTML5 文档结构，缺了 或 <code> 外层，某些样式或脚本可能静默失效； 里没写 <meta charset="UTF-8">，中文会乱码； 为空就真是一片白。
实操建议：
- 用任意文本编辑器（VS Code / 记事本 / TextEdit）新建文件，保存为
index.html（注意后缀必须是.html，不是.txt） - 粘贴以下最小可行代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的主页</title> </head> <body> <h1>张三</h1> <p>前端爱好者 | 每天写点代码</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <a href="https://github.com/zhangsan">GitHub</a> </body> </html>
双击打开，就能看到标题、段落和链接——这就是“能跑”的底线。
href 和图片路径为什么总打不开
本地双击运行时，浏览器走的是 file:// 协议，所有相对路径都以当前 index.html 所在文件夹为根。常见错误：把图片放在子文件夹却写成 img/photo.jpg（实际应为 ./img/photo.jpg 或直接 img/photo.jpg），或者误用绝对路径 /img/photo.jpg（开头的 / 会指向磁盘根目录，不是项目根）。
实操建议：
- 图片、CSS、JS 文件统一放在同级或子目录，比如建个
css/文件夹放样式，img/放图 - 引用时一律用相对路径：
<img src="img/avatar.png" alt="如何制作一个简单的index.html个人主页？" >、<link rel="stylesheet" href="css/style.css"> - 如果链接外部网站，确保带协议：
href="https://example.com"，而不是href="example.com"（后者会被当成当前目录下的文件）
加点样式但 style.css 死活不生效
原因常有两个：文件编码不是 UTF-8（特别是 Windows 记事本默认 ANSI），或 <link> 标签位置错了（比如写在 里，或没加 rel="stylesheet"）。
实操建议：
- 用 VS Code 或 Sublime Text 新建
css/style.css，保存时选 “UTF-8” 编码（记事本右下角看编码，另存为时下拉选） -
<link>必须放在里，且带完整属性：<link rel="stylesheet" href="css/style.css"> - 快速验证 CSS 是否加载：在
style.css里写一行body { background: red; }，保存后刷新页面，变红就说明链对了
真正麻烦的不是写几行 HTML，而是路径写错后浏览器控制台（F12 → Console / Network）不报错，只是静默忽略——所以每次加新资源，先查 Network 标签页里有没有 404，比反复改代码快得多。
