web前端-HTML表格和表单标签

一、表格标签

目标:能够使用表格相关标签和属性,实现网页中表格结构的搭建

1. 表格的基本标签

➢场景: 在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表

基本标签:

➢注意点:

标签的嵌套关系: table > tr > td

2. 表格相关属性

➢场景:设置表格基本展示效果

➢常见相关属性:

➢注意点:

实际开发时针对于样式效果推荐用CSS设置

3. 表格标题和表头单元格标签

➢场景: 在表格中表示整体大标题和一-列小标题

➢其他标签:

➢注意点:

caption标签书写在table标签内部

th标签书写在tr标签内部(用于替换td标签)

4. 表格的结构标签 (了解)

➢场景:让表格的内容结构分组, 突出表格的不同部分(头部、 主体、底部) , 使语义更加清晰

➢结构标签:

➢注意点:

表格结构标签内部用于包裹tr标签

表格的结构标签可以省略

5. 合并单元格

场景:将水平或垂直多个单元格合并成一个单元格

➢合并单元格步骤:

1. 明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并-只保留最上的,删除其他

左右合并-只保留最左的，删除其他

3.给保留的单元格设置: 跨行合并(rowspan) 或者跨列合并(colspan)

➢注意点:

只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨: thead、 tbody、 tfoot)

二、表单标签

目标:能够使用表单相关标签和属性,实现网页中表单类网页结构搭建

1. input系列标签

1.1基本使用

➢场景:在网页中显示收集用户信息的表单效果， 如:登录页、注册页.

➢标签名: input

input标签可以通过type属性值的不同,展示不同效果

➢type属性值:

1.2文本框

➢场景: 在网页中显示输入单行文本的表单控件

➢type属性值: text

➢常用属性:

1.3单选框

➢场景: 在网页中显示多选一的单选表单控件

➢type属性值: radio

➢常用属性:

➢注意点:

name属性对于单选框有分组功能

有相同name属性值的单选框为一组，一组中只能同时有一个被选中

1.4文件选择

➢场景: 在网页中显示文件选择的表单控件

➢type属性值: file

➢常用属性:

1.5 按钮

➢场景: 在网页中显示不同功能的按钮表单控件

➢type属性值:

➢注意点:

如果需要实现以上按钮功能，需要配合form标签使用

form使用方法:用form标签把表单标签一起包裹起来即可

2. button按钮标签

➢场景:在网页中显示用户点击的按钮

➢标签名: button

➢type属性值(同input的按钮系列) :

➢注意点:

谷歌浏览器中button默认是提交按钮

button标签是双标签，更便于包裹其他内容:文字、图片等

3. select 下拉菜单标签

➢场景: 在网页中提供多个选择项的下拉菜单表单控件

➢标签组成:

select标签:下拉菜单的整体

option标签:下拉菜单的每一项

➢常见属性:

selected:下拉菜单的默认选中

4. textarea文本域标签

➢场景: 在网页中提供可输入多行文本的表单控件

➢标签名: textarea

➢常见属性:

cols:规定了文本域内可见宽度

rows:规定了文本域内可见行数

注意点：

右下角可以拖拽改变大小

实际开发时针对于样式效果推荐用CSS设置

5. labe|标签

➢场景: 常用于绑定内容与表单标签的关系

➢标签名: label

➢使用方法①:

1. 使用label标签把内容(如:文本)包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

➢使用方法②:（推荐）

1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来

2.需要把label标签的for属性删除即可