HTML常用标签---表格标签与表单标签

发布于:2023-01-12 ⋅ 阅读:(512) ⋅ 点赞:(0)

一、表格(table)标签

 tr---table row

td---table cloumn

3、边框的增加border

4、去掉中间的边框cellspacing----单元格间距

  

5、cellpadding --变大表格和间距/单元格内边距

6、th-----代表表头(文字加粗作用)

    

7、表格内容区分:(头部身体尾部)

类似于html骨架结构

thead

tbody

tfoot

只做语义化的区分

                       

8、caption(标题)为表格的标题,一般放在表格中使用,刚好在表格的中央

9、合并表格--colspan(跨列合并)   rowspan (跨行合并) ~ 行同列异

合并谁去掉谁

合并几个去掉几个

enter;可以让表格中没有居中的文字居中

 二、表单(form)标签

     在网页中,我们也需要与用户进行交互,收集用户资料,此时也需要表单。

  HTML中,一个完整的表单由表单控件(也称表单元素)、提示信息和表单域三个部分组成。

1、表单域:

 form--表单:提交的作用;代表提交内容

action---动作/行为(跳转、提交数据)

      action="url(地址)/接口"       

2、input 控件

        <input />标签为单标签,type属性是其最基本的属性,取值有很多种,用于指定不同的控件类型。除了type属性之外,<input />标签还可以定义其他的属性: 

 (1)文本域

(1)text:文本输入框

(2)submit:提交按钮

(3)name----提交数据

(4)password:密码

(5)radio:单选框----使用时name的值要一样

(6)checkbox:双选框

(7)file:提交文件   mulitiple---多文件提交

(8)imag标签---图片,自定义提交按钮(提交的功能)

(9)botton按钮:不能作为提交按钮,就是一个简单的按钮

(10)reset:重置前面按钮选择的内容

举例:

(1)text:文本输入框------可以在表单中输入文字按enter跳转,也可以不用输文字按enter跳转,只是单纯的让你知道你可以在表单中输入。

       

(2)submit:提交按钮

       

(3)name----提交数据

   

(4)password:密码

        

(5)radio:单选框----使用时name的值要一样

   

(6)checkbox:双选框

     

(7)file:提交文件

       

(8)image标签---图片,自定义按钮(提交的功能),    src=”地址”

       

(9)botton按钮:不能作为提交按钮,就是一个简单的按钮

        

(10)reset:重置前面按钮选择的内容

3、label标签:点文字即可选中(选择内容),一个label 标签只能包裹一个标签

要求:for和对应的id绑定

4、textarea:  文本输入框    如果需要输入大量的文本信息,就需要使用<textarea></textarea>标签    

resize:是否支持下拉拖拽(none表示不支持)

cols  rows:

5、select-option连用:下拉框选择