本文已参与「新人创作礼」活动，一起开启掘金创作之路。
🌴 2022.3.9 作业
🌳 HTML 文本标签作业-个人简历
前言
🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
📽本节主要内容：利用HTML标签制作了两种页面效果不同的网页，第二个CSS修饰比较多，效果也更好一些
🚀 要求
使用html中的各种文本标签，制作一个个人信息介绍页面。信息包括：
- 个人基本信息：姓名、出生日期、籍贯、民族.......，尽量全面
- 个人教育经历：哪年哪月至哪年哪月在什么学校接受什么教育
- 个人工作经历：哪年哪月至哪年哪月在什么单位工作，担任什么职务
- 个人家庭情况：父亲、子女等的姓名、出生年月、政治面貌、工作单位等信息
注意：
可以参照网络上对科学家、领导人的介绍页面
页面上所有的代码尽量自己书写，页面内容及代码尽量有明显区别于其他人的地方，所有的代码都要知道其作用、含义
编码整洁、规范，清晰易读，添加必要的注释，对页面元素或样式进行说明
🚀 简易版代码
小张自己的代码，仅供参考。源文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息介绍页面</title>
<style>
/* 整体内容居中 */
* {
margin: 0 auto;
text-align: center;
}
/* 合并表格的线条 */
table {
border: black 0.0625rem solid;
border-collapse: collapse;
}
/* 规定行列线条熟属性 */
td {
border: black 0.0625rem solid;
}
th {
border: black 0.0625rem solid;
}
/* 标题大小 */
caption {
font-size: 30px;
}
</style>
</head>
<body>
<table border="1" width=700px>
<caption align="center">个信息介绍</caption>
<!-- 基本信息 -->
<tr height="30px">
<td rowspan="3" width="5%" style="font-weight: 700;padding: 0 8px;">基本信息</td>
<td width="15%">姓名</td>
<td width=15%></td>
<td width=10%>性别</td>
<td width=10%></td>
<td width=10%>民族</td>
<td width=10%></td>
<td width=15%>出生年月</td>
<td width=10%></td>
</tr>
<tr height="30px">
<td>毕业院校</td>
<td></td>
<td>学历</td>
<td></td>
<td>专业</td>
<td></td>
<td>政治面貌</td>
<td></td>
</tr>
<tr height="30px">
<td>籍贯</td>
<td></td>
<td>联系方式</td>
<td colspan="2"></td>
<td>邮箱</td>
<td colspan="2"></td>
</tr>
<!-- 教育经历 -->
<tr height="30px">
<td rowspan="4" style="font-weight: 700;padding: 0 8px;">教育经历</td>
<td colspan="2">时间</td>
<td colspan="3">学校</td>
<td colspan="3">教育</td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<!-- 个人工作经历 -->
<tr height="30px">
<td rowspan="4" style="font-weight: 700;padding: 0 8px;">工作经历</td>
<td colspan="2">时间</td>
<td colspan="3">单位</td>
<td colspan="3">任职</td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<!-- 家庭情况 -->
<tr height="30px">
<td rowspan="4" style="font-weight: 700;padding: 0 8px;">家庭情况</td>
<td>关系</td>
<td>姓名</td>
<td colspan="2">出生年月</td>
<td>政治面貌</td>
<td colspan="3">工作单位</td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
🚀 效果图
🚀 Pro版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简历</title>
<style>
/* 整个页面居中 */
* {
margin: 0 auto;
text-align: center;
}
/* 为整个页面添加边框颜色 */
.page {
height: 900px;
width: 860px;
background-color: azure;
border: solid 1px black;
}
/* 左侧块属性 */
.div-left {
height: 900px;
width: 250px;
background-color: azure;
}
/* 头像 */
.head {
margin-left: -700px;
padding-top: 50px;
}
/* 设置左侧线条 */
.line {
height: 2px;
width: 200px;
background-color: deepskyblue;
position: absolute;
margin-left: -280px;
margin-top: 5px;
}
/* 线条上文字的位置 */
.lineup {
position: absolute;
margin-left: -420px;
margin-top: -20px;
}
/* 线条下文字的位置 */
.linedown {
height: 250px;
margin-left: -600px;
margin-top: 20px;
}
/* 右侧块属性 */
.div-right {
height: 900px;
width: 600px;
background-color: white;
margin-top: -900px;
margin-left: 250px;
}
/* 姓名 */
.div-rightname {
padding-top: 25px;
margin-left: 60px;
}
/* 右侧标题位置 */
.div-righttitle {
height: 35px;
width: 160px;
background-color: #3498DB;
margin-left: 20px;
margin-top: 30px;
}
/* 右侧标题内文字位置 */
.div-righttitle font {
margin: 0 auto;
}
/* 右侧块内容 */
.div-righttext {
margin-top: 25px;
margin-left: 25px;
}
/* 合并表格的线条 */
table {
border: black 0.0625rem solid;
border-collapse: collapse;
}
/* 规定行列线条熟属性 */
td {
border: black 0.0625rem solid;
}
</style>
</head>
<body>
<div class="page">
<!--左侧内容-->
<div class="div-left">
<div class="head">
<img src="https://img-blog.csdnimg.cn/3455174314234152aae31fcef73b09b6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5byg5pe26LSw,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center"
height="100px" width="100px" />
</div>
<br />
<br />
<!--个人信息-->
<b class="lineup">
<font color="dodgerblue" size="4"> 个人信息：</font>
</b>
<div class="line"></div>
<div class="linedown">
<h4>地址：</h4>
<h5>山西省太原市</h5>
<h4>出生日期：</h4>
<h5>2001.01.01</h5>
<h4>民族：</h4>
<h5>汉</h5>
<h4>电话：</h4>
<h5>1310446718</h5>
<h4>邮箱：</h4>
<h5>1310446718@qq.com</h5>
</div>
<!--教育经历-->
<b class="lineup">
<font color="dodgerblue" size="4"> 教育经历：</font>
</b>
<div class="line"></div>
<div class="linedown">
<h4>2007.9.1 xx小学</h4>
<h4>2013.9.1 xx初中</h4>
<h4>2016.9.1 xx高中</h4>
<h4>2019.9.1 xx大学</h4>
</div>
<!-- 个人工作经历 -->
<b class="lineup">
<font color="dodgerblue" size="4"> 工作经历：</font>
</b>
<div class="line"></div>
<div class="linedown">
<h4>2020.01.01-05.01 美团外卖 配送<br />
2020.05.02-10.01 饿了么 配送<br />
2020.10.01-12.31 滴滴 专车<br />
2021.01.01-05.01 曹操 顺风车
</h4>
</div>
</div>
<!--y-->
<div class="div-right">
<div class="div-rightname">
<font size="6">张时贰</font>
</div>
<div class="div-rightname">求职意向：Java开发工程师</div>
<div class="div-righttitle">
<font size="4" color="floralwhite">教育背景</font>
</div>
<div class="div-righttext">
<font size="4">
计算机科学与技术 本科 2019.9.6-2023.6
</font><br /><br />
<font size="4">主修课程：</font><br /><br />
<font size="4">计算机网络、C++、<br />Java基础、计算机操作系统、<br />数据库原理、计算机组成原理<br />JAVA WEB、Python</font>
</div>
<div class="div-righttitle">
<font size="4" color="floralwhite">项目经验</font>
</div>
<div class="div-righttext">
<font size="4">仿apple官网网页界面设计</font><br /><br />
<font size="4">学生管理系统</font><br /><br />
</div>
<div class="div-righttitle">
<font size="4" color="floralwhite">家庭情况</font>
</div>
<div class="div-righttext">
<table>
<!-- 家庭情况 -->
<tr height="30px">
<td rowspan="4" width="5%" style="font-weight: 700;padding: 0 8px;">家庭情况</td>
<td>关系</td>
<td>姓名</td>
<td colspan="2">出生年月</td>
<td>政治面貌</td>
<td colspan="3">工作单位</td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr height="30px">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="3"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
🚀 效果图
