html css js知识整理,html新增属性，css新增属性、js进阶知识点整理

一、HTML5新增属性

语义化标签：article、footer、header、nav、section、aside

article

标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

header

标签用来表示介绍性的内容，即定义了文档中的页眉

footer

HTML5 标签用于定义文档的页脚部分。

nav

标签用于表示HTML页面中的导航，可以是页与页之间导航，也可以是页内的段与段之间导航。

section

标签对文档中的内容进行分块或分段。

aside

aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域；(最常见的京东的右侧的工具栏)

表单控件及属性：datalist、keygen、details、output、calendar、date、time、email、url、search、range

datalist

标签需要与 标签配合使用，用来表示可选的列表。

keygen

规定用于表单的密钥对生成器字段

output

标签定义不同类型的输出，比如脚本的输出。

details

标签用于创建一个可展开折叠的元件，用户可以从中检索其他附加的信息。

output

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

calendar

日历控件(移动端适用                                                           )

date

日期

time

定义日期或时间

email

邮箱验证

search

搜索圆圈提示

range

输入范围

placeholder、require、step、progress(进度条)等

多媒体元素：

audio

定义音频内容

video

定义视频(video 或者 movie)

source

定义多媒体资源 和

embed

定义嵌入的内容，比如插件。

track

为诸如 和 元素之类的媒介规定外部文本轨道。

新增标签

fieldset

HTML5

标签用于对表单中的相关元素进行分组

legend

元素是

元素的第一个子元素，定义了元素的标题。

optgroup

标签用来定义一个选项组，即，可以将文档中的选项进行组合。

map

标签用来表示图像映射，也就是指带有可点击区域的图像映射：

address

标签，你可以得到某个文档中所属作者或者所有者的相关的联系信息

传统表单常用事件：click、change、foucs、blur、keydown、keyup

移动端没有keydown和keyup事件，移动端使用的键盘是虚拟的。移动端多了一个事件类型：input事件。oninput：随操作过程而连续触发。

二、 css3新增属性

border-radius 属性用于创建圆角

box-shadow 用于向方框添加阴影

border-image 属性，可以使用图片来创建边框

新的背景属性

background-clip

规定背景的绘制区域。

background-origin

规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

background-size

规定背景图片的尺寸。

能够以像素或百分比规定尺寸

text-shadow 可向文本应用阴影

word-wrap 属性允许文本强制文本进行换行

hanging-punctuation

规定标点字符是否位于线框之外。

punctuation-trim

规定是否对标点字符进行修剪。

text-align-last

设置如何对齐最后一行或紧挨着强制换行符之前的行。

text-emphasis

向元素的文本应用重点标记以及重点标记的前景色。

text-justify

规定当 text-align 设置为 "justify" 时所使用的对齐方法。

text-outline

规定文本的轮廓。

text-overflow

规定当文本溢出包含元素时发生的事情。

text-shadow

向文本添加阴影。

text-wrap

规定文本的换行规则。

word-break

规定非中日韩文本的换行规则。

word-wrap

允许对长的不可分割的单词进行分割并换行到下一行。

@font-face ： 在新的 @font-face 规则中，您必须首先定义字体的名称(比如 myFirstFont)，然后指向该字体文件

转换属性

transform

向元素应用 2D 或 3D 转换。

transform-origin

允许改变被转换元素的位置。

transform-style

规定被嵌套元素如何在 3D 空间中显示。

perspective

规定 3D 元素的透视效果。

perspective-origin

规定 3D 元素的底部位置。

backface-visibility

定义元素在不面对屏幕时是否可见。

transition

简写属性，用于在一个属性中设置四个过渡属性。

transition-property

规定应用过渡的 CSS 属性的名称。

transition-duration

定义过渡效果花费的时间。默认是 0。

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

transition-delay

规定过渡效果何时开始。默认是 0。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画属性

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name

规定 @keyframes 动画的名称。

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function

规定动画的速度曲线。默认是 "ease"。

animation-delay

规定动画何时开始。默认是 0。

animation-iteration-count

规定动画被播放的次数。默认是 1。

animation-direction

规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state

规定动画是否正在运行或暂停。默认是 "running"。

animation-fill-mode

规定对象动画时间之外的状态。

多列属性

column-count

规定元素应该被分隔的列数。

column-fill

规定如何填充列。

column-gap

规定列之间的间隔。

column-rule

设置所有 column-rule-* 属性的简写属性。

column-rule-color

规定列之间规则的颜色。

column-rule-style

规定列之间规则的样式。

column-rule-width

规定列之间规则的宽度。

column-span

规定元素应该横跨的列数。

column-width

规定列的宽度。

columns

规定设置 column-width 和 column-count 的简写属性。

repaint重绘：元素的外观改变了，但是没有改变布局

reflow重排：会影响到dom的结构渲染，同时会触发repaint。

visibility:hidden   --->产生重绘

display:none   ---->产生重排

三、 js进阶

1、JS继承的7种类型

原型继承

function object(O){

function F(){};

F.prototype = o;

return new F();

}

从本质上讲，object()对传入的对象进行了一次浅复制。特点：把父类私有的、公有的都继承到了子类原型上，变为子类公有的。

call继承

function A(){}

A.call(this);

call 执行A方法，并把A中的this 改变。特点：把父类私有的属性和方法，克隆一份给子类私有的属性。

冒充对象继承

function B(){

var temp=new A;

for (var key in temp){

this[key] = temp[key];

}

}

B.prototype.constructor=B;

var n = new B;

把A的一个实例遍历，把父类私有的和公有的(此处指自己在原型上扩展的方法，内置属性不可遍历)克隆一份给子类私有的。

混合模式继承(原型继承和call继承)

特点：call继承父类的私有的，原型继承继承公有的私有的，相当于私有的拿了两次。

寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。

function createAnother(o){

var c=object(o);

c.sayHi(){};

return c;

}

var another = createAnother(Person);

another.sayHi();//可执行

新对象another不仅有Person的所有属性和方法，还有自己的sayHi()方法。

寄生式组合继承  (object.create()和call继承)

B.prototype=Object.create(A.prototype);

把A的原型给B的原型

中间类继承法

arguments是类数组，不能用数组的方法

arguments.__proto__=Array.prototype;

这样arguments就可以使用数组的原型上面的方法。只是存在兼容性问题。

2 JS中异步编程的四种情况

(1)定时器(任务队列池)

(2)所有的事件绑定

(3)Ajax读取数据

(4)回调函数(bind)

3、forEach()和map()     call() 和bind()

forEach():遍历数组中的每一项，(ie6\7\8不兼容)，此方法没有返回值，理论上对原数组不产生影响，但可以通过数组索引来修改原来的数组。

map():遍历数组中的每一项，有返回值，对原数组不产生影响(相当于把原数组克隆一份，把克隆的这一份的数组中对应项改变了)

上述两个方法都有一个传入参数，是一个匿名回调函数。forEach()方法中的this是调用此方法的数组本身。匿名回调函数中的this是默认是window。也都支持第二个参数值，指定匿名回调函数中的This。

call(obj)

给forEach()赋值的时候，首先把匿名函数执行，并把匿名函数中的this变为obj,最后把匿名函数执行的返回结果返回，为undefined

bind(obj)

ie6\7\8不兼容，只是预先处理，把函数内部this 变为obj ,不立即执行

4、数据类型检测

(1)typeof  检测数据类型，返回的是一个字符串。局限性：typeof null = object,不能具体细分是数组还是正则，都返回对象object.

(2)instanceof 检测某一个实例是否属于某个类

对于字面量方式创建出来的结果是基本的数据类型，不是严谨的实例，只要是在当前实例的原型链上，我们检测出来结果都是true，

(3)constructor 构造函数，使用此方法检测不到object。局限性：可以把类的原型重写，重写时可能覆盖constructor

(4)object.prototype.tostring().call(*)

首先获取object原型上的tostring()方法，并且让方法里面的this指向重新定义的。

5、js延迟加载

一般有以下几种方式：

defer 属性

async 属性

动态创建DOM方式

使用jQuery的getScript方法

使用setTimeout延迟方法

让JS最后加载

6.浅拷贝，深拷贝

浅拷贝，obj1和obj2共享同一块内存地址，改变了其中一个，都会影响拷贝对象和原对象都发生改变。

深拷贝，开辟一块新的内存地址，将原对象的各个属性复制进去，这样拷贝对象和原对象的操作互不影响

6.1 浅拷贝的实现

1)循环遍历对象属性

2)objec.assign()用于对象的合并，并将原对象的所有可枚举属性复制到目标对象

6.2 深拷贝的实现

1)Array 的slice()和concat()表现像深拷贝，实际是浅拷贝。

对于数组是一维的，数组元素只有数字和字符串，可以实现深拷贝；但是如果数组元素是引用类型的，则没法实现深拷贝。

2)递归实现深拷贝

3)Json.parse(Json.stringify(source))

parse用于从一个字符串中解析出json对象

stringify()用于从一个对象解析出字符串