实战：完成第一个网页

把前面学的知识点串起来，做一个完整的个人主页。跟着步骤做，你就有第一个能上线的网页了。

目标

做一个"个人名片"网页：有导航、简介、技能、联系，纯 HTML + CSS。

完整代码

新建 index.html，粘贴全部内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>小明的个人主页</title>
  <meta name="description" content="小明，一名前端学习者。">
  <style>
    body { font-family: sans-serif; margin: 0; color: #333; }
    header { background: #2c3e50; color: #fff; padding: 20px; text-align: center; }
    nav a { color: #fff; margin: 0 12px; text-decoration: none; }
    main { max-width: 700px; margin: 0 auto; padding: 24px; }
    .skills { display: flex; gap: 12px; flex-wrap: wrap; }
    .skill { background: #ecf0f1; padding: 10px 16px; border-radius: 6px; }
    footer { background: #ecf0f1; text-align: center; padding: 16px; }
  </style>
</head>
<body>

  <header>
    <h1>小明</h1>
    <nav>
      <a href="#about">关于</a>
      <a href="#skills">技能</a>
      <a href="#contact">联系</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>关于我</h2>
      <p>你好，我是小明，正在学习前端开发。这是我用 HTML 做的第一个网页。</p>
    </section>

    <section id="skills">
      <h2>我的技能</h2>
      <div class="skills">
        <span class="skill">HTML</span>
        <span class="skill">CSS</span>
        <span class="skill">即将学习 JavaScript</span>
      </div>
    </section>

    <section id="contact">
      <h2>联系我</h2>
      <p>邮箱：<a href="mailto:xiaoming@example.com">xiaoming@example.com</a></p>
    </section>
  </main>

  <footer>
    <p>© 2026 小明</p>
  </footer>

</body>
</html>

代码里用到了什么

知识	用在哪
语义化标签	header nav main section footer
链接	导航 a href="#about" 锚点跳转
div + class	.skills .skill 配合 CSS
CSS 盒模型	padding margin border-radius
Flex 布局	.skills 的 display:flex

跑起来

1. 保存文件
2. 双击用浏览器打开
3. 点导航能跳转到对应区块

进阶方向

• 加入 JavaScript，做交互
• 加媒体查询，适配手机
• 部署上线（GitHub Pages / Cloudflare Pages）
• 写 sitemap 提交搜索引擎

恭喜

你已经完成了 HTML 入门到实战的完整学习。接下来就是多写、多练、多看优秀网站。