HTML表单、表格制作个人简历

一、HTML表格知识点：

HTML表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1"style="border-collapse: collapse;"><caption><b>小说排行榜</b></caption>

表格的表头用<th>定义，多数浏览器会把表头显示为粗体文本。

 <tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>

二、HTML表单的知识点：

from元素：HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单：

 <table border="1"><caption><b><fount size="8">个人简历</fount></b></caption>

<input>元素<input> ：元素是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。类型有：

text、radio、submit 本章大多数使用的是text。

<tr><td>姓名</td><td><from><input type="text"></td><td>性别</td><td><from><input  type="text"></td><td>出生年月</td><td><from><input  type="text"></td>  <td rowspan="4" align="enter"><input type="file" name="zp" id="zp"></td>

单选按钮输入：<input type="radio"> 定义单选按钮。单选按钮允许用户在有限数量的选项中选择其中之一：

<td><form></form><input type="radio" name="sex" value="girl">女<input type="radio" name="sex" value="boy" checked="checked">男</form>
</td>

提交按钮：<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指定：

<form><input name="name"><input type="submit" value="提交">
</form>

三、表单中的其他输入类型

输入类型password定义密码字段：<input type="password">

<form>User name:<br>
<input type="text" name="username">
<br>User password:<br>
<input type="password" name="psw">
</form>

输入类型submit定义提交按钮：<input type="submit">

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

输入类型month允许用户选择年份和月份:<input type="month">

 <td>出生年月</td><td><from><input  type="month"></td>

合并单元格：我们通常用代码合并单元格的话，是这样的，跨列使用colspan，跨行使用rowspan。

 <td rowspan="4" align="enter"><input type="file" name="zp" id="zp"></td>

<td>专业</td><td><from><input type="text"></td><td colspan="2" style="text-align: center">毕业学校</td>

整个个人简历制作代码附上：

<!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><table border="1"><caption><b><fount size="8">个人简历</fount></b></caption><tr><td>姓名</td><td><from><input type="text"></td><td>性别</td><td><form></form><input type="radio" name="sex" value="girl">女<input type="radio" name="sex" value="boy" checked="checked">男</form></td><td>出生年月</td><td><from><input  type="month"></td>  <td rowspan="4" align="enter"><input type="file" name="zp" id="zp"></td></tr><tr><td>民族</td><td><from><input type="text"></from></td><td>政治面貌</td><td><from><input  type="text"></td><td>身高</td><td><from><input type="text"></from></td>  </tr><tr><td>学制</td><td><from><input type="text"></td><td>学历</td><td><from><input  type="text"></td><td>户籍</td><td><from><input type="text"></from></td>  </tr><tr><td>专业</td><td><from><input type="text"></td><td colspan="2" style="text-align: center">毕业学校</td><td colspan="2" style="text-align: center"><from><input  type="text" size="31"></td></tr><tr><td colspan="7" style="text-align: center">技能、特长或爱好</td></tr><tr><td>外语等级</td><td colspan="2" style="text-align: center"><from><input  type="text" size="31"></td><td>计算机</td><td colspan="3" style="text-align: center"><from><input  type="text"size="71"></td></tr><tr><td colspan="7" style="text-align: center">个人履历</td></tr><tr><td>时间</td><td colspan="2" style="text-align: center">单位</td><td colspan="4" style="text-align: center">经历</td></tr><tr><td><from><input type="text"></from></td>  <td colspan="2" style="text-align: center"><from><input  type="text" size="31"></td><td colspan="4" style="text-align: center"><from><input  type="text" size="98"></td></tr><tr><td><from><input type="text"></from></td>  <td colspan="2" style="text-align: center"><from><input  type="text" size="31"></td><td colspan="4" style="text-align: center"><from><input  type="text" size="98"></td></tr><tr><td><from><input type="text"></from></td>  <td colspan="2" style="text-align: center"><from><input  type="text" size="31"></td><td colspan="4" style="text-align: center"><from><input  type="text" size="98"></td></tr><tr><td colspan="7" style="text-align: center">联系方式</td></tr><tr><td>通信地址</td><td colspan="2" style="text-align: center"><from><input type="text" size="31"></from></td>  <td>联系电话</td><td colspan="3" style="text-align: center"><from><input type="text" size="71"></from></td>  </tr><tr><td>E-mail</td><td colspan="2" style="text-align: center"><from><input type="text" size="31"></from></td>  <td>邮编</td><td colspan="3" style="text-align: center"><from><input type="text" size="71"></from></td>  </tr><tr><td colspan="7" style="text-align: center">自我评价</td></tr><tr><td colspan="7" style="text-align: center"><input type="text" size="164"></from></td></tr></table></body>
</html>

结果图：

HTML表单、表格制作个人简历相关推荐

使用form表单和table表格制作个人简历
使用form表单和table表格制作个人简历制作的如下图: 代码如下: <!DOCTYPE html> <html><head><meta charset= ...
用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
使用H5中的表单标签制作一个简单的网页登陆页面
简单介绍H5当中的表单标签.<form></form>表示定义一个表单的开始和结束.在form标签中,有主要的三个属性,action表示声明表单中的数据的处理的url地址.me ...
怎么用php制作会员注册表单,帝国CMS前台会员登陆表单的制作教程
登陆表单变量说明变量名例子登陆表单提交地址 /e/enews/index.php 用户名输入框变量 username 密码输入框变量 password 登陆信息保存时间 lifetime 单位为 ...
HTML 表单表格列表
目录 HTML 表单 type=" " 标签文本域密码字段单选按钮简单的下拉列表提交按钮重置完整代码 HTML 表格 HTML 和表格边框属性 HTML 表格头 HT ...
html——表单元素及个人简历实现
一.HTML 表单简介 1.HTML 表单是 HTML 文档中的一个区域 2.HTML 表单这个区域中包含了一系列的可交互元素 3.HTML 表单主要用于收集用户输入信息二.HTML 表单元素三. ...
html利用表格制作个人简历
html利用表格制作简历 1,代码展示 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
java注册页面表单_html实现用户注册页面（表单+表格）——html小练习
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
day10高级表单表格bfc
一.表单补充 1.textarea标签定义多行的文本输入控件文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体,可以通过cols(宽,列数)和rows(行数)属性来规定textarea的 ...

HTML表单、表格制作个人简历

HTML表单、表格制作个人简历相关推荐

最新文章

热门文章