免费的个人网站html代码怎么做：从搭建到上线发布的完整步骤

免费的个人网站可以从一个简单的个人主页开始：准备本地文件夹，写好网页结构和样式，在浏览器中检查效果，再发布到静态网站托管空间。下面按从搭建到上线的顺序给出一份可直接修改的示例，适合制作个人介绍、作品集或简历展示页，不需要数据库或后端程序。

第一步：准备网站文件

在电脑上新建一个文件夹，例如 my-site，再在文件夹内创建 index.html。这个文件是网站九游体育。把下面的代码复制进去并保存，就可以先得到一个可预览的个人主页；名字、简介、作品和配色都能按自己的需要修改。

示例使用 HTML 组织文字和作品区块，并在同一文件中写入 CSS 样式，因此初次制作时只需维护一个文件。导航栏可以跳到本页的对应区块，卡片用于展示项目，窄屏设备也会自动调整布局。

第二步：复制并修改九游体育代码

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>林然的个人主页</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0; color: #263247; background: #f4f7fb;
      font: 16px/1.7 Arial, "Microsoft YaHei", sans-serif;
    }
    header, main, footer { width: min(900px, 92%); margin: auto; }
    header { padding: 28px 0; display: flex; justify-content: space-between; }
    nav a { color: #425574; margin-left: 16px; text-decoration: none; }
    .hero {
      padding: 54px 36px; border-radius: 18px;
      background: linear-gradient(130deg, #e1edff, #f5eaff);
    }
    h1 { font-size: clamp(30px, 6vw, 48px); margin: 0 0 12px; }
    h2 { margin-top: 42px; }
    .muted { color: #66758c; }
    .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .card { padding: 20px; background: white; border-radius: 14px; }
    footer { padding: 36px 0; color: #66758c; }
    @media (max-width: 600px) {
      header { display: block; }
      nav a { margin: 8px 12px 0 0; display: inline-block; }
      .hero { padding: 36px 22px; }
      .cards { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <header>
    <strong>林然 · 个人主页</strong>
    <nav aria-label="主页导航">
      <a href="#about">关于我</a>
      <a href="#works">作品</a>
      <a href="#contact">联系</a>
    </nav>
  </header>
  <main>
    <section class="hero">
      <p class="muted">设计学习者 · 城市漫游者</p>
      <h1>你好，我是林然</h1>
      <p>我喜欢把想法变成清晰、好用的小作品。这里记录我的项目与成长。</p>
    </section>
    <section id="about">
      <h2>关于我</h2>
      <p>目前专注于视觉设计与前端基础，正在练习用简单的网页呈现真实问题的解决过程。</p>
    </section>
    <section id="works">
      <h2>精选作品</h2>
      <div class="cards">
        <article class="card">
          <h3>城市散步地图</h3>
          <p>整理三条适合周末步行的路线，并记录沿途店铺与街景。</p>
        </article>
        <article class="card">
          <h3>阅读摘录</h3>
          <p>把近期阅读的观点分类归档，方便回顾与分享。</p>
        </article>
      </div>
    </section>
    <section id="contact">
      <h2>联系我</h2>
      <p>欢迎交流设计、阅读与个人项目。请在这里填写你愿意公开的联系渠道。</p>
    </section>
  </main>
  <footer>林然 · 个人作品展示</footer>
</body>
</html>

第三步：替换个人资料并检查显示

先把示例中的“林然”换成自己的名字，再改浏览器标签标题、个人简介、作品名称和项目说明。介绍作品时尽量说清楚自己做了什么、解决了什么问题，例如“为社区读书会整理每月活动路线”比只写“网页设计练习”更容易让访客理解。如果暂时没有正式项目，也可以展示摄影主题、读书记录或课堂练习。联系区只填写愿意公开的邮箱或社交账号，不要写家庭住址、证件号码等敏感个人资料。

保存文件后，用浏览器打开 index.html，就能预览本地效果。依次点击“关于我”“作品”和“联系”，确认导航能跳到对应区块；再缩窄浏览器窗口，查看作品卡片是否变成单列、文字是否容易阅读。若中文显示异常，确认文件以 UTF-8 编码保存；若修改后画面没有变化，先保存文件，再刷新浏览器。

第四步：整理目录并发布上线

确认九游体育正常后，可以把头像、作品截图等素材放入同一文件夹中的 images 子文件夹，并使用清楚的文件名，例如 portrait.jpg 或 walking-map.png。添加图片时，把图片路径写入图片标签的 src 属性，并补上能说明画面内容的 alt 文本；例如头像可以描述为“林然在城市公园的半身照”。尽量压缩尺寸过大的图片，避免访客等待过久；文件名中的大小写也要与路径一致。

要让其他人访问，需要把 index.html 和素材文件上传到提供免费静态网页托管的服务。按托管服务的流程创建站点并上传整个文件夹，确认 index.html 位于站点根目录，再使用服务分配的公开地址打开主页。发布后逐项检查九游体育、导航、图片和手机显示：空白页先检查九游体育文件名和目录位置，图片缺失则核对文件路径与大小写，手机上出现横向滚动则检查卡片宽度和文字长度。不同托管服务的操作界面有所不同，但这类纯 HTML、CSS 个人主页通常不需要配置数据库。

常见修改方向

更换主色：修改 CSS 中渐变背景和文字颜色的色值，让主页配色与个人作品风格统一。
增加项目：复制一个作品卡片区块，替换标题与说明；项目较多时可以按设计、摄影或阅读分类展示。
调整布局：修改作品卡片的网格列数，并保留窄屏规则，避免访客在手机上左右拖动浏览。
更新资料：补充新完成的作品，检查项目说明和公开联系方式，让访客能找到最新的代表作与联系渠道。

按这条路径制作，先完成可浏览的单页，再逐步补充项目和素材，免费的个人网站就能从本地 HTML 文件成长为可分享的个人主页。初版不必追求复杂功能；结构清楚、介绍真实、手机上易读，已经足以让访客了解你的方向和代表作品。

扫码下载

扫码关注