HTML+CSS+JS（面试题）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JS（面试题）相关的知识，希望对你有一定的参考价值。

1、 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

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

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

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

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

3、请描述一下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仅仅是为了在本地“存储”数据而生。

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

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

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

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

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

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

5、什么是Css Hack？ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

 

#test{  

    width:300px;  

    height:300px;  

          /*firefox*/

    background-color:red\\9;      /*all ie*/

        /*ie8*/

    +background-color:pink;        /*ie7*/

    _       /*ie6*/    } 

    :root #test { background-color:purple\\9; }  /*ie9*/

    @media all and (min-width:0px){ #test {} }  /*opera*/

    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

 

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

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

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

为什么要使用它们？

结构清晰，便于扩展。

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

可以轻松实现多重继承。

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

7、html常见兼容性问题？

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

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

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

4.Ie 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*/

}

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

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

 

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

 

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

9、一边宽度固定，另一边自适应？

1）第一种：float 单一层浮动法

例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left;

 右侧 width:auto;margin-left:100px;

2）第二种：定位 ，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度

3）通过BFC规则实现

例如：.left{float:left;width:200px;height:200px;}

         .right{width:100%;overflow:hidden;height:200px}

10、什么是圣杯布局？

左右两边的内容保持不变，中间的内容可以根据屏幕的大小的改变而改变。

1 .content {

2 padding: 0 200px;

3 height: 200px;

4 min-width: 200px;

5 }

.left {

6 width: 200px;

7 height: 200px;

8 background: red;

9 float: left;

10 margin-left: -200px;

11 }

12 .right {

13 width: 200px;

14 height: 200px;

15 background: yellow;

16 float: right;

17 margin-right: -200px;

18 }

19 .center {

20 width: 100%;

21 min-width: 200px;

22 height: 200px;

23 background: green;

24 float: left;

25 }

26 </style>

27 </head>

28 <body>

29 <div class="content">

30 <div class="left"></div>

31 <div class="center"></div>

32 <div class="right"></div>

33 </div>

 

 

 

 

11、div中子元素居中的三种方式？

   首先div设置为相对定位relative,子元素设置为绝对定位absolute

第一种#div.img{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}

第二种

#div.img{position:absoulute;left:50%;top:50%;margin-left:img的1/2width；margin-top:-img的1/2height;}

 

HTML5+CSS3

1、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性：

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件，calendar、date、time、email、url、search  

9. 新的技术webworker, websocket, Geolocation

移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2. 对可用性产生负面影响的元素：frame，frameset，noframes；

html5兼容性解决方案

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

2你如何对网站的文件和资源进行优化？

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

3 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，单选框或复选框被选中。

4 H5+CSS3兼容性解决的方案

1 htmlshiv.js框架 HTML5shiv通过javascript 来创建HTML5元素(如 main, header, footer等)

<!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

2 selectivizr.js

selectivizr是一个JavaScript工具，使IE浏览器也可以支持CSS3伪类以及属性选择器

使用很简单，只要把js include到页面上，然后你就可以

<script type="text/javascript" src="[JS library]"></script>

<!- -[if (gte IE 6)&(lte IE 8)]>

      <script type="text/javascript" src="selectivizr.js"></script>

      <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>

<![endif]- ->

3 条件注释

5 CSS3有哪些新特性？

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器  多背景 rgba

5. 在CSS3中唯一引入的伪元素是 ::selection.

6. 媒体查询，多栏布局

7. border-image

 

JS+JQuery部分内容

1 数组和字符串中常用的方法

  1）数组中常用的方法

Push()向数组的末尾增加一项  unshift()向数组开头增加一项

pop()删除数组的末尾项       shift()删除数组开头项

Splice() 删除数组中的任意项  concat拼接

Join() 把数组中的每一项 按照指定的分隔符拼接成字符串

reverse:倒序数组 返回值倒序数组 原有数组改变
sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序

兼容性不好：
indexOf:返回获取项在数组中的索引
lastIndexOf:返回获取项在数组中出现的最后一次索引
forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined
map：循环遍历数组 参数是一个匿名函数

2）字符串中常用的方法

  substring方法返回位于String对象中指定位置的子字符串。 

  substr方法返回一个从指定位置开始的指定长度的子字符串。

slice方法返回字符串的片段。 

split将一个字符串分割为子字符串，然后将结果作为字符串数组返回。 

2 js兼容性问题

1 获取,设置标签的内容 iE和chrome浏览器支持innerText  火狐浏览器支持 textContent

2获取指定元素的第一个元素和最后一个元素  element.firstElementChild

 IE679只能获取firstChild获取第一个字节点，然后通过判断的节点的类型区的第一个子元素

3event.x 与 event.y，在IE中，event 对象有x,y属性，现代浏览器中中，与 event.x 等效的是 event.pageX ，但event.pageX IE中没有

4问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。

解决方法：统一通过 getAttribute() 获取自定义属性。

3说说你对闭包的理解

可以把闭包简单理解成 “定义在一个函数内部的函数”

闭包有三个特性：

 1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

 3.参数和变量不会被垃圾回收机制回收

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题

4、javascript里面的继承怎么实现，如何避免原型链上面的对象共享

用构造函数和原型链的混合模式去实现继承，避免对象共享可以参考经典的extend()函数，很多前端框架都有封装的，就是用一个空函数当做中间变量

5、JavaScript原型，原型链 ? 有什么特点？

原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。*

原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

6请说出三种减少页面加载时间的方法。

 1.优化图片

 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

 3.优化CSS（压缩合并css，如margin-top,margin-left...)

 4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

 5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）

 

7.你有哪些性能优化的方法？

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4） 当需要设置的样式很多时设置className而不是直接操作style。

（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

图片预加载，将样式表放在顶部，将脚本放在底部 ?加上时间戳。

 

8、 平时如何管理你的项目？

1)先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

2) 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）

3)标注样式编写人，各模块都及时标注（标注关键样式调用的地方）

4)页面进行标注（例如 页面 模块 开始和结束）

5)CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

6)JS 分文件夹存放 命名以该JS功能为准的英文翻译。

 

9、call和apply的区别

call和apply相同点：改变函数中this的指向

不同点：函数参数的传递形式

call将函数参数依次传入

apply将函数参数用一个数组的形式传入   

 

10、原生JS的window.onload与Jquery 的$(document).ready(function() {})，$(function() {})有什么不同？

1)执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2)编写个数不同

 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

3)简化写法 window.onload没有简化写法 $(document).ready(function(){})可以简写成$(function(){})；

 

11、split(),join()的区别？

split() 方法通过把字符串分割成子字符串来把一个 String 对象分割成一个字符串数组。

join() 方法将数组中的所有元素连接成一个字符串。

 

12、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

  bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象。

 live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象。

 delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上。  

 On:支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。       

                   

Ajax的面试题

1、解释jsonp的原理

 动态创建script标签，回调函数

 

2、请尽可能详尽的解释ajax的工作原理

 思路：先解释异步，再解释ajax如何使用

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

 

3、Ajax的最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）

readyState属性 状态 有5个可取值： 0=未初始化 ，1=启动 2=发送，3=接收，4=完成

 

4、ajax的缺点

1） ajax不支持浏览器back按钮。

2)安全问题 AJAX暴露了与服务器交互的细节。

3)对搜索引擎的支持比较弱。

4)破坏了程序的异常机制。

5)不容易调试。

 

5、get和post的区别？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符;

 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

6、如何解决跨域问题?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

1.Get方式请求的跨域可以通过jsonp来解决。

http://www.tuicool.com/articles/QBbuiaR

2.Post方式的请求  cors解决跨域

Cors解释

http://www.cnblogs.com/Darren_code/p/cors.html

 

JSONP实现跨域

常用的jquery实现跨域调用

$.ajax({

    url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",

    dataType: "jsonp",

    jsonp: "callback",

    context: document.body,

    success: function(data) {

        console.log(data);

    }

});

这个调用实际上的实现原理是

在网页中构造一个script标签，将src设置为对应的url，并增加上相应的callback参数，形如如下格式：

<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>

请求的服务端代码如下：

$data     = json_encode(array("id" => "1", "name" => "tom"));

$callback = $_GET["callback"];

echo $callback . "(" . $data . ")";

实际上最后返回的内容就是一段js代码：

jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})

当浏览器获取到该段js代码后就会执行这个函数，从而实现回调ajax请求时设置的success方法。

jsonp实现的缺点

了解了原理后，就知道jsonp实现的跨域方式不支持post请求，只能支持get请求。但是如果需要支持post请求该怎么办呢？下面谈下服务器端设置的方式。

服务端设置支持跨域

主要是Access-Control-Allow-Origin头参数，该参数用来指定允许哪个来源的域请求。服务端代码如下：

// 表示支持所有来源的域进行请求

// 实际在操作过程中可以设置为指定域

header(‘Access-Control-Allow-Origin:*‘);

$data = json_encode(array("id" => "1", "name" => "tom"));

echo $data;

对应的js代码：

$.ajax({

    type: "POST",

    url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",

    dataType: "json",

    success: function(data) {

        console.log(data);

    }

});

可以支持post请求

 

 

                       移动web开发

1、px，em，rem的区别？

1）px像素（Pixel） 。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

3）rem是CSS3新增的一个相对单位（rootem，根em） ，使用rem为元素设定字体大小时，仍然是相对大小，

但相对的只是HTML根元素。

 

2、jQuery和Zepto的区别？各自的使用场景？Zepto比jQuery轻量的原因？

jQuery主要用于PC端开发，Zepto比jQuery更加小巧，主要用于移动端，Zepto是不兼容低版本的浏览器

原因：

1）Zepto轻量的原因是没有像jQuery一样处理移动端的兼容性问题，

2）Zepto的模块是放到不同的模块中，根据业务需要引入模块，减少代码量，提高网页的加载速度

 

3、bootstrap框架中的栅格系统的本质是什么？以及bootstrap框架的优缺点？

bootstrap的栅格系统的本质是通过css3的媒体查询实现的

优点:bootstrap框架便于快速布局，而且添加了更加灵活的栅格系统，增加了响应式

计，来适配不同的设备

缺点:对ie678的兼容性可能不太好，而且bootstrap是依赖于jQuery，代码的体积大，会影响网页的加载速度，不适合移动端。

 

 

4、如何解决移动端的click事件的延迟响应？

移动端click屏幕产生200-300 ms的延迟响应，往往会造成按钮点击延迟甚至是点击失效。

解决方案

1) github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick

2)zepto的touch模块，tap事件也是为了解决在click的延迟问题

 

5、什么是mvc开发模式?

   Mvc是一中组织代码结构的方式，便于代码的管理和维护。

  

  

                  






以上是关于HTML+CSS+JS（面试题）的主要内容，如果未能解决你的问题，请参考以下文章

很强大的HTML+CSS+JS面试题（附带答案）

前端html+css面试题个人总结

前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！

2010年腾讯前端面试题学习（jquery,html,css部分）

WEB前端面试题 html css------整理 1

前端基础面试题(Html,css,Javascript)_2