纯HTML个人简介页需三步保稳：首行声明DOCTYPE和lang="zh-CN"，head中必加meta charset="UTF-8"防乱码；图片/CSS用相对路径（如./img/me.jpg），禁用绝对路径与CDN；加viewport meta并用rem/em字体、max-width布局适配手机。
怎么用纯 HTML 写出能直接打开、不崩、不乱码的个人简介页
直接用 html 写个人简介，核心不是“炫效果”，而是“打开就对”。很多人写完双击 index.html，发现中文是方块、照片不显示、排版全挤在一起——问题基本出在三处：编码没声明、路径写错、CSS/JS 没走相对路径逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 第一行必须是
<!DOCTYPE html>，紧接着就是<html lang="zh-CN">，别省 -
<head>里必须有<meta charset="UTF-8">，缺了中文准变问号或小方块 - 所有图片、CSS 文件，用相对路径（比如
./img/photo.jpg），别写C:\xxx\photo.jpg或绝对 URL（除非你真部署到线上） - 别依赖外部 CDN（比如 Bootstrap、jQuery），本地双击打开时它们根本加载不了——要加样式，就写
<style>块，简单几行够用
怎么让简历在手机上也能看清楚，又不用学响应式框架
不是非得用 Bootstrap 或媒体查询才能适配手机。多数人只是忘了 viewport 这一行，结果浏览器默认按桌面宽度渲染，缩成一团看不见字。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里加上<meta name="viewport" content="width=device-width, initial-scale=1.0">，这是底线 - 字体大小别写
12px，改用rem或em（比如font-size: 1rem;），配合根字体设为16px就够稳 - 避免固定宽高的容器（比如
width: 800px;），优先用max-width: 600px;+margin: 0 auto; - 表格类布局（比如技能栏）容易横溢，换成语义化标签 + 简单 CSS（
display: flex; flex-wrap: wrap;）更可控
怎么插入照片、联系方式、项目链接，且保证别人下载后还能用
本地简历最常翻车的是“发给别人，图没了”——因为路径错了，或者用了系统隐藏路径（如 OneDrive 同步文件夹里的相对路径在别人电脑上根本不存在）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 照片统一放进项目文件夹下的
./img/子目录，HTML 里写<img src="./img/me.jpg" alt="本人"> - 邮箱用
mailto:链接（<a href="mailto:name@example.com">name@example.com</a>），别裸写邮箱，防爬虫也方便点击 - GitHub、作品链接用完整 HTTPS（
https://github.com/xxx），别用短链接或跳转服务，别人离线保存后点不开 - 如果嵌入代码片段（比如 GitHub Gist），别直接抄 embed 代码——它依赖 JS 加载，离线就空白；改用
<pre><code>...手动贴关键代码
为什么加了 CSS 样式，但 Chrome 里还是没反应
不是 CSS 写得不对，大概率是加载失败或优先级被覆盖。本地 HTML 最常见的两个隐形错误：样式表路径拼错，以及没加 type="text/css"（虽然现代浏览器大多自动识别，但某些旧版或安全策略会拒载）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 内联样式最保险：
<style type="text/css">body { margin: 0; font-family: sans-serif; }</style> - 外链 CSS 必须检查路径是否和 HTML 文件同级（比如
<link rel="stylesheet" href="./style.css">，而style.css确实在同一目录） - 别用
@import引入 CSS——它会阻塞渲染，本地双击时可能白屏几秒甚至报错 - Chrome 开发者工具按
F12→ 切到Console标签，看有没有Failed to load resource提示，那就是路径或文件名错了（注意大小写！Windows 不敏感，Linux/macOS 敏感）
最容易被忽略的是：把文件从压缩包解压出来之后，再移动过文件夹位置，但没同步更新 HTML 里的所有 src 和 href 路径。这种错没法靠预览发现，只能逐个检查控制台报错。
