前端学习之表格、简历制作及登录表单

简单表格制作

1.使用table标签
2.表格里的行用 tr 标签
3.单元格用 td 标签

<body><h3>前端技术阶段划分标准</h3>    <table border="1px" cellspacing="0"><col width="200px"><col width="200px"><col width="200px"><col width="200px"><col width="200px"><tr align="center"><td></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr align="center"><td>标准</td><td>被产品怼得说不出话</td><td>跟产品互怼不相上下</td><td>怼的产品没话说</td><td>直接将其怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户C</td><td></td><td></td><td></td><td></td></tr></table>
</body>

border:表示边框
cellspacing:表示单元格间隙
width:设置单元格宽度
align:表示对齐方式
col:是column列的缩写

简历制作

1.单元格的合并

先绘制表格
按照目标合并单元：将多余的单元格删掉，再重新设置其宽度

2.th=加粗并水平居中的td

3.colgroup：列分组标签

4.快速注释某一行：Ctrl+?/

5.关于标签的嵌套

超链接不能嵌套超链接
P标签不能嵌套P标签
标题标签h1-h6也不能互相嵌套

<body><h3><center>简历制作</center></h3>    <center><table border="1px" cellspacing="0"><colgroup span="6" width="100px"></colgroup><col width="150px"><tr height="40px"><th colspan="7">个人简历</th></tr><tr height="40px" align="center"><td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td></tr><tr height="40px" align="center"><td>学历</td><td></td><td>籍贯</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td></tr><tr height="40px" align="center"><td>毕业院校</td><td colspan="5"></td></tr><tr height="40px" align="center"><td>求职意向</td><td colspan="7"></td></tr>      </table> </center>
</body>

colspan=“7” 即占据7个单元格的宽度
rowspan=“4” 即占据4个单元格的高度
colgroup span=“6” width=“100px” 即设置6列，每列宽度为100像素

登录表单

1.相关标签：

input :输入
type：类型
text：文字输入框
password：密码输入框
button：普通按钮
radio：单选框
checkbox：复选框
reset：重置按钮
submit：提交按钮
file：文件选择框
select：下拉框

2.使按钮连接网页

intput type=“submit”
添加表单属性 <form action=“表单数据提交地址”
所有需提交的数据，input必须有name属性
input按钮的文字，使用value属性表示
input必须放在form内才能提交

3.让输入数据提交到服务器

给输入框加属性 name=“自定义名称”

<body><h3><center>表单</center></h3>    <center><form action="https://www.baidu.com/"><table border="1px" cellspacing="0"><tbody><colgroup span="2" width="150px"></colgroup><col width="300px"><tr height="40px"><td rowspan="4" align="center">总体信息</td><td colspan="2"></td></tr><tr height="40px"><td align="right">用户名：</td><td><input type="text" name="loginname"></td></tr><tr height="40px"><td align="right" name="pwd">密码：</td><td><input type="password"></td></tr><tr height="40px"><td colspan="2" align="center"><input type="submit" value="提交"><input type="reset" value="重置"></td></tr></tbody>     </table> </form></center>
</body>

补充知识
form action=“ ” method=“get / post ”

提交数据：post
获取数据：get
get请求发送的数据都写在地址栏上，用户可见
post请求发送的数据用户不可见
get请求不能提交大量数据，但post可以，因此不要混用

前端学习之表格、简历制作及登录表单相关推荐

前端HTML基础小练习-制作一个相亲表单
前端HTML基础-制作一个相亲表单初学前端的一个小练习涉及知识:HTML,CSS 编译环境:Hbuilder 实现效果: 实现代码: <!DOCTYPE html> <html& ...
table和form的使用，以及制作登录表单
table的简单使用 <table><caption>表格标题</caption><tr><th>列名一</th><th& ...
HTML5基础学习（7）：登录表单制作、表单知识补充
一.登录表单制作有的时候用户需要填写信息,然后把填写完的信息交给服务器.把数据提交给服务器的动作就需要一个新的知识点:表单. (1)常见的表单控件大部分的表单控件都是<input>编写 ...
前端学习（2454）：用户登录
# 二.用户登录## 功能介绍测试账号:- 13911111111 - 246810也可以通过我们这个应用的移动端注册一个自己的账号:地址:http://vue-toutiao-m.lipengzho ...
前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整，复制即用）
案例效果本案例基于 vue.js 和 Element UI 实现.随机验证码采用 DOM 操作和 canvas 绘制,可随机生成和刷新:后续程序逻辑直接填入方法即可. Element UI 下载安 ...
Flutter 制作漂亮的登录表单
在本教程中,我将向您展示如何在 Flutter 和 Android studio 中制作漂亮的登录表单, 您将学习如何制作背景图像.如何在 Flutter中制作圆形按钮.如何添加一些不透明度以及如何添 ...
带小鱼游动动画的动态登录表单html页面前端源码
大家好,今天给大家介绍一款,带小鱼游动动画的动态登录表单html页面前端源码(图1),送给大家哦,获取方式在本文末尾. 图1 有一条活灵活现的小鱼围着表单游动,给页面添加了许多生机(图2), 图2 源 ...
50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
使用qt设计登录界面初学者_初学者素描：设计登录表单界面
使用qt设计登录界面初学者由Bohemian Coding的好伙伴制作的Sketch是界面设计的出色程序. 本入门级教程将向您介绍使用Sketch进行设计. 您将不需要任何程序经验,只需要一些空闲时 ...

前端学习之表格、简历制作及登录表单

简单表格制作

简历制作

登录表单

前端学习之表格、简历制作及登录表单相关推荐

最新文章

热门文章