个人静态网站制作教程【HTML指南】

本文手把手教你用纯HTML打造一个轻量、便携、跨平台的个人静态网站，从零开始只需一个index.html文件即可双击运行，无需服务器或第三方平台；重点剖析了相对路径规范、viewport响应式适配、本地预览常见坑（如CSS/JS加载失败、file://协议限制）、移动端适配技巧（max-width、rem字体、媒体查询生效前提），以及GitHub Pages部署时因子路径导致的资源404问题，并强调通过浏览器Network面板精准定位路径错误——真正难点不在语法，而在理解file://、localhost与GitHub Pages三者对路径解析的本质差异。

怎么用纯 HTML 写出能直接打开的个人网站

不需要服务器、不依赖平台，只要一个 index.html 文件，双击就能在浏览器里打开——这是最轻量的个人网站形态。关键不是“写得多漂亮”，而是结构清晰、路径写对、资源能加载出来。

• 所有资源（图片、CSS、JS）必须用相对路径，比如 ./css/style.css 或 images/me.jpg，别用 C:/xxx 或 /css/style.css（开头的 / 会从系统根目录找）
• 的 src、 的 href、
• Chrome 直接双击打开 file:// 协议页面时，部分 JS API（如 fetch 读本地 JSON）会被禁用，这时得用 Live Server 插件起个本地 HTTP 服务

怎么让手机也能正常看你的 HTML 网站

默认情况下，桌面写的 HTML 在手机上会缩成一团小字，或者横向滚动——这不是样式问题，是缺少响应式基础声明。

• 必须在 里加这行：，否则所有媒体查询（@media）都白搭
• 图片别写死 width: 500px，改用 max-width: 100%; height: auto;，不然在窄屏上直接溢出
• 字体大小别全用 px，至少标题用 rem 或 em，配合上面的 viewport 才能随设备缩放

部署到 GitHub Pages 后样式丢失或图片打不开

本地好好的，一上传就崩，90% 是因为 GitHub Pages 默认以项目根目录为网站根路径，而你本地测试时是以当前文件夹为根。

• 如果你的仓库是 username.github.io，那 index.html 必须在根目录，所有路径按“网站根目录”来写，比如 ./css/style.css 是对的
• 但如果你是普通项目（比如 username.github.io/my-portfolio），GitHub Pages 会把 my-portfolio 当作子路径，此时 ./css/style.css 实际请求的是 /css/style.css（漏了前缀），得改成 /my-portfolio/css/style.css，或更可靠地用相对路径： css/style.css（去掉开头的 .）
• GitHub Pages 默认不支持 .html 后缀省略（比如访问 /about 不会自动找 /about.html），所以导航链接老老实实写全 about.html

实际做下来，最难的不是写代码，是反复核对路径层级和协议差异——本地 file://、开发服务器 http://localhost、GitHub Pages 的子路径，三者对相对路径的理解并不一致。多看 Network 面板里具体请求了什么地址，比猜快得多。

终于介绍完啦！小伙伴们，这篇关于《个人静态网站制作教程【HTML指南】》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！