1.HTML5 的新特性
1.1 HTML5 新增的语义化标签
<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
注意： 1）这种语义化标准主要是针对搜索引擎的
2）这些新标签页面中可以使用多次
3）在IE9中，需要把这些元素转换为块级元素
4）其实，我们移动端更喜欢使用这些标签
5）HTML5 还增加了很多其他标签 ，以后会遇到
1.2 HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个：
音频：< audio> 视频：< video>
使用它们可以很方便的在页面中联入音频和视频，而不再去使用flash和其他浏览器插件。
1.2.1 视频< video>
<video src="文件地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg">
<source src="move.mp4" type="video/mp4">
您的浏览器暂不支持<video>标签播放视频
</video >
常见属性
属性 値 描述 autoplay autoplay 视频就绪自动插放（谷歌浏览體需要添加muted来解决自动播放问题）
controls controls 向用户显示插放控件
width pixels(像素） 设置插放器宽度
height pixels(像素） 设置摇放器高宸
loop loop 播放完是否继续播放该视频，循环播放
preload auto none 规定是否预加载视频(如果有了autoplay 就忽路该属性）
src url 视频url地址
poster Imgurl 加载等待的画面图片
muted muted 静音播放
例如：
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" /*解决浏览器禁止自动播放问题*/> </video>
</body>
<body>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/ mi9.jpg"></video>
</bodv>
1.2.2 音频< audio>
语法
<audio src="文件地址" controls="controls> </audio>
<audio controls="controls">
<source src="move.ogg" type="video/ogg">
<source src="move.mp3" type="video/mp3">
您的浏览器暂不支持<video>标签播放视频
</audio >
常见属性
属性 值 描述
autoplay autoplay 如果出现该厲性，则音频在就緒后马上播放。
controls controls 如果出现该厲性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
src url 要播放的音频的 URL。
谷歌浏览器把音频和视频自动播放禁上了
1.2.3 3.多媒体标签总结
1）音频标签和视频标签使用方式基本一致
2）浏览器支持情况不同
3）谷歌浏览器把音频和视频自动播放禁止了
4）我们可以给视频标签添加muted 属性来静音播放视频，音频不可以（可以通过JavaScript解決）
5）视频标签是重点，我们经常设置自动播放，不使用controls 控件 ，福环和设置大小属性
1.3 1.3 HTML5 新增的 input 类型
属性值 说明
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number“ 限制用户输入必须为数字类型
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
<body>
/*我们验证的时候必须添加form表单域*/
<form action="">
<ul>
<li>邮箱：<input type="email" /></li>
<li>网址：<input type="ur1" /> </li>
<li>日期：<input type="date" /></li>
<li>日期：<input type="time" /></li>
<li>数量：<input type="number" /></li>
<li>手机号码：<input type="tel" /></li>
<li>搜索：<input type="search" /></li>
<li>颜色：<input type="color" /></li>
/*当我们点击提交按钮就可以验证表单了*/
<li>
<input type="submit" value="提交">
</li>
</ul>
</form>
</body>
1.4 HTML5 新增的表单属性
属性 值 说明
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
multiple multiple 可以多选文件提交
autocomolete off / on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字 段中填写的选项。 默认已经打开，如autocomplete="on"，关闭 autocomplete ="off" 需要放在表单内，同时加上name 属性，同时成功提交
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: pink;
}
<form action="">
<input type="search" required="required" placeholder="小王" autofocus="autofocus">
<input type="submit" value="提交">
</form>
2.css3的新特性
2.1 CSS3 新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。
1）属性选择器 2）结构伪类选择器 3）伪元素选择器
2.2 属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
选择符 简介
E[att] 选择具有 att 属性的E 元素
E[att="val"] 选择具有 att 属性且属性值等于 val 的E 元素
E[att^="val"] 匹配具有att 属性且值以 val 开头的E 元素
E[att$="val"] 匹配具有 att 属性且值以 val 结尾的E 元素
E[att*="val"] 匹配具有 att 厲性且值中含有val 的E元素
注意：类选择器、属性选择器、伪类选择器，权重为 10。
input[type] {
color:yellow;
}
input[type="text"] {
color:yellow;
}
input[type^="icon"] { /*以icon开头的标签*/
color:yellow;
}
input[type$="icon"] { /*以icon结尾的标签*/
color:yellow;
}
input[type*="icon"] { /*含有icon的标签*/
color:yellow;
}
<input type="text">
<input type="text" name="" id="">
<div class="icon1">小王</div>
<div class="icon2">小王</div>
<div class="icon3">小王</div>
<div class="4icon">小王</div>
<div class="5icon">小王</div>
2.3 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素 ，常用于根据父级选择器里面的子元素
选择符 简介
E:first-child 匹配父元素中的第一个子元素 E
E:last-child 匹配父元素中最后一个E 元索
E:nth-child(n) 匹配父元索中的第 n 个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型 E 的最后一个
E:nth-of-type(n) 指定类型 E的第n个
<style>
ul :first-child{ /*ul的第一个孩子*/
background-color: yellow;
}
ul li:first-child{ /*ul里第一个孩子，且必须li*/
background-color: yellow;
}
ul li:nth-child(3){ /*ul里第三个孩子，且必须li*/
background-color: yellow;
}
ul li:nth-child(even){ /*ul里偶数孩子，且必须li*/
background-color: yellow;
}
ul li:nth-child(odd){ /*ul里奇数孩子，且必须li*/
background-color: yellow;
}
ul li:nth-child(n+3){ /*ul里第三个孩子开始，且必须li*/
background-color: yellow;
}
ul li:nth-of-type(3) /*ul里第三个叫li的孩子*/
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
E:nth-child(n)和E:nth-of-type(n)区别：
1）E:nth-child(n) 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
例如：ul li:nth-child(3) 先把ul里的所有孩子都排序，然后找到编号为3的孩子，最后确定是否为li，如果不是，则无法选择，如果是，则可以选择
2）E:nth-of-type(n) 对父元素里面指定子元素进何排序选择。 先去匹配E ，然后再根据E找第n个孩子
例如：ul li:nth-of-type(3) 先把ul里的所有li挑选出来并排序，然后选出编号为3的li
nth-child（n）选择某个父元素的一个或多个特定的子元素
1）n可以是数宇，关键字和公式
2）n如果是数字，就是选择第n 个子元素，里面数字从1开始．
3）n可以是关键字：even偶数，odd 奇数
4）n可以是公式：常见的公式如卡(如果八是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15 ···
n+5 从第5个开始（包含第五个）到退后
-n+5 前5个（包含第5个）
2.4 伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标益，从而简化HTML结构。
选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意：
1）before 和 after 创建一个元素 ，属于行内元素，无法添加宽度和高度，需要转换模式或者添加浮动
2）新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3）语法：element :: before {}
4）before 和 after必须有 content 属性
5）before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
6）伪元素选择器和标签选择器一样，权重为 1
<style>
div::before {
content:'小周';
}
div::after {
content:'小王';
}
</style>
<body>
<div> 爱 </div>
</body>
div:hover::before { /*鼠标经过div，里面的before背景颜色变化*/
background-color:yellow;
}
2.5 CSS3 盒子模型
CSS3 中可以通过 box-sizing 来指定盒子模型 ，有2个值：content-box、 border-box ， 这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1）box-sizing:content-box 盒子大小为 width + padding + border （以前默认的）
2）box-sizing:border-box 盒子大小为 width (更推荐)
如果盒子模型我们改为了 box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）
*{
margin: 0;
padding: 0;
box-sizing: border-box;
/*推荐将其放在初始化中*/
}
2.6 CSS3 其他特性（了解）
1）图片变模糊
2）计算盒子宽度 width: calc函数
CSS3滤镜filter:
filter 属性将模糊或颜色偏移等图形效果应用于元素。
filter：函数();
例如：filter:blur(5px) /*blur模糊处理 数值越大越模糊*/
用法
<style>
img {
filter: blur(15);
}
img:hover {
filter: blur(0); /*鼠标经过时，取消模糊*/
}
</style>
<body>
<img src="images/pink.jpg" alt="">
</body>
CSS3 calc 函数：
calc() 此CSS函数让你在声明CSS属性性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用＋- * / 来进行计算。
2.7 CSS3 过渡（重点）
过渡 （transition）是SS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或Javascript 的情况下 ，当元素从一种样式变换为另一种样式时，为元素添加效果。
过渡动画：是从一个状态 渐渐的过渡到另外一个状态，可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持 （ie9以下版本） 但是不会影响页面布局。
我们现在经常和 :hover一起 搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始；
1）属性：宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all 就可以。
2）花费时间：单位是 秒（必须写单位） 比如 0.5s
3）运动曲线：默认是ease（可以省略）
4）何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是Os（可以省略）
记住过渡的使用口诀：谁做过渡给谁加
例如：
<style>
div {
width: 200px;
height: 100px;
background-color:pink;
/*ransition：变化的属性 花费时间 运动曲线 何时开始;*/
transition: all .5s; /*谁做过渡给谁加*/
/*如果想过渡多个属性，用逗号分隔*/
transition: width .5s,height .5s;
}
div:hover {
width: 400px;
}
</style>
<body>
<div></div>
</body>
3. 2D 转换
转换 （transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transtorm）你可以理解为变形
1）移动：translate
2）旋转：rotate
3）缩放：scale
3.1 移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
浯法
transform: translateX(n);
transform: translateY(n);
transform: translate(x,y);
重点
1）定义2D 转换中的移动，沿着X和Y轴移动元素 2）translate最大的优点：不会影响到其他元素的位置 3）translate中的百分比单位是相对于自身元素的 transform: translate(50%, 50%); 4）对行内标签没有效果
小用法：
让盒子居中显示：先定位于父盒子中间，在向上和右移动盒子的一半
3.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。 语法
transform :rotate(度数);
重点
1）rotate里面跟度数，单位是deg。 比如 transform :rotate(15deg);
2）角度为正时，顺时针，负时，为逆时针
3）默认旋转的中心点是元素的中心
3.3 转换中心点 transform-origin
我们可以设置元素转换的中心点
语法
transform-origin:x y;
重点 1）注意后面的参数 x和y用空格隔开
2）x y默认转换的中心点是元素的中心点 (50% 50%)
3）还可以给x y设置 像素 或者 方位名词 (top bottom left right center )
3.4 缩放 scale
只要给元素添加上了这个属性就能控制它放大还是缩小。
语法
transform:scale(x,y);
注意
1）注意其中的x和y用逗号分隔
2）transform:scale(1,1)：宽和高都放大一倍，相对于没有放大
3）transform:scale (2,2)：宽和高都放大了2倍
4）transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
5）transform:scale(0.5,0.5)：缩小
6）sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
scale的优点：
不会影响其他的盒子，而且可以设置缩放的中心点，直接修改的话会影响到下面的盒子
3.5 综合写法
注意：
1）同时使用多个转换，其格式为：transform: translate() rotate() scale().等
2）其顺序会影转换的效果。（先旋转会改变坐标轴方向）
3）当我们同时有位移和其他属性的时候 ，记得要将位移放到最前（重点）
3.6 2D 转换总结
1）转换transform 我们简单理解就是变形有2D和3D之分
2）我们暂且学了三个分别是 位移 旋转和 缩放
3）2D移动translate(x y）最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
4）可以分开写比如 translateX(x）和translateY(y)
5）2D旋转rotate(度数） 可以实现旋转元素 度数的单位是deg
6）2D缩放 sacle(x,y）里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
7）设置转换中心点 transform-origin:x y： 参数可以百分比、 像素或者是方位名词
8）当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
4.动画
动画 （animation ）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
4.1 动画的基本使用
制作动画分为两步： 先定义动画，再使用（调用）动画
第一步： keyframes定义动画（类似定义类选择器）
/*放在style中*/
@keyframes 动画名称 {
0%{
width: 100px;
}
100% {
width: 200px;
}
}
动画序列
1）0%是动画的开始 ，100% 是动画的完成。这样的规则就是动画序列。
2）在@keyframes中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动面效果。
3）动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
4）请用百分比来规定变化发生的时间，或用关键词“from’和“to°，等同于0% 和 100%。
第二步： 元素使用动画
div {
width: 200px;
height: 200px;
background-color: yellow;
margin: 100px auto;
/*调用动画*/
animation-name:动面名称;
/*持续时间*/
animation-duration:持续时间;
}
综合：
/* 1.可以做多个状态的变化 keyframe 关键帧
2.里面的百分比要是整数
3.里面的百分比按照总的时间的划分 */
@keyframes name {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 200px;
height: 200px;
background-color: yellow;
/*调用动画*/
animation-name: name;
/*持续时间*/
animation-duration: 2s;
}
4.2 动画常用属性。
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function 规定动画的速度曲线，默认是”ease”。
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是"normal “,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是"running”还有"paused"
animation-fill-mode 规定动画结束后状态保持forwards回到起始backwards
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: name;
/* 持续时间 */
animation-duration: 5s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
animation-iteration-count: infinite;
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
animation-direction: alternate;
/* 动画结束后的状态，默认的是 backwards，回到起始状态 我们可以让他停留在结束状态 forwards */
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
animation-play-state: paused;
}
4.3 动画简写属性
animation：动画名称持续时间 运动曲线 何时开始 播放次数 是否反方向 动国起始或者结束的状态;
animation: myfirst 5s 1inear 2s infinite alternate ;
1）简写属性里面不包含 animation-play-state
2）暂停动画：animation-play-state： puased; 经常和鼠标经过等其他配合使用
3）想要动画走回来 ，而不是直接跳回来：animation-tirection : alternate
4）盒子动画结束后，停在结束位置：animation-fill-mode : forwards
4.4 速度曲线细节
animation-timing -function ：规定动画1的速度曲线，默认是"ease"
值 描述
linear 动画从头到尾的速度足相同的。匀速
ease 默认。动西以低进开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps 指定了时间函数中的间隔数量（步长）
5. 3D转换
5.1 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同組成的。 1）x轴：水平向右 注意：x右边是正值，左边是负值 2）y轴：垂直向下 注意：y下面是正值，上面是负值 3）z轴：垂直屏幕 注意：向面前时正值，向对面是负值
5.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
transform:translateX(100px)：仅仅是在x轴上移动
transform:translateY(100px)：仅仅是在Y轴上移动
transform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中x、y、z分別指要移动的轴的方向的距离
5.3 透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
1）如果想要在网页上产生3D效果，需要透视（理解成3D物体投影在2D平面内）
2）模拟人类的视觉位置，可认为安排一只眼睛去看
3）透视我们也称为视距 ：视距就是人的眼睛到屏幕的距离
4）距离视觉点越近的在电脑平面成像越大，越远成像越小
5）透视的单位是像素
透视写在被观察元素的父盒子上面的
透视越小，看到的图形就越大；透视缩小，可以理解为图像走向面前
5.4 3D旋转 rotate3d
3D旋转指可以让元素在二维平面内沿着x轴，y轴，工轴或者自定义轴进行旅转。
语法
1）transtorm:rotateX(45deg)：沿着x正方向旋转45度
2）transform:rotateY(45deg)：沿看y轴正方向旋转45度
3）transform:rotateZ(45deg)：沿着Z轴正方向旋转45度
4）transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转,xy是表示旋转轴的矢量，是标示你是否希望沿着该抽旋转，最后一个标示旋转的角度。transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45度；transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45度
5.5 3D呈现 transfrom-style
1）控制子元素是否开启二维立体环境。
2） transform-style:flat 子元素不开启3d立体空间（默认的）
3）transform-style:preserve-3d;子元素开启立体空间
4）代码写给父级，但是影响的是子盒子
5）这个属性很重要，后面必用
6.浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1）私有前缀
-moz-：代表firefox 浏览器私有属性
-ms-：代表ie 浏览器私有属性
-webkit-：代表safari、 chrome私有厲性
-o-：代表Opera 私有属性
2）提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
