1.form表单

能够获取用户输入(输入,选择,上传的文件)

并且将用户输入的内容全部发送给后端

HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器。

form元素

Form元素用于生成输入表单，是一个非可视化结构，所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。（每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数。拥有共同name的控件为一组，只生成一个请求参数，但该参数有多个值。）

特点

• 能够触发form表单提交数据的动作有两个标签可以**********

input标签type=submit
button标签

• 所有获取用户输入的标签都应该具有name属性**********

name属性就类似于字典的key
input框获取到的用户输入都会放到input框的value属性中

• 针对选择框 传到后端的数据,由value属性决定

• form表单如果要提交文件数据 必须修改以下参数 enctype="multipart/form-data"

参数

• action 控制数据提交的地址

三种书写方式
    1.不写 默认就是朝当前这个页面所在的地址提交数据
    2.写全路径("完整的url网址")
    3.只写路径后缀(/index/)

• method 控制数据提交的方式

get请求 
    from表单默认的是get请求,携带的数据默认跟在url后面,也就是"?"后面
    
post请求
    数据以键值对在http请求体重发送给服务器

*********************************************************

1、get:表单数据会被encodeURIComponent后以参数的形式:name1=value1&name2=value2 附带在url?后面，再发送给服务器，并在url中显示出来。

2、post：enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码，数据以键值对在http请求体重发送给服务器；如果enctype 属性为"multipart/form-data"，则以消息的形式发送给服务器。

• name : 表单名称
• target : 指定以哪种方式打开url

（提交请求会打开另一个URL资源）。_blank、_parent、_self、_top。

form元素内的控件

1.input的使用

通常情况下input需要结合label一起使用

<label for="d1">用户名:<input type="text" id="d1"></label>
绑定id值 之后点击label标签内任何的位置都可以自动选中input框

1. 单行文本框：type属性为text。
2. 密码输入框：type属性为password。
3. 日期选择器：type为date。
4. 隐藏域：type属性为hidden。
5. 单选框：type属性为radio。（name值相同的为同一组。）
6. 复选框：type属性为checkbox。
7. 文件上传域：type属性为file。（相当于图形版提交。）
8. 提交：type属性为submit。
9. 重设：type属性为reset。
10. 无动作按钮：type属性为button。
11. 颜色选择器：type为color。
12. 拖动条：type为range。此时，input可以选择min（拖动条最小值）、max（拖动条最大值）、step（步长）。
13. 搜索输入框：type为search。

1. 属性 checked：设置单选框、复选框初始状态是否为选中状态。
2. 属性 disable 禁用该input框
3. 属性 value 设置默认值

input标签可以加disable属性 禁用该input框
        input标签可以加value属性   设置默认值
        选择的标签 如何默认选中
            radio
            checkbox
                checked='checked'
                当属性名和属性值相同的时候 可以只写属性名(******)

图像域：type属性为image。
属性 maxlength：指定文本框所允许输入最大字符数。
属性 readonly：指定只读。
属性 src、width、height：指定图像URL、宽、高。（type为image时）。
    
//（以下为HTML5新增type）
时间选择器：type为time.
本地日期、时间选择器：datetime-local。
周选择：type为week。
月份选择器：type为month。
E-mail输入框：type为email。
电话号码输入框：type为tel。
URL输入框：type为url。
只能输入数值的文本框：type为number。

2.select标签

元素创建列表框或者下拉菜单（只要select元素指定了size或者multiple元素则生成列表框） 一个个option即为选项:一个列表项或菜单项。

• select属性 multiple：设置列表框和下拉菜单是否允许多选。
• select属性 size：指定列表框内可同时显示多少个列表项。
• select子元素 option：项

select子元素 optgroup：将option项分组。
option属性 disabled：禁用该选项。
option属性 selected：指定初始状态是否被选中。
option属性 value：该项的请求参数值。
optgroup属性 label：指定该组标签。必填
optgroup属性 disabled：禁用该选项组。

3.textarea元素

用于生成多行文本域,获取大段文本

属性cols：指定文本域宽度
属性rows：指定文本域高度
disabled：禁用文本域
readonly：只读
maxlength：设置文本域最多可以输入的字符数。
wrap：指定多行文本域是否添加换行符。如果不添加换行符，那么请求参数将会舍弃文本域的格式，只保留文本发送到URL。如果文本较多且格式较复杂，应指定wrap属性。

4.autofocus属性

表单增加此属性后，加载页面后该控件获得焦点. 因此该属性只能有一个属性设置。

2.CSS

CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

1.基础语法

CSS规则由两个主要部分构成:选择器,以及一条或多条声明

css的语法结构   选择器 {属性1:属性值1}

id和class是HTML元素中两个最基本的公共属性。

• （1）一个标签可以同时定义多个class；
• （2）id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；

css的注释

单行 /*这里是单行注释*/

多行
    /*这里是多行
    注释
    */

2.css的三种引用方式

在HTML中引入CSS共有三种方式

2.1 外部样式表

外部样式表是最理想的CSS引用方式 , 把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。

<link rel="stylesheet" href="样式表.css">

注意: 外部样式表都是在head标签内使用link标签来引用的。

2.2 内部样式表

内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在