纯HTML个人网站只需一个index.html文件，所有资源用相对路径（如./css/style.css），添加viewport元标签实现响应式，GitHub Pages部署时注意子路径适配。
怎么用纯 HTML 写出能直接打开的个人网站
不需要服务器、不依赖平台，只要一个 index.html 文件，双击就能在浏览器里打开——这是最轻量的个人网站形态。关键不是“写得多漂亮”，而是结构清晰、路径写对、资源能加载出来。
- 所有资源（图片、CSS、JS）必须用相对路径，比如
./css/style.css或images/me.jpg，别用C:/xxx或/css/style.css（开头的/会从系统根目录找） -
<img alt="个人网站怎么制作html_个人静态html网站制作流程【指南】" >的src、<link>的href、<script></script>的src都得检查一遍是否拼错文件名或大小写——Windows 不敏感，macOS/Linux 敏感 - 中文文件名尽量避免，浏览器可能乱码；空格和括号（如
my photo.jpg）容易导致路径失效，换成my-photo.jpg
本地预览时 CSS/JS 不生效的常见原因
不是代码写错了，大概率是路径或加载时机问题。浏览器控制台（F12 → Console / Network 标签页）里看到 404 或 Failed to load resource 就是铁证。
- 确认
<link rel="stylesheet" href="style.css">中的style.css和index.html在同一目录；如果 CSS 在css/子目录，就得写./css/style.css - JS 放在
底部比放在更稳妥，否则可能操作 DOM 时元素还没加载完；非要放，加defer属性：<script src="main.js" defer></script></li> <li>Chrome 直接双击打开 <code>file://
协议页面时，部分 JS API（如fetch读本地 JSON）会被禁用，这时得用 Live Server 插件起个本地 HTTP 服务
怎么让手机也能正常看你的 HTML 网站
默认情况下，桌面写的 HTML 在手机上会缩成一团小字，或者横向滚动——这不是样式问题，是缺少响应式基础声明。
- 必须在
里加这行：<meta name="viewport" content="width=device-width, initial-scale=1">，否则所有媒体查询（@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 面板里具体请求了什么地址，比猜快得多。 
