综合实战：个人主页

HTML 教程 · 第 14 章 · 10 次浏览

把前面 13 章的内容串起来，做一个完整的个人主页。这个页面会用到：文档结构、标题段落、文本格式化、链接、图片、列表、表格、表单、区块布局、语义化标签、多媒体。做完你就有了一个能部署上线、能继续改造成作品集的基础页面。

页面结构规划

先想清楚页面分几块，再动手写。规划：

header（站点名 + 导航）
main
  section#about    个人简介（图片 + 文字）
  section#skills   技能清单（列表 + 进度条效果）
  section#works    作品展示（表格）
  section#contact  联系表单
footer（版权 + 备案）

分步实现

第一步：骨架与头部。写文档声明、头部和导航，导航用列表加链接，锚点跳转到页面各区块：

<a href="#about">关于我</a>
<a href="#skills">技能</a>
<a href="#works">作品</a>
<a href="#contact">联系</a>

第二步：简介区。图片用 <figure> 包起来带说明，文字用标题和段落组织。alt 写清楚图片内容。

第三步：技能区。用无序列表列出掌握的技能；想做得更专业，用 <dl> 术语表结构，每一项配一句说明。

第四步：作品区。用表格展示作品：名称、说明、技术栈、链接。表头用 <th>，表头行放 <thead>。

第五步：联系区。表单收集姓名、邮箱、留言。注意：纯 HTML 表单点了提交没有后端接收，action 可以先指向 #，等学了 PHP 再把表单接到后端。

第六步：页脚。版权信息用 <small>，联系信息用 <address>。

上线前的检查清单

标题层级：h1 只有一个，h2/h3 层级不乱；
图片都有 alt，且不是空泛的"图片"二字；
所有链接点一遍，锚点能跳到正确位置；
表单控件都配了 label；
文件保存为 UTF-8 编码，meta charset 正确；
用浏览器 F12 的移动端模拟看一遍，确认没被撑破。

下一步怎么走

页面现在只有结构没有样式，看起来是黑白的。下一步学 CSS：给导航加背景、给区块加布局、给按钮加样式，页面就会从"骨架"变成"成品"。这个个人主页项目建议保留下来，每学一个新知识点（CSS 布局、JS 交互、表单后端处理）就往里加，最后它就是你的第一个完整作品。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <style>
        body { font-family: "Microsoft YaHei", sans-serif; margin: 0; color: #333; }
        header { background: #558b2f; color: #fff; padding: 16px 24px; }
        header h1 { margin: 0 0 8px; font-size: 22px; }
        nav a { color: #fff; margin-right: 16px; text-decoration: none; }
        main { max-width: 820px; margin: 0 auto; padding: 24px; }
        section { margin-bottom: 32px; }
        h2 { color: #33691e; border-bottom: 2px solid #dcedc8; padding-bottom: 6px; }
        figure { margin: 0 0 16px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #e8e8e8; padding: 8px 12px; text-align: left; }
        th { background: #f1f8e9; }
        footer { background: #f5f6f8; text-align: center; padding: 16px; }
        button { background: #7cb342; color: #fff; border: none; padding: 8px 24px; border-radius: 4px; }
    </style>
</head>
<body>
    <header>
        <h1>张三的个人主页</h1>
        <nav>
            <a href="#about">关于我</a>
            <a href="#skills">技能</a>
            <a href="#works">作品</a>
            <a href="#contact">联系</a>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <figure>
                <img src="avatar.png" alt="我的头像" width="120">
                <figcaption>前端开发学习者</figcaption>
            </figure>
            <p>你好，我是<strong>张三</strong>，正在学习 Web 开发。<em>HTML</em>、<em>CSS</em>、<em>JavaScript</em> 是我的日常工具，目标是成为一名能独立完成项目的前端工程师。</p>
        </section>
        <section id="skills">
            <h2>我的技能</h2>
            <ul>
                <li>HTML5：语义化页面结构</li>
                <li>CSS3：布局、动画、响应式</li>
                <li>JavaScript：DOM 操作、事件处理</li>
            </ul>
        </section>
        <section id="works">
            <h2>作品展示</h2>
            <table>
                <thead>
                    <tr><th>作品</th><th>说明</th><th>技术栈</th></tr>
                </thead>
                <tbody>
                    <tr><td>个人主页</td><td>本站，展示个人信息</td><td>HTML + CSS</td></tr>
                    <tr><td>待添加</td><td>学完 JS 后补充</td><td>-</td></tr>
                </tbody>
            </table>
        </section>
        <section id="contact">
            <h2>联系我</h2>
            <form action="#" method="post">
                <p>
                    <label for="name">姓名</label><br>
                    <input type="text" id="name" name="name" required>
                </p>
                <p>
                    <label for="email2">邮箱</label><br>
                    <input type="email" id="email2" name="email" required>
                </p>
                <p>
                    <label for="msg">留言</label><br>
                    <textarea id="msg" name="msg" rows="4" cols="40"></textarea>
                </p>
                <button type="submit">发送</button>
            </form>
        </section>
    </main>
    <footer>
        <address>联系邮箱：zhangsan@example.com</address>
        <p><small>© 2025 张三 · 编程学习网 HTML 教程实战</small></p>
    </footer>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明