本文档包含前端面试中常见的基础知识和技术问题解答，覆盖HTML、CSS、JavaScript等核心技能，并提供了实际代码示例。
*****************************以下答案只是个人回答，做个参考，呵呵*****************************
一、基础知识（html、css、javascript）
1、标莶语义化角度描述strong与em、article与section的区别是什么？
strong：加粗；
em：斜体；
article：页面或应用程序中独立的、完整的，可以单独被外部引用的内容，可以是文章、博客、帖子、评论或者一个独立插件；
section：对页面或应用程序的内容进行分块，一般由标题与内容组成；
2、强制换行的CSS是什么？
word-wrap:break-word;
word-break-break-all;
3、列举四大渲染引擎并把其代表浏览器写出来？
Trident--IE；
Gecko--FF；
Webkit--Safari、Chrome；
Presto--Oprea
4、标莶内样式、内联样式、外联样式、！important 它们的优先顺序是什么？
!important > 行内样式 > 内嵌样式 > 外联样式
5、列举具有display:inline-block的特性常见标莶？如何触发IE6、IE7下块级元素拥有inline-block特性？
img
zoom:1;
6、如何让一个浮动列表居中?
width + margin:0 auto
7、Css sprite的优点和缺点是什么？
优：减小图片体积/减少图片请求次数/方便样式修改；
缺：需要精确定位，工作量大且繁琐，后期维护也麻烦/拼合图片不利于平铺；
8、写出你认为现今比较实用的CSS3属性？
圆角：border-radius
盒子阴影：box-shadow
文字阴影：text-shadow
渐变：gradient
动画：transform/transition/animation
透明色：rgba
边框色：border-color
边框图片：border-image
盒模型：box-sizing
自定义字体：font-face
多背景图片：muti-backgrounds
背景尺寸：background-size
背景剪辑：background-clip
背景原点：background-origin
多列属性：muti-columns
弹性盒模型：box-flex
媒介查询：media queries
9、常用的javascript框架有哪些？
JQuery
Sencha EXTJs
YUI
Dojo
可参考地址：
http://www.oschina.net/news/16483/16-popular-javascript-frameworks
http://www.cnblogs.com/stalwart/archive/2010/09/18/1830471.html
10、$(window).load(function(){})和$(document).ready(function(){})的区别？
前者：页面所有内容加载完才开始执行函数；
后者：dom元素加载完就开始执行函数；
二、综合知识
1、简述题
1）、简述对标莶语义化的理解？
参考地址：
http://www.cnblogs.com/xiaohui108/archive/2011/03/14/1984106.html
http://blog.163.com/l_lihanyu/blog/static/12003272320105211145106/
2）、简述对渐进增强的理解？
用一些额外的信息去包裹原始数据，如可以利用CSS去修饰页面，JS去添加行为动作等；
3）、简述有哪些方法可以提升网站前端性能？
减少页面请求次数（拼合背景图片，合并CSS与JS，减少独立文件个数）；
减少DNS查找次数；
使用CDN（内容分发网络）;
使用gzip压缩网页内容；
使用Ajax缓存；
将CSS文件放在<head></head>标签内；
将JS文件放在</body>之前；
为文件头部指定Expires或Cache-control；
删除重复代码；
配置ETag；
避免重定向；
参考地址：
http://hi.baidu.com/ggb946/blog/item/81657b9962f7fe0db21bba7f.html
http://yaasshole.iteye.com/blog/1437094
4）、列举您所熟知的浏览器bug，如何避免或解决？
IE6 3pxBug；
IE6 双倍margin；
IE6 躲猫猫Bug；
IE6 克隆广本；
IE6/7 overflow:auto与position:relative碰壁；
Li的阶梯列表；
Li的空白间距；
Img底部4px空白；
参考地址：
http://hi.baidu.com/zhangqian04062/item/c5603400ecff4419cd34ea3c
5）、简述您对haslayout的了解？
haslayout是IE渲染引擎的一个内部组成部分。页面元素通常有两种类型：
a、自己对自身内容进行计算大小和组织；
b、依据父元素来计算大小和组织；
为了协调这两个不同的概念，渲染引擎采用了haslayout的属性，其值为true或false。当haslayout值为true时，这个元素便有了布局，即layout。
6）、列举您熟练的前端开发工具以及它的作用是什么？
FastStone Capture（截图、取色）；
MarkMan（获取坐标、设置放大镜）；
ACDSee及Picaview（看图软件）；
FF插件（FireBug、WebDeveloper、CssUsage、YSlow等）；
IE（ToolBar、HttpWatch、WebDeveloper、DeBugBar）；
IETester（IE多浏览器调试）；
JSMin／YUI Compressor（JS压缩工具）；
其他：
http://incident57.com/codekit/
http://liuchang.sinaapp.com/2012/03/csstool/
http://mozilla.com.cn/addon/120/
http://css3pie.com/
7）、简述您对前端开发这个职位的理解及他在产品团队中的价值？
前端开发----与交互设计师、视觉设计师协作，根据设计图用html+css完成页面制作；
价值----前端开发工作师在一个项目中起着承上启下的作用，即要与上游的交互设计师协作又要与下游的程序配合。用户使用体验及前端性能优化都离不开前端，在一个项目的开发中，只有各个岗位的相互协调才能高效地完成一个项目。
8）、HTTP状态码 200、304、400、403、404等各自代表意思是什么？
200 服务器成功返回网页；
304 未修改请求网页；
400 服务器不理解请求的语法；
403 服务器拒绝请求；
404 请求的网页不存在；
参考地址：
http://blog.sina.com.cn/s/blog_6a72b0d001014anp.html
9）、有没有关注HTML5和CSS3?在项目中得到了体现有哪些？
【答案因人而异】
10）、简述html5与flash各自的优缺点以及它们的关系?
两者是互补的，他们的想到补充才使得互联网上的内容越来越丰富，用户体验越来越好。
HTML5标准中新出的video，audio功能，可以实现视频、音频等的播放效果，在某种程序上与flash实现的效果是一致的。随着各种现代浏览器对html5的支持，世界上最大的视频分享网站Youtobe也渐渐地推行出无flash的改革策略。
HTML5
优：一种新标准，更具语义化；
缺：对浏览器的支持度有限，在各浏览器中的表现也不一；
FLASH
优：功能强大，应用广；
缺：耗网速；
参考地址：
http://site.douban.com/widget/notes/2368540/note/153656806/
11）、当你与视觉设计师或研发工程师合作中有意见分歧时如何解决？
【答案因人而异】
12）、最近看过什么书，平时关注的网站亦或是博客？参加过哪些行业峰会？
【答案因人而异】
2、操作题（写出关键代码即可）
1）、side左边宽度固定，main右边宽度自适应（不能用定位且main优先加载）。
CSS
<style type="text/css">
body { margin:0; }
.wrap { overflow:hidden; width:960px; margin:50px auto; border:1px solid #ccc; }
.main,.aside { float:left; height:200px;}
.main { width:100%; padding:10px 0; background:#eee; }
.mainCnt { padding:0 10px; margin-right:220px; }
.aside { width:200px; padding:10px; margin-left:-220px; background:#ace; }
</style>
HTML
<div class="wrap">
<div class="main"><div class="mainCnt">main content</div></div>
<div class="aside">aside</div>
2）、用javascript写出依次读取列表ol中所有li的值。（结构格式如下，需兼容主流浏览器）。
<ol id=”list”>
<li>CSS</li>
<li>DOM</li>
…
<li>列表n</li>
</ol>
<script type="text/javascript">
var lst = document.getElementById("list").getElementsByTagName("li");
for(var i=0; i<lst.length; i++){
alert(lst[i].innerText);
}
</script>
三、可选题
1）、什么是匿名函数？
匿名函数是指一类无需定标识符（函数名）的函数或子程序；
2）、什么是冒泡？如何解决冒泡问题？
冒泡是JS事件中的一个重要特性。当一个元素上的事件被触发时（比如鼠标点击了一个按钮），同样的事件会在这个元素的所有祖先元素上被触发。这一过程被称为事件冒泡，这个事件从原始元素开始一直到DOM树的最上层。
解决方法：
window.event.cancelBubble = true (IE)
event.stopPropagation() event.preventDefault() (Firefox)
补充：
IE下也可以用onMouseEnter/onMousrLeave来代替onMouseOver/onMouseOut事件；
参考地址：
http://www.cnblogs.com/manhoo/archive/2009/10/09/1579643.html
3）、用段通俗的话来解释闭包？
闭包是一个拥有了许多变量和绑定了这些变量的环境表达式（通常是一个函数），因而这些变量也是该表达式的一部分。通俗地讲，也就是JS中所有的函数都是一个闭包，而嵌套的函数闭包更为强大。
参考地址：
http://www.cnblogs.com/zhjjNo1/archive/2011/02/12/1951905.html
4）、简述对“如果要精于前端开发这一行，也许要先精十行。”这句话的理解？
5）、制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
6）、经常看到页面里加载的js与css文件带有参数。这样做的目的是什么？
7）、简述浏览器加载和渲染原理？
8）、简述对wap2.0和Android\iPhone\ipad页面重构有什么心得？
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
