单元格合并涉及表格结构的调整
1. 跨列合并
属性 : colspan
取值 : 无单位的数值,表示跨几列
2. 跨行合并
属性 : rowspan
取值 : 无单位的数值,表示跨几行
注意 :
1. 跨行和跨列是单元格的操作,所以属性是单元格td的
属性
2. 一旦发生单元格合并,要删除多余的单元格:
跨列合并 :
影响当前行中单元格的数量,删除当前行中多余单元格
跨行合并 :
影响其后行中的单元格数量,需要删除后面行中多余的
单元格
4. 表格行分组
表格在浏览器中渲染时,会自动添加结构标签
表格可以分为 thead tfoot tbody 三部分
1. thead
标签用来划分表头
表头中可以有若干行组成
2. tfoot
用于划分表尾,由若干行组成3. tbody
表示表格主体,默认情况下,所有的行会自动加入tbody
注意 :
如果涉及在HTML代码中完整书写行分组标签,建议按照
顺序书写
3. 表单
1. 用来接收用户输入的数据并且提交给服务器
表单二要素
1. 表单元素
2. 表单控件
提供一系列可视化的组件,能够实现跟用户的交互
例如 : 输入框,按钮,文件上传等
2. 表单元素
1. 标签 :
用来提交数据到服务器,表单控件都应书写在form标签中
2. 标签属性
1. method
用来设置数据提交方式,取值 get / post
默认是get请求方式提交
get 请求 :
1. 数据会以参数的形式拼接在url后面
2. 安全性较低
3. 最大提交数据2kb
post 请求:
1. 数据会打包在请求头中,隐式提交
2. 安全性较高
3. 没有数据大小限制
2. action
必填,指定数据的提交地址
3. enctype
指定数据的编码方式,表单提供的编码类型有 :
1. application/x-www-form-urlencoded(默认)
将表单中的数据转换成字符串格式(name=zhangsan
&pwd=123456),附加在url后面,使用?与url隔开
2. multipart/form-data
专门用来上传特殊类型数据的,例如图片,文件,mp3
数据的提交方式必须是post
3. text/plain
数据以纯文本形式编码,不含任何控件和格式字符
3. 表单控件(重点)
1. 表单控件的数据只有放在表单元素中才可以被提交
2. 分类
1. 文本框和密码框
1. 语法 :
文本框
密码框
标签属性 :
1. type 指定控件类型
2. name 指定控件名称,缺少的话无法提交
3. value 指定控件的值,可以通过JS获取
4. maxlength 指定最大输入字符数
5. placeholder 设置提示文本
6. autocomplete 设置是否自动补全
2. 单选按钮和复选框
1. 语法 :
单选钮 :
复选框 :
2. 标签属性
1. name :
1. 定义控件名称
2. 一组的按钮控件名称必须保持一致,实现单选
2. value :
定义控件的值,最终将发送给服务器,按钮的value
属性必须指定
3. checked
表示选中当前按钮
3. 特殊用法 label for id
将按钮文本与按钮控件绑定在一起,实现点击文本与
点击控件等价的效果
使用 :
1. 使用标签包括按钮文本
2. 为按钮控件添加id属性,属性值自定义
3. 为label标签添加for属性,属性值与控件的id属性
值保持一致,实现文本与控件绑定
3. 隐藏域和文件选择框
1. 隐藏域
需要提交给服务器,但是不需要呈现给用户的内容,
都可以使用隐藏域表示
例如 : 用户id
语法 :
name定义控件名称,value设置控件的值,都是必填项
2. 文件选择框
1. 语法
2. 涉及二进制数据提交,文件,图片,mp3
需要设置form enctype属性,指定数据提交
方式为post
4. 下拉选择框
北京
上海
5. 文本域,可以支持多行输入
语法 :
标签属性 :
cols : 指定文本域默认宽度,宽度是通过列数控制的
以英文字符数量为准,中文字符减半
rows : 指定文本域行数
特点 : 文本域的大小可以由用户手动调整
6. 按钮
分类 :
1. 提交按钮 :
点击时,将表单数据发送给服务器
value 属性设置按钮的显示文本
2. 重置按钮 :
点击时,会将表单数据还原成默认状态
3. 普通按钮
绑定自定义事件
4. 按钮显示文本
1. 按钮标签,可以在HTML中任意地方使用,需要绑定
自定义事件
2. 如果按钮标签放在form标签中使用,默认具备提交
功能,等同submit