HTML5和CSS3提高

HTML5和CSS3提高

html新特性

新增语义化标签

<header>头部标签
nav导航标签article内容标签section定义文档某个区域aside侧边标签footer尾部标签

新增多媒体标签

video视频标签尽量用MP4几乎支持所有浏览器
<video src="url" control="controls" autoplay="autoplay" muted="muted" loop="loop" poster="url"></video>
设置宽度：video{width:100%;}poster 预先加载的图片 muted静音播放 autoplay自动播放
audio音频标签几乎都支持MP3格式
<audio src="url" control="controls" autoplay="autoplay" loop="loop" poster="url"></audio>

新增input类型

搜索·<input type="search" />
还有 email url date tel color 限制输入类型

新增表单属性

required="required"必须书写，不能为空
placeholder=“提示文本”
可通过input::placeholder{color:pink;}修改颜色
autofocus="autofocus"页面加载完成自动聚焦到指定表单
autocomplete="on"自动显示之前提交的内容默认打开，设为off
多选文件type=“file” multiple="multiple"可多选文件

CSS3新特性

新增选择器

属性选择器

A[4]选择具有4属性的A元素
A[id=text]选择id属性=text的A元素可以不加引号
A[id^=text]选择id属性值以text开头的A元素
A[id$=text]选择id属性值以text结尾的A元素
A[id*=text]选择id属性值中含有text的A元素
类、属性、伪类选择器权重为10

结构伪类选择器

B A:first-child 父元素B中第一个子元素A
B A:last-child 父元素B中最后子元素A
B A:nth-child(2)父元素B中第2个子元素A
表格隔行变色：nth-child(n)n可以是关键字，数字或公式
nth-child(even)所有偶数的选出来odd(所有奇数选出来)
nth-child(n)从0开始，每次加一，往后计算，只能是n，不能是其他字母
-n+5前5个
A：first-of-type last-of-type nth-of-type(n)
区别：nth-child所有类型子元素一起编号，先看后面n再看是否与前面标签匹配，若不匹配，不返回；nth-of-type(n)把指定子元素排列顺序，再选；无序列表选nth-child(n)。

伪元素选择器

::after在父元素内部后面插入内容
element::before{}在元素内部前面插入内容
before和after创建一个元素，但是属于行内元素，必须具有content属性content=“我”
伪元素字体图标 定位子绝父相 也可使用字体图标前面的符号反斜杠转义
伪元素做遮罩 display：none;
.todou:hover::before{display:block;}
伪元素清除浮动

.clearfix::after{
content:"";
display:block;
height:0;
clear:both:
visibility:hidden;
}
或：
.clearfix::after,.clearfix::before{
content:"";
display:table;
}
.clearfix::after{clear:both;}

盒子模型

在次css初始中设置box-sizing:border-box;盒子大小就为width，padding与margin不会撑大盒子。

其他特性

CSS3滤镜filter
语法：filter：blur(5px);模糊处理 数值越大越模糊
calc函数calc()括号里可以使用±*/符号计算width:calc(100%-30px);子盒子比父盒子小30px

CSS3过渡

transition:属性 时间 运动曲线 何时开始; 后面两个可以不要
属性为想要变化的css属性 谁要过度给谁加，
div{transition: width 1s ease 1s，height .5s;}
若同时想过度多个，利用逗号分割。若过度所有：transition:all .5s;
过度条

2D转换transform

移动translate
transform：translate(x,y);例： translate(100px,100px); 或translateX(n);translateY(n);
里面可以跟百分比 百分比则盒子移动是盒子自身宽度或高度的百分比
translate不会影响其他元素的位置
让一个盒子水平垂直居中：
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);盒子走自己高度的一半
旋转rotate
transform:rotate(度数)；单位是deg
案例：三角形

div::after{
position:absolute;
content:"";
top:8px;
right:15px;
width:10px;
border-right:1px solid black;
border-bottom:1px solid black;
transform:rotate(45deg);
}

设置转换中心点语法
transform-origin:x y; 谁变给谁加
x y 可以设置像素或方位名词(top bottom left right center)
缩放scale
语法 transform:scale(x,y); 逗号隔开 x y 为数字 为倍数的意思
等比例缩放简写transform:scale(2); 也可设置缩放中心点同上
分页按钮案例
若同时使用多个转换 格式为：transform:translate() rotate() scale(); 顺序不可变

动画

1. 定义动画用keyframes

@keyframes move{
0%{transform: translateX(0px);}
100%{transform: translateX(1000px);}
}

2. 使用动画

div{
animation-name:move;
animation-duration:2s;
}

动画序列

from to 等同于0%和100%

@keyframes move{
0%{transform: translateX(0px);}
25%{transform: translate(1000px,0);}
50%{transform: translate(1000px,500px);}
75%{transform: translate(0px,500px);}
100%{transform: translate(0px,0);}
}

动画属性

animation-timing-function 运动曲线 steps(10)分几步完成动画可做进度条或文字打印效果 也可做小熊动画
animation-delay 何时开始 默认为0
animation-iteration-count 播放次数 默认为1，可以设置为infinite
animation-direction是否逆向播放 默认normal 反向为alternate
动画结束状态：走一遍之后不回去animation-fill-mode默认为backwards，动画结束后会回去，forwards不回去。
animation-play-state 默认为 running paused 可以设置暂停
元素可以添加多个动画，用逗号间隔就可

动画简写属性

animation：动画名称持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

3D转换

3D移动transform:translate3d(x,y,z);
transform:translateX() translateY() translateZ();
透视perspective 透视写在被观察元素父亲盒子上Perspective：100px; 透视越小，物体越大。z是物体到屏幕的距离 ，z越大物体越大。透视是视距，是眼睛到屏幕的距离
translateZ 正值往眼睛这移动
3D旋转
transform：rotate3d(x,y,z,deg) xyz为1或0 为1转 若有同时为1 则按平行四边形法则，一般不用这种
transform:rotateX(deg) rotateY(deg) rotateZ(deg);
rotateX正向里负值向外翻转（左手定则）
rotateY正向右负值向左
rotateZ和2D旋转基本一致
3D呈现 transform-style ：控制子元素是否开启3D立体环境
transform-style：flat;默认不开启 preserve-3d开启 代码写给父级，但是影响的是子盒子。
案例：两面翻转的盒子 box翻转 两个盒子背靠背
旋转木马

浏览器私有前缀