前端面试题专题（一）

一、谈谈你对 Web 标准以及 W3C 的理解和认识。

参考解答：

1. 标签小写、闭合、具有语义化

2. 外链CSS和JS脚本

3. 结构、样式、行为分离

4. 代码精简，组件化开发

5. 代码易维护，可复用
   

二、CSS有哪些基本选择器？他们的权重是如何表示的？

参考解答：

1. 类选择器 0.0.1.0
   

2. 属性选择器 0.0.1.0
   

3. ID选择器 0.1.0.0
   

   !important > 内联(1.0.0.0) > id(0.1.0.0) > 类、属性、伪类(0.0.1.0) > 元素、伪元素(0.0.0.1) > 通配符(0.0.0.0)
   

三、HTML5有哪些新特性？移除了哪些元素？

参考解答：

新特性：

1. 拖放API (drag, drop)
   

2. 语义化更好的标签内容(header, nav, footer, aside, article, section)

3. 音频视频API (audio, video)
   

4. 画布API (canvas)

5. 地理位置API (Geolocation)

6. 本地离线存储 (localStorage)

7. 会话存储 (sessionStorage)

8. 表单控件 (calendar, date, time, email, url, search)

9. 新技术 (webworker, websocket)

   
   

   移除元素：

   1. basefont, big, center, font, s, strike, tt, u

   2. frame, frameset, Noframes
   

四、CSS3有哪些新特性？

参考解答：

1. 圆角 (border-radius)

2. 阴影 (box-shadow)
   

3. 文字特效 (text-shadow)

4. 线性渐变 (gradient)
   

5. 变换: 旋转、缩放、定位、倾斜 (tranform)
   

6. 更多CSS选择器 （子串匹配属性选择器Ele[attr^="value"]、普通兄弟选择器~）
   

7. 多背景图 (multiple background images)
   

8. 色彩模式 (rgba)
   

9. 伪元素 (::after, ::before)

10. 媒体查询 (@media)
    

11. 多栏布局 (multi-columns 、 flexible box 与 grid layouts)
    

12. 图片边框 (border-image)
    

五、在Bootstrap中，下面栅格系统的标准用法中哪个是错误的？

1. <div class="container"><div class="row"></div></div>

2. <div class="row"><div class="col-md-1"></div></div>

3. <div class="row"><div class="container"></div></div>

4. <div class="col-md-1"><div class="row"></div></div>

参考解答：C

1. .row必须包含在.container容器中，A对C错

2. .row中可以添加.column列，B对

3. 同a

4. .column中可以嵌套.row行，D对
   

六、Javascript有哪些垃圾回收机制？

参考解答：

1. 标记清除：函数中申明变量（进入环境）, 函数执行结束（离开环境），垃圾回收器会删除没有引用的变量。
   

2. 引用计数：引用计数的策略是跟踪记录每个值被使用的次数。变量引用次数为0的空间会被清理。
   

七、你觉得jQuery或Zepto源码有哪些地方写得好？

参考解答：

1. jQuery源码封装在匿名自执行函数中，防止变量对全局环境的污染

2. 传入参数window可更快访问window对象，传入undefined避免被重定义

3. 原型属性和方法封装在jQuery.prototype中并赋值给jQuery.fn方便访问
   

4. 常用数组和对象方法保存为局部变量，提高访问速度

5. 链式调用，节约代码，提高开发效率
   

八、在移动端，单击穿透是什么？

参考解答：

单击穿透现象有三种：蒙层单击穿透、页面单击穿透、跨页面单击穿透

点击某个位置按钮，触发下层元素事件。

九、如何解决不同浏览器的标签默认的margin值和padding值得不同？

参考解答：

重置默认样式

body,h1,h2,h3,ul,li,input,div,span,a,form .... {  margin: 0;  padding: 0;}// 或者使用通配符** {  margin: 0;  padding: 0;}

十、JavaScript是怎么样实现继承的？请举例说明。

参考解答：

JavaScript通过prototype属性实现继承，继承的属性方法是共享的，例如Child子类继承Parent父类：

Child.prototype = new Parent()

function Child() {  Parent.apply(this, arguments)}