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十大新特性
- 用于绘画的canvas元素
- 更加丰富强大的表单
- 用于媒介的video和audio元素
- html5地理定位
- html5拖放
- html5 Web存储
- html5应用程序缓存
- html5 Web Workers
- html5服务器发送事件
- 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 属性定义内容溢出元素框时会如何处理?
- 参数是scroll时候,必会出现滚动条;
- 参数是auto时候,子元素内容大于父元素时出现滚动条;
- 参数是visible时候,溢出的内容出现在父元素之外;
- 参数是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之间的区别:
- JSON是JavaScript Object Notation;XML是可扩展标记语言。
- JSON是基于JavaScript语言;XML源自SGML。
- JSON是一种表示对象的方式;XML是一种标记语言,使用标记结构来表示数据项。
- JSON不提供对命名空间的任何支持;XML支持名称空间。
- JSON支持数组;XML不支持数组。
- XML的文件相对难以阅读和解释;与XML相比,JSON的文件非常易于阅读。
- JSON不使用结束标记;XML有开始和结束标签。
- JSON的安全性较低;XML比JSON更安全。
- JSON不支持注释;XML支持注释。
- 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 个步骤来实现数据双向绑定的:
-
实现一个监听器 Observer
对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化;
-
实现一个解析器 Compile
解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新;
-
实现一个订阅者 Watcher
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器 Compile 中对应的更新函数;
-
实现一个订阅器 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.
p
a
r
e
n
t
.
o
n
(
′
a
d
d
′
,
t
h
i
s
.
a
d
d
)
;
3
、另一个兄弟组件:
t
h
i
s
.
parent.on('add',this.add);3、另一个兄弟组件: this.
parent.on(′add′,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的大多数情况 | 能使用尽量使用 |
数组新增拓展
拓展运算符
构造函数新增的方法
- Array.from()
- Array.of()
对象新增拓展
函数新增拓展
Set、Map
Promise
Generator
Proxy
Moudule
Decorator
Decorator,即装饰器。