前端学习DAY-3——表格、表单

DAY-3——表格、表单

一、表格
1.表格的语法

<table>
    <tr>  (行标签)
       <td>单元格内的文字 </td>(单元格)
       ...
   </tr>
   ...
</table>

注意:
-1.tatle标签中只能放tr标签,tr标签中只能放td标签。
-2.td标签中可放任何元素。

2.表格属性:
在这里插入图片描述
举个栗子:
在这里插入图片描述
显示:
在这里插入图片描述
2.表头标签

只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。表头会加粗显示

3.表格标题标签

<caption>表格标题</caption>

在这里插入图片描述
4合并单元格
跨行合并:rowspan 跨列合并:colspan
在这里插入图片描述
合并单元格的思想:
合并单元格的思想:

 将多个内容合并的时候,就会有多余的东西,把它删除。    例如 把 3个 td 合并成一个, 那就多余了2个,需要删除。

二、表单(重点)
目的:收集用户信息
由三部分组成:表单域、提示文本、表单控件
1.表单控件

(1)input(是单标签)<input />,可以通过type属性改变类型。
input属性:
在这里插入图片描述
举个栗子:
在这里插入图片描述
显示如下:
在这里插入图片描述
默认被选中:
在input属性中输入checked=“checked”即可。再举个栗子
在这里插入图片描述
显示:
在这里插入图片描述
2.文本域textarea
当需要输入大量信息时,需要用到文本域。
textarea控件。
在这里插入图片描述

3.下拉菜单
语法:
在这里插入图片描述
eg:
在这里插入图片描述
注意:
-1. </select>中至少应包含一对<option>。
-2. 在option 中定义selected =" selected "时,当前项即为默认选中项。

4.在这里插入图片描述
表单域
语法:在这里插入图片描述
eg:
在这里插入图片描述
在这里插入图片描述
常用属性:

  1. Action
    在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method
    用于设置表单数据的提交方式,其取值为get或post。get提交速度比较快,但是不安全,一般用post提交。
  3. name
    用于指定表单的名称,以区分同一个页面中的多个表单。

注意: 每个表单都应该有自己表单域。

废话:觉得学的有点激进啊,学了好多,有点乱乱的。

(工作好难!!!!!!!)

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值