五，表格
1.简介
表格是一个规则的行列结构，每个表格由若干行组成，每行由若干单元格组成table、row、column
2.基本结构
2.1 table标签
用来定义表格 常用属性：
-
border 边框，默认为0
-
width/height 宽度/高度
-
align 水平对齐，取值：left、center、right
-
bordercolor 边框颜色
-
bgcolor 背景颜色
-
background 背景图片
-
cellspacing 间距，单元格与单元格之间的距离
-
cellpadding 边距，单元格内容与边界之间的距离
-
border-collapse（可继承） 表格的边框是否合并，separate(分离），collapse(合并)
2.2 tr标签
用来定义行，table row 常用属性：
-
align 水平对齐，取值：left、center、right
-
valign 垂直对齐，取值：top、middle、bottom
-
bgcolor 背景颜色
-
background 背景图片
2.3 td 标签
用户定义单元格，table data 常用属性：align、valign、bgcolor、background 注：表格必须由行组成，行必须由单元格组成，数据必须放到单元格中
3.合并单元格
也称为表格的跨行跨列 两个属性：
-
rowspan 设置单元格所跨的行数，如rowspan=2，表示跨越2行
-
colspan 设置单元格所跨的列数，如colspan=4，表示跨越4列
步骤：
-
在跨越的单元格中设置rowspan/colspan属性
-
将被跨越的单元格删除
必须要保证每行的实际列数是相同的，否则表格可能会出现错乱
从哪个地方合并单元格就要从那个单元格写colspan/rowspan，同时删除除写了colspan/rowspan的单元格要合并所在位置的单元格
4.高级标签
4.1 caption标签
表格的标题，使文本居中
4.2thead标签
表格的头部 table head
4.3 th 标签
表格的头部标题 table head title 一般用在thead中，设置头部的标题，替代td标签，与td的区别：加粗和居中对齐
4.4 tbody标签
表格的主体table body
4.5 tfoot标签
表格的底部 table foot
六.表单
1.简介
表单是一个包含若干表单元素的区域，用于获取不同类型的用户信息 表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉列表、按钮等
2.表单结构
2.1 表单语法
<form action="表单提交地址" method="提交方式"> 多个表单元素 </form>
2.2 form标签
用来定义表单，可以包含多个表单元素
常用属性:
-
action 提交数据给谁处理，即处理数据的程序，默认为当前页面
-
method 提交数据的方式，取值：get（默认）、post
get和post的区别：
get：以查询字符串形式提交，在地址栏中能看到，长度有限制，不安全
post：以表单数据组形式提交，在地址栏中看不到，长度无限制，安全
-
enctype规定在将表单数据发送到服务器之前如何对其进行编码
-
application/x-www-form-urlencoded：默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
-
multipart/form-data：不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 注意:只有 method="post" 时才使用 enctype 属性。
-
3.表单元素
大多数表单元素都是使用 <input> 标签来定义的，通过设置属性type来定义不同的表单元素
<input type="表单元素类型" name="名称" value="初始值" size="宽度">
| 表单元素类型 | 含义 | 说明 |
|---|---|---|
| text | 单行文本框 | 省略时默认就是text |
| password | 密码框 | 输入时以点号显示，安全 |
| radio | 单选按钮 | 只能选择其中一个 |
| checkbox | 复选框 | 可以同时选择多个 |
| submit | 提交按钮 | 提交表单数据 |
| reset | 重置按钮 | 重置表单元素的初始值 |
| image | 图像按钮 | 可以使用图片作为按钮，也具有提交的功能 |
| button | 普通按钮 | 默认无功能 |
| file | 文件选择器 | 选择要上传的文件 |
| hidden | 隐藏域 | 在页面上不显示，但会提交，可以用来存储数据 |
3.1 单行文本框text
常用属性：
-
name 名称，很重要，如果没有指定name，则该表单元素的数据是无法提交的
-
value 初始值
-
size 宽度
-
maxlength 最大字符数，默认是没有限制
-
readonly 只读，readonly="readonly"，可简写readonly，即只写属性名
-
disabled 禁用，disabled="disabled"，可简写disabled ，完全被禁用 readonly和disabled区别：readonly的数据会提交，而disabled的数据不会提交 表单元素被提交的两个条件：1.有name属性 2.非disabled
3.2 单选按钮radio
常用属性:
-
name 名称，多个radio的name属性值必须相同，才能实现互斥（单选）
-
value 值
-
checked 是否选中，两种状态：选中、未选中 checked="checked"，简写 checked
3.3 复选框check
常用属性与radio类似。
3.4 文件选择器file
常用属性:
-
name 名称
-
accept 设置可选的文件类型，用来限制上传的文件类型
使用MIME格式字符串对资源类型进行限制
常见的MIME类型：
纯文本： text/plain text/html text/xml
图像： image/jpeg image/png image/gif
4.特殊表单元素
| 表单元素 | 含义 | 说明 |
|---|---|---|
| select | 下拉列表 | |
| option | 列表选项 | |
| optgroup | 选项组 | 用来对option进行分组 |
| textarea | 文本域/多行文本框 | 用来创建多行文本框 |
4.1 下拉列表
select常用属性:
-
name 名称
-
size 行数，同时显示多个选项
-
multiple 允许同时选择多个
-
disabled 禁用
option常用属性:
-
value选项值
-
selected设置默认选中项
optgroup常用属性:
-
label 分组的标题
案例：
<select name="city"> <optgroup label="江西"> //分组 <option value="nanzhang">南昌</option> <option value="jingdezhen">景德镇</option> <option value="shangrao">上饶</option></optgroup> <optgroup label="江苏"> //分组 <option value="chanzhou">常州</option> <option value="nanji">南京</option> <option value="wuxi">无锡</option></optgroup> </select>
运行结果:
4.2 文本域
常用属性:
-
name名称
-
rows 行数
-
cols 宽度
5.其他表单元素
5.1 label标签
为表单元素提供标签，<label>标签不会向用户呈现任何特殊效果，但当选中label标签中的文本内容时会自动将焦点切换到与之关系的表单元素
常用属性
-
for 必须将该属性值设置为与之关联的表单元素的id属性值相同
注：几乎所有HTML标签都具有id属性，且id值必须唯一
<label for="标签">表单内容</label></label> <input type="表单类型" name="表单名" id="标签"> <!--标签名要一样，点击表单内容才会有反应-->
5.2 button标签
也表示按钮，与input 按钮类似
语法：
<button type="按钮类型">按钮文本或图像</button>
常用属性:
-
type 按钮的类型，取值：submit（默认）、reset、button(普通) 属性值:
-
submit：该按钮是提交按钮（除了 IE 浏览器，该值是其他浏览器的默认值）。
-
button：该按钮是可点击的按钮（IE 浏览器的默认值）。
-
reset：该按钮是重置按钮（清除表单数据）。
-
5.3 fieldset 和 legend 标签
fieldset标签，对表单元素进行分组
legend标签，对<fieldset>元素分组添加标题
<fieldset> <legend>Personalia:</legend> Name: <input type="text"><br><br> Telephone: <input type="text"><br><br> Email: <input type="text"> </fieldset>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
