H5的新特性
1.语义化标签
有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
方便其他设备的解析
便于团队开发和维护
2.表单新特性
3.多媒体视频(video)和音频(audio)
4.web存储
sessionstorage:关闭浏览器清空数据，储存大小约5M。
localstorage：永久生效，存储大小20M，多窗口下都可以使用
都只能储存字符串
5.web worker★★★★★★★
给Javascript模拟多线程环境的一个新特性~
C3的新特性
1.选择器：属性选择器E[attr]，伪类选择器E:nth-child(n)，空伪类E:empty ，排除伪类E:not(selector)
2.颜色：新增了RGBA、HSLA模式
3.文本：为文本设置阴影增强文本的表现能力，通过 text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。
4.盒模型：box-sizing: border-box;
5.边框：圆角border-radius，阴影box-shadow
6.背景：
通过 background-size 设置背景图片的尺寸。
通过 background-origin 可以设置背景图片定位(background-position)的参照原点。
通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。
7.渐变：线性渐变 linear-gradient，径向渐变radial-gradient
8.字体图标
9.伸缩盒子：调整主轴对齐justify-content，调整侧轴对齐align-items，伸缩分配flex，正序方式排序order
10.2D转换：
translate 设置元素的位置（x/y坐标）
scale 设置元素的缩放比例（x/y两个方向）
rotate 设置元素旋转（正值为顺时针，负值为逆时针）
transform-origin 设置转换元素的原点
11.3D转换：
透视（perspective）值为1000px~1200px
将2D元素转换为3D立体（给父元素设置）transform-style: perserve-3d;
设置元素背面是否可见 backface-visibility: hidden;
12.动画：
定义关键帧 @keyframes
通过百分编写帧
在各帧中分别定义各属性
通过animation将动画应用于相应元素
ES6新特性
1.变量声明const和let
let 和const都是块级作用域(var没有会计作用域)，并且都不会有变量提升(var有变量提升)
const声明的变量都会被认为是常量，不能被修改，但如果被const修饰的是对象，对象中的属性值可以被修改
let在同一个块中不能定义两个相同名称的变量(var可以定义多个)
2.解构赋值
//对象
var people = { name: 'lux', age: 20}
const {name, age} = people
//数组
var arr = [1,2,3];const {one, , three} = arr;
3.模板字符串，支持换行
用途：基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定
const name = 'lili'console.log(`hello ${name}`) //hello lili
4.函数
函数扩展，箭头函数：
[1,2,3].map(x => x + 1)
箭头函数中的this ：
functionfn(){
console.log(this); //{a:'123'} var arr = [1, 2, 3];
//es5 arr.map(function(num){
console.log(this) //window return num + 1;
})
//es6 箭头函数 arr.map(num=> {
console.log(this) //{a:'123'} return num + 1;
})
}
fn.call({a:'123'})
函数默认参数：
//es5functionaction(num){
num = num || 200 return num
}//es6functionaction(num =200){
console.log(num)
}
5.拓展的对象功能
键值对简写：
//es5functionpeople(name, age){
return {
name: name,
age: age
};
}//es6functionpeople(name, age){
return {
name,
age
};
}//方法同样适用//es5const people = {
name: 'lux',
getName: function(){
console.log(this.name)
}
}//es6const people = {
name: 'lux',
getName () {
console.log(this.name)
}
}
6.浅拷贝Object.assign()
7.Spread Operator 展开运算符
8.Object.keys()方法
9.import 和 export用于js代码的模块化
10.Promise（异步）
11.Generators
ES7
1.数组的includes方法
['a','b'].inclueds('a')//true
2.求幂运算符
3**2//9 3的2次方
3.Object.entries()
Object.entries({one:1,two:2})//[['one',1],['two',2]]
4.Object.values()
Object.values({a:'a1',b:'b1'}) //["a1","b1"]
网友评论