HTML5新特性和CSS3的新特性
HTML5新增布局和表单标签
HTML5的新特性主要是针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题，基本是IE9+以上的版本浏览器才支持，如果不考录兼容性的问题，可以大量使用这些新特性。
HTML5新增语义化标签
-
头部标签 - 内容标签
-
定义文档某个区域
注意：
- 这中语义化标签主要是针对搜索引擎的（对搜索引擎更友好）
- 这些新标签在页面中可以多次使用
- 在IE9中我们需要将其转化为块级元素
- 其实，在移动端中，更喜欢使用这些标签（移动端没有兼容性问题）
- 此外，HTML5还增加了很多其他标签
HTML5新增媒体标签
- 音频：
<audio> - 视频：
<video>
使用他们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件
视频<video>
当前video元素支持三种视频格式，但是每个浏览器厂商支持的不一样，尽量使用mp4格式
HTML5新增的input表单类型
type类型：
- email 限制用户输入必须为email类型
- url
- date
- time
- month
- week
- number
- tel
- search
- color
HTML5新增的表单属性
- required
- placeholder
- autofocus
- autocomplete
- multiple
CSS3新特性
CSS3的现状
- 新增的css3特性有兼容性问题，ie9+才支持
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
- 主要使用 新增选择器和盒子模型以及其他特性
CSS3新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
| 选择符 | 简介 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=“val”] | 选择具有attr属性，且属性值等于val的E元素 |
| E[attr^=“val”] | 选择具有attr属性，且属性值以val开头的E元素 |
| E[attr$=“val”] | 选择具有attr属性，且属性值以val结尾的E元素 |
| E[attr*=“val”] | 选择具有attr属性，且属性值中含有val的E元素 |
结构伪类选择器
结构伪类选择器只要是根据文档结构来选择元素，常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个子元素E，n，可以是数字，关键字（even,odd）和公式 |
| E:first-of-type | 指定类型E的第一个 |
| E：last-of-type | 指定类型E的最后一个 |
| E:nth-of-type | 指定类型E 的第n个 |
/*选择ul里面的第一个孩子li*/
ul li :first-child {
}
/*选择ul里面的第6个孩子li*/
ul li :nth-child(6){
}
ul li :nth-child(n)
当n是公式时，从0开始，每次加1，往后面计算，但是第0个元素或者超出了元素的个数会被忽略
这里必须的n不能是其他的字母，只写n则选择全部
如： ul li :nth-child(n)—>选择ul下面全部的li
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 … |
| n+5 | 从第五个开始到最后 5 6 7… |
E:nth-child(n)和E:nth-of-type(n)的区别
如下代码 是光头强变成红色还是熊大变成红色？
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
<style>
section div :nth-child(1){
background-color:red;
}
</style>
答案：都不会变色，选择器失效
nth-child(n) 会把所有的盒子盒子都排列序号。在执行的时候，先看序号n，再去看前面的div
上例中，他会先找第一个子元素<p>光头强</p>,然后看前面不是div 而是p，所以选择器失效然而nth-of-type(n)会把指定元素的盒子排列成序号，执行的时候，先筛选指定的元素，再看是第几个孩子
== 注意：类选择，伪类选择器，属性选择器的权重都为10==
section div :nth-of-type(1)的权重为12
section div都为1 :nth-of-type(1)为10 加起来就是12
伪元素选择器
与伪类选择器:hover 、:visited等不同
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要html标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 再元素内部的前面插入内容 |
| ::after | 再元素内部的后面插入内容 |
注意：
- before和after创建一个元素，但是属于行内元素。
- 新创建的这个元素再文档中是找不到的，所以我们称之为伪元素。
- 语法：element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
div ::before 权重为2
伪元素选择器使用场景1：伪元素字体图标
伪元素选择器使用场景2：鼠标划过遮罩层
伪元素选择器使用场景3：伪元素清除浮动
CSS3盒子模型border-box
CSS3中可以通过box-sizing来指定盒模型，有两个值：centent-box、border-box，这样我们计算盒子大小的方式就发生了改变。
- box-sizing：cintent-box 盒子大小为width+padding+border（默认）
- box-sizing：border-box 盒子大小为width。（padding和border就不会撑大盒子了 前提是padding和border不会超过width宽度）
CSS3其他特性
- 图片变模糊
- 计算盒子宽度width:calc函数
CSS3滤镜filter
filter CSS属性将属性模糊或颜色偏移等图形效果应用与元素。
filter:函数（）； 例如：filter:blur(5px); blur模糊处理 数值越大越模糊
CSS3 cals函数：
calc()此CSS函数让你在声明CSS属性值时执行一些计算
width:calc(100%-80px);
括号里可以用±*/来进行计算
CSS3过渡（transition）
过渡是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
低版本浏览器不支持（IE9以下），但是不会影响页面布局
经常和:hover一起搭配使用
trasition :要过渡的属性 花费时间 运动曲线 何时开始
使用口诀：谁做过渡给谁加
- 属性：想要变化的CSS属性 宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过度，写一个all就可以
- 花费时间： 单位是s 必须写单位
- 运动曲线：默认是ease（逐渐慢下来） 可以省略，还有匀速linear 加速ease-in 减速ease-out 先加速后减速ease-in-out
- 何时开始：单位是S 设置延迟触发时间 默认是0S（可以省略）
多个属性使用方法：
transition：width .5s , height: .5s; 属性之间用逗号隔开
CSS3 2D转换 transform
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
2D转换之位移（translate）
类似定位
语法：
transform:translate(x,y); 或者分开写
transform:translateX(n);
transform:translateY(n);
重点：
- 定义2D转换中的移动，沿着X轴和Y轴移动
- translate的最大优点：不会影响其他元素的位置
- translate的百分比单位是针对与自身元素的translate（50%，50%）
- 对行内元素没有效果
盒子垂直水平居中的方法：
- absolute定位+margin：
left:50%;
margin-left:-(元素自身大小的一半，需要自己手动计算) - absolute定位加translate位移
left：50%;
transform:translateX(-50%); 不需要自己手动计算
2D转换之旋转(rotate)
语法：
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是deg比如 rotate（45deg）
- 角度为正顺时针，角度为负 逆时针
- 默认旋转的中心点是元素的中心点
除了border之外，还可以通过旋转来画三角形
2D转换中心点: transform-origin
语法：
transform-origin:x y;(空格隔开)
重点
- 注意后面的参数 X Y用空格隔开
- x y默认转换的中心点是元素的中心点（50%，50%）
- 还可以给x y设置像素或者方位名词（top、bottom、left、right、center）
2D转换之缩放scale
语法：
transform:scale(x,y);
注意：
- x,y使用逗号隔开
- transform:scale(1,1) 宽和高都放大一倍，相当于没有变化
- transform:scale(2) 只写一个参数相当于 scale(2,2)\
- transform:scale(0.5,0.5) 缩小
- scale缩放最大的优势：可以设置中心转换点，默认是以中心点缩放的，而且不影响其他盒子
2D转换综合写法
注意：
- 同时使用多个转换，其格式为：transfor:translate() rotate() scale() 等
- 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 当同时有位移和其他属性的时候，要将位移放到最前面
CSS3 动画(animation)
动画是CSS3中具有颠覆性的特性之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相对比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
动画的基本使用
1.用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width:100px;
}
100%{
width:200px;
}
}
2.使用动画
div{
width:200px;
height:200px;
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐转换为另一种样式的效果，可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
动画常见属性
动画简写
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画其实或者结束的状态
animation :move 5s linear 2s infinite alternate
CSS3 3D转换
内容：
- 3D位移：translate3d(x,y,z)
- 3D旋转：rotate3d(x,y,z)
- 透视：perspective
- 3D呈现：transform-style
三维坐标系
- X轴：水平向右
- Y轴：垂直向下
- Z轴：垂直屏幕 往外是正值，往里是负值
3D移动
- transform:translateX()
- transform:translateY()
- transform:translateZ(100px); 注意 translateZ一般用px单位
- transform:translate3d(x,y,z); x,y,z是不能省略的 没有就写0
透视 perspective
- 网页产生3D的效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可以认为安排一直眼睛去看
- 透视也称为视距：人的眼睛到屏幕的距离
- 透视的单位是像素
透视写在被观察元素的父盒子上面：
d:就是视距（透视），视距就是一个距离人的眼睛到屏幕的距离
z:就是z轴，物体距离屏幕的距离（有正负，如上图），z轴越大（正值），看到的物体就越大
3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着X轴、Y轴、Z轴或者自定义轴进行旋转
语法：
- transform:translateX(45deg):沿着X轴正方向旋转45度
- transform:translateY(45deg):沿着Y轴正方向旋转45度
- transform:translateZ(45deg):沿着Z轴正方向旋转45度
- transform:translate3d(x,y,z,deg):沿着自定义轴旋转deg角度（了解）
如何判断旋转方向的正负---->左手准则？
- 左手的拇指指向X轴的正方向
- 其余手指的弯曲方向就是该元素沿着X轴旋转的的正方向
3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style：flat子元素不开启3d立体空间 默认
- transform-style：preserve-3d；子元素开启立体空间
- 代码写给父级，但影响的是子盒子（不能写在body身上 必须是直接父级 perspective可以写在body身上）
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加。
- -moz- :代表Firefox浏览器私有属性
- -ms-：代表ie浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
扫一扫
3684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
