html5与css3新特性
HTML5新特性
增加了一些新的标签、新的表单以及新的表单属性等
这些新特性都有兼容性问题，基本上IE9+以上版本浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性
新增语义化标签
- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>：定义文档某个区域
- <aside>:侧边栏标签
- <footer>:尾部标签
<details>
<summary>点击查看代码</summary>
注意：
- 这种语义化标签主要是针对搜索引擎的
- 这些新标签可以多次使用
- IE9中，需要把这些标签转化为块级元素
- 移动端常用
新增的多媒体标签
新媒体标签主要包含两个：
1. 音频：<audio>
2. 视频：<video>
使用他们不需要flash和其他浏览器插件即可嵌入视频或者音频
video目前支持三种视频格式，mp4，WebbM，Ogg，一般推荐mp4格式，兼容性好
<video src="地址" controls="controls"></video>
<video src="地址" controls="controls" width="300">
<source src="move.mp4" type="video/mp4">
<source src="move.ogg" type="video/ogg">
你的浏览器暂时不支持<video>标签播放视频
</video>
常见属性
- src： 图片地址
- autoplay=“autoplay" 视频就绪自动播放（谷歌浏览器禁用了自动播放）
muted="muted"静音播放，使用这个属性后谷歌浏览器也可以自动播放
- control="controls"播放控件（播放、暂停、静音）
- width: 100% 显示和浏览器一样宽
- height
- loop: 值为loop时循环播放，不写该属性则不循环
- preload: auto预先加载视频，none不加载视频，如果有了autoplay忽略该属性
- poster: 值imgurl，加载等待的图片画面（视频正在加载时显示的图片）
- muted: muted静音播放
一般不加controls，因为不同浏览器控件不同，后续可以用JS实现相同的控件
新增input表单
type值：
原有text、password、submit等
- email:
- url
- date
- time
- month
- week
- number
- tel 手机号码
- search 搜索框
- color 生成一个颜色选择表单
type="submit" value="提交"为提交按钮，提交时会对其他输入检测
number、tel、search最重要
HTML5新增的表单属性
- required="required" 表示不能为空，必须写
- placeholder="": 默认显示的内容，输入一些文字后会消失
还可以通过box::placeholder选择该属性并进行属性调整
- autofocus=“autofocus": 自动获取焦点
- autocomplete=off/on 记录上次提交过的内容，开始键入时显示以前输入过的
- multiple：multiple 用于多选文件
广义的H5
广义的HTML5指的是HTML5本身+CSS3+JavaScript，这个集合有时称为HTML5和朋友，将来HTML5是一种发展趋势
CSS3的现状
新增选择器和盒子模型和其他特性，ie9+才支持
新的选择器
属性选择器：
-
可以根据元素特定属性来选择元素，可以不用借助类或id选择
input[value] {color: pink;} 选择具有value属性的input
input[type="text"] 选择文本框的input（重要）
input[class^="icon"] 选择具有class属性且属性值为icon开头的元素
input[class$="-data"] 选择具有class属性且以-data为结尾的元素
input[class*="val"] 选择出具有class属性且包含val的元素
-
类选择器、属性选择器、伪类选择器权重为10
结构伪类选择器
-
主要根据文档结构选择器元素，常用与根据父级选择器里面的元素
E:first-child 选择父元素的第一个子元素
E:last-child 选择父元素的最后一个子元素
E:nth-child(n) 选择父元素的第n个子元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type 指定类型E的第n个
-
完整写法ul li:first-child ul
-
nth-child给所有孩子排序，先看第几个孩子，再判断是否符合要求如果第一个孩子不是li则选不出来结果，优先看第几个孩子
-
nth-of-type会把指定元素的孩子排列序号，优先看类型，再看第几个孩子
-
n可以是数字关键字或者公式； n可以是关键字：even偶数odd奇数；直接写n表示每次加1往后计算； 可以是公式：可以写2n（偶数），2n+1（奇数），5*n（一行显示5个时可以选择第五个去掉右边距），n+5（从第五个开始到最后），-n+5（前五个）
-
无序列表用nth-child更多
-
类选择器、属性选择器、伪类选择器权重为10
伪元素选择器
帮助我们利用css创建标签元素，而不需要HTML便签，从而简化HTML结构
CSS3时是两个冒号，CSS2前是单冒号
::before 在元素的内部的前面插入内容
::after 在元素的内部的后面插入内容
- before和after创建一个元素，但是是行内元素
- 装饰类的小图片可以用伪元素做，不需要插入新标签
- 新创建的元素在文档树中无法找到，所以称为伪元素
- before和after必须有content属性
- 伪元素选择器和标签选择器的权重一样为1，div::before权重为2
使用场景：
- 配合字体图标
content: '\e91e'
content: ''''
content: ''也可以
- 视频遮罩 .box::hover::before 鼠标经过时的before
- 伪元素清除浮动
CSS3盒子模型
CSS3可通过box-sizing指定盒模型，有两个值：即可指定为content-box、border-box,
- box-sizing: content-box 盒子大小为width+padding+border
- box-sizing: border-box盒子大小为width
这样使用padding和border就不会撑大盒子了（padding和border不要超过width）
经常在css开头*中加上border-sizing: border-box;
CSS其他特性
CSS3滤镜filter
可以将模糊或者颜色偏移等图形效果应用于元素
filter: 函数();
例如filter: blur(5px) 可以让图像模糊，数值越大，图像越模糊
CSS3 calc函数
width: calc(100% - 80px);
可以实现一些计算，可以实现比父盒子小多少像素
运算符前后要加空格
CSS过渡
过渡是CSS3具有颠覆性的特性之一，可以实现某些动画，经常与：hover一起使用
transition:要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的CSS属性，宽度高度背景颜色等
- 花费时间：单位是秒
- 运动曲线：默认是ease（渐慢） linear（匀速）
- 何时开始：单位是秒，最迟延迟触发时间，默认是0s
后两个属性可以省略
要同时改变两个属性,需要在类和类：hover中写变化前和变化后的属性值
transition: width .5s, height .5s
transition: all 0.5s
利用逗号分隔
背景颜色渐变
background: linear-gradient(起始方向，颜色1，颜色2，...)
电脑端使用尽量加上前缀-webkit- linear-gradient
起始方向包括top left, left, right等
转换
动画
2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换可以简单理解为变形
- 移动: translate
- 旋转：retate
- 缩放：scale
过渡效果是transition: all 0.3s;
translate
二维坐标系：向右向下为正
transform: translate(x,y)
transform: translateX(x)
transform: translateY(y)
- x是x轴上移动位置，y是y轴移动位置
- translate不会影响其他元素位置
- 百分比单位是相对自身元素的
- 对行内标签无效
- 在子盒子想要定位到父盒子中间时，可以定位top%50,left50%,然后translate(50%,50%)
rotate
transform: rotate(360deg)
- 可以用来实现小三角><朝上朝下(小正方形只要两个边框，旋转)
- 度数逆时针为正
转换中心点 transform-origin
默认为50 % 50%
transform-origin: x y;
x y可以是像素、百分比、方位名词
缩放scale
可以实现放大缩小
transform:scale(x,y);
transform:scale(x);
x,y表示倍数，1表示一倍,只写一个表示同时x倍
- 不会影响其他盒子，而且可以设置缩放中心点
- 缩放是向四周缩放的，比直接改宽高更适合做动画
综合写法
transform: translate() rotate() scale()
- 先旋转会改变坐标轴方向
- 先同时有位移和其他效果时，位移放在最前面
动画
可以通过设置多个节点来精确控制一个或者一组动画，实现复杂的动画效果
- 先定义动画
- 再调用动画
用keyframes定义动画
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
使用的元素 {
animation-name: move;
animation-duration: 2s;
}
- from to等同于0%,100%
- 可以做多个状态的变化，百分比要是正数，100%的时候是总时间
动画属性
- animation: 动画属性的简写属性
- animation-name: 动画名字
- animation-duration: 持续时间
- animation-timing-function: 规定动画的速度曲线，默认是'ease'
- animation-delay: 规定动画何时开始，单位是秒
- animation-iteration-count: 规定动画被播放的次数infinite表示无限循环
- animation-direction: 规定动画
- animation-direction: 默认是normal反方向是alternate
- animation-play-state: 规定动画是否正在运行或者暂停，默认是running,pause
- animation-fill-mode: 规定动画结束后状态，保持forwards回到起始backwards
简写
annimation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
annimation: myfirst 5s linear 2s infinite alternate;
前两个不能省略
速度曲线细节
animation-timing-function:
- linear 匀速
- ease 低-->高-->低
- ease-in 低速开始
- ease-out 低速结束
- ease-in-out 低速开始和结束
- steps()指定了时间函数中的间隔数量(步长)，相当于一步一步走，离散化
--可以通过设定一个盒子，装n个字，宽度为n个字的宽度，并且分n步，设定一行显示和溢出隐藏，即可实现打字机效果
动画实例
body {
background-color: rgb(163, 151, 229);
}
div {
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
background: url(bear.png) no-repeat;
animation: run 1s steps(8) infinite, move 3s forwards;
}
@keyframes run {
0% {
background-position: 0 0;
/* transform: translate(0, 0); */
}
100% {
background-position: -1600px 0;
/* transform: translate(-1400px, 0); */
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
3D变换
x水平向右y垂直向下z垂直屏幕（往外是正值，往内是负值）
3D位移
translateZ沿着z轴运动，后面的单位一般跟px
translate3d(100px,100px,100px) 不能省略x，y，z，如果没有就写0
z轴值越大，我们看到的物体越大
透视perspective
网页中产生3D效果需要透视，透视也称为视距(人的眼睛到屏幕的距离)，透视的单位是像素
透视要加在父亲上
perspective: 500px;
3D旋转rotate
transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg
(x,y,z)可以表示轴的方向
transformX:
transformY：
transformZ：
左手准则，大拇指指向x正向，则四指指向翻转方向
3D呈现transform-style
- 控制子元素是否开启三维立体空间
- 默认flat不开启3D
- transform-style: preserve-3D子元素开启3D立体空间
- 代码写给父级，影响的是子盒子
实现双面盒子
- 两个盒子叠在一起放在一个父盒子里，先将背面盒子旋转180，再将父盒子旋转180，记得维持3D效果
- 多个transform记得放在一起
- 要让旋转轴在中间
实现旋转木马
- 先旋转后移动
