表格、列表、表单

三个使用的目的:

表格作用:

 表格

01创建表格

创建好表格以后只是形式上是表格,但是没有真正画出表格来

table的作用只是创建表格最外层的长方形

02表格属性

表格属性添加位置:

 

03表头单元格标签th

 

04表格标题caption

 这个的好处是标题会跟着表格一起走

 

例子:

 效果:

 05合并单元格

以下就是靠合并单元格实现的:

 合并单元格的两种方式:

合并单元格顺序:

合并单元格三部曲:

把其他几个单元格合并到目标单元格以后被合并的就会多出来,所以要删除掉他们

例子(刘德华那个表格):

06表格划分结构

划分了以后我们就可以在检查的时候看清楚表格的结构

这三个结构不一定说全要写哦!

注意;

例子:

tbody,tfoot同理   

列表

表格一般用于数据的显示,但是网页中有很多类似表格的布局:

这时候我们就要用到列表 ,列表中没有行的概念,我们的单元格想怎么放就怎么放

01无序列表

元素间摆放的顺序随意时,我们一般用无序的

比如说以下这几种也用无序列表:

 

 02有序列表

例子:

 

效果:

 

03自定义列表 

例子:

效果:

我们以后见到这种解释说明的结构就用自定义列表 

 表单

 

表单控件就是可以输入内容的框

表单域就是用户写完信息提交的时候不是一条一条来的,而是把整个表单域一次性提交

01input

语法:

常用属性:

radio 

当type的值是radio的时候,就是我们只能从给定的选项中选一个 

只有加上相同的name属性我们选中哪个给后台送哪个

不加name两个选项都可以选中?????

checkbox

我们有多个选项可以同时选择,一般也加上相同name值,是同一类型的name就弄成一样的

checked 

想让那个被选中就在那个input属性里面加这么一句话 

 

页面加载好以后男就被选中 

button

 在按钮中我们一般就需要value来让用户知道这个按钮是做什么的

image

按钮变成图片,包括按钮中的文字都是图片完成

 

file 

这个按钮会打开我们电脑中的文件,选中文件后就i可以上传至页面 

 

value是决定了输入框初始显示什么字,但是这个字不会当我们输入的时候自动消失

name属性是当我们两个表单输入内容的意思大致相似的时候为了区分两个表单给他们起名字,主要是对于后台可以通过这个属性找到这个表单,几乎每个表单都写上name吧,为了区分不同的表单,特例是当表单类型是单选或者复选的时候name是相同的:

有了name值我们后台才能收到数据,所以name一定要写

02lable 

作用: 

 用法:

 

用户点击”用户名"也可以出现光标 

03textarea控件(文本域)

当我们框框中输入的内容比较多的时候,我们就用这个

我们一般用css来修改文本框大小 

04select下拉列表 

select我们现在一般不用,他在不同浏览器中效果不同而且我们很难改变它的样式,这种形式我们一般用div和li做出来

效果如下:

  

第一个option的内容就是我们框中首先出现的内容,所以我们提示性的文字写在第一个option中 

如果我们想要北京成为默认选项 ,我们就:

05form表单域 

重置按钮也只是在有了form表单域的时候有效果  

 

我们如果选择method是get,输入的信息结合name属性就会 显示出来:

而用post方式则不会:

文档资料 

  • 24
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值