免费个人网站模板怎么选：博客、作品集与个人主页的适用场景

下面提供三份可直接复制保存的个人网站 HTML 源码，分别用于个人主页、在线简历和作品集。每份源码都带有实际版块与示例文字，不需要安装编辑器或额外组件：复制代码，保存为对应的 .html 文件，再用浏览器打开即可预览。示例中的姓名、经历、项目和邮箱均可替换成自己的。

模板文件目录

文件名	适用方向	包含版块
`index-home.html`	个人主页、自由职业者介绍	个人定位、服务项目、经历、联系方式
`index-resume.html`	求职简历、职业经历展示	求职目标、技能、工作经历、教育背景
`index-portfolio.html`	设计、摄影、开发及个人创作	项目背景、本人职责、交付成果、联系方法

这三份源码均为单文件 HTML，不依赖外部图片、字体或脚本。复制时从代码首行开始，保存时使用表格中的文件名；若编辑器询问编码方式，选择 UTF-8，避免中文字符显示异常。

个人主页模板：介绍与服务展示

这份模板适合插画师、顾问、摄影师和其他独立从业者。访客打开后会先看到姓名、职业定位和服务方向，再向下浏览个人经历与联系方式。服务描述尽量写成“服务对象＋交付成果”，让合作方能快速判断是否适合联系。

个人介绍：填写姓名、职业称谓、专长领域和一句简短自我介绍。
服务项目：写明服务面向谁，以及会交付哪些作品或文件。
经历与技能：补充相关经验、常用工具和代表性工作。
联系方式：替换示例邮箱，填写便于合作方联系的地址。

例如，可将“提供插画设计”改成“为文化活动绘制主视觉，并交付适用于海报与社交媒体的配套插画”。这样的描述能具体说明服务范围和交付成果。

在线简历模板：突出岗位与经历

简历源码把目标岗位放在姓名下方，并按“求职目标—技能—工作经历—教育背景”的顺序组织版块。工作经历建议从最近一份开始写，每段包含单位或项目名称、职位、时间范围及实际成果。

求职目标：填写明确岗位，例如“前端开发工程师”或“品牌视觉设计师”。
核心技能：按岗位相关程度排列工具、方法及实际应用场景。
工作经历：说明负责事项、采取的行动和完成的成果。
教育背景：列出学校、专业与毕业时间；应届求职者可补充课程项目。

“参与官网改版”可以具体改写为“负责产品列表与详情模块改版，整理组件规范并完成移动端适配”。如果项目属于团队协作，也应写明本人负责的部分，避免把团队成果误写成个人独立完成。

作品集模板：用项目说明能力

作品集适合设计师、摄影师、开发者和内容创作者。每个项目都可以按“项目名称—背景—本人职责—完成成果”填写。九游体育优先放三至六个与目标岗位或客户需求相关的案例；少而有代表性的项目，通常比大量相似作品更容易说明专长。

项目名称：使用清晰标题，并用一句话概括项目目标。
项目背景：说明项目面向的用户、使用场景或委托需求。
本人职责：列明自己负责调研、设计、拍摄、开发或文案中的哪些工作。
完成成果：写出交付物、上线范围或实际反馈；没有统计数据时，说明具体完成了什么。

例如，摄影项目可以说明拍摄对象、场地和成片用途；产品设计项目则可以写出本人负责的流程、界面范围及最终交付文件。项目说明保持简洁，重点放在能证明实际能力的细节上。

源码一：个人主页（index-home.html）

复制以下完整代码，替换林一的职业介绍、服务描述和邮箱，再保存为 index-home.html。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>林一｜独立插画师</title>
</head>
<body>
  <header>
    <h1>林一｜独立插画师</h1>
    <p>为出版、文化活动与品牌项目创作插画。</p>
  </header>
  <main>
    <section>
      <h2>关于我</h2>
      <p>常驻上海，擅长人物插画与轻松明快的色彩表达。</p>
    </section>
    <section>
      <h2>服务项目</h2>
      <ul>
        <li>活动主视觉：交付海报主图与社交媒体配图。</li>
        <li>品牌插画：为包装、刊物或品牌栏目绘制插画。</li>
      </ul>
    </section>
    <section>
      <h2>相关经历</h2>
      <p>持续为出版与文化活动完成插画委托。</p>
    </section>
    <section>
      <h2>联系我</h2>
      <p>邮箱：[email protected]</p>
    </section>
  </main>
</body>
</html>

源码二：在线简历（index-resume.html）

此版本将求职目标和工作经历放在醒目位置。把示例岗位、公司、任职时间和成果换成个人经历后，保存为 index-resume.html。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>陈予安｜前端开发工程师简历</title>
</head>
<body>
  <header>
    <h1>陈予安</h1>
    <p>求职目标：前端开发工程师</p>
    <p>邮箱：[email protected]</p>
  </header>
  <main>
    <section>
      <h2>个人简介</h2>
      <p>三年前端开发经验，参与企业官网与产品管理工具建设。</p>
    </section>
    <section>
      <h2>核心技能</h2>
      <ul>
        <li>熟悉 HTML、CSS 与 JavaScript。</li>
        <li>能够拆分界面组件并适配移动端布局。</li>
        <li>具备接口联调、问题排查与团队协作经验。</li>
      </ul>
    </section>
    <section>
      <h2>工作经历</h2>
      <h3>星桥科技｜前端开发工程师</h3>
      <p>任职时间：填写起止年月。</p>
      <p>负责产品列表与详情模块改版，整理组件规范并完成移动端适配。</p>
    </section>
    <section>
      <h2>教育背景</h2>
      <p>东海大学｜计算机科学与技术｜本科</p>
      <p>毕业时间：按实际情况填写。</p>
    </section>
  </main>
</body>
</html>

源码三：作品集（index-portfolio.html）

作品集源码预置两个项目卡片。复制后可增删项目区块，并替换每个案例的名称、背景、本人职责和成果，再保存为 index-portfolio.html。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>周禾｜设计作品集</title>
</head>
<body>
  <header>
    <h1>周禾｜视觉设计师</h1>
    <p>专注品牌识别、活动视觉与数字产品界面。</p>
  </header>
  <main>
    <section>
      <h2>精选项目</h2>
      <article>
        <h3>山野咖啡品牌视觉</h3>
        <p>项目背景：为新开业的社区咖啡店建立统一视觉识别。</p>
        <p>本人职责：负责标志、菜单版式与社交媒体配图。</p>
        <p>完成成果：交付品牌基础规范、印刷菜单与线上宣传图。</p>
      </article>
      <article>
        <h3>城市阅读节活动视觉</h3>
        <p>项目背景：为面向本地读者的周末阅读活动设计宣传物料。</p>
        <p>本人职责：完成主视觉构思、海报排版与现场指引图。</p>
        <p>完成成果：交付活动海报、社交媒体配图及现场导视文件。</p>
      </article>
    </section>
    <section>
      <h2>联系我</h2>
      <p>邮箱：[email protected]</p>
    </section>
  </main>
</body>
</html>