表格和表单
一.表格table
表格用table表示，表格中的每一行用tr表示，表格中的每一列用td表示；
th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。
<table> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td> </tr> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table>
效果图：
【table的常用属性】
1.border:给表格加边框，默认给所有的td加边框，并且给整个table加外边框，当增大border的值时，td的边框不变化，只有最外层大边框变宽。
<table border="10px"> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td> </tr> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table>
效果图：
2.cellspacing：单元格与单元格之间的距离。cellspacing="0"表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。
如果想实现边框的完全合并，需要使用CSS实现。
[注意] ：表格边框合并的CSS写法：style="border-collapse: collapse;"
【 这条CSS与cellspacing="0"的区别？】
cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然是两条 线；
border-collapse: collapse;是将表格相邻的两条边框合并处理，只有一条线存在。
（一旦边框合并，cellspacing属性将会失效。）
3.cellpadding：单元格中的文字与单元格边框之间的距离
4.height：表格的高度
width：表格的宽度
表格设置宽高的两种方式：
①使用表格宽高属性设置大小<table height="400" width="500"></table>
②使用CSS样式设置大小：<table style="height:400px;width:500px"></table>
5.align属性：设置表格在浏览器中的位置。不建议使用。
可选值：left表格居左/center居中/right居右
6.bgcolor:背景色（给表格添加背景色）
示例：
<table bgcolor="red">显示为整个表格为红色背景
7.bordercolor:边框颜色（此属性是给表格的边框添加颜色，而不是给整个表格，需要注意！）
示例：<table bordercolor="red">
8.background:背景图background="qq.jpg" [注意]背景色和背景图同时存在时，背景图会覆盖背景颜色
示例：<table background="qq.jpg">
【tr与td常用属性】
1.width:单元格宽度
height:单元格的高度
2.bgcolour：单元格的颜色
3.align:设置单元格中的文字，水平对齐方式。可选值：left.center.right
4.valign:设置单元格中的文字，垂直对齐方式。可选值：top.middle.bottom
5.nowrap="nowrap"当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大！！！
【表格的跨行与跨列】
1.跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。
2.跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。
【表格的结构化】
完整的表格结构，包括：
caption：表格的标题，无论<caption></caption>标签放在表格的第几行，表格标题永远在表格正上方局中。
thead：表格的表头部分。永远在表格的最上部。
tbody：表格的身体部分。在thead之下，tfoot之上。
tfoot：表格的尾部。永远在表格的最下部。
<table> <caption>表格的标题</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>男</td> </tr> <tr> <td>2</td> <td>李四</td> <td>女</td> </tr> <tr> <td>3</td> <td>王二麻子</td> <td>不明</td> </tr> </tbody> <tfoot> <tr> <td>合计</td> <td colspan="2">3</td> </tr> </tfoot> </table>
效果图：
二、表单
1.form表单的作用：
表单用于搜集不同类型的用户输入。
2.form表单的两个重要属性：
① action表示表单提交的服务器地址。
② method表单提交数据的方式，可选值get和post。
[get和post的区别]
① get通过URL传递数据，所有内容在URL可以看到。而post无法看见。
get传递数据不安全，而post传递数据安全。
② get能够传递的数据量有限，且只能传递文本信息。post可以传递大量信息，并且可以传递图片，文件等其他内容。
③ get的传输速度要比post快。
[get使用URL传递数据的格式]
http://URL地址.html?name1=value&name2=value2
用?表示参数传递的开始；多个参数之间用&连接，同一个参数用name来标识value。所以，使用表单时，input输入框的name属性一定不能省略。
如果省略input的name属性，则这个input的数据，不会往后台传递。
3.input的常用属性：
① type:声明input输入框是什么类型。
② name:给input输入框起名字。传递数据时，使用name=value的形式传递。
③ value：input输入框的默认值。
④ placeholder：输入的提示文本。当输入框为空时，显示。当输入框有value时消失。
⑤ checked="checked"设置单选框和复选框的默认选中
⑥ disabled="disabled"设置input禁用；一旦使用disabled禁用的输入框，在传递数据时，将不再 往后台传递。
⑦ hidden="hidden"隐藏输入框，隐藏的内容依然可以向后台传递。
4.input的type类型：
① text:表示input为文本输入框，输入的内容正常显示。
② password:表示input为密码输入框，输入的内容会显示小黑点；
③ radio：表示input为单选输入框
>>>radio标签的value属性不能省略，往后台传递值时，传递的是value中的值
>>>radio标签凭借name属性来判断是否是同一组标签。name相同为同一组，同一组当中只能选一个。
>>>使用checked="checked"可以设置默认选中项。
这种属性名等于属性值的写法，可以省略属性值
例如： <input type="radio" name="sex" value="男" checked/>男
④ checkbox ：表示复选框。其他要求与radio相同。
⑤ file:表示文件上传框。点击可以选择文件上传。
⑥ submit:表示input会显示提交按钮，点击可以提交整张表单；
⑦ reset:表示重置按钮，点击表单恢复到初始状态
⑧ image:图形提交按钮，使用src导入一张图片，与submit按钮具有提交表单的功能
⑨ button:只是按钮形状，没有任何作用
5.select下拉选择区块
① <select></select>标签中有多个选项，用<option></option>表示；
② 一个<select></select>组合只能有一个name，所以使用时需给select标签起name，而不是给option标签起name.
③ option标签，如果有value属性，则传递数据时将传递value的属性值，如果没有value属性，则传递<option></option>标签中间的文字。
④ option标签的title属性，表示鼠标指向后显示的文字；
⑤ 给option标签加上selected="selected"表示默认选中项
⑥ 给select标签加multiple="multiple"表示这个下拉框可以多选。但是这个属性几乎不用。
⑦ <optgroup label="组名"></optgroup>用于将所有的option标签进行分组，使用label属性表示组名；所以，完整的select下拉的结构如下：
<select name="city" >
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
<option>潍坊</option>
</optgroup>
<optgroup label="内陆">
<option>济南</option>
<option>淄博</option>
</optgroup>
6.textarea文本域
① 文本域可以使用cols和rows设置宽高，但是我们几乎不用。我们使用style="height: 50px;width: 200px;"来设定大小。
② 使用CSS样式style="resize:none;"设定文本域的大小不允许拖动缩放；
③ 使用属性readonly="readonly" 设置文本域为只读，不允许修改。
④ CSS样式overflow用于设置超出区域的文字如何显示。
可选值有三个：
hidden：超出区域的文字直接隐藏，无法看到；
scroll：无论文字多少，都会显示水平和垂直方向的滚动条；
auto:（默认效果）文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条；
也可以使用overflow-x和overflow-y单独设置水平和垂直方向滚动条是否显示；
7.HTML5智能表单
① H5为我们提供了input与form关联的新方式。并不要求input必须包含在form里面。如果input在form外面，只要给form标签一个id，让input标签通过form属性关联这个id，即可实现input与form的关联。
<form id="form1"></form>
<input form="form1">
② H5为我们提供了一系列新的input的type类型；
③ H5提供的input新属性：
placeholder:输入框的默认提示内容；
form：让表单外面的input关联表单id，实现input与form表单的关联；
required:设置input为必填
autoffocus:设置input自动获得焦点
autocomplete="off"关闭自动提示完成功能。此功能浏览器会默认开启，设置为off关闭，设置为on可以打开。可以给form标签添加autocomplete属性，设置整张表单的自动完成功能是否开启。
如有个别不同的input，可以单独再设置。
