web前端知识点（更新中）

HTML

HTML、DHTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。

DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)

html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定页面样式、动态内容和动态定位。

HTML 表格单元格类型

表头单元格 - 包含头部信息（由 元素创建）（ 元素中的文本通常呈现为粗体并且居中）

标准单元格 - 包含数据（由 元素创建）（ 元素中的文本通常是普通的左对齐文本）

有序列表、无序列表

有序列表（order list）：ol和li搭配

无序列表（unorder list）：ul和li搭配

块级标签、行级标签

块级标签：div、p、h1…h6、ul、ol、li、dl、dd、dt、table、tr、from

行级标签：img、input、select、span、button、strong、lable、sup、sub

块级元素、行内元素

html5十大新特性

1. 用于绘画的canvas元素
2. 更加丰富强大的表单
3. 用于媒介的video和audio元素
4. html5地理定位
5. html5拖放
6. html5 Web存储
7. html5应用程序缓存
8. html5 Web Workers
9. html5服务器发送事件
10. html5 WebSocket

CSS

margin、padding（不可继承）

margin：设置所有外边距属性（object.style.margin=“10px 5px”）

padding：设置所有内边距属性（object.style.padding=“10px 5px”）

实例	解释
margin（padding）: 20px	上、下、左、右各20px
margin（padding）: 20px 40px	上、下20px；左、右40px
margin（padding）: 20px 40px 60px	上20px；左、右40px；下60px
margin（padding）: 20px 40px 60px 80px	上20px；右40px；下60px；左80px

text-transform（可继承）

控制文本的大小写（object.style.textTransform=“uppercase”）

值	描述
text-transform: none	默认
text-transform: capitalize	首字母大写
text-transform: uppercase	所有字母都是大写
text-transform: lowercase	所有字母都是小写
text-transform: inherit	从父元素继承 text-transform 属性的值

盒子模型

	标准盒子模型	IE怪异盒子模型
盒子总宽度	width + padding + border + margin	width + margin
盒子总高度	height + padding + border + margin	height + margin
备注	width/height 只是内容高度，不包含 padding 和 border值	width/height 包含了 padding和 border值

box-sizing

box-sizing：定义了引擎应该如何计算一个元素的总宽度和总高度

值	效果
box-sizing: content-box	与标准盒子模型表现一致
box-sizing: border-box	与怪异盒子模型表现一致
box-sizing: inherit	从父元素继承 box-sizing 属性的值

CSS选择器

CSS选择器	解释
id选择器（#login-btn）	选择id为login-btn的元素
类选择器（.login-box）	选择类名为login-box的所有元素
标签选择器（div）	选择标签为div的所有元素
后代选择器（#box div）	选择id为box元素内部所有的div元素
子选择器（.one>one_1）	选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two）	选择紧接在.one之后的所有.two元素
群组选择器（div,p）	选择div、p的所有元素
伪类选择器	:link ：选择未被访问的链接； :visited：选取已被访问的链接； :active：选择活动链接； :hover ：鼠标指针浮动在上面的元素； :focus ：选择具有焦点的； :first-child：父元素的首个子元素
伪元素选择器	:first-letter ：用于选取指定选择器的首字母； :first-line ：选取指定选择器的首行； :before : 选择器在被选元素的内容前面插入内容 ；:after : 选择器在被选元素的内容后面插入内容
属性选择器	[attribute] 选择带有attribute属性的元素；[attribute=value] 选择所有使用attribute=value的元素；[attribute~=value] 选择attribute属性包含value的元素；[attribute|=value]：选择attribute属性以value开头的元素
层次选择器（p~ul）（CSS3中新增选择器）	选择前面有p元素的每个ul元素
伪类选择器（CSS3中新增选择器）	:first-of-type 表示一组同级元素中其类型的第一个元素；:last-of-type 表示一组同级元素中其类型的最后一个元素；:only-of-type 表示没有同类型兄弟元素的元素；:only-child 表示没有任何兄弟的元素；:nth-child(n) 根据元素在一组同级中的位置匹配元素；:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数；:last-child 表示一组兄弟元素中的最后一个元素；:root 设置HTML文档；:empty 指定空的元素；:enabled 选择可用元素；:disabled 选择被禁用元素；:checked 选择选中的元素；:not(selector) 选择与 不匹配的所有元素
属性选择器（CSS3中新增选择器）	[attribute*=value]：选择attribute属性值包含value的所有元素；[attribute^=value]：选择attribute属性开头为value的所有元素；[attribute$=value]：选择attribute属性结尾为value的所有元素

CSS选择器的优先级

内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素（类型）选择器 > 通用选择器

内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

选择器	权重
!important	10000
内联样式	1000
ID 选择器	100
类选择器	10
元素（类型）选择器	1
继承来的样式	0

overflow 属性定义内容溢出元素框时会如何处理？

1. 参数是scroll时候，必会出现滚动条；
2. 参数是auto时候，子元素内容大于父元素时出现滚动条；
3. 参数是visible时候，溢出的内容出现在父元素之外；
4. 参数是hidden时候，溢出隐藏。

CSS 如何使用服务端的字体？

@font-face

BFC (块级格式化上下文)

BFC即 Block Formatting Contexts (块级格式化上下文)， 是 W3C CSS2.1 规范中的一个概念。

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

哪些元素会产生BFC？

1、根元素，即HTML元素

2、浮动元素：float属性不为none，为left、right

3、position为absolute或fixed

4、display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

5、overflow值不为 visible，为 auto、scroll、hidden

BFC的区域不会与float box叠加

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

计算BFC的高度时，浮动元素也参与计算

主流浏览器内核及私有属性css前缀

主流浏览器内核	私有属性css前缀
mozilla内核 (firefox,flock等)	-moz
webkit内核(safari,chrome等)	-webkit
opera内核(opera浏览器)	-o
trident内核(ie浏览器)	-ms

JavaScript

link是HTML方式（link标签是不能有src引入的）， @import是CSS方式

dom中HTMLDivElement的正确继承关系是？
HTMLDivElement -> HTMLElement -> Element -> Node -> EventTarget

contenteditable 属性规定元素内容是否可编辑。如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。（新的 HTML5 全局属性）

html5手册语义化标签：
article、section、aside、hgroup、header、footer、nav、time、mark、figure、figcaption、contextmenu、menu

JSON和XML之间的区别：

1. JSON是JavaScript Object Notation；XML是可扩展标记语言。
2. JSON是基于JavaScript语言；XML源自SGML。
3. JSON是一种表示对象的方式；XML是一种标记语言，使用标记结构来表示数据项。
4. JSON不提供对命名空间的任何支持；XML支持名称空间。
5. JSON支持数组；XML不支持数组。
6. XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读。
7. JSON不使用结束标记；XML有开始和结束标签。
8. JSON的安全性较低；XML比JSON更安全。
9. JSON不支持注释；XML支持注释。
10. JSON仅支持UTF-8编码；XML支持各种编码。

SVG

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

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

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

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG是HTML下的一个分支

Canvas 与 SVG 的比较

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用
Canvas 是逐像素进行渲染的
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

正则表达式

\d	匹配一个数字字符，等价于 [0-9]
\D	匹配一个非数字字符，等价于 [^0-9]
\f	匹配一个换页符，等价于 \x0c 和 \cL
\n	匹配一个换行符，等价于 \x0a 和 \cJ
\r	匹配一个回车符，等价于 \x0d 和 \cM
\s	匹配任何空白字符，包括空格、制表符、换页符等等，等价于 [ \f\n\r\t\v]
\S	匹配任何非空白字符，等价于 [^ \f\n\r\t\v]
\t	匹配一个制表符，等价于 \x09 和 \cI
\v	匹配一个垂直制表符，等价于 \x0b 和 \cK
\w	匹配字母、数字、下划线，等价于’[A-Za-z0-9_]’
\W	匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’

防抖和节流

JavaScript本地存储

深拷贝、浅拷贝

vue

vue响应式原理

Vue通过MVVM思想实现数据的双向绑定，数据驱动页面视图；

Vue数据双向绑定是通过采用数据劫持结合发布者-订阅者模式的方式来实现的；

通过Object.defineProperty()来劫持各个属性的setter，getter；

修改触发set方法赋值，获取触发get方法取值，在数据变动时发布消息给订阅者，触发相应的回调并通过数据劫持发布信息；

Vue 主要通过 4 个步骤来实现数据双向绑定的：

1. 实现一个监听器 Observer

   对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化；

2. 实现一个解析器 Compile

   解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新；

3. 实现一个订阅者 Watcher

   Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数；

4. 实现一个订阅器 Dep

   订阅器采用发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理；

Vue的数组响应式是如何实现的？

以Array.prototype为原型，创建了一个arrayMethods对象，使用Object.setPrototypeOf()强制让数组指向arrayMethods，这样就可以触发在arrayMethods中的改写的数组操作方法；

vue生命周期

初始化阶段=>模板编译阶段=>挂载阶段=>卸载阶段

beforeCreate =>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyed

生命周期	描述	使用场景
beforeCreate	组件实例被创建之初	执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created	组件实例已经完全创建	组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	组件挂载之前	未执行渲染、更新，dom未创建
mounted	组件挂载到实例上去之后	初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate	组件数据发生变化，更新之前	更新前，可用于获取更新前各种状态
updated	组件数据更新之后	更新后，所有状态已是最新
beforeDestroy	组件实例销毁之前	销毁前，可用于一些定时器或订阅的取消
destroyed	组件实例销毁之后	组件已销毁，作用同上
activated	keep-alive 缓存的组件激活时
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

父子组件生命周期的执行顺序

父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed

Vue组件之间的通信方式

组件间通信的分类

• 父子组件之间的通信：数据传递选择 props 与 $emit进行传递，也可选择ref
• 兄弟组件之间的通信：数据传递可选择$bus，其次可以选择$parent进行传递
• 祖孙与后代组件之间的通信：数据传递可选择attrs与listeners或者 Provide与 Inject
• 非关系组件间（复杂关系的组件）之间的通信：数据传递可以通过vuex存放共享的变量

组件间通信的方案

方案	适用场景	实现方法
通过 props 传递	父组件传递数据给子组件	1、子组件设置props属性，定义接收父组件传递过来的参数；2、父组件在使用子组件标签中通过字面量来传递值
通过 $emit 触发自定义事件	子组件传递数据给父组件	1、子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值；2、父组件绑定监听器获取到子组件传递过来的参数
使用 ref	父组件从子组件中获取数据	1、父组件在使用子组件的时候设置ref；2、父组件通过设置子组件ref来获取数据
EventBus	兄弟组件传值	1、创建一个中央事件总线EventBus；2、兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值；3、 另一个兄弟组件通过$on监听自定义事件
$parent或$root	共同祖辈间数据传递	1、通过共同祖辈$parent或者$root搭建通信桥连；2、兄弟组件： this.$parent.on{(}^{\prime }ad{d}^{\prime },this.add)；3、另一个兄弟组件：this.$parent.emit(‘add’)
attrs 与 listeners	祖先传递数据给子孙	1、设置批量向下传属性$attrs和 $listeners；2、 包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)；3、 可以通过 v-bind="$attrs" 传⼊内部组件
Provide 与 Inject	祖先传递数据给后代	1、在祖先组件定义provide属性，返回传递的值；2、在后代组件通过inject接收组件传递过来的值
Vuex	复杂关系的组件数据传递	1、 Vuex作用相当于一个用来存储共享变量的容器 ；2、state用来存放共享变量的地方；3、 getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值；4、 mutations用来存放修改state的方法；5、 actions也是用来存放修改state的方法，不过action是在mutations的基础上进行，常用来做一些异步操作

ES6

var、let、const

	var	let	const
变量提升	存在	不存在	不存在
暂时性死区	不存在	存在（声明了才可获取使用）	存在（声明了才可获取使用）
块级作用域	不存在	存在	存在
重复声明	允许	同一作用域不允许	同一作用域不允许
修改声明的变量	允许	允许	不允许
使用	避免使用	适用于除const的大多数情况	能使用尽量使用

数组新增拓展

拓展运算符

构造函数新增的方法

1. Array.from()
2. Array.of()

对象新增拓展

函数新增拓展

Set、Map

Promise

Generator

Proxy

Moudule

Decorator

Decorator，即装饰器。