26. 实战：个人简历页面
26. 实战：个人简历页面
经过前面 25 篇的学习，你已经掌握了 HTML 的核心标签和语法。本篇是一堂综合实战课——我们将用纯 HTML（配合少量内联 CSS）从零搭建一份完整的个人简历页面。这份简历可以直接在浏览器中打开，也可以作为求职时的在线简历模板。
学习目标
- 学会规划简历页面的整体结构（个人信息区、教育经历、工作经历、技能列表、联系方式）
- 掌握 h1-h3 标题层级在简历中的合理运用
- 熟练使用
img标签插入头像和照片 - 熟练使用
a标签创建邮箱、电话和社交链接 - 熟练使用
ul/ol列表展示技能和项目经验 - 理解并运用语义化容器标签：
header/main/section/footer/article/aside - 学会用
time标签语义化标记时间 - 学会用
figure/figcaption组合展示图文内容 - 学会用
hr分隔线划分内容区块 - 了解如何用少量内联 CSS 让简历看起来整洁专业
核心知识
一、简历页面的结构规划
在动手写代码之前，先想清楚简历要包含哪些内容、如何组织。一份典型的技术简历通常包含以下区块：
个人简历页面 ├── header（头部） │ ├── 头像照片 │ ├── 姓名（h1） │ ├── 职位/头衔 │ └── 联系方式（邮箱、电话、社交链接） ├── main（主体） │ ├── section：个人简介 │ ├── section：工作经历 │ ├── section：教育经历 │ ├── section：项目经验 │ ├── section：专业技能 │ └── section：获奖与证书 ├── aside（侧边提示） └── footer（页脚） └── 版权信息、更新时间为什么要这样规划？
清晰的结构不仅让你写代码时有条不紊，更重要的是——搜索引擎和屏幕阅读器能更好地理解你的页面内容。这就是语义化的价值。
二、语义化容器标签的运用
HTML5 引入了一系列语义化标签，让页面结构更加清晰。在简历页面中，我们主要用到以下标签：
| 标签 | 含义 | 在简历中的用途 |
|---|---|---|
header | 头部 | 包裹姓名、头像、联系方式 |
main | 主要内容 | 包裹简历的核心内容区块 |
section | 区块 | 划分工作经历、教育经历等独立板块 |
article | 独立文章 | 每一段工作经历、每个项目经验 |
aside | 侧边内容 | 提示信息、补充说明 |
footer | 页脚 | 版权信息、最后更新时间 |
代码示例：语义化骨架
<!-- 页面主容器 --><divclass="container"><!-- header：个人信息头部 --><header><!-- 头像 + 姓名 + 联系方式 --></header><!-- main：简历主体内容 --><main><section><h2>个人简介</h2><p>...简介内容...</p></section><section><h2>工作经历</h2><!-- 每段工作经历用一个 article --><article>...字节跳动...</article><article>...美团...</article></section></main><aside><p>温馨提示：...</p></aside><footer><p>©2024 李明</p></footer></div>逐行讲解：
<div class="container">：用一个 div 包裹整个简历内容，方便通过 CSS 控制整体宽度和居中。class是 CSS 选择器的钩子。<header>：不是只能用在页面顶部——任何区块的头部都可以用。这里代表整个简历的头部。<main>：一个页面只能有一个main，它标记了文档的主要内容。搜索引擎会重点抓取这里的内容。<section>：表示文档中的一个独立区块，通常包含一个标题（h2-h6）。<article>：表示独立的、可以独立分发或复用的内容。每段工作经历都可以看作一篇"小文章"。<aside>：表示与主要内容间接相关的内容，比如提示框、广告、侧边栏。<footer>：表示页面或区块的底部信息。
三、标题层级的合理运用
简历中的标题层级应该清晰、有逻辑，这不仅影响视觉效果，也影响搜索引擎和屏幕阅读器的解析。
<!-- 页面级标题：只有一个 h1 --><h1>李明</h1><!-- 区块级标题：每个 section 一个 h2 --><section><h2>工作经历</h2><article><!-- 文章内子标题：h3 --><h3>高级前端开发工程师 - 字节跳动</h3></article></section>标题层级规则：
- 一个页面只有一个
h1：通常是姓名或简历标题 h2用于主要区块：工作经历、教育经历、项目经验等h3用于区块内的子项：具体的公司名称+职位- 不要跳级：不要从 h1 直接跳到 h3，中间要有 h2
四、头像与图片：figure + figcaption
简历通常需要一张个人照片。我们使用figure和figcaption来语义化地包裹图片。
<!-- figure：独立的图文单元 --><figure><!-- img：插入图片 --><imgsrc="https://via.placeholder.com/120/3498db/ffffff?text=头像"alt="李明的个人头像"width="120"height="120"><!-- figcaption：图片的标题或说明 --><figcaption>个人证件照</figcaption></figure>属性详解：
| 属性 | 作用 | 示例 |
|---|---|---|
src | 图片路径（URL 或本地路径） | src="photo.jpg" |
alt | 图片无法加载时的替代文本；屏幕阅读器朗读的内容 | alt="李明的个人头像" |
width | 图片显示宽度（像素） | width="120" |
height | 图片显示高度（像素） | height="120" |
重要提示：
alt属性必须写，而且要描述清楚图片内容。这不仅是为了 SEO，更是为了让视障用户通过屏幕阅读器了解图片信息。
五、联系方式链接：mailto 和 tel
简历中的联系方式不应该只是纯文本，而应该做成可点击的链接，方便 HR 一键联系你。
<!-- 邮箱链接：点击后打开系统默认邮件客户端 --><ahref="mailto:liming@example.com">liming@example.com</a><!-- 电话链接：在手机上点击直接拨号 --><ahref="tel:+8613800138000">138-0013-8000</a><!-- 外部链接：target="_blank" 在新标签页打开 --><ahref="https://github.com/liming-dev"target="_blank"rel="noopener noreferrer">GitHub主页</a>链接协议速查：
| 协议 | 写法 | 效果 |
|---|---|---|
| 邮件 | mailto:邮箱地址 | 打开邮件客户端 |
| 电话 | tel:+86手机号 | 手机端直接拨号 |
| 网页 | https://网址 | 打开网页 |
| 下载 | https://网址/简历.pdf | 下载文件 |
target="_blank"和rel="noopener noreferrer"的作用：
target="_blank"：在新标签页打开链接，避免用户离开你的简历页面rel="noopener noreferrer"：安全最佳实践，防止新页面通过window.opener操纵原页面
六、列表的灵活运用
简历中大量用到列表：技能列表、工作职责、项目要点等。HTML 提供了三种列表：
1. 无序列表ul—— 技能、职责
<ul><li>负责公司核心产品的前端架构设计</li><li>主导前端性能优化项目</li><li>搭建前端组件库，封装 60+ 通用组件</li></ul>2. 有序列表ol—— 排名、步骤
<ol><li>专业排名：前 10%</li><li>获得校级优秀毕业生称号</li><li>担任计算机学院学生会技术部部长</li></ol>3. 定义列表dl—— 技能分类
<dl><dt><strong>前端基础</strong></dt><dd>HTML5, CSS3, JavaScript, TypeScript</dd><dt><strong>框架与库</strong></dt><dd>Vue.js, React, Element UI</dd></dl>| 列表类型 | 标签 | 适用场景 |
|---|---|---|
| 无序列表 | ul > li | 技能列表、工作职责、项目要点 |
| 有序列表 | ol > li | 排名、成绩、步骤说明 |
| 定义列表 | dl > dt + dd | 术语解释、技能分类 |
七、time 标签：语义化时间
简历中充斥着各种日期：入职时间、毕业时间、项目周期。用time标签包裹这些日期，可以让机器（搜索引擎、日历应用）更好地理解。
<!-- datetime 属性使用 ISO 8601 格式：YYYY-MM-DD 或 YYYY-MM --><p><timedatetime="2021-03">2021年3月</time>- 至今</p><p><timedatetime="2018-07">2018年7月</time>-<timedatetime="2021-02">2021年2月</time></p>datetime属性格式规范：
| 精度 | 格式 | 示例 |
|---|---|---|
| 年月日 | YYYY-MM-DD | 2024-06-01 |
| 年月 | YYYY-MM | 2024-06 |
| 年份 | YYYY | 2024 |
| 完整时间 | YYYY-MM-DDTHH:MM:SS | 2024-06-01T09:30:00 |
八、hr 分隔线
hr（Horizontal Rule）用于在内容区块之间创建视觉分隔。
<section><h2>工作经历</h2><!-- 工作经历内容 --></section><!-- 分隔线 --><hr><section><h2>教育经历</h2><!-- 教育经历内容 --></section>在 CSS 中可以对
hr进行美化，比如改变颜色、粗细、甚至用渐变背景替代默认样式。
九、少量内联 CSS 让简历变美观
读者还没有系统学习 CSS，但一份"裸奔"的 HTML 简历看起来太简陋了。我们用少量内联样式让简历整洁专业。
样式代码放在<head>中的<style>标签里：
<head><style>/* 页面整体设置 */body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background-color:#f5f5f5;/* 浅灰背景 */color:#333;/* 深灰文字 */line-height:1.6;/* 舒适行高 */margin:0;padding:0;}/* 内容区容器：白色卡片效果 */.container{max-width:800px;/* 最大宽度 */margin:40px auto;/* 上下40px，左右居中 */background-color:#fff;/* 白色背景 */padding:50px;/* 内边距 */border-radius:8px;/* 圆角 */box-shadow:0 2px 10pxrgba(0,0,0,0.1);/* 阴影 */}/* 标题样式 */h2{color:#2c3e50;border-bottom:2px solid #3498db;/* 底部蓝色边框 */padding-bottom:8px;font-size:20px;}/* 链接样式 */a{color:#3498db;text-decoration:none;/* 去除下划线 */}a:hover{text-decoration:underline;/* 悬停时显示下划线 */}</style></head>关键 CSS 概念速览：
| 属性 | 作用 | 示例 |
|---|---|---|
font-family | 字体 | "PingFang SC", "Microsoft YaHei", sans-serif |
background-color | 背景色 | #f5f5f5 |
color | 文字颜色 | #333 |
max-width | 最大宽度 | 800px |
margin | 外边距 | 40px auto（上下40，左右自动居中） |
padding | 内边距 | 50px |
border-radius | 圆角 | 8px |
box-shadow | 阴影 | 0 2px 10px rgba(0,0,0,0.1) |
text-decoration | 文本装饰 | none/underline |
十、完整简历代码结构回顾
把以上所有知识点组合起来，一份完整简历的 HTML 结构如下：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>李明 - 前端开发工程师简历</title><style>/* CSS 样式代码 */</style></head><body><divclass="container"><header><figure><imgsrc="..."alt="头像"width="120"height="120"><figcaption>个人证件照</figcaption></figure><h1>李明</h1><p>前端开发工程师 | 5年经验</p><div><ahref="mailto:...">邮箱</a><ahref="tel:...">电话</a><ahref="https://..."target="_blank">GitHub</a></div></header><main><section><h2>个人简介</h2>...</section><hr><section><h2>工作经历</h2><article><h3>高级前端开发 - 字节跳动</h3><timedatetime="2021-03">2021年3月</time><ul><li>...</li></ul></article></section><hr><section><h2>教育经历</h2>...</section><hr><section><h2>项目经验</h2>...</section><hr><section><h2>专业技能</h2>...</section><aside><p>温馨提示：...</p></aside></main><footer><p>©2024 李明. 保留所有权利。</p></footer></div></body></html>动手练习
练习 1：替换个人信息（入门级）
打开配套代码resume.html，将以下信息替换为你自己的真实信息：
- 姓名（
h1标签内） - 职位和年限（
job-title类所在的p标签） - 邮箱地址（
mailto:链接） - 电话号码（
tel:链接） - 社交链接（GitHub、博客等）
提示：mailto:和tel:后面的内容要替换成你自己的，链接文字也要同步修改。
练习 2：添加一段实习经历（进阶级）
在"工作经历" section 中，新增一个article，填写你的一段实习或兼职经历。
要求：
- 使用
h3作为职位和公司名 - 使用
time标签标记起止时间 - 使用
ul > li列出 2-3 条工作职责 - 确保时间线按倒序排列（最新的经历在最前面）
参考结构：
<article><h3>前端实习生 - XX公司</h3><p><timedatetime="2023-07">2023年7月</time>-<timedatetime="2023-09">2023年9月</time></p><ul><li>职责1...</li><li>职责2...</li></ul></article>练习 3：添加一个项目经验（挑战级）
在"项目经验" section 中，新增一个带有project-card类的article，描述你做过的一个项目。
要求：
- 项目名用
h3 - 项目周期用
time标签 - 项目简介用
p标签 - 技术栈和职责用
ul > li - 尝试将项目中的某个关键词做成链接（比如链接到 GitHub 仓库或在线演示地址）
常见误区
| 误区 | 真相 |
|---|---|
用div包裹所有内容，不用语义化标签 | 语义化标签（header/main/section等）让页面结构清晰，有利于 SEO 和无障碍访问 |
页面放多个h1标签 | 一个页面应该只有一个h1，通常是姓名或页面主标题 |
img标签不写alt属性 | alt是必须的，它描述图片内容，供屏幕阅读器朗读和 SEO 抓取 |
| 联系方式只写纯文本，不做成链接 | 邮箱用mailto:、电话用tel:做成链接，方便 HR 一键联系 |
| 工作经历按正序排列（最早的在前） | 简历应该按倒序排列，最新的经历放在最前面 |
所有链接都用target="_blank" | 只有指向外部网站的链接才需要新标签页打开；页面内锚点链接不需要 |
用br标签做列表或段落分隔 | 列表用ul/ol，段落分隔用p或hr，br只用于同一段内的换行 |
| 内联样式写得过多过复杂 | 内联样式只用于简单修饰；复杂样式应放在独立的.css文件中 |
速查卡片
简历页面结构速查
<div class="container"> <header> 头像 + 姓名 + 联系方式 </header> <main> <section> 个人简介 </section> <hr> <section> 工作经历 (article x n) </section> <hr> <section> 教育经历 </section> <hr> <section> 项目经验 (article x n) </section> <hr> <section> 专业技能 </section> </main> <aside> 提示/补充信息 </aside> <footer> 版权信息 </footer> </div>链接协议速查
| 类型 | 代码示例 | 用户点击后 |
|---|---|---|
| 邮件 | <a href="mailto:xxx@example.com"> | 打开邮件客户端 |
| 电话 | <a href="tel:+86138xxxx"> | 手机端直接拨号 |
| 网页 | <a href="https://..."> | 打开网页 |
| 下载 | <a href="resume.pdf" download> | 下载文件 |
语义化标签速查
| 标签 | 用途 | 出现次数 |
|---|---|---|
header | 页面/区块头部 | 1次（页面级） |
main | 主要内容区 | 1次 |
section | 内容区块 | 多次 |
article | 独立内容单元 | 多次 |
aside | 侧边/辅助内容 | 0-1次 |
footer | 页面/区块底部 | 1次 |
figure | 图文组合 | 0-多次 |
figcaption | 图片标题 | 配合 figure |
time | 时间标记 | 多次 |
hr | 水平分隔线 | 多次 |
扩展阅读
- MDN - HTML 语义化
- MDN -
<header>元素 - MDN -
<main>元素 - MDN -
<section>元素 - MDN -
<article>元素 - MDN -
<time>元素 - MDN -
<figure>和<figcaption> - MDN - 超链接详解