HTML制作个人简介教程

本文手把手教你用纯HTML打造一份“打开即用、不乱码、不崩坏、适配手机”的个人简介页，直击新手最常踩的三大坑：中文编码缺失导致方块乱码、路径错误致使图片样式丢失、忽视移动端基础配置造成缩放失序；强调摒弃外部依赖与炫技框架，专注DOCTYPE声明、UTF-8编码、相对路径规范、viewport设置、rem/em响应式字体及max-width弹性布局等务实细节，并提供邮箱防爬、链接离线可用、CSS加载排错等真实场景解决方案，让一份本地双击就能完美呈现的个人简历成为可能。

怎么用纯 HTML 写出能直接打开、不崩、不乱码的个人简介页

直接用 html 写个人简介，核心不是“炫效果”，而是“打开就对”。很多人写完双击 index.html，发现中文是方块、照片不显示、排版全挤在一起——问题基本出在三处：编码没声明、路径写错、CSS/JS 没走相对路径逻辑。

实操建议：

• 第一行必须是 ，紧接着就是 ，别省
• 里必须有 ，缺了中文准变问号或小方块
• 所有图片、CSS 文件，用相对路径（比如 ./img/photo.jpg），别写 C:\xxx\photo.jpg 或绝对 URL（除非你真部署到线上）
• 别依赖外部 CDN（比如 Bootstrap、jQuery），本地双击打开时它们根本加载不了——要加样式，就写
• 外链 CSS 必须检查路径是否和 HTML 文件同级（比如 ，而 style.css 确实在同一目录）
• 别用 @import 引入 CSS——它会阻塞渲染，本地双击时可能白屏几秒甚至报错
• Chrome 开发者工具按 F12 → 切到 Console 标签，看有没有 Failed to load resource 提示，那就是路径或文件名错了（注意大小写！Windows 不敏感，Linux/macOS 敏感）

最容易被忽略的是：把文件从压缩包解压出来之后，再移动过文件夹位置，但没同步更新 HTML 里的所有 src 和 href 路径。这种错没法靠预览发现，只能逐个检查控制台报错。

好了，本文到此结束，带大家了解了《HTML制作个人简介教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！