前端 语言

前端语言

名称	简介	用法	网址
CSS	CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素		https://www.w3school.com.cn/css/index.asp
CSS3	CSS3 是最新的 CSS 标准。	操作	https://www.runoob.com/css3/css3-tutorial.html
Scss/Sass	Scss是CSS的预处理器，一门专门的css编程语言，是Sass的升级版。增加了变量、函数、计算、嵌套关系等用法。	操作	https://www.sass.hk/
HTML	HTML 指的是超文本标记语言		https://www.w3school.com.cn/html/index.asp
HTML5	HTML5 是最新的 HTML 标准。	操作	https://www.w3school.com.cn/html/html5_intro.asp
XML	可扩展标记语言（可扩展：标签都是自定义的）。被设计用来传输和存储数据	操作	https://www.runoob.com/xml/xml-intro.html
JavaScript	JavaScript是一种运行于JavaScript解释器/引擎中的解释型脚本语言		https://www.w3school.com.cn/js/index.asp
ES5	ECMAScript 5 也称为 ES5 和 ECMAScript 2009	操作	https://www.w3school.com.cn/js/js_es5.asp
ES6	ECMAScript 6 也称为 ES6 和 ECMAScript 2015。	操作	https://www.w3school.com.cn/js/js_es6.asp

CSS3

1.CSS3选择器

2.CSS3边框与圆角

3.CSS3背景渐变

4.CSS3过渡

5.CSS3变换

6.CSS3动画

7.绘制特殊图形

CSS3选择器

1.基本选择器

基本选择器又分为

• 子选择器
• 相邻兄弟选择器
• 通用兄弟选择器
• 群组选择器

2.属性选择器

1.element[attribute]

为带有attribute属性的元素设置样式

2.element[attribute=‘value’]

为attribute='value’属性的元素设置样式

3.element[attribute~=‘value’]

选择attribute属性值包含 单词value的元素 并设置样式

4.element[attribute*=‘value’]

选择attribute属性值包含value的元素设置样式

5.element[attribute^=‘value’]

选择attribute属性值是以value开头的元素

6.element[attribute$=‘value’]

选择attribute属性值是以value结尾的元素

PS：注意比较3和4的区别

3.伪类选择器

• 动态伪类

定义：这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。

1.锚点伪类

:link   
:visited

2.用户行为伪类

:hover
:active
:focus

3.目标伪类

:target
当我们点击锚点链接时，对应id的元素会显示在视口

4.checked状态伪类

这里我们需要知道checkbox只能设置宽高，不能设置背景和边框，如果想要设置那么我们需要用appearance:none;来清除input的默认样式

CSS3结构类：nth选择器

：first-child/last-child

语法 element:first-child

选择属于父元素的首个/最后一个子元素的每个element元素，注意element为子元素。

：nth-child(n)

选择某元素下的第n个element元素（n是一个简单的表达式，不能用其他的字母代替），括号里还可以传odd和even两个关键字

：nth-last-child(n)

匹配属于某元素下的第n个element子元素，从最后一个子元素开始计数

：nth-of-type(n)

语法 element:nth-of-type(n)

匹配属于父元素的特定类型的第n个子元素,element为指定类型的子元素

:nth-last-of-type

匹配属于父元素的特定类型的第n个子元素，从最后一个计数

:first-of-type/:last-of-type

匹配属于其父元素的特定类型的首个/最后一个子元素的每个元素

：only-child

匹配属于父元素的唯一子元素的每个元素

：only-of-type

匹配属于其父元素特定类型的唯一子元素的每个元素

：empty

匹配没有子元素（包括文本节点）的每个元素

否定选择器：not

定义：匹配非 元素或者选择器 的每个元素

语法：父元素：not(子元素或者选择器)

例：ul:not(span){}

伪元素(也可以使用：)

element::first-line

定义：对元素的第一行文本进行设置，只能用于块级元素

element::first-letter

定义：用于向文本的首字母设置特殊样式，只能用于块级元素

element::before

定义：在元素的内容前面插入新内容，常与content配合使用

element::after

定义：在元素的内容后面插入新内容，常与content配合使用

element::selection

定义：用于设置浏览器中选中文本后的背景色与前景色

伪元素与元素的区别:

无法通过JS获取其DOM

无法通过浏览器开发者工具直接查看

伪元素默认是 inline

使用伪元素注意事项：

1.使用伪元素before,after必须设置content

2.使用伪元素before,after显示背景图，一定要使用display设置为块元素

3.使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle

CSS3边框与圆角

1.CSS3圆角border-radius

定义：可以为元素添加圆角边框（块元素，行内块元素，行内元素）

属性：

border-top-left-radius 左上角

border-top-right-radius 右上角

border-bottom-right-radius 右下角

border-bottom-left-radius 左下角

复合属性：border-radius：

属性值

四个值：左上角 右上角 右下角 左下角

三个值：左上角 右上角和左下角 右下角

两个值：左上角和右下角 右上角和左下角

一个值：4个角都生效

border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。

圆形与椭圆：

一旦使用百分比，参照的是元素本身的高度与宽度

当拿50%时，宽等于高为圆形 宽不等于高为椭圆形

2.盒阴影box-shadow

定义：可以控制一个或多个下拉阴影的框

语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

属性值的介绍：

偏移量：

把元素左上角（0，0）作为基准点，找水

平方向和垂直方向的偏移量

水平： 正值 --- 右 ，负值 --- 左

垂直： 正值 --- 下 ，负值 --- 上

模糊程度：

边界模糊，但是边界线未动
由边界线向外模糊多少像素

扩展程度：

盒子阴影，上下左右都向外扩展多少像素

是否具有内阴影：

inset(默认没有，也就是默认是外阴影)
加上inset,盒子的阴影为内阴影
扩展程度可为负值，但是模糊程度不可以  

CSS3背景与渐变

1.CSS3背景

background-image

语法：

backgroundimage:url('1.jpg),url('2.jpg')

使用逗号把图片分开

注意：元素引入多个背景图片，前面图片会覆盖后面的图片

background-cilp

定义：指定背景的绘制区域（裁剪）

语法：

background-cilp：border-box / padding-box / content-box

属性介绍：

border-box：背景被裁剪到边框盒（从边框开始绘制背景图片）---默认
padding-box：背景被裁剪到内边距框（从内边距开始绘制背景图片）
content-box：背景被裁剪到内容框

background-origin

定义：设置背景图像的原始起始位置

语法：

background-origin：border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)

属性的介绍：

border-box：相对于边框来定位
padding-box：相对于内边距来定位
content-box：相对于内容框来定位

另外有一个需要了解

background-position:定义背景图片的位置，水平与垂直方向上面的偏移量(参考点)

background-repeat

定义：设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复。

属性值：

repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置

background-size

定义：指定背景图像的大小

语法：

background-size：number / % / cover / contain

属性介绍：

number: 宽度 高度（如果只写一个数值，第二个数值默认auto）
百分比： 0% - 100% 之间的任何值，此时的百分比参照于元素div的大小
cover：将背景图片等比缩放以填满整个容器（最远边），如果高度达到一定比例100%，宽度多出的会溢出，但是，具体那部分溢出取决于定位
contain：将背景图片等比缩放至某一边紧贴容器边缘为止（最近边），如果图片高度比较小，高度就会有空白区域出现

复合属性background

定义：可以在一个声明中设置所有的背景属性

语法：

background：color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...

2.CSS3渐变

定义：可以在两个或者多个指定颜色之间显示平移的过渡

线性渐变

定义：是沿着一根轴线改变颜色，从起点到终点进行顺序渐变（从一边拉向另一边）

语法：background:linear-gradient(方向，开始颜色，结束颜色)

• 方向介绍：

1.方向从上到下（默认）

background: linear-gradient(red,blue);

2.方向从左到右

background: linear-gradient(to right,red,blue);

3.对角

background: linear-gradient(to right bottom,red,blue);

4.角度(单位deg)

background: linear-gradient(角度,red,blue);

角度说明：0deg 将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变

• 颜色结点：默认每个颜色均匀分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);

从0%到10%，为红色，从10%到20%为红色到蓝色的渐变，从20%到30%为蓝色到绿色的渐变，从30%到40%，为绿色到黄色的渐变,从40%到100%为黄色

background: linear-gradient(red 10%,blue);

从0%到10%，为红色，从10%到100%为红色到蓝色的渐变

最后如果不写具体数值，默认到100%

background: linear-gradient(red,blue 30%);

从0%到30%，为红色到蓝色的渐变

如果第一个不写，默认数值是 0%

background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));

由透明色变为不透明色

• 重复渐变

示例：background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);

注意：把元素的整体宽度看成100%

径向渐变

定义：从起点到终点，颜色从内向外进行圆形渐变

语法：background:radial-gradient(形状尺寸，开始颜色，结束颜色)

• 形状分类：

circle — 圆形

ellipse — 椭圆形

注意：当元素的高和宽一样时，参数无论设置哪个，都是圆形

• 尺寸大小：

closest-side最近边

background: radial-gradient(closest-side circle,red , blue);

farthest-side 最远边

background: radial-gradient(farthest-side circle,red , blue);

closest-corner最近角

background: radial-gradient(closest-corner circle,red , blue);

farthest-corner最远角

background: radial-gradient(farthest-corner circle,red , blue);

• 颜色结点：

例：

background:radial-gradient(circle,red 50% ,blue 70%);

注意：此时的百分比,指的是圆心到元素最远端的距离（角度）

• 重复渐变 ：

示例： background: repeating-radial-gradient(red 0%,blue 20%);

background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3过渡

定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。

属性：

1.transition-property属性

定义：设置对象中的参与过渡的属性

语法：transition-property：none | all | property

参数说明：

none： 没有属性改变

all : 默认值，所有属性都改变

property： 元素的属性名 width,color等

2.transition-duration属性

定义: 设置对象过渡的持续时间

语法：transition-duration：time

参数说明：

规定完成过渡效果需要花费的时间，以秒或者毫秒计，默认值0

3.transition-timing-function属性

定义：设置对象中过渡的动画类型，即规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法：只能使用一个属性值

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

参数说明：

ease:平滑过渡（0–慢–快–慢），默认值

cubic-bezier(0.25,0.1,0.25,1)

linear:线性过渡（匀速） cubic-bezier(0,0,1,1)

ease-in:慢–快 cubic-bezier(0.42,0,1,1)

ease-out:快–慢 cubic-bezier(0,0,0.58,1)

ease-in-out:慢–快–慢

cubic-bezier(0.42,0,0.58,1)

贝塞尔曲线 :https://cubic-bezier.com/#.17,.67,.83,.67

值
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

**亲自试一试 - 实例

实例 1**

为了更好地理解不同的函数值，请看下面带有五个不同值的五个不同的 div 元素：

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

**实例 2

**与上例相同，但通过 cubic-bezier 来规定速度曲线：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

4.transition-delay属性

定义：设置对象延迟的过渡时间

语法：transition-delay：time

参数说明：

指定秒或者毫秒数来延迟动画效果的开始，默认是0

5.transition复合属性

语法：

transition ： property duration timing-function delay；

参数说明：过渡时间和延迟时间的顺序不能乱

CSS3变换

定义：让一个元素在一个坐标系统中变形，这个属性包含一系列的变形函数，可以移动，旋转，缩放元素。

语法：transform：none | 默认值是none

2d变换

1.rotate()旋转

定义：通过指定一个角度参数，对元素指定一个2D的旋转

语法：transform：rotate(angle) 单位deg

参数说明：angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转

2.translate()平移

定义：根据X轴和Y轴的位置给定参数，使当前元素位置移动

分类：

translateX() 仅水平方向移动

语法：transform：translateX() 单位px

translateY() 仅垂直方向移动

语法：transform：translateY() 单位px

translate(x,y) 水平方向和垂直方向同时移动

语法：transform：translate( X, Y) 单位px

注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移

3.scale( )缩放

定义：设置元素的缩放程度

分类：

scaleX( ) 仅水平方向缩放

语法：transform：scaleX() 没有单位

scaleY( ) 仅垂直方向缩放

子主题 语法：transform：scaleY() 没有单位

scale(x,y) 使元素水平和垂直方向同时缩放

语法：transform：scale(x,y) 没有单位

4.skew()扭曲/倾斜

定义：设置元素的倾斜状态

分类：

skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针

skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针

skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg

注意：0deg与180deg 效果一样

5.变换基点

定义：元素变换的基准点

语法： transform-origin：水平方向 垂直方向

参数说明：

left top 左上角 ----四个角均可以

25% top

50px 50px

默认值：

rotate 几何中心点

skew 几何中心点

scale 几何中心点

translate 本身位置

3d变换

1.开启3d空间transform-style: preserve-3d; 一般给父元素开启

2.子元素设置3d变换效果

rotate

rotateX()

定义：指对象在X轴上的旋转角度（变换基点： 50% 50% 0）

rotateY()

定义：指对象在Y轴上的旋转角度（变换基点： 50% 50% 0）

rotateZ()

定义：指对象在Z轴上的旋转角度（变换基点： 50% 50% 0）

translate

translateZ()

定义：指对象在Z轴上面的平移（变换基点： 50% 50% 0）

scale

scaleZ()

定义：指定对象的Z轴缩放（变换基点： 50% 50% 0）(无太大意义，开启3d空间)

3.设置景深：实现近大远小

父元素子元素都可以设置

父元素：perspective: 300px;

子元素:

transform:perspective(300px) translateZ(-200px);

注意：景深：可选值：大于或等于0,景深值越大，元素看起来越大

默认值: 0 – 没有景深 （不能为负值）

4.变换基点

默认值： 50% 50% 0

transform-origin: top; 关键字表示 ( 50% 0 0 )

注意：立体3d盒子 Z：只能使用具体的长度，不能使用百分比和关键字

5.景深中心点：改变观察者视角

perspective-origin: top;

perspective-origin: top right;

6.元素背面可见还是不可见

backface-visibility:visible ;（默认值：可见）

backface-visibility: hidden; 不可见

CSS3动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果

@keyframes

定义：keyframes关键帧，用来决定动画变化的关键位置

注意：keyframes 控制关键位置，并不是所有的位置

语法：@keyframes animationname{

keyframes-selector{

cssStyles;

}

}

animationname：必写项，定义动画的名称

keyframes-selector：必写项，动画持续时间的百分比 0% - 100%之间， 或者使用form和to关键字也可以设置，form代表0%，to代表100%

示例：

@keyframes abc {

from{transform: rotate(0)}

50%{transform:rotate(90deg)}

to{transform: rotate(360deg)}

}

animation属性

1.animation-name属性

设置对象所应用的动画名称

语法：

animation-name：keyframename | none

参数说明：

keyframename：指定要绑定到选择器的关键帧的动画名称

2.animation-duration属性

定义：设置对象动画的持续时间

语法：

animation-duration：time

参数说明：指定对象播放完成需要花费的时间，默认值是0

3.animation-timing-function属性

定义：设置对象动画的过渡类型，即规定动画的速度曲线

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

语法：animation-timing-function: value;

参数说明：与transition-timing-function属性的参数一样

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

**亲自试一试 - 实例

实例 1

**为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：

/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

**实例 2

**与上例相同，但是通过 cubic-bezier 函数来定义速度曲线：

/* W3C 和 Opera: */
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

4.animation-delay属性

定义：设置动画的延迟时间

语法：animation-delay：time

参数说明：可选值，定义动画开始前等待的时间，以秒或者毫秒数计数，默认值是0

5.animation-iteration-count属性

定义：设置对象动画的循环次数

语法：

animation-iteration-count ： infinite | number

参数说明：

number为数字，其默认值是1

infinite：无限循环次数

6.animation-direction属性

定义：设置对象动画是否反向运动

语法：

animation-direction：normal , reverse , alternate , alternate-reverse

参数说明：

normal : 正常方向

reverse :反向运动

alternate ： 先正常运动在反向运动，并持续交替运行， 需要配合循环属性使用

alternate-reverse ： 先反向运动在正常运动，并持续交替运行， 需要配合循环属性使用

7.animation-play-state属性

定义：指定对象是否正在运行或已暂停

语法：

animation-play-state：paused | running

参数说明：

paused ： 指定暂停动画

running : 默认值，制定正在运行的动画

**示例：**鼠标移动到box上暂停动画

#box:hover{

animation-play-state: paused;

}

8.animation-fill-mode

设置动画结束后的状态

none：默认值。不设置对象动画之外的状态，DOM未进行动画前状态

forwards：设置对象状态为动画结束时的状态，100%或to时，当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧

backwards：设置对象状态为动画开始时的状态,（测试显示DOM未进行动画前状态）

both：设置对象状态为动画结束或开始的状态，结束时状态优先

9.animation复合属性（不推荐使用 ）

语法：

animation ： name duration timing-function delay interation-count direction play-state

注意：在css3里面，给元素设置圆角、阴影、变换等属性时，尽管外形位置发生改变，但是元素本身大小和位置不变

绘制特殊图形

将元素的width和height设置为0，利用border属性和transparent属性值进行绘制。

.box{
width: 0;height: 0;
border-top: 100px solid transparent;
border-right: 100px solid rosybrown;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
}

上面的代码可以绘制三角形

SCSS

scss是什么？

scss语法，非常像js和css结合体，我们学习起来很轻松

boot阶段，重点只有3个，手写媒体查询+栅格布局+scss

scss在css的基础上，增加变量，嵌套，混合器，函数，指令等等新的特性，让CSS更强大与优雅。

后缀.scss

scss运行在后台，在后台把.scss文件转换成.css文件

scss的安装(在项目目录下安装)

1.在线安装（访问的国外网站）

npm install -g sass

如果网速不好，下载过程会丢包，丢包就报错

2.检查是否安装成功：sass -v 或者 sass --version

3.scss文件转换成css文件

① 单文件转换

sass 文件名.scss 文件名.css

eg: sass input.scss output.css

把文件 input.scss文件编译输出为 output.css 文件

②多文件转换

sass scss文件夹 -o css文件夹

4、文件监听

① 单文件监听

sass -w 文件名.scss 文件夹.css 监听源文件的变化，并在保存sass文件时编译为css文件

② 多文件监听

sass -w scss文件夹:输出路径 使用文件夹路径作为输入和输出，并用冒号隔开

eg：sass -w app/sass:public/stylesheets

sass将会监听app/sass目录下所有文件的变动，并编译css到public/stylesheets目录下

5、导入

① 局部scss文件

文件名称以_开头，就是局部scss文件

局部scss文件不会被转换成css文件

可以在一个全局scss文件中，导入多个局部scss文件，最后生一个css文件

② 全局scss文件

不以_开头的scss文件，可以导入其他全局文件和局部文件

导入的语法

_aaa.scss,如果导入局部scss，掐头去尾

@import “aaa”;

bbb.scss如果导入全局，可以@import “bbb” 也可以 @import “bbb.scss”

除了整合的时候很方便，被导入文件中的变量，可以在导入文件中使用

6、变量

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问

$变量名：值；

使用$声明变量，使用：赋值。变量的值可以被其他变量引用

变量的命名规则基本同选择器命名规则

1. 作用域的问题，同js，只在最近的大括号中有效

2. 尽量见名知意，变量可以保存什么数据？

颜色值，数字，属性，字符串，变量中可以放其他变量

3.变量名重复 默认情况下，后写的覆盖先写的。但是可以通过在结尾处添加!default，让之前的变量值有效

!default规则，如果之前定义一样的变量名，使用之前的变量值

​ 如果之前没定义一样的变量名，使用现在值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUCzwHKr-1670403665455)(C:\Users\xing\AppData\Roaming\Typora\typora-user-images\image-20221202202552117.png)]

7、嵌套

导航栏嵌套：

scss：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T0UbwHwF-1670403665456)(C:\Users\xing\AppData\Roaming\Typora\typora-user-images\image-20221202203544156.png)]

群组嵌套：

#content,div,.top,.bottom{

	a{color:red;

		&:hover{color:blue;}

	}

}

8、混合器

把一段样式进行封装，需要使用的地方直接调用混合器名称

① 定义混合器

​ @mixin 混合器名称{

​ 样式申明

​ }

​ 调用混合器： @include 混合器名称

② 带参数的混合器

​ @mixin 混合器名称($形参,$形参…){}

​ 调用混合器： @include混合器名称(实参,实参…){}

eg：混合器使用最多的场景 是css hack

@mixin my_bg1($direction,$color1,$color2){

​ background: -webkit-linear-gradient($direction,$color1,$color2);

​ background: -o-linear-gradient($direction,$color1,$color2);

​ background: -ms-linear-gradient($direction,$color1,$color2);

​ background: -moz-linear-gradient($direction,$color1,$color2);

}

9、继承

@extend 其他选择器;

在样式中使用@extend 可以让当前选择器，继承另一个选择器的所有样式（一个元素使用另一个元素的全部样式,注意! 是全部样式, 继承不可以选择部分样式）转换效果，是变成群组

10、计算功能
一般不推荐用sass计算, 推荐用js计算
因为使用sass计算的过程中,有的电脑可以计算并编译,有的会报错或者直接不编译
原因是系统I/O 读写 调用顺序导致的

插值运算

content: "liangliang ate #{50+30} baozi";

\#{}做插值

11、函数

@function add($a,$b){

​ @return $a+$b;

}

#d1{

​ width:add(2.5,4);

}

关键字添加@，参数添加$

注意，返回值需要自己添加单位

//练习：定义一个带参函数get-mywidth($n) ，函数体内定义两个变量分别为60px和10px,函数最终返回$n乘以最大宽度加上$n-1 乘以最小宽度的结果，并将结果赋值给div的类选择器mystyle的width属性。
@function get-mywidth($n){
    $num1:60px;
    $num2:10px;
    @return $n*$num1+($n - 1)*$num2;
}
div.mystyle{
    width:get-mywidth(5);
}

12、指令（if-else for）

@if(条件){

}@else if(条件){

}@else{

}

细节注意:scss中的条件，可以不带小括号，但是要有空格与关键字分离

/*
练习：
创建一个函数，给p:after的content添加内容
方法参数为考试分数
1.如果100分，content中字符串为，带你吃顶级战斧牛排
2.如果90分以上，带你吃蟹黄面
3.如果80分以上，带你吃麻辣小龙虾
4.如果70分以上，吃炒菜
5.60分以上，吃方便面
6.不及格，竹笋炒肉片！
*/
@function getResult($s){
    @if $s==100{
        @return "带你吃顶级战斧牛排";
    }@else if $s>90{
        @return "带你吃蟹黄面";
    }@else if $s>80{
        @return "带你吃麻辣小龙虾";
    }@else if $s>70{
        @return "吃炒菜";   
    }@else if $s>=60{
        @return "吃方便面";
    }@else{
        @return "不及格，竹笋炒肉片";
    }
}
p::after{
    content:getResult(30) ;
}

HTML5

为 HTML5 建立的一些规则：

a.新特性应该基于 HTML、CSS、DOM 以及 JavaScript

b.减少对外部插件的需求（比如 Flash）

c.更优秀的错误处理

d.更多取代脚本的标记

e.HTML5 应该独立于设备

f.开发进程应对公众透明

新特性：

canvas元素

video元素

audio元素

H5拖放

地理定位

数据存储

应用程序缓存

H5  web  workers

H5 服务器发送事件

表单元素

canvas元素

1.什么是Canvas：

（1）HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像

（2）画布是一个矩形区域，您可以控制其每一像素

（3）canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

2.创建canvas元素：

<canvas id="myCanvas" width="200" height="100"></canvas>

3. 通过 JavaScript 来绘制：

（1）canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

 

//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

（2）使用 id 来寻找 canvas 元素，然后，创建 context 对象，然后进行绘制

（3）fillRect 方法拥有参数 (0,0,150,75)：

在画布上绘制 150x75 的矩形，从左上角开始 (0,0)

（4）可以通过canvas绘制出点、线条、圆、渐变背景、图像

内联SVG

1.什么是SVG:

（1）SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

（2）SVG 用于定义用于网络的基于矢量的图形

（3）SVG 使用 XML 格式定义图形

（4）SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

（5）SVG 是万维网联盟的标准

2.SVG 的优势：

（1）SVG 图像可通过文本编辑器来创建和修改

（2）SVG 图像可被搜索、索引、脚本化或压缩

（3）SVG 是可伸缩的

（4）SVG 图像可在任何的分辨率下被高质量地打印

（5）SVG 可在图像质量不下降的情况下被放大

3.把 SVG 直接嵌入 HTML 页面：

<!DOCTYPE html>

<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

      <polygon points="100,10 40,180 190,60 10,60 160,180"

      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

</body>

</html>

Canvas vs SVG：

1.SVG：

（1）SVG 是一种使用 XML 描述 2D 图形的语言

（2）SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器

（3）在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

2.Canvas：

（1）Canvas 通过 JavaScript 来绘制 2D 图形

（2）Canvas 是逐像素进行渲染的。

（3）在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

3.Canvas 与 SVG 的比较：

（1）Canvas：

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

（2）SVG：

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

video元素

一、Web 上的视频：

（1）大多数视频是通过插件（比如 Flash）来显示的，然而，并非所有浏览器都拥有同样的插件

（2）HTML5 规定了一种通过 video 元素来包含视频的标准方法

二、视频格式：

（1）Ogg格式：

带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

（2）MPEG4格式：

带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

（3）WebM格式：

带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

三.如何工作：

（1）示例代码：

<video src="movie.ogg" controls="controls">...</video>

（2）controls 属性供添加播放、暂停和音量控件，可加入宽度和高度， 与 之间插入的内容是供不支持 video 元素的浏览器显示的

（3）video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls="controls">

    <source src="movie.ogg" type="video/ogg">

     <source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

（4）标签的属性：

属性 值 描述

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮

height pixels 设置视频播放器的高度

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性

src url 要播放的视频的 URL

width pixels 设置视频播放器的宽度

四、HTML 5 Video + DOM

1、使用 DOM 进行控制：

（1）HTML5 元素同样拥有方法、属性和事件；

（2）方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说， 元素开始播放、已暂停，已停止，等等

2.方法、属性以及事件：

方法 属性 事件

play() currentSrc play

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight error

duration timeupdate

ended ended

error abort

paused empty

muted emptied

seeking waiting

volume loadedmetadata

height

width

在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用

audio元素

1、Web 上的音频:

（1）大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件

（2）HTML5 规定了一种通过 audio 元素来包含音频的标准方法

（3）audio 元素能够播放声音文件或者音频流

2.audio 元素支持的三种音频格式：

IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0

Ogg Vorbis √ √ √

MP3 √ √ √

Wav √ √ √

3.如何工作：

（1）示例代码：

<audio src="song.ogg" controls="controls"></audio>

（2）control 属性供添加播放、暂停和音量控件， 与 之间插入的内容是供不支持 audio 元素的浏览器显示的

（3）audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

<audio controls="controls">

     <source src="song.ogg" type="audio/ogg">

    <source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

（4） 标签的属性：

属性 值 描述

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮

loop loop 如果出现该属性，则每当音频结束时重新开始播放

preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性

src url 要播放的音频的 URL

H5拖放

1.拖放（Drag 和 drop）是 HTML5 标准的组成部分：

（1）拖放是一种常见的特性，即抓取对象以后拖到另一个位置

（2）在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

2.拖动相关设置：

（1）设置元素为可拖放：

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

（2）规定拖动元素：

ondragstart 和 setData()

ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev){

    ev.dataTransfer.setData("Text",ev.target.id);

}

数据类型是 “Text”，值是可拖动元素的 id (“drag1”)

（3）放到何处 - ondragover：

ondragover 事件规定在何处放置被拖动的数据；

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

（4）进行放置 - ondrop：

当放置被拖数据时，会发生 drop 事件；

ondrop 属性调用了一个函数，drop(event)：

function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

（5）注意点：

a.调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

b.通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

c.被拖数据是被拖元素的 id (“drag1”)

d.把被拖元素追加到放置元素（目标元素）中

3.拖动示例代码：

<!DOCTYPE HTML>

<html>

<head>

<script type="text/javascript">

function allowDrop(ev)

{

    ev.preventDefault();

}

 

function drag(ev)

{

    ev.dataTransfer.setData("Text",ev.target.id);

}

 

function drop(ev)

{

    ev.preventDefault();

    var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69" />

 

</body>

</html>

地理定位

1.定位用户的位置：

（1）HTML5 Geolocation API 用于获得用户的地理位置

（2）鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

2.使用地理定位：

（1）使用 getCurrentPosition() 方法来获得用户的位置

（2）返回用户位置的经度和纬度的代码示例：

<script>

    var x=document.getElementById("demo");

    function getLocation()

    {

     if (navigator.geolocation)

      {

            navigator.geolocation.getCurrentPosition(showPosition);

      }

    else{x.innerHTML="Geolocation is not supported by this browser.";}

     }

    function showPosition(position)

    {

    x.innerHTML="Latitude: " + position.coords.latitude +

    "<br />Longitude: " + position.coords.longitude;

    }

</script>

（3）示例代码解释：

检测是否支持地理定位

如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息

如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象

showPosition() 函数获得并显示经度和纬度

3.处理错误和拒绝：

（1）getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

（2）示例代码：

function showError(error)

  {

    switch(error.code)

          {

            case error.PERMISSION_DENIED:

             x.innerHTML="User denied the request for Geolocation."

             break;

            case error.POSITION_UNAVAILABLE:

             x.innerHTML="Location information is unavailable."

             break;

         case error.TIMEOUT:

              x.innerHTML="The request to get user location timed out."

              break;

            case error.UNKNOWN_ERROR:

              x.innerHTML="An unknown error occurred."

              break;

     }

}

（3）错误代码：

Permission denied - 用户不允许地理定位

Position unavailable - 无法获取当前位置

Timeout - 操作超时

4.在地图中显示结果：

（1）如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图

（2）示例代码：

function showPosition(position)

{

    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";

5.getCurrentPosition() 方法 - 返回数据：

（1）若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性

（2）属性：

属性                          描述

 

coords.latitude             十进制数的纬度

 

coords.longitude                十进制数的经度

 

coords.accuracy             位置精度

 

coords.altitude             海拔，海平面以上以米计

 

coords.altitudeAccuracy     位置的海拔精度

 

coords.heading              方向，从正北开始以度计

 

coords.speed                速度，以米/每秒计

 

timestamp                   响应的日期/时间

6.Geolocation 对象 - 其他有趣的方法：

（1）watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）

（2）clearWatch() - 停止 watchPosition() 方法

数据存储

1.在客户端存储数据：

（1）HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

（2）之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高

（3）在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能

（4）对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据

（5）HTML5 使用 JavaScript 来存储和访问数据

2.localStorage 方法：

（1）localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用

（2）如何创建和访问 localStorage：

<script type="text/javascript">

    localStorage.lastname="Smith";

    document.write(localStorage.lastname);

</script>

（3）对用户访问页面的次数进行计数的例子：

<script type="text/javascript">

    if (localStorage.pagecount)

    {

          localStorage.pagecount=Number(localStorage.pagecount) +1;

      }

    else

    {

      localStorage.pagecount=1;

    }

    document.write("Visits "+ localStorage.pagecount + " time(s).");

</script>

3.sessionStorage 方法：

（1）sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除

（2）如何创建并访问一个 sessionStorage：

<script type="text/javascript">

    sessionStorage.lastname="Smith";

    document.write(sessionStorage.lastname);

</script>

（3）对用户在当前 session 中访问页面的次数进行计数的例子：

<script type="text/javascript">

if (sessionStorage.pagecount)

{

      sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

  }

else

  {

    sessionStorage.pagecount=1;

  }

document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

</script>

应用程序缓存

1.什么是应用程序缓存：

（1）HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问

（2）应用程序缓存为应用带来三个优势：

a.离线浏览 - 用户可在应用离线时使用它们

b.速度 - 已缓存资源加载得更快

c.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

（3）使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

2.HTML5 Cache Manifest 实例:

带有 cache manifest 的 HTML 文档（供离线浏览）的示例：

<!DOCTYPE HTML><html manifest="demo.appcache"><body>The content of the document......</body></html>

3.Cache Manifest 基础：

（1）如需启用应用程序缓存，在文档的 标签中包含 manifest 属性

（2）manifest 文件的建议的文件扩展名是：“.appcache”

（3）manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置

4.Manifest 文件：

（1）manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

（2）manifest 文件可分为三个部分：

a.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

b.NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

c.FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

（3）CACHE MANIFEST:

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的

（4）NETWORK：

NETWORK 小节规定文件 “login.asp” 永远不会被缓存，且离线时是不可用的：

NETWORK:

login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:

*

（5）FALLBACK：

FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：

FALLBACK:

/html5/ /404.html

第一个 URI 是资源，第二个是替补

5.更新缓存：

（1）一旦应用被缓存，它就会保持缓存直到发生下列情况：

a.用户清空浏览器缓存

b.manifest 文件被修改（参阅下面的提示）

c.由程序来更新应用缓存

（2）完整的 Manifest 文件：

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

 

NETWORK:

login.asp

 

FALLBACK:

/html5/ /404.html

（3）以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新

（4）如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

6.关于应用程序缓存的注释：

（1）一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件

（2）浏览器对缓存数据的容量限制可能不太一样

H5 web workers

1.什么是 Web Worker：

（1）web worker 是运行在后台的 JavaScript，不会影响页面的性能

（2）当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成
（3）web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行

2.HTML5 Web Workers 实例：

（1）检测 Web Worker 支持：

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")

{

// Yes! Web worker support!

// Some code.....

}

else

{

// Sorry! No Web Worker support..

}

（2）创建 web worker 文件：

在一个外部 JavaScript 中创建我们的 web worker

我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中：

var i=0;

 

function timedCount()

{

    i=i+1;

    postMessage(i);

    setTimeout("timedCount()",500);

}

timedCount();

（3）创建 Web Worker 对象：
下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

if(typeof(w)=="undefined")

{

    w=new Worker("demo_workers.js");

  }

然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器：

w.onmessage=function(event){  document.getElementById("result").innerHTML=event.data;};

（4）终止 Web Worker：

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

3.Web Workers 和 DOM：

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象、document 对象、parent 对象

H5 服务器发送事件

1.Server-Sent 事件 - 单向消息传递：

（1）Server-Sent 事件指的是网页自动获取来自服务器的更新

（2）以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

（3）HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新

2.接收 Server-Sent 事件通知：

（1）EventSource 对象用于接收服务器发送事件通知：

var source=new EventSource("demo_sse.php");

source.onmessage=function(event)

{

    document.getElementById("result").innerHTML+=event.data + "<br />";

};

（2）例子解释：

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）

每接收到一次更新，就会发生 onmessage 事件

当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

3.检测 Server-Sent 事件支持：

检测服务器发送事件的浏览器支持情况：

事件              描述

 

onopen          当通往服务器的连接被打开

 

onmessage       当接收到消息

 

onerror         当错误发生

表单元素

新增的表单元素

datalist元素规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，使用input元素的list元素与 datalist元素的id绑定

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn" />//option 元素永远都要设置 value 属性

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

keygen元素：作用是提供一种检验用户的可靠方法

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_form.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption: <keygen name="security" />

<input type="submit" />

</form>

output元素，用于不同类型的输出，比如计算或脚本输出

<output id="result" onforminput="resCalc()"></output>

新增的表单属性

（1）新的 form 属性：

autocomplete：

1.属性规定 form 或 input 域应该拥有自动完成功能

2.autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color

3.当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

<form action="demo_form.asp" method="get" autocomplete="on">

First name: <input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

novalidate：属性规定在提交表单时不应该验证 form 或 input 域

<form action="demo_form.asp" method="get" novalidate="true">

E-mail: <input type="email" name="user_email" />

<input type="submit" />

</form>

（2）新的 input 属性：

autocomplete：属性规定 form 或 input 域应该拥有自动完成功能

autofocus： 属性规定在页面加载时，域自动地获得焦点

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form：属性规定输入域所属的一个或多个表单。必须引用所属表单的 id

<form action="demo_form.asp" method="get" id="user_form">

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

Last name: <input type="text" name="lname" form="user_form" />

表单重写属性

form overrides attributes 允许您重写 form 元素的某些属性设定

属性值：

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

表单重写属性适用于以下类型的 标签：submit 和 image

<form action="demo_form.asp" method="get" id="user_form">

E-mail: <input type="email" name="userid" /><br />

<input type="submit" value="Submit" />

<br />

<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />

<br />

<input type="submit" formnovalidate="true" value="Submit without validation" />

<br />

</form>

height 和 width：

属性规定用于 image 类型的 input 标签的图像高度和宽度

只适用于 image 类型的 标签

<input type="image" src="img_submit.gif" width="99" height="99" />

list：属性规定输入域的 datalist。datalist 是输入域的选项列表

Webpage: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3Schools" value="http://www.w3school.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

min, max 和 step：属性用于为包含数字或日期的 input 类型规定限定（约束）

min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range

Points: <input type="number" name="points" min="0" max="10" step="3" />

multiple：属性规定输入域中可选择多个值。适用于以下类型的 标签：email 和 file

Select images: <input type="file" name="img" multiple="multiple" />

pattern 属性规定用于验证 input 域的模式（pattern）

模式（pattern） 是正则表达式

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: <input type="text" name="country_code"

pattern="[A-z]{3}" title="Three letter country code" />

placeholder 属性提供一种提示（hint），描述输入域所期待的值

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search W3School" />

required属性规定必须在提交之前填写输入域（不能为空）

Name: <input type="text" name="usr_name" required="required" />

XML

概念：Extensible Markup Language 可扩展标记语言

xml与html的区别

1. xml标签都是自定义的，html标签是预定义。
2. xml的语法严格，html语法松散
3. XML 和 HTML 为不同的目的而设计：
   • XML 被设计用来传输和存储数据，其焦点是数据的内容。
   • HTML 被设计用来显示数据，其焦点是数据的外观。

一个XML文件分为如下几部分内容

文档声明
元素
属性
注释
CDATA区、特殊字符

文档声明

<?xml version="1.0" encoding="utf-8"?>

XML声明放在XML文档的第一行
version --文档符合XML1.0规范"
encoding --文档字符编码，比如"utf-8

元素
元素语法要求

● 每个XML文档必须有且只有一个根元素
● 根元素是一个完全包括文档中其他所有元素的元素
● 根元素的起始标记要放在所有其他元素的起始标记之前
● 根元素的结束标记要放在所有其他元素的结束标记之后
● XML元素指XML文件中出现的标签，一个标签分为开始标签和结束标签，一个标签有如下几种书写形式包含标签体:

<a>www.sohu.cn</a>

不含标签体的:，简写为:
● 一个标签中也可以嵌套若干子标签。但所有标签必须合理的嵌套，绝对不允许交叉嵌套

xml元素命令规则

1. 区分大小写，例如，<P>和<p>是两个不同的标记
2. 不能以数字开头
3. 不能包含空格
4. 名称中间不能包含冒号（:) 。
5. 如果标签单词需要间隔，建议使用下划线比如<book_title>hello</book_title>

属性

<Student ID="100">
<Name>TOM</Name>
</Student>

● 属性值用双引号(")或单引号(')分隔（如果属性值中有'，用"分隔;有"，用'分隔)

● 一个元素可以有多个属性，它的基本格式为:<元素名属性名=“属性值”>

● 特定的属性名称在同一个元素标记中只能出现一次

● 属性值不能包括&I字符

注释

1. <!--这是一个注释-->
2. 注释内容中不要出现- -
3. 不要把注释放在标记中间;错误写法<Name <!--the name-->>TOM</Name>
4. 注释不能嵌套
5. 可以在除标记以外的任何地方放注释

CDATA、特殊字符
有些内容不想让解析引擎执行，而是当作原始内容处理(即当做普通文本)，可以使用CDATA包括起来，CDATA节中的所有字符都会被当作简单文本，而不是XML标记。
1.语法:

<![GDATA[
这里可以把你输入的字符原样显示，不会解析xml
]]>

2.可以输入任意字符(除]]>外)
3.不能嵌套

格式正规的XML文档

1. XML声明语句<?xml version="1.0" encoding="utf-8"?>
2. 必须有且仅有一个根元素
3. 标记大小,区分大小写的
4. 属性值用引号
5. 标记成对
6. 空标记关闭
7. 元素正确嵌套

<?xml version="1.0" encoding="UTF-8" ?>
<!-->
1 xml :表示该文件的类型xml
2.version="1.0"版本
3 encoding="UTF-8”文件编码
4. students: root元素/根元素，程序员自己来定
5. <student></student>表示students一个子元素，可以有多个
6. id就是属性name , age, gender是student元素的子元素
7.xml也可以被映射成xml dom树(xml文件是树形结构,有层次感)
-->
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>女</gender>
    </student>
</students>

xml和json对比

xml:扩展标记语言，
　　　　优点：格式统一，格式标准，容易与其他系统远程交互，数据共享比较方便
　　　　缺点：xml文件庞大，格式复杂，解析会花费大量时间和资源；服务器和客户端需要花费大量代码解析，不易维护且复杂

json:轻量级数据交互格式，具有良好的可读和便于快速编写的特性。
　　　　优点：数据格式简单，易于读写；易于解析，在服务器和客户端有统一的标准解析，简化代码量。便于开发和维护
　　　　缺点：通用性较差，在web领域应用应用处于初级阶段

对比：
　　 1.xml规范标签，json推荐语法，可读性不相上下
　　　　2.xml扩展性较好
　　　　3.json比xml更容易编写，且更容易解析
　　　　4.json体积较小，传输速度远快于xml

5. ​ JSON只提供整体解析方案，而这种方法只在解析较少的数据时才能起到良好的效果；XML提供了对大规模数据的逐步解析方案，这种方案很适合于对大量数据的处理。

前端对xml文件的解析和渲染

1.利用ajax请求，请求的路径为xml文件，注意：需在有服务器的情况下，本次实例是利用node搭建的本地服务器，打开html文件。

2.在js中利用ajax请求xml

3.根据返回的数据，获取到xml文件的字符串，创建DOMParser对象，

​ 用以解析字符串

4.解析完后直接获取相关dom遍历，渲染到页面

ES5

新特性：

• “use strict” 指令 严格模式

• String.trim() 删除字符串两端的空白字符

• Array.isArray() 方法检查对象是否为数组。

• Array.forEach() 为每个数组元素调用一次函数。

• Array.map()

  给每个数组值乘以 2：

  var numbers1 = [45, 4, 9, 16, 25];
  var numbers2 = numbers1.map(myFunction);
  
  function myFunction(value) {
    return value * 2;
  }
  

• Array.filter()

  用值大于 18 的元素创建一个新数组：

  var numbers = [45, 4, 9, 16, 25];
  var over18 = numbers.filter(myFunction);
  
  function myFunction(value) {
    return value > 18;
  }
  

• Array.reduce()

  确定数组中所有数的总和：

  var numbers1 = [45, 4, 9, 16, 25];
  var sum = numbers1.reduce(myFunction);
  
  function myFunction(total, value) {
    return total + value;
  }
  

• Array.reduceRight()

  确定数组中所有数的总和：

  var numbers1 = [45, 4, 9, 16, 25];
  var sum = numbers1.reduceRight(myFunction);
  
  function myFunction(total, value) {
    return total + value;
  }
  

• Array.every()

  检查是否所有值都超过 18：

  var numbers = [45, 4, 9, 16, 25];
  var allOver18 = numbers.every(myFunction);
  
  function myFunction(value) {
    return value > 18;
  }
  

• Array.some()

  检查某些值是否超过 18：

  var numbers = [45, 4, 9, 16, 25];
  var allOver18 = numbers.some(myFunction);
  
  function myFunction(value) {
    return value > 18;
  }
  

• Array.indexOf()

  检索数组中的某个元素值并返回其位置：

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  var a = fruits.indexOf("Apple");
  

• Array.lastIndexOf() 从数组结尾处开始检索。

• JSON.parse() 用于将文本转换为 JavaScript 对象

• JSON.stringify() 将其转换为字符串

• Date.now() 返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数。

• 属性 Getter 和 Setter ： ES5 允许您使用类似于获取或设置属性的语法来定义对象方法。

  为名为 fullName 的属性创建一个 getter：

  // 创建对象：
  var person = {
    firstName: "Bill",
    lastName : "Gates",
    get fullName() {
      return this.firstName + " " + this.lastName;
    }
  };
  
  // 使用 getter 显示来自对象的数据：
  document.getElementById("demo").innerHTML = person.fullName;
  

  为语言属性创建一个 setter 和一个 getter：

  var person = {
    firstName: "Bill",
    lastName : "Gates",
    language : "NO",
    get lang() {
      return this.language;
    },
    set lang(value) {
      this.language = value;
    }
  };
  
  // 使用 setter 设置对象属性：
  person.lang = "en";
  
  // 使用 getter 显示来自对象的数据：
  document.getElementById("demo").innerHTML = person.lang;
  

  使用 setter 来确保语言的大写更新：

  var person = {
    firstName: "Bill",
    lastName : "Gates",
    language : "NO",
    set lang(value) {
      this.language = value.toUpperCase();
    }
  };
  
  // 使用 setter 设置对象属性：
  person.lang = "en";
  
  // 显示来自对象的数据：
  document.getElementById("demo").innerHTML = person.language;
  

• 新的对象属性和方法：Object.defineProperty() 是 ES5 中的新对象方法。

  它允许您定义对象属性和/或更改属性的值和/或元数据。

  // 创建对象：
  var person = {
    firstName: "Bill",
    lastName : "Gates",
    language : "NO", 
  };
  
  // 更改属性：
  Object.defineProperty(person, "language", {
    value: "EN",
    writable : true,
    enumerable : true,
    configurable : true
  });
  
  // 枚举属性
  var txt = "";
  for (var x in person) {
    txt += person[x] + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
  

  ES5新的对象方法：

  ECMAScript 5 为 JavaScript 添加了许多新的对象方法：

  // 添加或更改对象属性
  Object.defineProperty(object, property, descriptor)
  
  // 添加或更改多个对象属性
  Object.defineProperties(object, descriptors)
  
  // 访问属性
  Object.getOwnPropertyDescriptor(object, property)
  
  // 将所有属性作为数组返回
  Object.getOwnPropertyNames(object)
  
  // 将可枚举属性作为数组返回
  Object.keys(object)
  
  // 访问原型
  Object.getPrototypeOf(object)
  
  // 防止向对象添加属性
  Object.preventExtensions(object)
  
  // 如果可以将属性添加到对象，则返回 true
  Object.isExtensible(object)
  
  // 防止更改对象属性（而不是值）
  Object.seal(object)
  
  // 如果对象被密封，则返回 true
  Object.isSealed(object)
  
  // 防止对对象进行任何更改
  Object.freeze(object)
  
  // 如果对象被冻结，则返回 true
  Object.isFrozen(object)
  

  对字符串的属性访问

  charAt() 方法返回字符串中指定索引（位置）的字符

  var str = "HELLO WORLD";
  str.charAt(0);            // 返回 H
  

  ES5允许对字符串进行属性访问：

  var str = "HELLO WORLD";
  str[0];                   // 返回 H
  

  尾随逗号(Trailing Commas)

  ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

//对象
person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

//数组
points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

//JSON对象：
// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)

// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

//JSON数组：
// 允许：
points = [40, 100, 1, 5, 25, 10]

// 不允许：
points = [40, 100, 1, 5, 25, 10,]

多行字符串

如果使用反斜杠转义，ECMAScript 5 允许多行的字符串文字（字面量）：

"Hello \
Kitty!";

保留字作为属性名称

ECMAScript 5 允许保留字作为属性名称：

var obj = {name: "Bill", new: "yes"}

ES6

新特性：

• JavaScript let：let 语句允许使用块作用域声明变量

  var x = 10;
  // Here x is 10
  { 
    let x = 2;
    // Here x is 2
  }
  // Here x is 10
  

• JavaScript const：声明常量

  var x = 10;
  // Here x is 10
  { 
    const x = 2;
    // Here x is 2
  }
  // Here x is 10
  

• 幂 (**)：取幂运算符（**）

  var x = 5;
  var z = x ** 2;          // 结果是 25
  

  x ** y 的结果与 Math.pow(x,y) 相同

  var x = 5;
  var z = Math.pow(x,2);   // 结果是 25
  

• 默认参数值：ES6 允许函数参数具有默认值

  function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
  }
  myFunction(5); // 将返回 15
  

• Array.find()：返回通过测试函数的第一个数组元素的值。

  查找（返回）第一个大于 18 的元素（的值）：

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.find(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

• Array.findIndex()：返回通过测试函数的第一个数组元素的索引

  确定大于 18 的第一个元素的索引：

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.findIndex(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

  新的数字属性

  ES6 将以下属性添加到 Number 对象：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

新的数字方法

ES6 为 Number 对象添加了 2 个新方法：

• Number.isInteger()//如果参数是整数，则返回 true
• Number.isSafeInteger()//安全整数是可以精确表示为双精度数的整数。如果参数是安全整数，则返回 true

新的全局方法

ES6 还增加了 2 个新的全局数字方法：

• isFinite()//如果参数为 Infinity 或 NaN，则返回 false
• isNaN()//如果参数是 NaN，则返回 true

箭头函数（Arrow Function）

箭头函数允许使用简短的语法来编写函数表达式。

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

访问原型
Object.getPrototypeOf(object)

// 防止向对象添加属性
Object.preventExtensions(object)

// 如果可以将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

## 对字符串的属性访问

`charAt()` 方法返回字符串中指定索引（位置）的字符

```js
var str = "HELLO WORLD";
str.charAt(0);            // 返回 H

ES5允许对字符串进行属性访问：

var str = "HELLO WORLD";
str[0];                   // 返回 H

尾随逗号(Trailing Commas)

ECMAScript 5 允许在对象和数组定义中使用尾随逗号：

//对象
person = {
  firstName: "Bill",
  lastName: " Gates",
  age: 62,
}

//数组
points = [
  1,
  5,
  10,
  25,
  40,
  100,
];

//JSON对象：
// 允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)

// 不允许：
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

//JSON数组：
// 允许：
points = [40, 100, 1, 5, 25, 10]

// 不允许：
points = [40, 100, 1, 5, 25, 10,]

多行字符串

如果使用反斜杠转义，ECMAScript 5 允许多行的字符串文字（字面量）：

"Hello \
Kitty!";

保留字作为属性名称

ECMAScript 5 允许保留字作为属性名称：

var obj = {name: "Bill", new: "yes"}

ES6

新特性：

• JavaScript let：let 语句允许使用块作用域声明变量

  var x = 10;
  // Here x is 10
  { 
    let x = 2;
    // Here x is 2
  }
  // Here x is 10
  

• JavaScript const：声明常量

  var x = 10;
  // Here x is 10
  { 
    const x = 2;
    // Here x is 2
  }
  // Here x is 10
  

• 幂 (**)：取幂运算符（**）

  var x = 5;
  var z = x ** 2;          // 结果是 25
  

  x ** y 的结果与 Math.pow(x,y) 相同

  var x = 5;
  var z = Math.pow(x,2);   // 结果是 25
  

• 默认参数值：ES6 允许函数参数具有默认值

  function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
  }
  myFunction(5); // 将返回 15
  

• Array.find()：返回通过测试函数的第一个数组元素的值。

  查找（返回）第一个大于 18 的元素（的值）：

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.find(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

• Array.findIndex()：返回通过测试函数的第一个数组元素的索引

  确定大于 18 的第一个元素的索引：

  var numbers = [4, 9, 16, 25, 29];
  var first = numbers.findIndex(myFunction);
  
  function myFunction(value, index, array) {
    return value > 18;
  }
  

  新的数字属性

  ES6 将以下属性添加到 Number 对象：

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

新的数字方法

ES6 为 Number 对象添加了 2 个新方法：

• Number.isInteger()//如果参数是整数，则返回 true
• Number.isSafeInteger()//安全整数是可以精确表示为双精度数的整数。如果参数是安全整数，则返回 true

新的全局方法

ES6 还增加了 2 个新的全局数字方法：

• isFinite()//如果参数为 Infinity 或 NaN，则返回 false
• isNaN()//如果参数是 NaN，则返回 true

箭头函数（Arrow Function）

箭头函数允许使用简短的语法来编写函数表达式。

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;