《面试前一定要看知识点》由会员分享，可在线阅读，更多相关《面试前一定要看知识点（38页珍藏版）》请在金锄头文库上搜索。
1、前端开发面试知识点大纲： HTML （2）页面被加载的时，link 会同时被加载，而import 引用的 CSS 会等到页面被加载完再加载; （3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容 问题; （4）link 方式的样式的权重 高于import 的权重. 浏览器的内核分别是什么? * IE 浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink （WebKit 的分支）、Opera 内核原为 Presto，现为 Blink； 常见兼容性问题？ html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标
2、签的 浏览器兼容问题？如何区分 HTML 和 HTML5？ * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存 储，多任务等功能的增加。 * 绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢 失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、 section 、aside 表单控件，calendar、date、time、email、url、search 新的技术 webworker,
3、 websockt, Geolocation * 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes； 支持 HTML5 新标签： * IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式： * 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架 src=“ 如何区分： DOCTYPE 声明新增的
4、结构元素功能元素 语义化的理解？ 用正确的标签做正确的事情！ html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 HTML5 的离线储存？ localStorage长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 (写)描述一段语义的 html 代码吧。 （HTML5 中新增加的很多标签（如：、 和等） 就是基于语义化设计原则）
5、标题 专注 Web 前端技术 iframe 有那些缺点？ *iframe 会阻塞主页面的 Onload 事件； *iframe 和主页面共享连接池，而浏览器对相同域的连接有限制(6-8 目 前)，所以会影响页面的并行加载。 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是 通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localSto
6、rage 不会 sessionStorage 和 localStorage 的存储空间更大； sessionStorage 和 localStorage 有更多丰富易用的接口； sessionStorage 和 localStorage 各自独立的存储空间； CSS 介绍一下 CSS 的盒子模型？ （1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部 分包含了 border 和 pading; （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边 框(border). CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计
7、算？ CSS3 新增伪类有那些？ *1.id 选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul id class tag important 比 内联优先级高 CSS3 新增伪类举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元 素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元 素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。 p:only-child选择属于其父元素的唯一子元素的每个 元素。 p:nt
8、h-child(2) 选择属于其父元素的第二个子元素的每个 元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked单选框或复选框被选中。 如何居中 div？如何居中一个浮动元素？ 给 div 设置一个宽度，然后添加 margin:0 auto 属性 1. div 2.width:200px; 3.margin:0 auto; 4. 居中一个浮动元素 确定容器的宽高 宽 500 高 300 的层 设置层的外边距 1. .div 2.Width:500px ; height:300px;/高度可以不设 3.Margin: -150px 0 0 -250px; 4.
9、position:relative;相对定位 5.background-color:pink;/方便看效果 6.left:50%; 7.top:50%; 8. CSS3 有哪些新特性？ CSS3 实现圆角（border-radius:8px），阴影（box-shadow:10px） ， 对文字加特效（text-shadow、），线性渐变（gradient），旋转 （transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);/旋转,缩放,定位,倾斜 增加了更多的 CSS 选择器
10、 多背景 rgba 一个满屏 品 字布局 如何设计? 经常遇到的 CSS 的兼容性有哪些？原因，解决方法是什么？ 1. 就是 ie6 双倍边距的问题，在使用了 float 的情况下，不管是向左还是向右都会出现双 倍，最简单的解决方法就是用 display:inline;加到 css 里面去。 2. 文字本身的大小不兼容。同样是 font-size:14px 的宋体文字，在不同浏览器下占的空 间是不一样的，ie 下实际占高 16px，下留白 3px，ff 下实际占高 17px，上留白 1px，下 留白 3px，opera 下就更不一样了。解决方案：给文字设定 line-height 。确保所有文
11、字 都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。 3. ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容 撑大，而 ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。 4. 还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能 撑开容器宽度， ie 下则会优先考虑内容折行。 故， 内容可能撑破的浮动容器需要定义 width。 5. 浮动的清除，ff 下不清除浮动是不行的。 6. mirrormargin bug， 当外层元素内有 float 元素
12、时， 外层元素如定义 margin-top:14px， 将自动生成 margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该 类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元 素设定 border 或 设定 float。 7. 吞吃现象，限于篇幅，我就不展开了。还是 ie6，上下两个 div，上面的 div 设置背景， 却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象， 还有滚动下边框缺失的现象。解决方案：使用 zoom:1。这个 zoom 好象是专门为解决 ie6 bug 而生的
13、。 8. 注释也能产生 bug“多出来的一只猪。”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决 方案：用“!if !IE picRotate start !endif”方法写注释。 9. li/里加 float div/，这是一个典型的，棘手的兼容问题，希望引起大 家正视 ，给 li 不同的属性会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让 你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在ul 使用心得一文 里有相关成果，却没给出问题解决的过程。 10. img 下的留白。解决方
14、案：给 img 设定 display:block。 11. 失去 line-height。div style=”line-height:20px”img /文字 /div， 很遗憾， 在 ie6 下单行文字 line-height 效果消失了。 。 。 ， 原因是img /这个 inline-block 元素和 inline 元素写在一起了。 解决方案： 让 img 和文字都 float 起来。 12. 链接的 hover 状态。a:hover imgwidth:300px 我们想让鼠标 hover 时，链接 里包含的图片宽度变化，可惜在 ie6 下无效，ie7、ff 下有效。 13. 非链接
15、的 hover 状态。div:hover 这样的样式 ie6 是不认的，在 ie7、ff 下才有效 果。 14. ie 下 overflow:hidden 对其下的绝对层 position:absolute 或者相对层 position:relative 无效。解决方案：给 overflow:hidden 加 position:relative 或者 position:absolute。另，ie6 支持 overflow-x 或者 overflow-y 的特性，ie7、ff 不支持。 15. ie6 下严重的 bug， float 元素如没定义宽度， 内部如有 div 定义了 height 或
16、 zoom:1， 这个 div 就会占满一整行，即使你给了宽度。float 元素如果作为布局用或复杂的容器，都 要给个宽度的。 16. ie6 下的 bug，绝对定位的 div 下包含相对定位的 div，如果给内层相对定位的 div 高 度 height 具体值，内层相对层将具有 100%的 width 值，外层绝对层将被撑大。解决方 案给内层相对层 float 属性。 17. ie6 下的 bug，head/head内有base target=”_blank”/ 的情况下，position:relative 层下的 float 层内文字无法选中。 18. 终于来了个ff的缺点。 width:100%这个东西在ie里用很方便， 会向上逐层搜索width 值，忽视浮动层的影响，ff 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。opera 这点倒学乖了跟了 ie。 为什么要初始化 CSS 样式。 - 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同
