简介：这份资源是一套可直接运行的HTML个人简介网页源码，面向想练习前端布局与响应式设计的初学者和进阶学习者，帮助解决从零搭建个人展示页时结构混乱、样式难调的问题。压缩包共122个文件，约36.23MB，包含3个html页面、10个css样式表、12个js脚本，以及less、scss预处理器文件，另有png、jpg、gif等图片素材和ttf、woff、eot等字体文件，配套bootstrap、font-awesome、owl轮播等常用前端库，覆盖页面结构、样式控制与交互效果。源码中运用h1至h6标题、p段落、img头像、a链接、ul与ol列表、div区块及header、footer等标签组织内容，并通过媒体查询、flexbox或grid布局实现PC端与移动端自适应，还加入过渡与动画提升观感。目前已有20811人学习下载，读者可参照完整目录结构修改个人信息与CSS样式，快速产出美观的个人简介页，同时理解响应式设计的实现思路。
1. 一份个人简介网页，为什么值得你花两小时手写而不是套模板
如果你正在找「HTML 制作一个美观的个人简介网页（附源码）」，大概率不是想学标签语法，而是想要一个能直接改、能直接部署、打开就好看的个人主页。我见过太多人卡在同一个地方：收藏了几十套模板，下载下来发现 CSS 是压缩过的、结构是嵌套七八层的 div 汤，改一个头像位置要翻三百行样式，最后放弃。这份方案要解决的就是这件事——用一份结构干净、注释齐全、零依赖的 HTML + CSS + JS 源码，让你两小时内从「拿到代码」到「换成自己的信息并上线」。
它适合三类人：前端新手想拿一个完整项目练手，把 html➕css➕js 基础语法串起来；职场人需要一个比简历 PDF 更体面的个人展示页；独立开发者想给自己的项目做个轻量落地页。整份代码不依赖任何框架和构建工具，双击就能在浏览器打开，改完直接扔到任意静态托管上就能访问。下面我按「结构怎么搭 → 样式怎么写 → 交互怎么做 → 坑在哪 → 怎么改出自己的版本」这条线，把源码拆开讲透。
2. 个人简介网页的骨架：从<!doctype html>到语义化分区
2.1 为什么第一行必须是<!doctype html>
很多人复制代码时习惯从<html>开始，把第一行丢掉，结果页面在某些浏览器里进入怪异模式（quirks mode），盒模型计算和字体渲染全乱。<!doctype html>是 HTML5 的文档类型声明，它告诉浏览器「按标准模式渲染」，这是所有现代布局能正常工作的前提。配合<html lang="zh-cn">声明语言，还能让屏幕阅读器和搜索引擎正确识别页面语种。
一份个人简介页的骨架通常包含这几个语义区块：头部导航、首屏介绍、关于我、技能、项目经历、联系方式、页脚。用语义标签而不是一堆 div，好处是结构自解释，后期改样式时你能一眼看出哪块是哪块。下面是我常用的骨架结构：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- 移动端适配的关键一行，缺了它手机上会按 980px 缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>张三 | 前端开发工程师</title> <meta name="description" content="张三的个人简介，前端开发工程师，专注交互与性能优化。"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="nav">...</header> <main> <section id="hero">...</section> <section id="about">...</section> <section id="skills">...</section> <section id="projects">...</section> <section id="contact">...</section> </main> <footer>...</footer> <script src="main.js"></script> </body> </html>逻辑说明：<head>里三样东西不能省——字符集、视口、标题。<main>包裹主体内容，一个页面只用一个。每个<section>用 id 命名，方便导航锚点跳转和 JS 定位。参数说明：viewport的width=device-width让页面宽度等于设备宽度，initial-scale=1.0禁止初始缩放，这两个值不要改。description控制在 80 字以内，是搜索结果里显示的摘要。
2.2 语义化分区怎么划分才不返工
新手最容易犯的错是按视觉分块，看到哪里颜色变了就切一个 div。正确做法是按内容职责分块。首屏（hero）放姓名、一句话定位、头像和主按钮；关于我放两三段自我介绍；技能用列表或标签云；项目经历用卡片；联系方式放邮箱和社交链接。这样划分的好处是，当你后期想调整顺序或隐藏某块时，直接移动整个 section 即可，不会牵一发动全身。
我一般会在每个 section 上加一个aria-label，比如<section id="skills" aria-label="技能列表">。这不是必须的，但对无障碍访问友好，成本几乎为零。分区确定后，再往每个区里填内容，顺序是先内容后样式，不要一边写结构一边调颜色，那样会反复推翻。
3. 让页面「美观」的 CSS 三件套：布局、配色、字体
3.1 用 Flex 和 Grid 搭出响应式布局
「美观」的第一层是布局稳。个人简介页最常用的两套布局：首屏用 Flex 做水平居中，技能和项目区用 Grid 做自适应网格。下面这段是首屏的核心样式：
/* 首屏：垂直水平居中，最小高度占满一屏 */ #hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; /* 占满视口高度，注意用 min-height 而非 height */ padding: 0 24px; text-align: center; } /* 项目卡片：自动换行的响应式网格 */ #projects .grid { display: grid; /* 每列最小 280px，空间够就自动多排一列 */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }逻辑说明：min-height: 100vh而不是height，是因为内容可能超过一屏，用 height 会溢出裁切。auto-fit配合minmax(280px, 1fr)是响应式网格的经典写法，屏幕宽就多列，窄就单列，不需要写任何媒体查询。参数说明：280px是卡片的最小可读宽度，低于这个值文字会挤；gap控制卡片间距，移动端建议不小于 16px，否则手指容易误触。
3.2 配色和字体：三个变量定全局
配色翻车是个人主页最常见的血泪经验。我的做法是只用一套 CSS 变量控制全局颜色，改主题只改这几行：
:root { --bg: #0f1115; /* 背景深色 */ --text: #e6e8eb; /* 主文字 */ --muted: #9aa0a6; /* 次要文字 */ --accent: #4f8cff; /* 强调色，按钮和链接 */ --radius: 12px; /* 统一圆角 */ } body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif; line-height: 1.7; }逻辑说明：用:root定义变量，全站引用，后期换配色只动这几行。字体栈优先用system-ui，直接调用系统字体，加载零延迟，中文回退到苹方。参数说明：line-height: 1.7是中文正文的舒适行高，低于 1.5 会显得拥挤。强调色只用一个，全站按钮、链接、下划线统一用它，颜色一多就显廉价。
提示：深色背景配浅色文字时，纯白（#fff）会刺眼，用 #e6e8eb 这类略带灰的白更耐看。
3.3 用 CSS 变量和过渡做出「高级感」
高级感往往来自细节：hover 时的平滑过渡、卡片的轻微上浮、按钮的阴影变化。这些都不需要 JS，纯 CSS 就能做：
.card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius); padding: 24px; transition: transform 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--accent); }逻辑说明：transition让状态变化有过渡，translateY(-4px)制造上浮错觉。参数说明：过渡时长 0.2～0.3s 最自然，超过 0.5s 会显得拖沓。半透明白色边框（rgba最后一个参数是透明度）在深色背景上比实色边框更柔和，这是很多模板显得「贵」的小技巧。
4. 交互与动效：用原生 JS 做滚动动画和返回顶部
4.1 滚动进入视口时淡入
页面加载时所有内容一起出现会显得平。用IntersectionObserver做滚动淡入，性能比监听 scroll 事件好得多：
// 选中所有需要动画的元素 const items = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { // 元素进入视口时加上可见类 if (entry.isIntersecting) { entry.target.classList.add('is-visible'); io.unobserve(entry.target); // 触发一次后停止观察，省性能 } }); }, { threshold: 0.15 }); // 元素露出 15% 时触发 items.forEach((el) => io.observe(el));配套 CSS：
.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; }逻辑说明：IntersectionObserver在元素进入视口时回调，加类触发 CSS 过渡。unobserve在触发后移除观察，避免重复计算。参数说明：threshold: 0.15表示元素露出 15% 就触发，值越小越早出现；translateY(20px)的位移不要太大，20～30px 足够，太大像弹跳。
4.2 一键返回顶部的正确实现
返回顶部按钮是个人主页的标配，但很多人写的版本在移动端会抖动。正确做法是监听滚动距离控制按钮显隐，点击时用平滑滚动：
const backTop = document.querySelector('#backTop'); window.addEventListener('scroll', () => { // 滚动超过 400px 才显示按钮 backTop.classList.toggle('show', window.scrollY > 400); }, { passive: true }); // passive 提升滚动性能 backTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); });逻辑说明：passive: true告诉浏览器这个监听器不会阻止默认滚动，能显著提升移动端滚动流畅度。scrollTo的behavior: 'smooth'实现平滑滚动，不需要引入任何库。参数说明：400px 是经验阈值，大约一屏多一点，太早显示会干扰阅读。按钮用position: fixed固定在右下角，记得留出安全边距。
5. 避坑与排查：个人简介网页最常见的 5 个翻车点
5.1 手机上文字溢出屏幕
现象：电脑上正常，手机上一行文字超出屏幕出现横向滚动条。原因：某个元素设了固定宽度（如width: 800px）或长英文单词/链接不换行。解决：全局加* { box-sizing: border-box; }，容器宽度用百分比或max-width，长文本加word-break: break-word;。排查时在浏览器开发者工具里切到手机视图，横向滚动条一出现就能定位到超宽元素。
5.2 图片把布局撑变形
现象：头像或项目截图一加载，整个卡片高度跳变。原因：<img>没设尺寸，图片加载前高度为 0。解决：给图片显式设置width和height，或用aspect-ratio占位。头像建议用border-radius: 50%加object-fit: cover，保证任何比例的图都不变形。
5.3 字体在别人电脑上完全变了样
现象：你本地用的是某款设计字体，发给别人打开变成默认宋体。原因：引用了本地未安装的字体，又没做回退。解决：字体栈里一定写完整回退链，中文优先system-ui、PingFang SC、Microsoft YaHei。如果非要用特殊字体，用@font-face引入并压缩，但个人主页没必要，系统字体足够好看还快。
5.4 锚点跳转被固定导航挡住
现象：点导航跳到「项目经历」，标题被顶部固定导航栏盖住一截。原因：固定导航脱离文档流，锚点定位到元素顶部时被遮挡。解决：给目标 section 加scroll-margin-top: 80px;，值等于导航栏高度。这是最干净的方案，不用写 JS 补偿。
5.5 部署后样式全丢
现象：本地打开正常，传到服务器后页面变成纯文本。原因：CSS 路径写成了绝对路径或大小写不一致，服务器区分大小写而本地不区分。解决：统一用相对路径./style.css，文件名全小写。排查时打开浏览器控制台看 Network 面板，样式文件是不是 404 一目了然。
6. 把源码改成你自己的：内容替换清单与上线前自检
拿到源码后，改造成自己的版本有一套固定顺序，按这个顺序走不会乱。第一步换内容：把<title>、description、首屏姓名和一句话定位、关于我段落、技能列表、项目卡片、联系方式全部替换。第二步换视觉：改:root里的五个颜色变量，换头像图片，调整圆角大小。第三步删冗余：用不到的 section 整块删掉，别留着隐藏，减少维护负担。
上线前我会跑一遍这张自检表：
| 检查项 | 合格标准 | 常见问题 |
|---|---|---|
| 移动端显示 | 手机视图无横向滚动 | 固定宽度元素 |
| 图片加载 | 有占位不跳变 | 缺 width/height |
| 链接可用 | 邮箱、社交链接能点开 | 占位符没换 |
| 加载速度 | 首屏 1 秒内可见 | 大图未压缩 |
| 标题摘要 | 搜索结果显示正确 | title 没改 |
关于部署，这份代码是纯静态的，扔到任意静态托管上都能跑，不需要服务器和数据库。上传前把图片压缩一遍，头像控制在 100KB 以内，项目截图每张 200KB 以内，整站体积能压到 1MB 以下，打开速度会明显不一样。
最后说个我自己的习惯：每次改完样式，我都会把浏览器窗口从最宽拖到最窄，看布局在哪个宽度开始崩，然后针对那个断点补一条媒体查询。个人主页不需要复杂的响应式系统，三四个断点足够覆盖手机、平板、笔记本和宽屏。这套源码我前后改过十几版，最大的教训是——别一上来就追求炫酷动效，先把内容和布局做扎实，动效是锦上添花，内容才是别人愿意停留的理由。希望帮到你。
本文还有配套的精品资源，点击获取
