个人网站怎么制作html_个人静态html网站制作流程【指南】

纯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 面板里具体请求了什么地址，比猜快得多。