HTML5、CSS3、ES6
HTML5:
- 新特性:
① 拖拽释放(Drag and drop)API
②语义化更好的内容标签(header,nav,footer,aside)
③音频,视频API(audio,video)
④画布(Canvas)API
⑤地理(Geolocation)API
⑥本地离线储存 localStorage长期储存数据,浏览器关闭后不丢失
⑦sessionStorage的数据在浏览器关闭后自动删除
⑧表单控件:calendar,date,time,email,url,search
CSS3:
-
颜色:新增rgba,hsla模式
-
文字阴影(text-shadow)
-
边框:圆角(border-radius)边框阴影:box-shadow
-
盒子模型:box-sizing:
①border-box(从边框开始,怪异模式)
②content-box(margin+border+padding+content标准模式)
③inherit: 规定从父元素继承box-sizing的值 -
背景:
①background-size 设置背景图片的尺寸
②background-origin设置背景图片原点
③background-clip 设置背景图片的裁切区域,以 , 分隔可以设置多背景,用于自适应布局 -
渐变:linear-gradient(线性渐变),radial-gradient(圆形渐变)
-
过渡:transition,可实现动画
-
自定义动画
-
在css3中唯一引入的伪元素是::selection
-
媒体查询,多栏布局
-
border-image
-
2d转换:transform:
translate位移(x,y) rotate旋转(x,y)skew倾斜(x,y)scale缩放(x,y -
3d转换: (x,y,z)
新增伪类: :frist(首个),:last(最后一个),:only(唯一),:nth-child(2)
:enabled(选择所有启用的表单元素),:disabled(所有禁用的表单控件)
:checked,单选框或复选框被选中
(属性选择器,伪类选择器,伪元素选择器)
Es6: -
let和const命令(不存在变量提升,不允许重复声明,)
-
变量的解构赋值
解构赋值语法:
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20
// Stage 3 proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); //{c: 30, d: 40}
- 字符串的扩展:
①includes()是否找到了参数字符串
②startsWith()是否以参数开头
③endsWith()是否以参数结尾 ( 都是返回布尔值) - 数值扩展:
①Number.isNaN()用来检测一个值是不是NaN
②Number.isInteger()用来判断是否为整数 - 函数的扩展:箭头函数(表达更简洁,简化回调函数)
- 数组的扩展
含义:扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。扩展运算符内部调用的是数据结构的 Iterator 接口
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
①该运算符主要用于函数调用
function push(arr, ...items) {
arr.push(...items);
}
上面代码中,arr.push(…items)是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。
②扩展运算符与正常的函数参数可以结合使用
function add(x, y) {
return x + y;
}
const num = [4, 38];
add(...num) // 42
③扩展运算符后面还可以放置表达式
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
//如果扩展运算符后面是一个空数组,则不产生任何效果。
[...[], 1]
// [1]
- 对象的扩展
简写
// 属性简写
var a = "one";
var b = {a};
console.log(b)
// {a:"one"}
//方法简写
var obj = {
method (){
retrun "hello world";
}
}
//等同
var obj = {
method: function (){
retrun "hello world";
}
}
- 对象新增的方法
Promise对象 是异步编程的一种解决方案,比传统解决方案‘回调函数和事件’更合理更强大。简单的说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,promise是一个对象,从他可以获取异步操作的消息。提供统一的API各种异步操作都可以用同样的方法进行处理。
两个特点:对象状态不受外界影响;一旦状态改变,就不会在变,任何时候都会得到这个结果。