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记得放在一起
要让旋转轴在中间

实现旋转木马

先旋转后移动