1.太平洋科技有限公司面试题

// 太平洋网络
一.选择题（每题2分，共30分， 有些题目为多选题）
1.H5拥有多个新的表单输入类型，下列哪个不属于H5的输入类型：（C）
A.email B.Date pickers C.Region pickers D: search

2.下列哪些标签可以替代flash的部分功能 （D）
A.img B.canvas C.svg D.video

3.在video标签中，用来控制视频在页面中播放的属性是（D）
A.playsinside B.playsinscreen C.playsinpage D.playsinline

4..selector{animation: myfirst 5s linear 2s 1 alternate} 在前面的样式定义中，下列哪个说法不正确（D）
延迟2s后开始播放（2s）
A.该动画每次持续时间是5秒（5s）
B.该动画从头到尾的速度是相同的（linear）
C.该动画只播放一次(1)
D.该动画应该轮流反向播放（alternate）

5.某样式中有

文本

,如何修改样式表，使文本呈现红色？（D）
A. .a span{color: red} B. body .a #b{color: red}
C. #b{color: red} D. .a span{color: red !important}

6.下列属于CSS伪类的是：（A，B，C, D）
A.lang B.focus C.link D.first-child

7.下列原生JS代替JQ的例子中，没有兼容性问题的是（C）
A.$('selector') -> document.querySelectorAll('selector')
(IE6, 7 不支持)
B.$element.addClass('test') -> element.classList.add('test')(ie9以及以下等不支持)
C.$element.data('test') -> element.getAttribute('test')
D.$element.bind('click', func) -> element.addEventListener('click', func)(IE 8 及更早IE版本不支持)

8.在JS中如何阻止事件冒泡？（A, B）
A. e.stopPropagation() B. window.event.cancelBubble = true
C. stopPropagation = "always" D.window.event.cancelBubble = false
cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。
兼容性用法：
function stopPropagation(evt) {
if (typeof evt.stopPropagation == "function") {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}

9. for(var i = 0, k = 0; i < 10; i++) {k += i},求k的值（D）
   A.40 B.41 C.42 D.45

10.在a标签的href属性中，填入下列哪个可以实现跳转（A， B）
A. http://www.baidu.com/ B.//www/baidu.com.cn
C. https://www.baidu.com/ D.javascript:void(0)（当用户点击以后不会发生任何事）

function b(x, y, a) {
a = 5
console.log(arguments[2])
}
function c(x, y, a) {
arguments[2] = 10
console.log(a)
}
b(1, 2, 3)
c(4, 5, 6)
执行b(1, 2, 3), c(4, 5, 6)后，控制台输出的值分别是（B）
A. 3, 10 B.5, 10 C.3, ,6 D.5, 6

12.下列结果为真的表达式是（C）
A. "0" == null B. 0 == null
C. "" == 0 D. new String("foo") === "foo"(类型改变了，前面的是object)

13.下面哪些方法不能用于对象的继承（C）
A.对象冒充方法 B.原型链方法
C.动态原型方法（创建对象的方式） D.对象冒充与原型链混合方法

14.微信小程序的图片组件是（A）
A.
B.
C.
D.（html里面的写法）

15.下列哪个单位可以用于微信小程序的样式表中（A， B， C）
A.rpx B.px C.rem D.em

二.填空题（每题3分，共30分）

13. .class{font-size: 14px; line-height: 24px; font-family: "Arial"; font-weight: bold}
    的合并写法是（.class{font: bold 14px/24px "Arial"}）

14.引入外部CSS的方式有哪些？（link, @import）

15.微信小程序图片组件的缩放模式中，（mode：widthFix）是宽度不变，高度自动变化，保持原图比例。

16.H5的文档类型（Doctype）是 （）

The content of the document......

17.影响页面性能的标签是（？）
减少HTML标签嵌套深度，嵌套越深，在移动端的Web页面渲染速度以及滚动流畅度都会有所减低。？

18.号码段为13， 14， 15， 17， 18的11位手机号码正则校验（^1[34578]\d{9}$）

var a = 10
function show() {
console.log(a)
var a = 3
console.log(a)
}
show()
当执行show()，控制台输出的结果是（undefined 3）

20.数组 array=["welcome", "to", "pcGroup"],执行array.join('.')后得到的结果是（"welcome.to.pcGroup"）

21.程序中捕获异常的方法是（）
// try 语句测试代码块的错误。
// catch 语句处理错误。
// throw 语句创建自定义错误。

var name = 'pconline'
var org = {
name: "pcGroup",
getOrgName: function() {
return function() {
console.log(this.name)
}
}
}
org.getOrgName()()
当执行org.getOrgName()()后，控制台输出的结果是（pconline）

三.问答题（20分）
23.随着时代的进步，前端开发所对应的终端越来越多，尤其近年，手机屏幕尺寸多种多样，
前端开发如何用尽可能少的代码实现移动端布局？请结合你自身的经验，
从html,js,css等角度说明你的做法。
1)在HTML的头部加入meta标签
2)百分比布局
3)响应式页面的实现(一种是利用媒体查询，另外一种是bootstrap下的栅格布局)
4)页面使用相对字体(相对长度单位em, 相对长度单位rem )
5)Js动态设置rem来实现移动端字体的自适应
参考：https://blog.csdn.net/duzanuolu/article/details/63135402

四：综合题（20分）
24.如何做一个好的前端开发工程师？（可从自身成长，职业规划等方面进行简述）

1. 多写。很多问题都是积累得来的。写了，遇到了，才能去真正理解解决方案，才会随着自己的不断成长而有进步。
   别人问我为什么知道那么多 CSS 兼容解决方案，为什么一看就出的时候，我只能告诉他，我写了 20 几个 Wordpress 主题。
2. 看书。看 BLOG 或者一些网上的教程，都很难让你全面理解一个东西的。坚持看书，
   至少前端相关的语言都看一本。CSS 的推荐 《精通CSS》，JS 推荐 《Javascript 高级程序设计》现在都是第 2 版了。
3. 读 BLOG。最后你会发现，很多东西大家都会。但只有某些人才解决得了某些细节性的东西，这些人就是我们所谓的高手。
   很大牛在 BLOG 不会写一些简单的 List, 而是针对某个问题深入研究。这时看 BLOG 对于进阶非常有帮助。
4. 去学一门后端语言。怎么说呢，实际用到会很少。但会很有利于一些问题的理解。
   比如 Ajax。还有 HTML5 中像 Web sockets、post message 之类的 API。
5. 去用很多产品，至少去爱一个产品。你不止是一个前端，你还应该是一个设计者，去用很多产品，
   你才会发现技术为什么有用，去爱一个产品，你才会把技术用得更好。
   参考：https://www.zhihu.com/question/19554845