HTML5、CSS3、ES6

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')]
// [
, 
, 
]

①该运算符主要用于函数调用

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各种异步操作都可以用同样的方法进行处理。
  两个特点：对象状态不受外界影响；一旦状态改变，就不会在变，任何时候都会得到这个结果。