前端面试题

自己整理了一些关于前端这个行业面试题，有什么不足   各位大佬多多指教.

 

HTML&CSS

1.常用那几种浏览器测试？有哪些内核(Layout Engine)?

　　 IE: trident内核

　　Firefox: gecko内核

　　Safari: webkit 内核

　　Opera: 以前是presto内核,Opera现在改用 Google Chrome的Blink内核

　　 Chrome:Blink(基于webkit，Google与Opera Software共同开发)

 

2.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗Doctype的作用？严格模式与混杂模式的区别？

　　<!DOCTYPE> 用于告知浏览器以何种模式来渲染文档.

　　严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行　

　　混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

　　DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

　　<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

　　此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

 

　　拓展

　　HTML：HyperText Markup Language，超文本标记语言

　　XHTML：Extensible HyperText Markup Language，可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。

　　与HTML对比

　　　　1.所有的标记都必须要有一个相应的结束标记

　　　　2.所有标签的元素和属性的名字都必须使用小写

　　　　3.所有的XML标记都必须合理嵌套

　　　　4.所有的属性必须用引号""括起来

　　　　5.把所有<和&特殊符号用编码表示

　　　　6.给所有属性赋一个值

　　　　7.不要在注释内容中使“--”　　

　　　　8. 图片必须有说明文字

　　如何将 HTML 转换为 XHTML：

  1. 添加一个 XHTML <!DOCTYPE> 到网页中。
  2. 添加 xmlns 属性到每个页面的 html 元素中。
  3. 修改所有的元素为小写。
  4. 关闭所有的空元素。
  5. 修改所有的属性名称为小写。
  6. 所有属性值添加引号

3.Quirks模式是什么？它和Standards模式有什么区别　

　　从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

　　在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差，IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

　　在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

　　DTD：文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。

　　区别：

　　总体会有布局、样式解析和脚本执行三个方面的区别。

  1. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

　　 2. 设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

　　 3. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

　　 4. margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

　　 （还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）

4. div+css 的布局 比 table 布局 有什么优点?

　　1.结构与样式分离,结构化清晰,页面显示简洁.

　　2.页面加载的速度更快.

　　3.便于后期的维护.(改版的时候更方便   只要改css样式即可)

　　4.易于优化(SEO) 搜索引擎更友好,排名更容易靠前.

5.行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

　　1.行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

　　2.块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

　　兼容性：display:inline-block;   display:inline;     zoom:1;

6.img的alt与title有何异同？ strong与em的异同？　

　　a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文　字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

　　title(tool tip):该属性为设置该属性的元素提供建议性的信息。

 

　　strong:粗体强调标签，强调，表示内容的重要性

　　em:斜体强调标签，更强烈强调，表示内容的强调点

7.你能描述一下渐进增强和优雅降级之间的不同吗?　

　　渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

　　优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

　　“优雅降级”观点

　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

　　“渐进增强”观点

　　“渐进增强”观点则认为应关注于内容本身。

　　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

8.为什么利用多个域名来存储网站资源会更有效？

　　CDN 缓存更方便

　　突破浏览器并发限制

　　节约cookie 带宽

　　节约主域名的连接数,优化页面响应速度

　　防止不必要的安全问题

9.请谈一下你对网页标准和标准制定机构重要性的理解。

 

　　网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

10.请描述一下cookies，sessionStorage和localStorage的区别？　

　　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

　　Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

　　除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

　　存储大小：
　　cookie数据大小不能超过4k。
　　sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

　　有效时间:

　　localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
　　sessionStorage  数据在当前浏览器窗口关闭后自动删除。
　　cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

11.简述一下src与href的区别。

　　src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

　　src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

　　<script src =”js.js”></script>

　　当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

　　href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

　　<link href=”common.css” rel=”stylesheet”/>

　　那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

12.网页制作会用到的图片格式有哪些？　　

　　png-8，png-24，jpeg，gif，svg, Webp

13.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？　

　　dns缓存，cdn缓存，浏览器缓存，服务器缓存

14.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

　　图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

　　如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

　　如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

　　如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

　　如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15.你如何理解HTML结构的语义化？　

　　1. 当页面样式加载失败的时候能够让页面呈现出清晰的结构

　　2. 有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）

　　3. 便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

　　去掉或样式丢失的时候能让页面呈现清晰的结构：

　　html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

　　屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

　　例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

　　PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

　　使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

　　语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

　　搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

　　过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

　　你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

　　因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.

　　SEO主要还是靠你网站的内容和外部链接的。

　　便于团队开发和维护

　　W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

16.谈谈以前端角度出发做好SEO需要考虑什么？

　　了解搜索引擎如何抓取网页和如何索引网页

　　你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

　　Meta标签优化

　　主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

　　如何选取关键词并在网页中放置关键词

　　搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

　　了解主要的搜索引擎

　　虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

　　主要的互联网目录

　　Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

　　按点击付费的搜索引擎

　　搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

　　搜索引擎登录

　　网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

　　链接交换和链接广泛度（Link Popularity）

　　网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

　　合理的标签使用

17、有哪项方式可以对一个DOM设置它的CSS样式？

　　外部样式表，引入一个外部css文件

　　内部样式表，将css代码放在 <head> 标签内部

　　内联样式，将css样式直接定义在 HTML 元素内部

18、CSS都有哪些选择器？

　　派生选择器（用HTML标签申明）

　　id选择器（用DOM的ID申明）

　　类选择器（用一个样式类名申明）

　　属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

　　除了前3种基本选择器，还有一些扩展选择器，包括

　　后代选择器（利用空格间隔，比如div .a{  }）

　　群组选择器（利用逗号间隔，比如p,div,#a{  }）

 

　　那么问题来了，CSS选择器的优先级是怎么样定义的？

　　基本原则：

　　一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

　　复杂的计算方法：

　　　　用1表示派生选择器的优先级

　　　　用10表示类选择器的优先级

　　　　用100标示ID选择器的优先级

　　　　　　div.test1 .span var 优先级 1+10 +10 +1

　　　　　　span#xxx .songs li 优先级1+100 + 10 + 1

　　　　　　#xxx li 优先级 100 +1

 

19、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

　　最基本的：设置display属性为none，或者设置visibility属性为hidden

 

　　技巧性：设置宽高为0，设置透明度为0，设置z-index位置在-1000

20、超链接访问过后hover样式就不出现的问题是什么？如何解决？

　　被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

21.什么是外边距重叠？重叠的结果是什么？　　

　　外边距重叠就是margin-collapse。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。　　

　　折叠结果遵循下列计算规则：

　　　　两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

　　　　两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

　　　　两个外边距一正一负时，折叠结果是两者的相加的和。

22.rgba()和opacity的透明效果有什么不同？

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

23.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？　

　　垂直方向：line-height

　　水平方向：letter-spacing      可以用于消除inline-block元素间的换行符空格间隙问题。

24.px和em的区别。

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

25.Sass、LESS是什么？大家为什么要使用他们？

　　他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

　　　　结构清晰，便于扩展。

　　　　可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

　　　　可以轻松实现多重继承。

　　完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译

26.display:none与visibility:hidden的区别是什么？

　　display : 隐藏对应的元素但不挤占该元素原来的空间。

　　visibility: 隐藏对应的元素并且挤占该元素原来的空间。

　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

27.CSS中link和@import的区别是：

　　Link属于html标签，而@import是CSS中提供的

　　在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS

　　@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题

　　Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

28.简介盒子模型：　

　　CSS的盒子模型有两种：IE盒子模型、标准的W3C盒子模型模型

　　盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

29.为什么要初始化样式？

　　由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异

初始化CSS会对搜索引擎优化造成小影响

30.BFC是什么?

　　BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题

　　BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

31.IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。

　加入_display：inline

32.html常见兼容性问题？

　　1.双边距BUG float引起的  使用display

　　2.3像素问题 使用float引起的 使用dislpay:inline -3px  

　　3.超链接hover 点击后失效  使用正确的书写顺序 link visited hover active

　　4. z-index问题 给父级添加position:relative

　　5.Png 透明 使用js代码 改

　　6.Min-height 最小高度 ！Important 解决’

　　7.select 在ie6下遮盖 使用iframe嵌套

　　8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

　　9.IE5-8不支持opacity，解决办法：

　　.opacity {

    　　opacity: 0.4

    　　filter: alpha(opacity=60); /* for IE5-7 */

   　　 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

　　}

　　10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

33.行内元素有哪些?块级元素有哪些?CSS的盒模型?　　

　　块级元素：div p h1 h2 h3 h4 form ul
　　行内元素: a b br i span input select
　　Css盒模型:内容，border ,margin，padding

34.清除浮动有哪些方式？比较好的方式是哪一种？
　　（1）父级div定义height。
　　（2）结尾处加空div标签clear:both。
　　（3）父级div定义伪类:after和zoom。
　　（4）父级div定义overflow:hidden。
　　（5）父级div定义overflow:auto。
　　（6）父级div也浮动，需要定义宽度。
　　（7）父级div定义display:table。
　　（8）结尾处加br标签clear:both。


　　比较好的是第3种方式，好多网站都这么用。

35.box-sizing常用的属性有哪些？分别有什么作用？
　　 box-sizing: content-box|border-box|inherit;
　　content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
　　border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

36.HTML5 为什么只需要写 <!DOCTYPE HTML>？
　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
　　而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

37.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

　　HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
　　　　(1)绘画 canvas;
　　　　(2)用于媒介回放的 video 和 audio 元素;
　　　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
　　　　(4)sessionStorage 的数据在浏览器关闭后自动删除;
　　　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
　　　　(6)表单控件，calendar、date、time、email、url、search;
　　　　(7)新的技术webworker, websocket, Geolocation;

　　IE8/IE7/IE6支持通过document.createElement方法产生的标签，
　　可以利用这一特性让这些浏览器支持HTML5新标签，
　　浏览器支持新标签后，还需要添加标签默认的样式。
　　当然也可以直接使用成熟的框架、比如html5shim;
　　<!--[if lt IE 9]>
　　<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
　　<![endif]-->

38.简述一下你对HTML语义化的理解？
　　用正确的标签做正确的事情。
　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
　　使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

39.iframe有那些缺点？
　　iframe会阻塞主页面的Onload事件；
　　搜索引擎的检索程序无法解读这种页面，不利于SEO;
　　iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
　　使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
40.如何实现浏览器内多个标签页之间的通信?
　　WebSocket、SharedWorker
　　也可以调用localstorge、cookies等本地存储方式。
　　localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
　　注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。
41.如何在页面上实现一个圆形的可点击区域？
　　（1）map+area或者svg
　　（2）border-radius
　　（3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
42.CSS优先级算法如何计算？
　　优先级就近原则，同权重情况下样式定义最近者为准;
　　载入样式以最后载入的定位为准;
　　优先级为:
　　!important >  id > class > tag
　　important比内联优先级高(style)
43.为什么要使用CSS sprites
　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。
44.display:none和visibility:hidden的区别？
　　display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
　　visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。
45.position的absolute与fixed区别
　　absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素
　　fixed浮动定位是相对于浏览器视窗的
46.IE 8以下版本的浏览器中的盒模型有什么不同？
　　IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

47、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

   　　 *   1.id选择器（ # myid）

      　　  2.类选择器（.myclassname）

       　　 3.标签选择器（div, h1, p）

       　　 4.相邻选择器（h1 + p）

       　　 5.子选择器（ul < li）

       　　 6.后代选择器（li a）

       　　 7.通配符选择器（ * ）

       　　 8.属性选择器（a[rel = "external"]）

       　　 9.伪类选择器（a: hover, li: nth - child）

   　 *   可继承： font-size font-family color, UL LI DL DD DT;

  　  *   不可继承 ：border padding margin width height ;

       *   优先级就近原则，样式定义最近者为准;

       *   载入样式以最后载入的定位为准;

 

　　优先级为:

       !important >  id > class > tag  

       important 比 内联优先级高

 

　　CSS3新增伪类举例：

    　　p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    　　p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    　　p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

  　　  p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。

   　　 p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

   　　 :enabled、:disabled 控制表单控件的禁用状态。

    　　:checked，单选框或复选框被选中。

48.如何居中div  如何居中一个浮动元素?　

　　给div设置一个宽度，然后添加margin:0 auto属性

    　　div{

        　　width:200px;

        　　margin:0 auto;

     　　}

　　

　　居中一个浮动元素

     　　 确定容器的宽高 宽500 高 300 的层

      　　设置层的外边距

     　　.div {

     　　 Width:500px ; height:300px;//高度可以不设

      　　Margin: -150px 0 0 -250px;

     　　 position:relative;相对定位

     　　 //方便看效果

      　　left:50%;

　　　　top:50%;

    　　} 

49.哪些css属性可以继承？

　　可继承： font-size font-family color, ul li dl dd dt;

  　 不可继承 ：border padding margin width height ;

JavaScript

1.介绍js的基本数据类型
　　Undefined、Null、Boolean、Number、String
2.js有哪些内置对象？
　　数据封装类对象：Object、Array、Boolean、Number 和 String
　　其他对象：Function、Arguments、Math、Date、RegExp、Error
3.this对象的理解
　　this总是指向函数的直接调用者（而非间接调用者）；
　　如果有new关键字，this指向new出来的那个对象；
　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
4.eval是做什么的？
　　它的功能是把对应的字符串解析成JS代码并运行；
　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
5.DOM怎样添加、移除、移动、复制、创建和查找节点

// 创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById()    //通过元素Id，唯一性

6.null和undefined的区别？
　　null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
　　undefined：
　　　　（1）变量被声明了，但没有赋值时，就等于undefined。
　　　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
　　　　（3）对象没有赋值的属性，该属性的值为undefined。
　　　　（4）函数没有返回值时，默认返回undefined。
　　null：
　　　　（1） 作为函数的参数，表示该函数的参数不是对象。
　　　　（2） 作为对象原型链的终点。
7.new操作符具体干了什么呢?
　　（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
　　（2）属性和方法被加入到 this 引用的对象中。
　　（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。
8.JSON 的了解？
　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
　　格式：采用键值对，例如：{'age':'12', 'name':'back'}
9.call() 和 apply() 的区别和作用？

　　call()和apply()相同点：

　　都是为了用一个本不属于一个对象的方法，让这个对象去执行


　　apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
　　　　如：function.apply(this,[1,2,3]);
　　call()的第一个参数是上下文，后续是实例传入的参数序列。
　　　　如：function.call(this,1,2,3);　

10.如何获取UA？

    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }

11.JS数组去重(三种方法)　

Array.prototype.unique1 = function () {
  var n = []; //一个新的临时数组
  for (var i = 0; i < this.length; i++) //遍历当前数组
  {
    //如果当前数组的第i已经保存进了临时数组，那么跳过，
    //否则把当前项push到临时数组里面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n为hash表，r为临时数组
    for(var i = 0; i < this.length; i++) //遍历当前数组
    {
        if (!n[this[i]]) //如果hash表中没有当前项
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把当前数组的当前项push到临时数组里面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //结果数组
    for(var i = 1; i < this.length; i++) //从第二项开始遍历
    {
        //如果当前数组的第i项在当前数组中第一次出现的位置不是i，
        //那么表示第i项是重复的，忽略掉。否则存入结果数组
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

12.js操作获取和设置cookie　

//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//删除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

13.ajax 有那些优缺点?如何解决跨域问题?
　　优点：
　　　　（1）通过异步模式，提升了用户体验.
　　　　（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
　　　　（3）Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
　　　　（4）Ajax可以实现动态不刷新（局部刷新）
　　缺点：
　　　　（1）安全问题 AJAX暴露了与服务器交互的细节。
　　　　（2）对搜索引擎的支持比较弱。
　　　　（3）不容易调试。
　　jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
14.JavaScript原型，原型链 ? 有什么特点？
　　（1）原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
　　（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
15.GET和POST的区别，何时使用POST？
　　GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
　　POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
　　GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
　　也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
　　然而，在以下情况中，请使用 POST 请求：
　　　　无法使用缓存文件（更新服务器上的文件或数据库）
　　　　向服务器发送大量数据（POST 没有数据量限制）
　　　　发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
16.请解释一下 JavaScript 的同源策略
　　概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
　　这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
　　指一段脚本只能读取来自同一来源的窗口和文档的属性。
　　为什么要有同源限制？
　　　　我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
17.Flash、Ajax各自的优缺点，在使用中如何取舍？
　　Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
　　Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
　　共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
18.什么是闭包？
　　闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

　　闭包的特点：
　　　　（1）作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
　　　　（2） 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
　　简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
19.javascript里面的继承怎么实现，如何避免原型链上面的对象共享
　　用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量
20.ajax过程
　　(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
　　(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
　　(3)设置响应HTTP请求状态变化的函数.
　　(4)发送HTTP请求.
　　(5)获取异步调用返回的数据.
　　(6)使用JavaScript和DOM实现局部刷新.

21、split() join() 的区别

　　前者是切割成数组的形式，

　　后者是将数组转换成字符串

22.数组方法 pop() push() unshift() shift()

　　push() 尾部添加

　　pop() 尾部删除

　　unshift() 头部添加

　　shift() 头部删除

23.IE和标准下有哪些兼容性的写法

　　var ev = ev || window.event

　　document.documentElement.clientWidth || document.body.clientWidth

　　var target = ev.srcElement || ev.target

24.如何阻止事件冒泡和默认事件　　

　　e. stopPropagation();//标准浏览器

　　event.canceBubble=true;//ie9之前

　　阻止默认事件：

　　为了不让a点击之后跳转，我们就要给他的点击事件进行阻止

　　return false

　　e.preventDefault

 

posted @ 2017-10-01 14:43  ATP1  阅读(346)  评论(0)  编辑  收藏  举报