前端面试总结

HTML

• doctype意义
• html xhtml区别
• 理解样式结构分离
• 块级元素行内元素区别，分别有哪些
• 怎么样让元素透明，怎么隐藏？什么区别？
• 做一个页面，有头部，尾部，内容左栏自适应，右边宽度200px
• Html5里input有哪些类型
• img标签的title和alt是什么
• 理解html语义化，有什么优点

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
优点1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构； 2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； 3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 4. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

CSS

• 如何使一个div四各边框上下左右颜色是红黑蓝黄
• 做一个图片瀑布墙
• 什么是CSSsprite
• 用ul li做一个navbar
• 怎么取消li的默认样式
• 如何实现div水平居中，垂直居中？vertical-align的值分别怎么用
• span能设置宽高吗？inline inline-block什么区别？
• 设置a链接的颜色，hover颜色，取消下划线
• 什么是响应式设计 媒体查询
• 浮动带来的问题？清除浮动的几种方法
• 浮动双边距、hover兼容性、边距重合、最小高度、PNG透明
• 写个双飞翼布局
• css hack几种方式
• 盒模型、display几种方式
• 绝对定位、相对定位、固定定位、z-index
• 浮动、清除浮动的方式
• css3新特性:圆角,渐进色, background-size, transform, transition, @keyframe
• flex布局
• 图片在Retina屏幕显示
• 移动开发viewport怎么设定
• 伪类选择器有哪些
• dispaly:none 和 visibility: hidden 区别

JS

• js有几种数据结构
• [严格相等和相等、布尔空值](https://developer.mozilla.org/zh-- CN/docs/Web/JavaScript/Equality_comparisons_and_sameness)
• 函数声明、表达式、var定义提前、function提前
• dom增删改查
• 事件绑定、代理、冒泡捕获、取消默认、阻止冒泡
• 闭包
• 图片懒加载怎么实现
• 写个类，继承
• 写个深拷贝
• 同步和异步有什么区别，说说你见过的异步，js加载如何实现延迟加载
• 什么是jsonp，ajax？写一个ajax
• jquery里this和$(this)的区别
• jquery元素和dom元素转化
• 写一个对象，实现继承(prototype)
• 扩展js内置对象：Array.prototype.duplicate = function(){}
• apply，call有什么区别，什么用

综合

• POST与GET有什么区别
• 打开浏览器，百度，输入“前端”，浏览器展示页面，这一系列过程后台做了什么
• http协议200，302，404什么意思
• 同源策略是什么，解决跨域有哪些方法
• 用过哪些哪些工具？sublime，svn，git
• 性能优化有哪些方法
• 有哪些浏览器内核，做开发兼容哪些浏览器
• ff，ie兼容举例
• 对H5的认识，有哪些新东西
• 快速排序，时间复杂度
• 优雅降级和渐进增强？
• 前端工程化
• 对新知识的了解：less, mvc, node, es6...

知识扩展

• linux基础命令
• 数据库基本知识
• http协议
• 基本算法（排序、链表、二叉树）

其他

• 你最近学哪些新知识
• 关注过哪些人的博客
• 你为什么离职
• 对我们公司和这个岗位有什么了解
• 怎么看待加班
• 职业规划是什么