html入门基础笔记(简单实用)

一、初识html

1.HTML：Hyper Text Markup Language（超文本标记语言）
java是一门编译性语言
html是一门解释性的标记语言
超文本：文字、图片、音频、视频、动画、超链接
标记：就是指组成HTML的各种标签

2.HTML5的优势：
1、各大浏览器厂商对它的支持
2、市场的需求
3、跨平台

3.W3C标准：
1、结构化标准：指用什么语言去搭建整个网站（html 5）
2、表现化标准：指用什么去装饰整个网站（css3）
3、行为标准：指用什么去实现网站的功能（JavaScript，jQuery）

4.html的基本结构：

<html><head><title>天猫精选-理想生活上天猫</title></head><body bgcolor="pink">大家好！！！！！</body></html>

双标签：有个两个标签成对出现的叫做双标签
表示HTML网页的开始，表示网页的结束
表示网页头部的开始，表示网页头部的结束
表示网页身体的开始，表示网页身体的结束
表示网页标题的结束

标题标签
<h1></h1>....<h6></h6>:会对文字进行加粗，并且改变字体的大小，还会进行换行段落标签
<p></p>:表示它独占一行，会保留段落之间的间距加粗
<strong></strong>:表示加粗斜体
<em></em>:表示斜体字体设置
<font></font>:表示字体
属性：color颜色face字体的样式size字体的大小

单标签：只有一个，开始就结束的叫做单标签

属性：charset = “utf-8”;utf-8表示国际编码格式，所有的字符都能识别

换行标签
<br/>：表示换到下一行水平线标签
<hr/>:表示水平线
属性：width表示水平线的宽度size表示水平线的厚度color表示水平线的颜色align表示水平线的水平位置，left左边，center中间，right右边图像标签
<img src="" alt="" title=""/>
src表示的是图片地址绝对路径：直接写完整图片所在的位置相对路径：先找到和你的网页所在同一级的图片所在位置，然后再去在这个基础去找图片的位置，如果图片在下一级那么使用“/”来找到它，如果上一级使用“..”来找到它
alt表示的是图片加载失败的替代文字
title表示的是鼠标悬浮时图片的提示文字
width表示图片的宽度
height表示图片的高度

特殊标签：
大于符号：>（great than）
小于符号：<（less than）
空格符号：
版权符号：©
注释：

5.超链接标签

<a href="" target=""></a>

href表示链接的地址，使用相对路径的方式去使用
target表示连接的方式
_blank表示在新窗口打开
_self表示在本窗口打开
_parent表示在父窗口打开
1、页面间的链接，用于两个页面之间相互的跳转
2、锚链接，用于页面之间定位
①要设置一个锚点，语法锚点
②将点击之后要跳转的超链接设置跳转的锚点位置，语法：

如果不在同一个页面中，先写好要跳转页面所在的位置，然后再写锚点的名字
3、功能性链接 (发邮件、msn、可以打开本地的相应的客户端)
语法：

二、网页媒体元素

1.视频元素<video></video>
属性：src表示添加视频的路径(位置)
controls表示在添加的视频元素上添加播放控件，只有一个属性值
/autoplay表示自动播放（慎用），只有一个属性值
如果属性只有一个值，属性值可以省略不写
source表示引用的视频源路径，一般会引用多个源路径，以避免浏览器不兼容的问题

2.音频元素<audio></audio>
属性：src表示添加视频的路径（位置）
controls表示在添加的音频元素上添加播放控件，只有一个属性值
/autoplay表示自动播放（慎用），只有一个属性值
source表示引用的音频源路径，一般会引用多个源路径，以避免浏览器不兼容的问题

3.内嵌框架<iframe></iframe>
属性：src表示添加内嵌内容的路径
name表示这个框架的名字
width表示这个框架的宽度
height表示这个框架的高度
frameborder表示内嵌框架的边框
scrolling表示是否出现滚动条
作用：
1、将多个网页重复的部分抽取出来，通过内嵌框架的方式，放到各个网页中
2、使用<a>标签跳转到指定的框架中，先在指定要跳转到的框架中取一个name，使用target=“name的值”
<a>标签一定要写href属性才能生效，如果不想跳转到任何页面，那么href="#",表示该超链接为空
链接，点击空链接会刷新页面

4.语义化结构标签：主要是为了让结构更加清晰化

  <header>表示页面头部内容<section>表示页面主体内容<footer>表示页面底部内容<nav>表示导航栏内容<aside>表示侧边栏内容<article>表示页面独立文章内容

三、表单元素

1.表单<form></form>
属性：1、method表示表单的提交方式，有两个值，第一个叫post，第二个叫get
get方式的请求会将表单中所有表单元素信息显示在地址栏中
post方式的请求必须有一个服务器来处理请求，所有表单元素的信息不会显示在地址栏中，在实际开发中一般使用post方式请求
2、action表单要提交的位置

2.表单元素
语法：
属性： name表示input标签的名字
value表示input标签的值
type表示input标签的元素类型

文本框：专门用来输入文字
语法：<input type="text" name="userName" value="admin"/>，type的值为text
size表示文本框的长度
maxlength表示允许输入的最大字符长度

密码框：用来输入密码
语法：<input type="password" name="userName" value="admin"/>，
type的值为password
size表示文本框的长度
maxlength表示允许输入的最大字符长度

单选按钮

<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女

注意：单选按钮的每个input中的name值必须相同，不然不能实现选择一个切换的作用
checked属性表示默认选中

复选框

<input type="checkbox" name="hobby" value="" />打游戏
<input type="checkbox" name="hobby" value="" checked/>睡觉
<input type="checkbox" name="hobby" value="" />出去约会

复选框可以选择多个，并且可以取消
checked属性表示默认选中

下拉列表框

  <select>表示定义了一个列表框<option>表示列表项<select><option>--请选择--</option><option selected>中国</option><option>美国</option></select> selected表示默认选中

按钮
1、提交按钮submit，它可以将表单中的信息提交到指定的位置
2、重置按钮reset，它可以将表单中的信息恢复到默认值
3、普通按钮button，它只是单纯起一个按钮的作用，需要和JavaScript和jQuery一起使
用，实现各种功能
4、图片按钮image，src表示图片的路径，也具有提交作用

多行文本域：需要输入多行文字
<textarea>表示定义了一个多行文本域
cols表示文本域的宽度
rows表示文本域的高度

文件域：上传文件

<input type="file" name="files"/>

需要设置编码属性enctype="multipart/form-data"，表示将表单数据分为多部分提交

邮箱：可以进行邮箱验证

网址：可以进行网址验证

  <input type="url" name="url"/>

数字：提供输入数字

min表示允许的最小值
max表示允许的最大值
step表示每次增加或者减少的数字间隔
value表示默认值

搜索框：可以搜索提示关键字的文本框

  <input type="search" name="search" /><input type="button" value="百度一下" />

3.表单的高级应用
1、隐藏域：主要应用于在提交信息时不想让用户看到的信息进行隐藏提交

  <input type="hidden" name="hidden" value="666"/>

2、只读和禁用属性只读：表示在网站上用户只能够查看，不能够修改的数据，使用readonly添加只读禁用：一般表示在满足某个条件之后，才能使用的功能，使用disabled添加禁用
3、表单元素的标注①选择要点击后跳转文本加上<label>标签②选择跳转对应的表单元素，给它加上id这个属性（id属性值在整个网页只能出现一次，不可以有重复的id值）③在<label>中添加for属性，然后属性值为对应的id值

4.表单的初步验证
为什么要进行表单验证
1、减轻服务器的压力
2、保证数据的可行性和安全性
5.验证的方法
1、placeholder表示这个表单元素期待用户输入什么信息，它是起提示作用，当用户输入
内容时，提示信息隐藏
2、required表示表单元素填写内容不能为空，使用了required的该表单元素必须填写
3、pattern表示表单中的内容必须和输入的正则表达式一致

   ^表示正则表达式的开始$表示正则表达式的结束[]表示在中括号中任选其中一个\d表示匹配0~9之间的任意一个数{n}表示前面的一种匹配方式匹配的次数，表示匹配n次-表示就是-\w表示匹配所有字母或数字或下划线\u4E00-\u9FA5匹配汉字{4,10}表示匹配前面的一种匹配方式4~10次A-Z表示匹配大写的英文字母a-z表示匹配小写的英文字母|表示或者

四、初识CSS3

1.CSS:层叠样式表，它是专门用来设计网页风格的

2.CSS的优点
1、内容与表现分离，便于网页维护
2、网页的表现统一，统一风格
3、丰富的样式，使得页面布局更加灵活
4、减少网页的代码量，增加网页的浏览速度
5、运用独立于页面的CSS，有利于网页被搜索引擎收录
3.CSS样式的语法
选择器{
声明(可以为1~n条)
属性:属性值;
}
选择器：需要添加这些声明的元素（标签）
声明：由属性和属性值组成，中间用“:”,使用“;”结尾

4.在html中添加样式的方式
1、行内样式
在需要添加样式的标签中，添加一个style属性，在style属性中添加声明
2、内部样式
在里面添加一个,然后通过选择器和声明添加样式
3、外部样式
它可以实现表现与内容的彻底分离，可以让样式表重复使用，便于维护和修改，并且
可以极大的减少代码量
①链接外部样式表
语法：
href表示引用的哪一个外部样式表
rel表示使用的是样式表
type表示文本类型为css类型
②导入外部样式表
语法：@import url(“css/第一个外部样式.css”);
区别：链接外部样式表它是先将外部的CSS样式添加到网页中进行加载，再加载网页的
内容，导入外部样式表是先加载网页中的内容，再进行外部样式表的加载
样式表的优先级别
行内样式>内部样式>外部样式，遵循“就近原则”

5.CSS3中的选择器
一、基本选择器
1、标签选择器：以标签名称作为选择器的名称
选择所有网页的该标签元素，比如：p表示选择该网页中所有的p标签
2、类选择器：以类的名称作为选择器的名称，并且在选择器的名称前加上“.”，类
名能够重复使用
3、id选择器：以id的名称作为选择器的名称，并且在选择器的名称前加上“#”，id
名在该网页只能出现一次，具有唯一性
选择器的优先级
id选择器>类选择器>标签选择器
二、层次选择器
1、后代选择器
语法：E F{声明}，E表示的是被匹配的元素，F表示被匹配的E的后代元素
比如：body p{},表示匹配所有body的后代p元素
2、子选择器
语法：E>F{声明}，E表示的是被匹配的元素，F表示被匹配的E的子元素
比如：body>p{},表示匹配所有body的子元素中的p元素
3、相邻兄弟选择器
语法：E+F{声明}，E表示的是被匹配的元素，F表示被匹配的E的相邻兄弟元素
比如：.p1+p{},表示匹配.p1的相邻元素并且为p元素，只匹配后面的元素
4、通用兄弟选择器
语法：E~F{声明}，E表示的是被匹配的元素，F表示被匹配的E的所有兄弟元素
比如：.p1~p{},表示匹配.p1的所有兄弟元素并且为p元素，只匹配后面的
元素
三、结构伪类选择器
1、语法：E>F:first-child，E表示的是被匹配的元素，F表示被匹配的F:first-
child表示被匹配的E的子元素中第一个元素并且这个元素是F元素
2、语法：E>F:last-child，E表示的是被匹配的元素，F表示被匹配的F:last-
child表示被匹配的E的子元素中最后一个元素并且这个元素是F元素
3、语法：E>F:nth-child(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-
child(n)表示被匹配的E的子元素中最后一个元素并且这个元素是F元素
even表示匹配所有偶数行
odd表示匹配所有奇数行
4、语法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-
of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n个
E>F:nth-child(n)表示先匹配所有的儿子，再去找第几个儿子是不是F元素，如果是
就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第几个元素
四、属性选择器
1、E[attr],E表示匹配的E元素，attr表示属性，匹配具有attr属性的E元素
2、E[attr=val],匹配具有attr属性，并且属性值为val的E元素
3、E[attr^=val],匹配具有attr属性，并且属性值以val开头的E元素
4、E[attr$=val],匹配具有attr属性，并且属性值以val结尾的E元素
5、E[attr*=val],匹配具有attr属性，并且属性值中包含val的E元素

六、CSS3美化网页元素

前言：<span>这个标签没有任何实际意义，它只是为了突出显示某个部分，它是一个行内元素，不能够独
占一行，并且该元素所占的区域是根据内容大小决定，不会因为改变宽度和高度改变它的大小
<div>这个标签没有任何实际意义,它只是为了将某些部分装起来，它是一个块元素，会独占一行，
并且该元素所占的区域是根据它的宽度和高度决定，会因为改变宽度和高度改变它的大小

1.字体样式：
1、font-family字体类型，字体类型的值有：“楷书”、“隶书”、“微软雅黑”、英文字体
可以写多个字体格式，使用“，”隔开，如果同时存在英文和中文字体，英文就显示
英文字体，中文就显示中文字体，并且英文字体要放在中文字体前面
2、font-size字体大小，就是改变字体大小，字体大小的单位使用px
3、font-style
字体风格，normal正常的（默认）、italic（倾斜的）、oblique（倾斜的）
4、font-weight字体粗细，bold（粗体）、bolder（更粗的）、lighter（细的）
font字体属性，需要满足字体属性设置顺序，风格=》粗细=》大小=》类型

2.文本样式：
1、color
文本颜色
①使用英文单词去表示颜色
②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位
③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明
2、text-align
水平对齐方式，设置文本的水平对齐方式
属性值：center居中，left居左，right居右
3、vertical-align垂直对齐方式，设置文本的水平对齐方式
属性值：middle居中，top居上，bottom居下
4、text-indent设置文本首行缩进，属性值一般使用em相对单位，em表示长度为文本字符
大小的长度
5、line-height设置文本行高，属性值使用px为单位，还可以设置为倍数
6、text-decoration
文本装饰
属性值：①none表示没有任何装饰
②underline表示下划线
③overline表示上划线
④line-through表示删除线

7、text-shadow文本阴影语法：text-shadow : color  x-offset  y-offset  blur-radius;    color阴影颜色x-offset表示X轴偏移量，正数往右偏移，负数往左偏移y-offset表示Y轴偏移量，正数往下偏移，负数往上偏移     blur-radius表示模糊半径

2.超链接伪类
1、a:link单击访问前的超链接样式
2、a:visited单击访问后的超链接样式
3、a:hover鼠标悬浮的超链接样式
4、a:active鼠标单击未释放的超链接样式

列表样式
1、list-style-type表示设置列表的标记类型
常用类型：none表示没有标记
disc表示实心圆点
square表示实心正方形
circle表示空心圆点
decimal表示数字
2、list-style-image使用图像代替标记
3、list-style-position表示在哪个位置使用标记
4、list-style设置列表属性，通常使用这个属性

3.背景样式
1、背景颜色background-color
①使用英文单词去表示颜色
②使用十六进制的方式表示，并且如果相邻的两两数字相同，可以缩写为一位
③使用三原色的方式去表示，语法：rgb(r,g,b)，rgba(r,g,b,a)
r,g,b取值从0~255
a表示透明度，取值从0~1,0表示完全透明，1表示完全不透明
有一个特殊值，transparent表示透明的意思，它是默认值
2、背景图片background-image
url表示的图片路径
3、背景重复方式background-repeat
repeat表示沿水平方向和垂直方向进行重复
no-repeat表示不重复
repeat-x表示沿水平方向重复
repeat-y表示沿垂直方向重复
4、背景位移background-position：X轴方向偏移量 Y轴方向偏移量
①可以使用像素值来表示偏移量，比如：50px 50px;
②可以使用百分比来表示偏移量，比如：20% 50%;
③可以使用英文字母来表示偏移量，比如：center middle;
5、背景属性设置所有的背景样式
6、背景尺寸background-size
①auto表示背景图片保持原样，默认值
②percentage表示背景图片大小根据容器大小的百分比决定大小，只写一个值表示只
对一个值进行设置，另外一个值会根据图片本身的比例等比例缩放
本身比例为4:3
400px 300px
800px 600px
1200px 900px
③直接使用像素值px来设置图片大小，只设置一个值和百分比一样
④cover放大充满整个容器
⑤contain放大充满整个容器，如果有一个方向充满了整个容器，那么不在放大

4.渐变
1、线性渐变
：颜色沿着一条直线过渡
linear-gradient(渐变方向,颜色1，颜色2，颜色n)
不加前缀方向使用“to 方向”表示往哪个方向进行渐变，加上前缀之后使用“方向”
表示从哪个方向开始渐变
2、径向渐变：从一个起点朝所有方向混合
-radial-gradient(渐变方向,颜色1，颜色2，颜色n)

5.浏览器前缀：(避免兼容问题)
IE浏览器前缀-ms-
Chrome浏览器前缀-webkit-
Safiri浏览器前缀-webkit-
Opera浏览器前缀-o-
Firefox浏览器前缀-moz-

七、盒子模型

1.盒子模型：就是一个虚拟的矩形容器
2.盒子模型的组成：
1、content（内容）：表示主要内容
2、padding（内边距）：表示内容与边框之间的距离
3、border（边框）：表示包着内容的外框，边框是有一定宽度的
4、margin（外边距）：表示边框外部与其他盒子的距离

3.边框border
1、border-color边框颜色
①使用英文字母来表示颜色
②使用十六进制来表示颜色
③使用三原色来表示颜色，rgb(),rgba()
所有的块元素都是一个盒子模型
border-top-color上边框，border-bottom-color下边框
border-left-color左边框，border-right-color右边框
※※※※※※※
可以使用border-color去设置，可以取1~4个值任意一个
如果设置一个值表示对应所有的方向
如果设置两个值，第一个值表示上边框和它对应边框的值，第二个值表示右边框和它
对应的值
如果设置三个值，第一个值表示上边框，第二个值表示右边框和它对应的值，第三个
表示下边框的值
如果设置四个值，第一个值表示上边框，第二个值表示右边框，第三个值表示下边框，
第四个值表示左边框，按照顺时针的顺序依次设置
2、border-width边框的粗细
使用像素值去设置边框的粗细，网页一般使用这种方式
设置边框颜色的方式一样
3、border-style边框的样式
none表示没有边框
solid表示实线边框
dashed表示虚线边框
dotted表示点线边框
设置边框样式的方式和置边框颜色的方式一样
border边框属性
可以设置边框的所有属性，不需要按照顺序
border-left设置左边框的属性
border-right设置右边框的属性
border-bottom设置下边框的属性
border-top设置上边框的属性
外边距margin
margin-top设置上外边距的距离
margin-right设置右外边距的距离
margin-bottom设置下外边距的距离
margin-left设置左外边距的距离
可以使用margin去设置，可以取1~4个值任意一个
和设置边框颜色的方式一样
使用margin设置盒子居中，语法：margin：0px auto;需要满足两个条件
①必须为块元素
②必须设置盒子的宽度和高度
内边距padding
padding-top设置上内边距的距离
padding-right设置右内边距的距离
padding-bottom设置下内边距的距离
padding-left设置左内边距的距离
可以使用padding去设置，可以取1~4个值任意一个
和设置边框颜色的方式一样

4.盒子模型的尺寸
盒子模型的尺存分为盒子模型的宽度和高度
盒子模型的外盒宽度=内容宽度+内边距的左右宽度+边框左右宽度+外边距左右宽度
盒子模型的外盒高度=内容高度+内边距的上下高度+边框上下高度+外边距上下高度
盒子模型的内盒宽度=内容宽度+内边距的左右宽度+边框左右度
盒子模型的内盒高度=内容高度+内边距的上下高度+边框上下度

5.拯救布局
使用box-sizing拯救布局，有3个值
1、content-box：默认值，表示设置的宽度和高度等于内容的宽度和高度，盒子的宽度和
高度通过计算获得
2、border-box：表示设置的宽度和高度等于盒子的宽度和高度
3、inherit：继承父元素的盒子模型模式

6.圆角边框border-radius：为矩形边框设置圆角效果
语法：border-radius:可以设置1~4个值;
设置一个值会对四个角进行设置
设置两个值，第一个值设置左上角和它对角的值，第二值是设置右上角和它对角的值
设置三个值，第一个设置左上角，第二个设置右上角和它对角的值，第三个设置右下角的值
设置四个值，第一个设置左上角，第二个设置右上角，第三个设置右下角，第四个设置左下角
设置圆形
①必须盒子的宽度和高度相同
②圆角边框的值必须将四个角的值都设置为宽度的一半或者50%
设置上半圆：宽度不变，高度变为一半，第一个值、第二值为一半，第三和第四个为0
设置下半圆：宽度不变，高度变为一半，第一个值、第二值为0，第三和第四个为一半
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为一半，第二和第三个为0
设置左半圆：宽度为一半，高度变不变，第一个值、第四值为0，第二和第三个为一半

扇形：高度和宽度都为一半，需要哪一个方向的就添加哪个角的值，其他都为0

7.盒子阴影box-shadow
语法：box-shadow:inset x-offset y-offset blur-radius color;
第一个参数表示阴影的类型，不写为外阴影，inset表示为内阴影
第二个参数表示阴影的水平偏移量，正数往右，负数往左
第三个参数表示阴影的垂直偏移量，正数往下，负数往上
第四个参数为模糊半径，模糊范围大小，越往外越模糊
第五个参数为阴影颜色

八、块元素与行内（内联）元素

1.块元素与行内（内联）元素的特性
1、块元素：独占一行，并且可以设置元素的宽高(div,h1-h6,p,列表)
2、行内元素：不是独占一行，设置宽高对它不起作用，宽度由元素内容撑开。

2.display:显示（元素以哪种形式进行显示）
1、block：块级元素的默认值，在元素前后会有换行
2、inline:行内元素的默认值，元素前后没有换行
3、inline-block:行内块元素，元素既有行内元素的特性(可以和其他元素显示在同一行)又有块级元素的特性（可以设置宽高）。
4、none:该元素不被显示。

3.float:浮动:使得块级元素排列在同一行
1、left:左浮动
2、right：右浮动
3、none:元素不浮动，按照标准文档流显示

4.clear：清除浮动
1、left：清除元素左边的浮动
2、right:清除元素右边的浮动
3、both：清除两侧
4、none:默认值，不清除浮动

5.解决父级边框塌陷的方法
1、在浮动元素的后面加空div，并且给这个空div设置样式：clear：both
2、给父级设置高度height
3、给父级添加属性overflow:auto;
4、给父级添加伪类after
#father:after{
content:’’;
display:block;
clear:both
}

6.overflow:属性用来处理溢出
1、visible:可见的，内容元素会被显示出来，但是在父级边框的外面
2、hidden:内容元素会被显示在边框里，但是超出的部分会被隐藏
3、scroll:内容元素会被隐藏，但是浏览器会提供滚动条，滚动以显示超出的内容
4、auto:当内容元素超出父级的高度时就提供滚动条以显示超出的内容，若内容未超出就不显示滚动条。

九、定位与动画

1.定位属性:position
1、static:默认值，没有定位
2、relative：相对定位，相对于元素原本的位置进行偏移，元素原来的位置会被保留，浮动元素设置相对定位后，是相对元素浮动以后的位置进行偏移。
3、absolute:绝对定位，相对于离元素最近的已经设置定位属性的祖先元素为基准进行偏移，元素原来的位置不会被保留，如果没有已经定位的祖先元素，则以浏览器窗口为基准进行偏移。
4、fixed：固定定位，以浏览器窗口为基准进行偏移。
5、定位的元素的层级会比未定位的元素的级别更高，相对定位通常用于给父元素设置定位属性，但是不设置不偏移量，结合绝对定位使用，固定定位用于广告栏，返回顶部的图标，楼层导航等。
6、z-index：改变定位元素的堆叠顺序，值为整数，值越大，级别越高，显示在最上面。

2.动画
1、变形
语法:transform:变形函数;
2、平移函数：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，单位为px；
3、缩放函数：scale(x,y);x代表元素宽度的缩放量，y代表高度的缩放量。
4、倾斜函数：skew(x,y);x代表元素水平方向的倾斜度数，y代表垂直方向的倾斜度数，单位是deg。
5、旋转函数：rotate(x);x代表旋转的度数，为正数时顺时针旋转，为负数时逆时针旋转。
2、过渡transition：是一种动画转换过程，渐慢，渐快等。
语法：transition:过渡样式的属性过渡花费的时间过渡函数(过渡的速度) 过渡的延迟时间；
1)使用步骤
A、在元素默认样式中声明元素默认的样式
B、声明元素最终呈现的样式，如悬浮(hover)，获取焦点(focus)时的样式
C、在元素默认的样式中添加过渡属性。
3、过渡函数：
1、ease：默认值，由快到慢
2、linear:匀速
3、ease-in:越来越快
4、ease-out:越来越慢
5、ease-in-out:先越来越快再越来越慢

3.动画animation
1、创建关键帧(浏览器兼容前缀是加在@与keyframes中间的)
语法：@keyframes 动画名称{
0%{元素样式}
25%{元素样式}
…
}
4.调用动画
在元素样式中调用
语法：animation:动画名称动画次数动画播放的方向动画播放状态
1)、动画播放次数：为整数，默认值为1，无限循环infinite
2)动画发生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）
3)动画播放状态：running(播放) paused(暂停)
4)动画播放方向：normal（向前） alternate(偶数次向前)