0
0

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

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>[email protected]</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>[email protected]</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>
标签： html 前端 javascript
本文转载自: https://blog.csdn.net/Hi_Html/article/details/140265488
版权归原作者 Hi_Html 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML实现个人简历信息展示页面”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航