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:

  • letconst命令(不存在变量提升,不允许重复声明,)

  • 变量的解构赋值
    解构赋值语法:

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

你可能感兴趣的:(前端,前端,HTML5,CSS3,ES6,h5)