1 HTML 5
html5包含htm5 + css3 + javascript
1.1 新增语义标签
<header></header> 头部
<nav></nav> 导航栏
<section></section> 块级
<article></article> 内容
<aside></aside> 侧边栏
<footer></footer> 脚部
注意：可以多次使用；ie9中需要转换为块级元素；针对搜索引擎；针对于移动端；
1.2 新增多媒体标签
1.2.1 音频标签 audio
格式：ogg.mp3.
<audio>浏览器版本太低，不支持本音频，请升级浏览器！</audio>
属性：
controls:显示播放按钮
loop:loop 循环
autoplay:autoplay:自动播放 谷歌禁用了该功能
src:音频url
不同浏览器支持的格式不同，采取方案是为音频准备多个格式
1.2.2 视频模式 video
格式：ogg,mp4,webm
<video>你的浏览器版本太低，请升级浏览器</video>
属性：
src:视频的url
controls:显示播放控件
autoplay:自动播放
muted:静音播放 解决谷歌自动播放问题
loop:循环
poster:加载等待时显示的内容
1.3 新增的表单标签 表单属性
1.邮箱
<input type="email" />
2.网址
<input type="url" />
3.日期
<input type="date" />
4.time month week
<input type="tinme" />
5. 数字
<input type="number" />
6.手机号码
<input type="tel" />
7.搜索框
<input type="search" />
8.颜色选择表单
<input type="color" />
属性：
1. required 内容不能为空
2. placeholder="请输入内容" 提示文字 占位符
3. autofocus 自动定位光标
4.multiple:多文件提交
5.autocomplete:on off 默认打开 默认提示输入过的内容 必须有name属性 成功提交过
2 CSS3
2.1 新增css3选择器
2.1.1 css3属性选择器
<style>
button[disabled]{
cursor:pointer;
}
/*标签[属性名]{
} 属性选择器 类选择器 伪类选择器权重 0010
标签[属性名="属性值"]{
}
标签[属性名^="val"]{
以val开头的
}
标签[属性名$="val"]{
以val结尾的
}
标签名[属性名*="val"]{
包含val的
}*/
</style>
<button disabled ></button>
<button></button>
2.1.2 css3结构伪类选择器
E:first-child 匹配第一个子元E
E:last-child 匹配最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素 不管子元素的类型
n可以是数字 公式 关键字 even 偶数 odd 奇数 如果公式，n从0开始计算
2n:偶数
2n+1:奇数
5n:5 10 15
n+5:从第5个开始
-n+5:前5个 包含第5个
注意：0和超过的不显示
E:first-of-type 指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type(n) 指定类型的第n个
2.1.2 伪元素选择器 权重为0001
div{
width：20px;
height:20px;
border:1px solid red;
}
div::before{
content:'我'；/*内容的前面 是inline 改 inline-block*/
}
div::after{
content:"你"; /*内容的后面*/
}
2.2 转换
2.2.1 2D转换
转换transform:转换就是变形。
2.2.1.1 平移 translate
1.移动 translate
<style>
div{
width:100px;
height；100px;
transform:translate(100px,100px); /*水平移动100px 垂直移动100px*/
}
/*注意：不会影响其他盒子的位置
translate对于行内元素是无效的*/
/*实现垂直居中*/
div{
width:500px;
height:500px;
background:pink;
position:relative;
}
p{
width:200px;
height:200px;
background:blue;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); /* 跟%是相对于盒子自身来说的*/
}
</style>
2.2.1.2 旋转 rotate
<style>
div{
transform:rotate(40deg); /*负值就是逆时针旋转*/
transform-origin:left bottom;/* 默认50% 50% = center center 也可以是像素 */
}
</style>
2.2.1.3 缩放 scale
<style>
div{
transform:scale(2,1); x,y
/*等比例缩放：*/
transform:scale(2);
/*进行缩小 小于1*/
transform:scale(0.4);
}
</style>
优势：
不会影响其他盒子，而且可以设置缩放中心点
2.2.1.4 综合写法
div{
transform:translate() rotate() scale()；
/*位移和其他属性一起写，位移必须放在最前面；*/
}
3.动画
animation:动画
使用：1.先定义动画 2.再使用动画
div{
width:200px;
height:200px;
background:yellow;
animation-name:move;
animation-duration:5s;
animation-timing-function:ease;/*ease-in; ease-out; 速度曲线*/
animation-delay:1s;/* 延长时间*/
animation-iteration-count:infinite; /*重复次数*/
animation-direction:normal; /*alternate; 是否反方向播放*/
animation-fill-mode:backwards;/* forwards; 结束时的状态*/
animation-play-sate:paused;/* running 控制动画停止或者播放*/
/*animation:名称 时间 曲线 开始时间 播放次数 是否反向 动画起始或者结束状态*/
}
@keyframs move{
0% from{
transform:translateX(0px);
}
100% to{
transform:translateX(1000px);
}
}
4. 3D转换
3d:近大远小
1、3d位移
body{
perspective: 500px; /*透视；让网页中产生透视效果; 透视写在被观察的父盒子上*/
}
div{
transform:translateX() translateY() translateZ();
transform:translate3d(); /*x,y,z 不能省略，没有直接写0 */
}
2、3d旋转 rotate3d();
div{
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:rotate3d(x,y,z,deg);
transform:rotate3d(1,0,0,45deg); /* 沿x轴旋转 */
}
3.transform-style 控制子元素是否开启3d
div{
transform-style:preserve-3d; /* 给父盒子添加 */
}
5. 浏览器的私有前缀
div{
-moz-:火狐
-ms-:ie
-webkit-:safari,chrome
-o-:Opera
-o-border-radius:10px;
}
6 补充
1. 线性渐变
背景渐变必须添加浏览器私有前缀；
默认是从上往下显示
div{
background:-webkit-linear-gradient(left,red,blue);
background:-webkit-linear-gradient(left top,red,blue); /*从左上角到右下 角进行渐变 */
}
