前面几题是会很基础,越下越有深度。

  Html篇:

  

 

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

 

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

  设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

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

    •   5.a:img的alt与title有何异同?b:strong与em的异同?

 

  • alt(alt text):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
  • title(tool tip):该属性为设置该属性的元素提供建议性的信息。

 

  

 

  “优雅降级”观点

  “渐进增强”观点

 

  

 

 

  web storage和cookie的区别

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

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

 

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

  答案:

  科普一下Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

 

  微格式(Microformats)是一种让机器可读的语义化XHTML词汇的集合,是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

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

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

      •   15.你如何理解HTML结构的语义化?  
        • 屏幕阅读器(如果访客有视障)会完全根据你的标记来”你的网页.

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

        • 你的页面是否对爬虫容易理解非常重要,而只注重语义标记
        • 便于团队开发和维护

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

        • Meta标签优化

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

        • 主要的互联网目录

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

        • 链接交换和链接广泛度(Link Popularity)

 

  1.有哪项方式可以对一个DOM设置它的CSS样式?  

        •   2.CSS都有哪些选择器?
          • 后代选择器(利用空格间隔,比如div .a{  })
          • 群组选择器(利用逗号间隔,比如p,div,#a{  }) 

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

  那么问题来了,看下列代码,<p>标签内的文字是什么颜色的?。

< 2 color; 4 color;</ 6 body 9 classp11 >
BAT及各大互联网公司2014前端笔试面试题_面试

  3.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?  

  技巧性:

  4.超链接访问过后hover样式就不出现的问题是什么?如何解决?

  5.什么是Css Hack?ie6,7,8的hack分别是什么?

BAT及各大互联网公司2014前端笔试面试题_面试
 2  3  4           
blue;      */
red\9;      */
yellow\0;    */
pink;        */
orange;       */    }  
 background-color:ie9    @media all and (min-width:0px){ }  */
 #test {background-color:/*  

  答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

  7.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

  内联元素(inline)特性:

  8.什么是外边距重叠?重叠的结果是什么?

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

  

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

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

  水平方向:letter-spacing

  答案:可以用于消除inline-block元素间的换行符空格间隙问题。

BAT及各大互联网公司2014前端笔试面试题_面试
 1 // 方法一:已知元素的高宽
 2 
 3 #div1{
 4     background-color:#6699FF;
 5     width:200px;
 6     height:200px;
 7 
 8     position: absolute;        //父元素需要相对定位
 9     top: 50%;
10     left: 50%;
11     margin-top:-100px ;   //二分之一的height,width
12     margin-left: -100px;
13     }
14 
15 //方法二:未知元素的高宽
16 
17   #div1{
18     width: 200px;
19     height: 200px;
20     background-color: #6699FF;
21 
22     margin:auto;
23     position: absolute;        //父元素需要相对定位
24     left: 0;
25     top: 0;
26     right: 0;
27     bottom: 0;
28     }
BAT及各大互联网公司2014前端笔试面试题_面试

 

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

  13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处? 

  在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都不用考虑的怪癖,像HTML的audio元素不一致或line-height不一致。

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

 

  • 结构清晰,便于扩展。
  • 可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
  • 可以轻松实现多重继承。
  • 完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。

 

 

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

 

  16.知道css有个content属性吗?有什么作用?有什么应用?

  最常见的应用是利用伪类清除浮动。

 

  具体实现方案:请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解 。