标签 form

action = ‘后台地址’

form-data  上传表单样式（应该对）

表单可以将用户填写的信息提交的服务器

例子：

<form action="1.html" method="get">

<input type="text" name="name"><br />

<input type="password" name="pwd"><br />

<input type="submit" value="提交">

</form>

使用<form>标签来创建一个表单

表单中必须要有两个属性action和method

action表示提交表单到服务器中的地址

method表示提交表单的方法

一个表单中可以包含多个表单项

input

input是我们使用的最多的表单项，它可以 根据不同的type属性呈现不同的状态。

type属性可选值：

text：文本框

password：密码框

submit：提交按钮

radio：单选按钮

checkbox：多选框

reset ：重置按钮

name 用来分组（相同名称伪一组）

value 值不能相同

默认选中 （checked  = ’checked‘）

select、option

select用于创建一个下拉列表。

option表示下拉列表中的列表项。

optgroup用于为列表项分组。

textarea

textarea用来创建一个文本域，实际效果和 文本框类似，只是可以输入多行数据。

可用属性：

cols：文本域的列数

rows：文本域的行数

fieldset、legend、label

fieldset用来为表单项进行分组。

legend用于指定每组的名字。

label标签用来为表单项定义描述文字。

input  字节标签

button  成对标签

框架集

内联只能有一个

框架集  能使用多个  可以说是 内联框架 的升级版

frameset 和 body 不能在一个页面里 他俩只能有以一个

用cols来

子标签<frame />引入表格

css3过度动画 

transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。

CSS3圆角、阴影、rgba

CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：

border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：

border-radius:50%;

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;

分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color

2、transition-duration 设置过渡的时间，比如：1s 500ms

3、transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(n,n,n,n)

比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)

曲线设置网站：https://matthewlein.com/ceaser/

4、transition-delay 设置动画的延迟

5、transition: property duration timing-function delay 同时设置四个属性

举例

<style type="text/css">

.box{

    width:100px;

    height:100px;

    background-color:gold;

    transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;           

}

.box:hover{

    width:300px;

    height:300px;

    background-color:red;

}

</style>

......

<div class="box"></div>

CSS3 transform变换

1、translate(x,y) 设置盒子位移

2、scale(x,y) 设置盒子缩放

3、rotate(deg) 设置盒子旋转

4、skew(x-angle,y-angle) 设置盒子斜切

5、perspective 设置透视距离

6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示

7、translateX、translateY、translateZ 设置三维移动

8、rotateX、rotateY、rotateZ 设置三维旋转

9、scaleX、scaleY、scaleZ 设置三维缩放

10、tranform-origin 设置变形的中心点

11、backface-visibility 设置盒子背面是否可见