简介这份资源是一套可直接运行的HTML个人简介网页源码面向想学习前端布局与响应式设计的初学者及需要快速搭建个人展示页的开发者。压缩包共122个文件约36.23MB包含3个html页面、10个css样式表、12个js脚本以及less与scss预处理器源码另配有png、jpg、gif等图片素材和ttf、woff、eot等字体文件还附带一段mp4演示视频覆盖页面结构、样式与交互的完整实现。源码中运用了Bootstrap栅格、Font Awesome图标、轮播与灯箱等常见组件并借助媒体查询、flex与grid布局实现PC端与移动端的自适应显示读者可据此理解标题、段落、列表、图片、链接等标签的语义化用法以及字体、颜色、过渡动画等CSS美化技巧。目前已有20811人学习下载适合作为前端入门练手或简历页二次开发的参考模板。1. 博主推荐 HTML 个人简介网页从一份源码拆出可复用的建站套路刷到博主推荐「HTML 制作一个美观的个人简介网页附源码」时多数人第一反应是收藏第二反应是打开源码发现一堆!doctype htmlhtml langzh-cnheadmeta charsetutf-8就关掉了。问题不在源码本身而在于没人告诉你这份 HTML 里哪些是骨架、哪些是皮肤、哪些是能换成自己信息的插槽。个人简介网页本质是一个单页静态站点核心就三块结构HTML、样式CSS、少量交互JS。它适合自由职业者、求职者、独立开发者做个人名片页也适合前端新手拿来做第一个能拿得出手的完整项目。下面我按「先看懂一份源码怎么组织再动手改成自己的最后处理部署和踩坑」的顺序讲每一步都能直接抄。2. 一份个人简介网页源码的骨架拆解与选型理由2.1 为什么个人简介页首选单文件 HTML 而不是框架个人简介页的信息量极小头像、姓名、一句话介绍、几个社交链接、一段经历。用 React 或 Vue 搭构建工具、依赖安装、打包配置加起来比页面本身还重。单文件 HTML 的优势是零构建、双击即开、扔到任何静态托管都能跑。常见做法是把 HTML、CSS、JS 写在一个文件里用style和script内联方便博主直接发源码也方便你复制后改。代价是文件会偏长但对一个几百行的简介页来说完全可接受。如果你后续想加博客列表或作品集再拆成index.htmlstyle.cssscript.js三个文件也不迟。选型判断标准很简单页面是否需要频繁的数据交互和组件复用。个人简介页不需要所以单文件是性价比最高的方案。2.2 源码里必须认识的 6 个结构块拿到任何一份个人简介源码先按这 6 块去读就不会迷路。第一块是文档声明和头部!doctype html告诉浏览器用标准模式渲染html langzh-cn声明中文meta charsetutf-8保证中文不乱码meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的命根子。第二块是title和meta namedescription影响分享卡片和搜索摘要。第三块是style里的 CSS 变量和布局。第四块是body里的语义标签header放头像和名字section放简介和经历footer放版权或联系方式。第五块是script里的交互比如平滑滚动或返回顶部。第六块是外部资源引用比如字体图标或 Google Fonts。下面是一份最小可用的骨架你可以直接存成index.html!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title张三 | 前端开发/title meta namedescription content张三的个人简介前端开发工程师专注 Web 性能优化。 style /* 全局变量改这里就能换主题色 */ :root { --primary: #2563eb; --text: #1f2937; --bg: #f9fafb; --card: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } .container { max-width: 720px; margin: 0 auto; padding: 48px 20px; } header { text-align: center; margin-bottom: 40px; } .avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--card); box-shadow: 0 4px 12px rgba(0,0,0,.08); } h1 { font-size: 28px; margin: 16px 0 8px; } .tagline { color: #6b7280; font-size: 16px; } section { background: var(--card); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); } section h2 { font-size: 18px; margin-bottom: 12px; color: var(--primary); } .links a { display: inline-block; margin-right: 12px; color: var(--primary); text-decoration: none; font-weight: 500; } .links a:hover { text-decoration: underline; } /style /head body div classcontainer header img classavatar srcavatar.jpg alt张三的头像 h1张三/h1 p classtagline前端开发工程师 · 专注 Web 性能优化/p /header section h2关于我/h2 p5 年前端经验做过电商、SaaS 后台和内容站喜欢把页面加载时间压到 1 秒以内。/p /section section h2联系我/h2 div classlinks a hrefmailto:zhangsanexample.com邮箱/a a hrefhttps://github.com/example target_blank relnoopenerGitHub/a /div /section /div /body /html这段代码的逻辑说明:root里定义 CSS 变量换主题色只改--primary一处.container限制最大宽度 720px 并居中保证大屏不散、小屏不挤header用text-align: center做居中section用卡片式白底加圆角阴影视觉上把信息分组。参数说明max-width控制阅读舒适度720px 是单栏简介页的常用值border-radius: 50%让头像变圆box-shadow的透明度控制在 0.06 到 0.08 之间太重会显脏。target_blank配relnoopener是外链的安全习惯防止新页面通过window.opener操作原页面。2.3 移动端适配的三个必调参数个人简介页被手机打开的概率远高于电脑因为别人多半是在社交软件里点开你的链接。移动端适配不做好头像会溢出、文字会太小、卡片会贴边。三个必调参数第一meta nameviewport必须写widthdevice-width, initial-scale1.0缺了它手机浏览器会按 980px 虚拟宽度渲染字小到看不清。第二容器内边距用padding: 48px 20px这类写法左右至少留 16px 到 24px避免内容贴屏幕边缘。第三字号不要用固定px写死正文body用line-height: 1.6配合相对单位或者用clamp()做流体字号例如h1 { font-size: clamp(22px, 5vw, 28px); }这样小屏不会撑破、大屏不会太小。改完在浏览器开发者工具里切到 iPhone SE 宽度375px看一眼没有横向滚动条就算过关。3. 把源码改成自己的头像、文案、配色与交互3.1 替换个人信息的 4 个位置与图片处理一份源码拿到手你要改的无非四类内容文本、图片、链接、配色。文本在h1、.tagline、section的p里直接替换即可。图片是新手最容易翻车的地方头像建议用正方形原图尺寸 400×400 以上格式优先 WebP 或 JPG控制在 100KB 以内。如果原图是长方形object-fit: cover会裁掉两边所以人像要居中。链接注意mailto:后面跟邮箱社交链接用完整 URL。配色改:root里的变量推荐用对比度工具确认文字和背景的对比度至少 4.5:1否则在阳光下看不清。下面是一个批量替换信息的示例把占位内容换成你的header img classavatar srcmy-photo.webp alt李四的头像 h1李四/h1 p classtagline独立开发者 · 做小工具和自动化脚本/p /header section h2关于我/h2 p写了 8 年 Python做过数据采集、报表自动化和桌面小工具现在靠独立产品养活自己。/p /section section h2作品/h2 ul li批量图片压缩工具日活 2000/li liMarkdown 转公众号排版器开源在 GitHub/li /ul /section逻辑说明alt属性写清楚图片内容既是无障碍要求也是图片加载失败时的兜底文字。作品列表用ul而不是一堆div语义更清晰屏幕阅读器能正确读出条目数。参数说明图片文件名建议用英文小写加连字符避免中文文件名在某些服务器上出现编码问题src用相对路径my-photo.webp保证把 HTML 和图片放同一目录就能预览。3.2 用 CSS 变量做一套可切换的配色方案博主推荐的源码往往配色固定但你可能想要深色模式或品牌色。用 CSS 变量加prefers-color-scheme媒体查询可以做到跟随系统自动切换不用写 JS。核心思路是把颜色全部抽成变量然后在媒体查询里覆盖变量值。下面这段加在style末尾media (prefers-color-scheme: dark) { :root { --primary: #60a5fa; --text: #e5e7eb; --bg: #111827; --card: #1f2937; } .avatar { border-color: var(--card); } section { box-shadow: 0 1px 3px rgba(0,0,0,.4); } }逻辑说明媒体查询检测到系统是深色模式时重新定义四个变量所有引用变量的地方自动变色不需要逐个改选择器。参数说明深色模式下主色要提亮#2563eb换成#60a5fa才有足够对比度背景用#111827而不是纯黑#000纯黑配白字在 OLED 屏上会有拖影感。注意box-shadow在深色背景上要加重透明度否则阴影看不见卡片会糊成一片。3.3 加一个返回顶部按钮20 行 JS 的完整实现个人简介页如果内容稍长返回顶部是提升体验的小细节。实现分三步HTML 放一个按钮CSS 控制显隐和位置JS 监听滚动。下面是完整代码可以直接追加到/body前button idbackTop aria-label返回顶部↑/button style #backTop { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } #backTop.show { opacity: 1; visibility: visible; } /style script const btn document.getElementById(backTop); // 滚动超过 300px 显示按钮 window.addEventListener(scroll, () { btn.classList.toggle(show, window.scrollY 300); }); btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); }); /script逻辑说明classList.toggle(show, 条件)第二个参数为真时加类、为假时移除比写 if-else 简洁。window.scrollTo传对象用behavior: smooth实现平滑滚动比 CSS 的scroll-behavior兼容性更可控。参数说明300是显示阈值页面短可以调小到 200页面长可以调到 500按钮尺寸 44×44 是移动端可点击区域的最小推荐值再小手指点不准。aria-label给屏幕阅读器读别省。4. 部署上线与性能优化让简介页 1 秒内打开4.1 三种零成本部署方式的操作步骤写完的 HTML 要能被别人访问才算真正上线。三种常见方式按门槛从低到高排第一种是静态托管平台把index.html和图片拖进仓库连上平台自动构建几分钟出链接适合完全不想碰服务器的人。第二种是对象存储加 CDN上传文件后开启静态网站托管适合已有云账号的人。第三种是自己有服务器用 Nginx 托管适合想顺便练运维的人。以 Nginx 为例把文件放到/var/www/profile配置如下server { listen 80; server_name profile.example.com; root /var/www/profile; index index.html; location / { try_files $uri $uri/ 404; } # 静态资源缓存一年 location ~* \.(jpg|jpeg|png|webp|css|js)$ { expires 1y; add_header Cache-Control public, immutable; } }逻辑说明try_files先找文件再找目录都没有返回 404避免路径写错时暴露目录列表。参数说明expires 1y让图片和样式缓存一年但前提是文件名带哈希或版本号否则你更新了图片用户看到的还是旧的。个人简介页图片少缓存策略可以简单点但要知道这个坑。改完配置用nginx -t检查语法再nginx -s reload生效。4.2 图片压缩与字体加载的取舍个人简介页最大的性能负担通常是头像和背景图。一张手机直出照片 3MB 到 5MB直接放上去弱网用户要等好几秒。处理办法用工具压到 100KB 以内格式转 WebP保留 JPG 作为兜底。HTML 里可以用picture做格式协商picture source srcsetavatar.webp typeimage/webp img classavatar srcavatar.jpg alt李四的头像 width120 height120 /picture逻辑说明浏览器支持 WebP 就加载 WebP不支持就回退到 JPG。参数说明width和height必须写浏览器提前预留空间避免图片加载完页面跳动这个跳动叫布局偏移是体验大敌。字体方面个人简介页没必要加载整套中文字体动辄几 MB。用系统字体栈system-ui, -apple-system, Segoe UI, sans-serif就够了零请求、零等待视觉上也不差。4.3 用 Lighthouse 验证的三个指标上线前跑一次 Chrome 自带的 Lighthouse重点看三个指标性能、无障碍、最佳实践。性能低于 90 分先查图片大小和是否有阻塞渲染的资源。无障碍低于 90 分多半是图片缺alt、文字对比度不够、按钮缺可访问名称。最佳实践报警常见原因是外链没加relnoopener、控制台有报错、HTTPS 没配。跑分不是目的但它是快速发现低级问题的黑匣子。我一般会在改完图片和字体后再跑一次确认没有回退。5. 避坑与排查个人简介页最常见的 5 个翻车现场5.1 中文乱码现象是页面显示「测试」现象本地打开正常传到服务器后中文变成一堆奇怪符号。原因HTML 文件保存编码和meta charset声明不一致或者服务器返回的Content-Type头里带了错误的字符集。解决确保编辑器保存为 UTF-8 无 BOMmeta charsetutf-8放在head第一行服务器配置里加charset utf-8;。三者对齐就不会乱。5.2 移动端出现横向滚动条现象手机上页面能左右拖动右侧有空白。原因某个元素宽度超过视口常见的是固定width: 1000px的容器、大尺寸图片没加max-width: 100%、或者负边距溢出。解决给img加max-width: 100%; height: auto;容器用max-width而不是width排查时在开发者工具里逐个元素看盒模型谁超出点谁。5.3 头像变形或模糊现象头像被拉成椭圆或者放大后糊成马赛克。原因object-fit没设图片按容器宽高强行拉伸或者原图分辨率太低被 CSS 放大显示。解决容器设固定宽高加border-radius: 50%图片加object-fit: cover原图至少是显示尺寸的 2 倍显示 120px 就用 240px 以上的图兼顾高清屏。5.4 平滑滚动在部分浏览器失效现象点返回顶部是瞬间跳上去没有平滑效果。原因behavior: smooth在旧版浏览器或某些 WebView 里不支持。解决加 CSS 兜底html { scroll-behavior: smooth; }JS 里判断scrollBehavior in document.documentElement.style不支持就退回瞬间滚动。别为了一个动效引入整个动画库不值得。5.5 部署后图片 404现象本地预览图片正常线上头像裂开。原因路径大小写不一致Linux 服务器区分大小写本地 Windows 不区分或者图片没一起上传。解决文件名统一小写HTML 里的src和实际文件名逐字符核对上传后用浏览器直接访问图片 URL确认能打开再查页面。6. 进阶技巧把简介页做成可维护的模板写到这页面能跑、能看、能上线了。但如果你像我一样过几个月就想改改文案、换换配色每次翻 HTML 找位置会很烦。我的习惯是把可变内容抽成一个 JS 配置对象页面加载时填充。这样改信息只动一个地方HTML 结构保持稳定。下面是一个轻量实现script // 所有个人信息集中在这里改这一处即可 const PROFILE { name: 李四, tagline: 独立开发者 · 做小工具和自动化脚本, about: 写了 8 年 Python做过数据采集、报表自动化和桌面小工具。, links: [ { text: 邮箱, href: mailto:lisiexample.com }, { text: GitHub, href: https://github.com/example } ] }; document.querySelector(h1).textContent PROFILE.name; document.querySelector(.tagline).textContent PROFILE.tagline; document.querySelector(#about p).textContent PROFILE.about; const linkBox document.querySelector(.links); linkBox.innerHTML PROFILE.links .map(l a href${l.href} target_blank relnoopener${l.text}/a) .join(); /script逻辑说明PROFILE对象是唯一数据源渲染逻辑读它并写入 DOM。map加join把链接数组拼成 HTML 字符串比循环创建元素短。参数说明textContent赋值纯文本天然防 XSS如果链接文字来自用户输入要用textContent而不是innerHTML这里链接是你自己写的用模板字符串没问题。这个模式的好处是以后想加「技能标签」或「时间线」只需在对象里加字段、在渲染逻辑里加一段不用动 HTML 骨架。再进一步你可以把PROFILE对象单独存成profile.jsHTML 里用script srcprofile.js/script引入这样内容和结构彻底分离。想换主题就再做一套 CSS 变量文件用link切换。这套思路不复杂但能让你在半年后回来改简介时五分钟搞定而不是半小时找代码。我自己踩过的最大坑是早期把样式、内容、脚本全糊在一起改一个电话号码要翻三百行后来才养成抽配置的习惯。希望帮到你。本文还有配套的精品资源点击获取
