纯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 没走相对路径逻辑。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 第一行必须是
,紧接着就是 <code>,别省 -
里必须有<meta charset="UTF-8">,缺了中文准变问号或小方块 - 所有图片、CSS 文件,用相对路径(比如
./img/photo.jpg),别写C:\xxx\photo.jpg或绝对 URL(除非你真部署到线上) - 别依赖外部 CDN(比如 Bootstrap、jQuery),本地双击打开时它们根本加载不了——要加样式,就写
<style></style>块,简单几行够用
怎么让简历在手机上也能看清楚,又不用学响应式框架
不是非得用 Bootstrap 或媒体查询才能适配手机。多数人只是忘了 viewport 这一行,结果浏览器默认按桌面宽度渲染,缩成一团看不见字。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 在
里加上<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 同步文件夹里的相对路径在别人电脑上根本不存在)。
启科网络商城系统由启科网络技术开发团队完全自主开发,使用国内最流行高效的PHP程序语言,并用小巧的MySql作为数据库服务器,并且使用Smarty引擎来分离网站程序与前端设计代码,让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式,网站前台开发人员只要简单学习系统标签功能和使用方法,将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用,即可建设出美观、个性的网站。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 照片统一放进项目文件夹下的
./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 class="brush:php;toolbar:false;"><code>...</code> 手动贴关键代码</pre>
为什么加了 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 路径。这种错没法靠预览发现,只能逐个检查控制台报错。









