❶ web前端笔试题
1. 设置元素浮动后，该元素的 display 值是多少( A )
A.block B. 不变 C. inline D. inline-block
2. 以下不是 canvas 的⽅方法是( D )
A.getContext() B. fill() C. stroke() D.controller
3. 不是 input 在 html5 新的类型的是( B )
A.datetime B. file C. color D. range
4. 对权重排序正确的是( C )
a) .list .box p
b) #list .box div span
c) .list span
d) #list #box
e) p:last-child
f) style
A.f>d>b>a>c>e
C. f>d>b>a>c=e
B. f>d>b>a>e>c
D. f>b>d>a>c=e
5.对 document load 和 document ready 描述正确的是( B )
A.$(document).ready()是当页⾯所有资源全部加载完成后，执
⾏⼀个函数
B.如果图⽚资源较多加载时间较长，onload 后等待执⾏的函数
需要等待较长时间，所以⼀些效果可能受到影响
C.onload 是当 DOM ⽂档树加载完成后执⾏⼀个函数
D.⼀般来说 load 会比$(document).ready()较快执⾏
6.["1", "2", "3"].map(parseInt) 答案是多少( A )
A.[1, NaN, NaN] B. [1, 2, NaN]
C.[NaN, NaN, NaN] D. [1, NaN]
7.以下对 Ajax 描述不正确的是( A )
A.readyState 属性请求的状态，当值为 3 时是正在加载
B.使用 XML 和 XSLT 进⾏行数据交换及相关操作
C.总共有 8 种 callback
D.abort()⽅法，停⽌当前请求
8.var temp=null，alert(typeof temp)弹出的结果是( B )
A.Null B. Object C. Undefined D. String
1. 对XMLHttpRequest对象的open⽅方法描述错误的是(BCD)
A.在 IE 上使⽤的是 XMLHttpRequest 对象是 ActiveXObject
B.在 Firefox 上使用的是 XMLHttpRequest 对象是ActiveXObject
C.XMLHttpRequest 对象只能发送 get 请求
D.XMLHttpRequest 对象只能发送 post 请求
2. 以下哪些是 javascript 的全局函数(ABC)
A.parseFloat B. eval C. setTimeout D. alert
3. 对 http 相关内容描述正确的是(BCD)
A.301 状态码是临时重定向
B.get ⽅方式只能⽀支持 ASCII 字符
C.get 在从服务器上获取资源，post 重点在向服务器发送数据
D.HTTPS 就是 HTTP 加上加密处理理
4. 以下结果正确的是(CD)
A.typeof undefined= undefined 和 typeof null=null
B.typeof “hello”==string typeof 0==Boolean
C.typeof [1,2,3]=object typeof NaN=undefined
D.typeof {name:“李华”，age:“23”}=object
5. 以下结果正确的是(AB)
A.zepto.js 适合移动端的开发，jQuery 适合 PC 端的开发
B.zepto.js 不支持 ie 浏览器器
C.vue 属于 mvc 框架
D.v-bind 实现双向绑定
6. 对 sass 描述错误的是(BD)
A.sass 和 scss 其实是同⼀一种东⻄，都称之为 Sass
B.sass 可以声明变量符号为&
C.sass 最终都将转换成 css ⽂件才被引⽤
D. sass 不可以扩展和继承
1. ⽗级⾼宽固定，子级⽔平垂直居中怎么实现(请用 2 种 flex ⽅
法实现)?
2. 写出⼀个简单的$.ajax()的请求方式?
3. 假如移动端设备的尺寸是320px要实现每1rem=16px怎么实
现?
4.使用 Javascript 打印出 1-10000 之间的所有对称数(例如 121
1331 等)
5. angular 框架之间的通信⽅式是什么，⾄少列出三种?
6. vue 的⽣命周期有⼏个阶段，简单说说它们的作用?
❷ WEB数据库设计与应用(试题求答案)
CCDDDABCCCC
❸ 腾讯WEB前端笔试题和面试题答案
如下分享是一份完整的腾讯WEB前端笔试题，大家有空可以练一练！
一、耐心填一填!(每空4分，共24分)
1. 为span设置类a与b,应编写HTML代码_
_
_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。
二、精心选一选!(每题4分，共16分)
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 选出你认为最合理的定义标题的方法( C )
A. 文章标题
B.
文章标题
C.
文章标题
D. 文章标题
3. br标签在XHTML中语义为( A )
A.换行 B.强调 C.段落 D.标题
4. 不换行必须设置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些
属性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判断对或错!(每题4分，共24分)
1. CSS属性font-style 用于设置字体的粗细。 ( × )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )
5. display:inline兼容所有的浏览器。 ( √ )
6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × ) 1 2
❹ 计算机二级《Web程序设计》试题及答案
计算机二级《Web程序设计》试题及答案
1在下列的HTML中，正确产生超链接的标记是()。
A.新浪网B.新浪网C.http：///WWW.sina.Corn.cnD.新浪网
参考答案：B
2下面协议中用于在Web浏览器和服务器之间传输Web文档的是()。
A.NFSB.FTPC.HTTPD.DNS
参考答案：C
3在HTTP响应的MIME消息体中，可以同时包含如下类型的数据()。
i .文本数据 ii.图片数据 iii.视频数据 iv.音频数据
A.仅iB.i和iiC.i、ii和iiiD.全都可以
参考答案：D
4HTTP协议是一种()协议。
A.文件传输协议B.邮件协议C.远程登录协议D.超文本传输协议
参考答案：D
5在HTML文档中使用的注释符号是()。
A.//…B./*……*/C.D.以上说法均错误
参考答案：C
6HTTP请求消息中可以不包含()。
i.开始行 ii.消息头iii.消息体实体数据
A.仅iB.i和iiC.ii和 iiiD.仅iii
参考答案：C
7下列技术中控制文档结构的.是()。
A.DOMB.CSSC.JavaScriptD.XMLHttpRequest
参考答案：A
8下列语言编写的代码中，在浏览器端执行的是()。
A.wt h页面中的c#代码
B.Web页面中的Java代码
C.Web页面中的PHP代码
D.Web页面中的JavaScript代码
参考答案：D
9在HTTP/1.1协议中，持久连接选项是()的。
A.默认关闭B.默认打开C.不可协商D.以上都不对
参考答案：B
10以下不是HTTP协议的特点的是()。
A.持久连接B.请求/响应模式C.只能传输文本数据D.简单、高效
参考答案：C
11下列语句中，正确打开名为“window2"的新窗口的JavaScript语句是()。
A.open.new("http：//www.sina.COB.cn"，"window2")
B.new.window("http：//www.sina.con.cn"，"window2")
C.new("http：//www.sina.com.cn"，"window2")
D.window.open("http：//www.sina.tom.cn"，"window2")
参考答案：D
12以下选项中，全部都是表格标记的是()。
参考答案：B
13下列关于ASP.NET的描述中，错误的是()。
A.ASP.NET依赖于微软的.NET框架
B.ASP.NET采用纯面向对象语言比采用脚本语言的执行效率高
C.ASP.NET采用代码分离技术有利于开发协作
D.ASP.NET和ASP都采用了JavaScript编程语言
参考答案：D
14下列函数中能够把6.25四舍五入为最接近的整数的是()。
A.round(6.25)B.rnd(6.25)C.Math.rnd(6.25)D.Math.round(6.25)
参考答案：D
15目前在Internet上应用最为广泛的服务是()。
A.FTP服务B.Web服务C.Telnet服务D.Gopher服务
参考答案：B
16下列正确地在CSS文件中插入注释的语句是()。
A.//this is a commentB.//this is a comment//C./*this is a comment*/D.'this is a comment
参考答案：C
17下列不属于动态网页格式的是()。
A.ASPB.JSPC.ASPXD.VBS
参考答案：D
18以下语句中，正确制作电子邮件链接的是()。
参考答案：C
19下列哪个样式能够显示这样一个边框：上边框10像素、下边框5像素、左边框20像素、右边框l像素?()
A.border—width：10px 5px 20px 1px
B.border—width：10px 20px 5px 1px
C.border—width：5px 20px l0px 1px
D.border—width：10px 1px 5px 20px
参考答案：D
20CSS 主要用下列哪个HTML标记构建页面布局?()
参考答案：B
21在下列选项中，正确地产生文本区(textarea)的标记是()。
参考答案：A
22在访问的URL http：//Cms.bit.e.Cn：8080/login.aspx中，http表示()。
A.端口号B.文件名C.访问协议D.主机名
参考答案：C
23下列标记中不属于行内元素的是()。
参考答案：D
24在HTML文档中用于表示页面标题的标记对是()。
参考答案：D
25下列符合CSS语法的正确语句是()。
A.body：color=blackB.{body;color：black}C.body{color：black;}D.{body：color=black}
参考答案：C
更多计算机二级试题推荐：
1. 2016年9月计算机二级web考试试题及答案
2. 计算机二级《Web程序设计》试题及答案
3. 计算机二级考试WEB试题及答案
4. 2016计算机二级考试《Web程序设计》练习题模拟
5. 2016计算机二级考试高级Office试题及答案
6. 2016最新计算机二级考试试题及答案
7. 2016年计算机二级office高级应用试题【题库】
8. 2016计算机二级等级考试题型分析
9. 2016下半年计算机二级ps试题及答案
10. 计算机二级Office考试试题及答案
;❺ web程序设计选择题及参考答案
web程序设计选择题及参考答案
一、选择题
1在HTTP协议的“请求/响应”交互模型中，以下说法中错误的是( )。
A.客户机在发送请求之前需要主动与服务器建立连接
B.服务器无法主动向客户机发起连接
C.服务器无法主动向客户机发送数据
D.以上都错
参考答案：D
2关于浏览器对象之间的从属关系，正确的说法是( )。
A.window对象从属于document对象
B.document对象从属于window对象
C.window对象和document互不从属
D.以上选项均错
参考答案：B
3在以下选项中，不合法的标识符是( )。
A.a*bB.smallC.scoreD.average_grade
参考答案：A
4关于微软的.NET框架的描述中，正确的是( )。
A..NET框架提供了一个公共语言运行时环境，提供内存管理
B..NET框架中的服务框架提供内存管理
C..NET框架提供标准语言库，从而提供内存管理
D..NET框架提供Windows应用程序模板，从而提供内存管理
参考答案：A
5以下不属于HTTP请求方法的是( )。
A.GETB.SETC.PUTD.POST
参考答案：B
6下列语句中，能产生带有数字列表符号的列表标记是( )。
参考答案：C
7PHP 中采用的模板技术是( )
A.SmartyB.SmartC.TempletD.Cache
参考答案：A
8为了标识一个HTML文件，应该使用的HTML标记是( )。
参考答案：C
9利用 ASP.NET开发的网页，其文件扩展名应命名为( )。
A..htmB..aspxC..aspD.无严格限制
参考答案：B
10在CSS的`长度单位中，1 pc等于多少pt?( )
A.8B.10C.12D.14
参考答案：C
11Web的工作模式是( )。
A.客户机/服务器B.浏览器/服务器C.浏览器/浏览器D.浏览器/客户机
参考答案：B
12Web上的任何信息，包括文档、图像、图片、视频或音频都被视为资源。为便于引用资源，应给它们分配一个唯一的标识来描述该资源存放于何处及如何对它进行存取，当前使用的命名机制称为( )。
A.URLB.WWWC.DNSD.FTP
参考答案：A
13下列关于HTML的说法中，正确的是( )。
A.编制HTML文件时不需要加入任何标记(tag)
B.HTML网页的核心，是一种超文本标记的程序设计语言
C.HTML是网页的核心，是一种超文本标记的页面描述语言
D.通过网页浏览器阅读HTML文件时，Web服务器负责解释插入到HTML文本中的各种标记
参考答案：C
14在下列的HTML中，哪个是最大的标题?( )
参考答案：D
15在HTML文档中用于表示表格的标记对是( )。
参考答案：C
16在JavaScript语言中，创建一个数组对象实例时使用关键字( )。
A.arrayB.ArrayC.dimensionD.Dimension
参考答案：B
17FTP协议是一种( )协议。
A.文件传输协议B.远程登录协议C.邮件协议D.超文本传输协议
参考答案：A
18相对比较早出现的服务器端动态网页技术是( )。
A.ASPB.CGIC.JSPD.JavaScript
参考答案：B
19下列可用于改变页面背景蒯色的属性是( )。
A.bgcolorB.background—colorC.colorD.backcolor
参考答案：B ;
❻ 腾讯WEB前端笔试题和面试题答案
腾讯WEB前端笔试题和面试题答案
能进入腾讯工作是多少人的梦想，下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”，供大家参考借鉴，希望可以帮助到有需要的朋友!
一、 耐心填一填!(每空4分，共24分)
1. 为span设置类a与b,应编写HTML代码_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。
二、 精心选一选!(每题4分，共16分)
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 选出你认为最合理的定义标题的方法( C )
A. 文章标题
B.
文章标题
C.
文章标题
D. 文章标题
3. br标签在XHTML中语义为( A )
A.换行 B.强调 C.段落 D.标题
4. 不换行必须设置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表现数据时，有时候表现出来的'会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判断对或错!(每题4分，共24分)
1. CSS属性font-style 用于设置字体的粗细。 ( × )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )
5. display:inline兼容所有的浏览器。 ( √ )
6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )
;❼ Web前端企业面试题
答：
一、display和visibility的相同与不同点
1、相同点：display和visibility都有讲元素隐藏的意思
2、不同点：display是元素隐藏，隐藏的元素不占文档流
而visibility隐藏的元素仍然占文档流
二、display和visibility的属性值
1、display
2、visibility
答：
在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点
for循环
其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组
for循环中可以使用return、break等来中断循环
结果：
forEach
对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。
输出结果：
for…in
循环遍历的值都是数据结构的键值
总结一句: for in也可以循环数组但是特别适合遍历对象
结果：
for…of
它是ES6中新增加的语法，用来循环获取一对键值对中的值
循环一个数组
循环一个普通对象（报错）
答：
px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的 。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。
所以相对于同一机型来说是一个绝对的长度单位。
em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸 。
以其父级元素为基准来变化长度。所以其算法不是一个固定的值。
rem：是CSS3新增的一个相对单位（root em，根em） 。
那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。
在移动设备上，我们常常设置
此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。
因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。
那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。
基础篇
1.shift
// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined
2.unshift
// 将参数添加到原数组开头，并返回数组的长度
//注：此方法在ie6.0下
// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
// 一般需要用返回值时可用splice代替
3.pop
// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined
4.push
// 将参数添加到原数组末尾，并返回数组的长度
5.concat
// 返回一个新数组，是将参数添加到原数组中构成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
进阶篇
1.forEach
是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。
2.map
map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此
forEach和map对比
相同点
1）都是循环遍历数组中的每一项；
2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
3）this都是指向调用方法的数组；
4) 只能遍历数组；
不相同点
1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。
2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。
3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。
3.filter
它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。
理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据
4.find()
返回通过测试的数组的第一个元素的值,
理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined
在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
语法
array.find(function(value, index, arr),thisValue)
value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。
扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧
5.every
理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)
6.some
理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false
7.rece
它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback
他可以传四个参数:
1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)
2,currentValue:数组中当前被处理的元素
3,index:不啰嗦,自己顾名思义去吧
4,array:返回调用rece的数组
彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法
substring() 和 substr()
相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。
不同点： 第二个参数
substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。
1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。
首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
所以，一般creadted钩子函数主要是用来初始化数据。
2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例
下面是结果
nihao
取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化
6、Vue中组件之间的传参方式有哪些方式？
Vue 组件传参的八种方式总结
Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的
一、props 传参
子组件定义 props 有三种方式:
// 第一种数组方式
// 第二种对象方式
// 第三种对象嵌套对象方式
第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用
父组件传参的俩种方式
第一种静态属性传参
注意：
1、在不定义 props 类型的情况下 props 接受到的均为 String。
2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true
第二种动态属性传参
注意：
1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值
2、会保留传入值的类型
3、如果是表达式则获取到的是表达式的计算结果
二、attrs 和listeners
$attrs
$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：
组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。
属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）
$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)
三、$emit 通知
这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值
答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值
四、v-model
这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思
五、插槽
六、$refs, $root, $parent, $children
$root 获取根组件
$parent 获取父组件
$children 获取子组件(所有的子组件，不保证顺序)
$refs 组件获取组件实例，元素获取元素
七、project / inject
注意：注入的值是非响应的
八、Vuex
这个相当于单独维护的一组数据，就不过多的说了。
watch，computed和methods的关系
1.watch和computed都是以Vue的依赖追踪机制为基础的 ，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
watch和computed各自处理的数据关系场景不同
1. watch 擅长处理的场景： 一个数据影响多个数据
2. computed 擅长处理的场景： 一个数据受多个数据影响
watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值
结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推
computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值
methods和computed的区别例子
注意两次点击computed返回的时间是相同的！！
1.两次点击methods返回的时间是不同的
2.注意两次点击computed返回的时间是相同的
【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据 （不是放在data等对象下的实例数据） ，所以computed只提供了缓存的值，而没有重新计算
只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。
参考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
2、async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档
两者的区别
1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
2、async await与Promise一样，是非阻塞的。
3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。
❽ web前端笔试题(HTML/CSS篇)
web前端笔试题集锦(HTML/CSS篇)
导读：网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目，欢迎参考阅读。
一、HTML/CSS
1，让一个input的背景颜色变成红色
2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
思路：
(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;
(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条
(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条
(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px
这样题目基本就完成了，不过浏览器的兼容性还不是很好。
3，IE、FF下面CSS的解释区别
(1) 让页面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的设置+text-align:center
(2) ff：不支持滤镜
ie：支持滤镜
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression来替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以显示手指状，FF下不行
(7) UL的默认padding和margin
IE下ul默认有margin，FF下ul默认有padding
(8) FORM的默认margin
IE下FORM有默认margin，FF下margin默认为0
4，一个定宽元素在浏览器(IE6，IE7，Firefox)中横向居中对齐的布局，请写出主要的.HTML标签及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)
5，CSS中margin和padding的区别
margin是元素的外边框，是元素边框和相邻元素的距离
Padding是元素的内边框，是元素边框和子元素的距离
6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
思路：
(1)布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择
(2)编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指
7，
中alt和tittle的区别
alt：图片显示不出来了就提示alt
title：鼠标划过图片显示的提示
8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
在这里我使用了两种方式：
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定宽度
自适应
二者的CSS公用，如下：
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9，解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被指定，则相对于浏览器的默认字体尺寸。
该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍
10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?
DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来
DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。
严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模式都支持，但是IE5只支持混杂模式。
可那个过DOCTYPE声明来判断哪种模式被触发
(1) 没有DOCTYPE声明的网页采用混杂模式解析
(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析
(3) 对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析
(4) 在ie6下，如果在DOCTYPE声明之前有一个xml声明比如
，采用混杂模式解析，在IE7，IE8中这条规则不生效。
(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：
区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。
常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的是边框，包围边框的是外边距。内边距，外边距，边框默认为0。
11，CSS引入的方式有哪些? link和@import的区别?
引入css的方式有下面四种
(1) 使用style属性
(2) 使用style标签
(3) 使用link标签
(4) 使用@import引入
Link和@import区别：
(1) link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS外，还可以做很多事情，如定义RSS，rel连接属性等;@import只能加载CSS
(2)加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引用的CSS会等到页面完全下载完之后才会加载
(3)兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列的浏览器IE5以上才能识别，而link没有这个问题
使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，@import不可以被DOM操作。
12，如何居中一个浮动元素?
一个浮动元素里面包含的元素可以水平居中，原理如下：
让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中
垂直居中类似，不过操作的不是left而是top
13，HTML5和CSS3的了解情况
有所了解
HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也开发出了不少基于他们的应用。
HTML5相对于原来的HTML规范有一些变化：
(1)DOCTYPE更简洁
(2)新增了一些语义化标签，如article,header,footer,dialog等
(3)新增了一些高级标签，如,,
CSS3相对于CSS2也新增了不少功能
(1) 选择器更加丰富
(2) 支持为元素设置阴影
(3) 无需图片能提供圆角
14，你怎么来实现下面这个设计图
(1) 切图
(2) 布局，采用两栏布局，分别左浮动
(3) 编写css代码
15，css 中id和class如何定义,哪个定义的优先级别高?
id：#***，***为HTML中定义的id属性
class:.***，***为HTML中定义的class属性
id比class的优先级高
16，用html实现如下表格(不如嵌套实用表格)
三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)
运行结果如下：
17，web标准网站有那些优点
(1) Web标准网站结构和布局分离，使网站的访问和维护更加容易
(2) Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好
(3) Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。
;❾ 常见的web前端面试题及答案分享
1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)
答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。
2、box-sizing常用的属性有哪些?分别有什么作用?
答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3、Doctype作用?标准模式与兼容模式各有什么区别?
答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
(7)新的技术webworker, websocket, Geolocation;
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!