HTML简单个人简历前端页面

一、知识点介绍

1.表格行合并：rowspan 将多行合并成一行。

2.表格列合并：colspan 将多列合并成一列。

3.表单元素（input）:<input> 元素根据不同的 type 属性，可以变化为多种形态。如text,data等。

二、代码

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简历</title>
</head>
<body><h3 align="center">个人简历</h3><form action="#",method="POST"><table align="center" border="1" ><tr><td align="center">姓名</td><td><input type="text" name="name"></td><td align="center">性别</td><td><input type="text" name="sex"></td><td align="center">出生年月</td><td><input type="date" name="data"></td><td rowspan="4"><input type="file" name="image"></td></tr><tr><td align="center">民族</td><td align="center"><input type="text" name="nation"></td><td>政治面貌</td><td><input type="text" name="politics"></td><td align="center">身高</td><td style="width: min-content;"><input type="text" name="hight"></td></tr><tr><td align="center">学制</td><td><input type="text" name="xuezhi"></td><td align="center">学历</td><td><input type="text" name="education"></td><td align="center">户籍</td><td><input type="text" name="household"></td></tr><tr><td align="center">专业</td><td><input type="text" name="major"></td><td colspan="2" align="center">毕业学校</td><td colspan="2"><input type="text" name="school" style="width: 97%;"></td></tr><tr><td colspan="7" align="center"><strong>特长、技能或爱好</strong></td></tr><tr><td align="center">外语等级</td><td colspan="2"><input type="text" name="garde" style="width: 97%;"></td><td align="center">计算机</td><td colspan="4"><input type="text" name="computer" style="width: 98%;"></td></tr><tr><td colspan="7" align="center">个人履历</td></tr><tr><td align="center">时间</td><td colspan="2" align="center">单位</td><td colspan="4" align="center">经历</td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text" style="width: 97%;"></td><td colspan="4"><input type="text" style="width: 99%;"></td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text" style="width: 97%;"></td><td colspan="4"><input type="text" style="width: 99%;"></td></tr><tr><td><input type="text"></td><td colspan="2"><input type="text" style="width: 97%;"></td><td colspan="4"><input type="text" style="width: 99%;"></td></tr><tr><td colspan="7" align="center">联系方式</td></tr><tr><td align="center">通信地址</td><td colspan="2"><input type="text" name="address" style="width: 97%;"></td><td align="center">联系电话</td><td colspan="4"><input type="text" name="phone" style="width: 98%;"></td></tr><tr><td align="center">E-mail</td><td colspan="2"><input type="text" name="mail" style="width: 97%;"></td><td align="center">邮编</td><td colspan="3"><input type="text" name="postcode" style="width: 98%;"></td></tr><tr><td colspan="7" align="center">自我评价</td></tr></table>
</form>
</body>
</html>

三、结果

结果如下图所示：

HTML简单个人简历前端页面相关推荐

前端页面结构简单介绍
1.head和body 为了使用python进行爬虫,所以需要先前端页面结构进行初步认识,可以在pycharm里新建一个.html文件,自动就会生成一个框架 <!DOCTYPE html> ...
web前端-综合应用案例-简历表页面的制作-educoder
第1关:简历表页面的结构设计 <!doctype html> <html> <head> <meta charset="utf-8"> ...
HTML小案例: 填写简历信息页面布局
学习了HTML基础知识后,我们就可以实现一个简单的填写简历的页面了. (关于HTML的基础知识可以查看本篇文章.-->HTML基础知识.) 代码如下: <table width=" ...
前端处理带t的时间_大厂实践：如何优雅的监控前端页面性能
前言前端页面性能是一个非常核心的用户体验指标.本文介绍岳鹰全景监控平台如何设计一个通用.低侵入性.自动上报的页面性能监控方案.主要采用的是Navigation Timing API以及sendB ...
SpringMVC+HibernateValidator，配置在properties文件中的错误信息回显前端页面出现中文乱码
问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回 ...
vue click事件_Vue.js---实现前后端分离架构中前端页面搭建（二）
[Vue.js实现前后端分离架构中前端页面搭建] 九.Vue的事件处理 Vue的事件都是使用 v-on:事件类型进行绑定.也可以使用@事件类型进行操作.其中事件类型和之前学习jQuery中事件名称是 ...
使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
前端页面适应不同分辨率
前端开发要考虑到不同分辨率电脑的页面展示问题,在开发者电脑上的界面在用户电脑上打开可能出现很大变形. 解决方案主要有: 针对不同分辨率用户设置不同的css 使用JS/jQuery动态调整使用前端框架 ...

HTML简单个人简历前端页面

一、知识点介绍

二、代码

三、结果

HTML简单个人简历前端页面相关推荐

最新文章

热门文章