首页 前端知识 HTML实现个人简历信息展示页面

HTML实现个人简历信息展示页面

2024-09-28 23:09:12 前端知识 前端哥 531 349 我要收藏

HTML 基础结构

首先,我们需要设置 HTML 的基础结构。以下是一个简单的 HTML 文档结构,其中包括头部信息和一个主体部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        table {
            width: 60%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        td {
            padding: 8px;
            border: none;
            vertical-align: top;
        }
        h1, h2 {
            text-align: left;
            border-bottom: 1px solid #000;
            padding-bottom: 5px;
            width: 60%;
        }
    </style>
</head>
<body>
    <!-- 内容将添加在这里 -->
</body>
</html>

添加个人信息

body 标签内添加一个标题和一个包含个人信息的表格。使用 table 标签创建表格,并使用 td 标签填充内容。

<body>
    <h1>某某某</h1>
    <table>
        <tr>
            <td><strong>性别:</strong></td>
            <td>男</td>
            <td rowspan="6">
                <img src="img/1.jpg" style="width: 220px; height: 220px;"/>
            </td>
        </tr>
        <tr>
            <td><strong>出生日期:</strong></td>
            <td>1990年01月01日</td>
        </tr>
        <tr>
            <td><strong>政治面貌:</strong></td>
            <td>党员</td>
        </tr>
        <tr>
            <td><strong>家庭住址:</strong></td>
            <td>北京市海淀区</td>
        </tr>
        <tr>
            <td><strong>联系方式:</strong></td>
            <td>(+86) 138-0000-0000</td>
        </tr>
        <tr>
            <td><strong>电子邮箱:</strong></td>
            <td>example@example.com</td>
        </tr>
    </table>
</body>

添加教育经历

使用 h2 标签作为分隔符,并创建一个新的表格来列出教育经历。

<body>
    <h1>某某某</h1>
    <table>
        <!-- 个人信息表格 -->
    </table>

    <h2>教育经历</h2>
    <table>
        <tr>
            <td>2010.09 - 2014.07</td>
            <td>北京大学</td>
            <td>计算机科学与技术学院</td>
            <td>计算机科学</td>
            <td>本科</td>
        </tr>
        <tr>
            <td colspan="2">GPA:3.68/4.5</td>
        </tr>
        <tr>
            <td colspan="2">专业成绩排名:10/200</td>
        </tr>
    </table>
</body>

添加其他模块

继续添加荣誉奖励、科研经历、所获证书、实习工作经历、学生干部经历和兴趣爱好等模块。每个模块使用一个 h2 标签和相应的表格或列表来组织内容。

<body>
    <!-- 个人信息和教育经历 -->

    <h2>荣誉奖励</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>国家奖学金</li>
                    <li>优秀毕业生</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>科研经历</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>参与国家自然科学基金项目,负责数据分析和算法优化。</li>
                    <li>在《计算机学报》上发表论文一篇。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>所获证书</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>计算机等级考试二级证书</li>
                    <li>雅思7.5</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>实习工作经历</h2>
    <table>
        <tr>
            <td>2013.06 - 2013.09</td>
            <td>
                百度公司<br>
                软件开发实习生
                <ul>
                    <li>参与开发内部管理系统,负责前端页面设计和实现。</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2012.06 - 2012.09</td>
            <td>
                腾讯公司<br>
                数据分析实习生
                <ul>
                    <li>负责用户数据分析,提供产品优化建议。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>学生干部经历</h2>
    <table>
        <tr>
            <td>2012.09 - 2013.07</td>
            <td>
                北京大学学生会<br>
                宣传部长
                <ul>
                    <li>组织策划多次校园活动,提升学生会影响力。</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2011.09 - 2012.07</td>
            <td>
                北京大学计算机协会<br>
                会长
                <ul>
                    <li>组织编程比赛,邀请业内专家进行讲座。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>兴趣爱好</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>阅读、旅行、编程</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简历</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        table {
            width: 60%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        td {
            padding: 8px;
            border: none;
            vertical-align: top;
        }
        h1, h2 {
            text-align: left;
            border-bottom: 1px solid #000;
            padding-bottom: 5px;
            width: 60%;
        }
    </style>
</head>
<body>
    <h1>某某某</h1>
    <table>
        <tr>
            <td><strong>性别:</strong></td>
            <td>男</td>
            <td rowspan="6">
                <img src="img/1.jpg" style="width: 220px; height: 220px;"/>
            </td>
        </tr>
        <tr>
            <td><strong>出生日期:</strong></td>
            <td>1990年01月01日</td>
        </tr>
        <tr>
            <td><strong>政治面貌:</strong></td>
            <td>党员</td>
        </tr>
        <tr>
            <td><strong>家庭住址:</strong></td>
            <td>北京市海淀区</td>
        </tr>
        <tr>
            <td><strong>联系方式:</strong></td>
            <td>(+86) 138-0000-0000</td>
        </tr>
        <tr>
            <td><strong>电子邮箱:</strong></td>
            <td>example@example.com</td>
        </tr>
    </table>

    <h2>教育经历</h2>
    <table>
        <tr>
            <td>2010.09 - 2014.07</td>
            <td>北京大学</td>
            <td>计算机科学与技术学院</td>
            <td>计算机科学</td>
            <td>本科</td>
        </tr>
        <tr>
            <td colspan="2">GPA:3.68/4.5</td>
        </tr>
        <tr>
            <td colspan="2">专业成绩排名:10/200</td>
        </tr>
    </table>

    <h2>荣誉奖励</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>国家奖学金</li>
                    <li>优秀毕业生</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>科研经历</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>参与国家自然科学基金项目,负责数据分析和算法优化。</li>
                    <li>在《计算机学报》上发表论文一篇。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>所获证书</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>计算机等级考试二级证书</li>
                    <li>雅思7.5</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>实习工作经历</h2>
    <table>
        <tr>
            <td>2013.06 - 2013.09</td>
            <td>
                百度公司<br>
                软件开发实习生
                <ul>
                    <li>参与开发内部管理系统,负责前端页面设计和实现。</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2012.06 - 2012.09</td>
            <td>
                腾讯公司<br>
                数据分析实习生
                <ul>
                    <li>负责用户数据分析,提供产品优化建议。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>学生干部经历</h2>
    <table>
        <tr>
            <td>2012.09 - 2013.07</td>
            <td>
                北京大学学生会<br>
                宣传部长
                <ul>
                    <li>组织策划多次校园活动,提升学生会影响力。</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>2011.09 - 2012.07</td>
            <td>
                北京大学计算机协会<br>
                会长
                <ul>
                    <li>组织编程比赛,邀请业内专家进行讲座。</li>
                </ul>
            </td>
        </tr>
    </table>

    <h2>兴趣爱好</h2>
    <table>
        <tr>
            <td colspan="2">
                <ul>
                    <li>阅读、旅行、编程</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18640.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!