源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

简易个人简历网

2025/12/29
45
0

创建一个个人简历网站是向企业或招聘方展示你的工作成果、技能和个人品牌的重要方式。本文将带你仅使用 HTML 构建一个结构清晰、内容完整的简易作品集页面。

学习目标

  • 掌握 HTML 文档的基本结构（<!DOCTYPE>, <html>, <head>, <body>）

  • 理解如何使用 <header>、<footer> 等语义化标签组织页面

  • 学会用 <table> 布局多列内容（适用于纯 HTML 场景）

  • 了解如何通过内联样式（如 text-align）实现基础对齐

  • 构建包含个人信息、项目亮点、成就与评价的完整作品集结构

项目概览

我们将开发一个简洁的个人作品集网站，展示以下内容：

  • 个人身份与职业定位

  • 核心项目亮点

  • 职业成就与社区参与

  • 学术背景与专业方向

  • 同行评价（增强可信度）

注意：本项目仅使用 HTML，不涉及 CSS 或 JavaScript。重点在于构建清晰、语义化的页面结构。

完整 HTML 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的作品集</title>
</head>
<body>
    <header>
        <h1 style="text-align:center;">张三</h1>
        <p style="text-align:center;">首页 | 项目 | 博客 | 联系我</p>
    </header>
    
    <h2 style="text-align:center;">前端开发工程师与界面设计师</h2>
    
    <table border="1" width="100%">
        <tr>
            <td>
                <h3>作品亮点</h3>
                <ul>
                    <li>响应式 HTML 布局</li>
                    <li>电商平台首页</li>
                    <li>交互式表单设计</li>
                    <li>活动倒计时组件</li>
                    <li>产品落地页原型</li>
                </ul>
            </td>
            <td>
                <h3>职业成就</h3>
                <p>XYZ 公司前端开发实习生<br>主导核心产品界面重构，用户活跃度提升 40%。<br><a href="#">查看我的领英主页</a></p>
                
                <h3>社区贡献</h3>
                <p>积极参与本地及线上开发者社区，定期在技术博客分享经验，并为开源项目提交代码。<br><a href="#">访问我的 GitHub</a></p>
            </td>
            <td>
                <h3>教育背景</h3>
                <p>ABC 大学 计算机科学与技术 学士</p>
                <p>专业方向：</p>
                <ul>
                    <li>系统分析与设计</li>
                    <li>高级 JavaScript 技术</li>
                    <li>Web 可访问性标准</li>
                    <li>Web 应用性能优化</li>
                    <li>云计算基础设施</li>
                    <li>Web 应用安全</li>
                    <li>高级算法</li>
                </ul>
            </td>
        </tr>
    </table>

    <h3>同行评价</h3>
    <table border="1" width="100%">
        <tr>
            <td>张三始终能交付高质量、富有创意的解决方案，远超项目预期。—— Steven，项目负责人</td>
            <td>张三以细致入微的注意力和指导新人的能力著称。—— David，UI 设计师</td>
            <td>张三的问题解决思路对我们团队的成功起到了关键作用。—— Sarah，前端开发工程师</td>
        </tr>
    </table>

    <footer style="text-align:center;">
        © 2025 张三 版权所有
    </footer>
</body>
</html>

代码结构

1. 文档类型与根元素

<!DOCTYPE html>
<html>

  • <!DOCTYPE html> 声明文档为 HTML5 标准。

  • <html> 是整个网页的根容器。

2. 头部信息

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的作品集</title>
</head>

  • charset="UTF-8"：确保中文等多语言字符正确显示。

  • viewport：适配移动设备，保证基础响应能力。

  • <title>：定义浏览器标签页标题。

3. 页面主体

页眉

<header>
    <h1 style="text-align:center;">张三</h1>
    <p style="text-align:center;">首页 | 项目 | 博客 | 联系我</p>
</header>

  • 使用 <header> 语义化标签。

  • 通过 style="text-align:center;" 实现居中（纯 HTML 下的临时方案）。

职业定位

<h2 style="text-align:center;">前端开发工程师与界面设计师</h2>

  • 清晰传达个人角色。

主内容区

三列表格布局

使用 <table> 将内容分为三列：

  • 左列：作品亮点（项目 / 技能列表）

  • 中列：职业经历 + 社区贡献（含外部链接）

  • 右列：学历与专业课程

虽然现代 Web 开发通常用 CSS Grid/Flexbox 布局，但在仅限 HTML 的教学场景中，表格是一种可行的结构化手段。

同行评价

第二个表格用于展示三段简短的推荐语，增强可信度。

页脚

<footer style="text-align:center;">© 2025 张三 版权所有</footer>

  • 使用 <footer> 语义化标签，保持风格统一。

重点总结

  • 语义化标签：合理使用 <header>、<footer>、<table> 提升可读性与 SEO。

  • 结构清晰：通过表格划分逻辑区块，即使无样式也能传达信息层次。

  • 内容完整：涵盖个人介绍、能力展示、社会证明（评价）、联系方式入口。

  • 移动端基础支持：通过 viewport 元标签确保在手机上可读。

思考题

  1. 在仅使用 HTML 的前提下，除了 <table>，还有哪些方式可以实现多列布局？它们各有什么局限？

  2. 为什么在 <head> 中设置 charset="UTF-8" 对中文网站特别重要？

  3. 如果要将此作品集部署到 GitHub Pages，你认为还需要做哪些调整？（提示：考虑路径、链接有效性等）