拓展一(H5、C3、es6、es7的新特性)

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"]

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容