表格和表单
表格标签<table></table>
表格标签（table）概述
1.具有使网页展示表格形式内容的标签-------table标签
2.表格标签为双标签，写法如下： <table></table>
3.表格标签默认情况是一个“类似于块级标签的table类型"，即在他会占据整行。（虽然有点特殊，给上一个边框他没法完全占据一行，显示的加上display:block，又能独占一行）
<table>的完整格式
完整的表格为：表头+表体+表尾
通过标签属性对表格进行控制
-
border：给表格加上边框，其值为一个边框大小，默认单位为像素。border属性 -
cellspacing与cellpadding
单元格与单元格之间的距离(cellspacing),
单元格与内容之间的距离 (cellpadding)
-
width、height
Width与height用于设置表格的宽度(width),高度(height)，
宽度高度的值可以为具体的像素，也可以为一个百分比。
（百分比的意思是让当前元素的高宽占据父元素的相应百分比的高宽）
-
background与 bgcolor
background设置表格背景图片
bgcolor设置背景的颜色
注意：如果两个属性都给了的话，一般而言，背景图片会覆盖背景颜色
-
align
align设置表格对齐方式或单元格内容的对齐方式
注意：
当align设置在单元格里面时，会起作用的是单元格内容
当align设置在表格中时，起作用的是整个表格
-
rowspan 与 colspan
colspan 用于设置跨列 , rowspan 用于设置跨行
跨行时，将rowspan属性写在要跨行的列上，其值为要跨的行数：
跨列时，将colspan属性写在要跨列的列上，其值为要跨的列数：
表格标签总结
(1)<table>的基本格式
(2)<table>的完整格式
(3)thead, tbody, tfoot标签的作用
更加语义化/让大表格(table)在下载的时候可以分段的显示/让表格行从头到尾显示/符合主流开发规范.
(4)通过属性设置表格样式
① 给表格设置边框【border属性】
② 设置表格单元格之间的距离(cellspacing),
③ 单元格与内容之间的距离 (cellpadding)
表单
表单标签概述
1.form标签为具有接收用户输入并提交的功能的标签
2.form标签为双标签，写法如下： <form></form>
3.form默认情况是一个“块级标签"，他会占据整行空间
4.它里面的input,button等标签是行内块元素
表单标签<form>基本写法
基本表单 == 外层的form标签 + 在form里面的表单元素标签
其中，表单元素一般要放置于表单标签<form>中，不然某些表单元素将会失效，如：“提交"按钮和“重置"按钮。
1.表单标签<form>的主要属性
最常用属性：action，method，target
-
action
规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL"。
这样当我们点击提交按钮后，网页就会跳转到url所代表的站点或页面处。
-
method
规定用于发送表单数据的方法，值为 : get / post , 默认为get方式.
注意：
1.发送数据时，input标签的name属性一定要加上，
否则数据就无法发送出去。
- get / post 的比较
① 可见性
get方式发送的数据会直接附加到表单的action属性所指的URL的后面，用户可见！
post方式发送的数据会放置在header里发送到action属性所指的URL地址处。用户不可见。
② 数据量
get传送的数据量较小，不能大于2KB。post传送的数据量
③ 安全与效率
get安全性低于post，但效率高于post
④ 作用
一般而言：get 用于查询居多，post用于更新居多。
-
target
规定在何处打开“action"中设定的URL。和a标签一样，具有以下值：
_blank 【在新窗口打开】
_self 【就在当前窗口打开】
_parent 【在父窗口打开】
_top 【在顶层窗口打开】
<iframe>的“name"【在某个iframe中打开】
2.位于form内的一些标签
-
1.<label>标签
-
用于显示一些说明/提示信息，行内元素，不会占据整行。
-
就显示效果上而言，加了和没加并没什么区别，但是对搜索引擎会更加的友好
For属性可以和对应的input绑到一起
<label for="inp1">用户名：</label> <input id="inp1" placeholder="请输入你的用户名..." name="username" />
-
2.<input>标签
用于接收用户输入，为行内块元素。他不仅仅是接收文本的输入，通过type属性的设置我们还可以接收不同类型值的输入。
<input>标签的type属性
input标签的type属性的一些常用可选值：
| 属性 | 描述 |
|---|---|
| text | 普通文本 |
| search | 搜索框 |
| password | 密码 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| file | 文件上传 |
| image | 定义图像作为提交按钮 |
| button | 按钮类型 |
| submit | 普通提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏输入域 |
Value属性
设置“文本类型"的输入框中默认显示的值内容。
maxlength 属性
规定输入字段中的字符的最大长度。
Readonly属性
Readonly属性使表单元素成为“只读"状态，在这个状态下只能读取元素内容，而不能进行编辑。
Disabled属性
使表单元素成为“禁用"状态，表单元素将“失效"
Size属性
规定文本框可见字符显示的宽度，但不同浏览器对此的支持有所不同，我们现在基本都是使用CSS去控制
placeholder 属性
提示文本
autofocus 属性
自动聚焦
-
3.多行文本域<textarea>标签
- 用于输入多行文本的标签对，
- 行内块元素，不会占据整行。
- 标签是双标签，它拥有闭合标签。
<textarea>文本</textarea>
- 它显示文本内容是通过标签的内容，而非“value"属性。
- 它可以通过“cols"和“rows"属性来设置显示的尺寸
-
下拉框<select>标签- 用于显示单选和多选的下拉菜单，
<option>是它必须的子菜单，否则将不能提供任何可选项 - 可以通过“size"属性设置该标签在一个选项菜单中可见的选项个数，当它的值设为“1"时，将显示为默认的
<select>下拉菜单的样式 - 其他属性：multiple，selected
multiple：允许选中多个option
selected:设置默认选中的option - 对下拉菜单进行分组
<optgroup></optgroup>
- 用于显示单选和多选的下拉菜单，
-
按钮<button>标签对1.标签对和其它表单元素一样，为行内（块）标签
2.button它是一个双标签。
3.通过type属性可以设置其类型 【button/submit/reset】
input type=“button” value="">与
<button>的区别(1)``
按钮文本是放置于该标签的内容上，而```是将按钮文本设置于它的“value"属性上<input type="button" name="btn" value="提交"/> 与 <button>提交</button>
(2)<button>标签对内可以同时显示文本、图片、表格甚至是多媒体，而<input>标签显示内容要单调很多。
<button>
<a href=""></a>
//
<image src=""/>
//.....
</button>
(3)<button>标签的“type"属性不进行设置的话，
在“IE浏览器"中将默认设为“button"，
而在其它浏览器中（包括 W3C 规范）都会默认设为“submit"
所以，为了统一浏览器的行为，我们通常都会为<button>的属性“type"设置一个初始值
2.实现表单文字对齐
通过CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
label{
border: 0px solid red;
display: inline-block;
width: 100px;
text-align: right;
}
</style>
/head>
<body>
<form>
<div>
<label>用户名：</label>
<input placeholder="请输入用户名..." />
</div>
<div>
<label>昵称：</label>
<input placeholder="请输入昵称..." />
</div>
<div>
<label>密码：</label>
<input placeholder="请输入密码..." />
</div>
</form>
</body>
</html>