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

使用场景：

1. 配合字体图标

content: '\e91e'

content: ''''

content: ''也可以

1. 视频遮罩 .box::hover::before 鼠标经过时的before
2. 伪元素清除浮动

CSS3盒子模型

CSS3可通过box-sizing指定盒模型，有两个值：即可指定为content-box、border-box,

1. box-sizing: content-box 盒子大小为width+padding+border
2. 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:要过渡的属性 花费时间 运动曲线 何时开始

1. 属性：想要变化的CSS属性，宽度高度背景颜色等
2. 花费时间：单位是秒
3. 运动曲线：默认是ease（渐慢） linear（匀速）
4. 何时开始：单位是秒，最迟延迟触发时间，默认是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记得放在一起
• 要让旋转轴在中间

实现旋转木马

• 先旋转后移动