HTML+CSS+JS（面试题）

时间 2019-11-18

标签 html+css+js html css 面试栏目 HTML 繁體版

原文原文链接

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

IE: trident内核javascript

Firefox：gecko内核php

Safari:webkit内核css

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

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

二、你能描述一下渐进加强和优雅降级之间的不一样吗?

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

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

三、请描述一下cookies，sessionStorage和localStorage的区别？jquery

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

web storage和cookie的区别git

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

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

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

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

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

若是图片为css图片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

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

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

五、什么是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*/

六、Sass、LESS是什么？你们为何要使用他们？

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

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

为何要使用它们？

结构清晰，便于扩展。

能够方便地屏蔽浏览器私有语法差别。这个不用多说，封装对浏览器语法差别的重复处理，减小无心义的机械劳动。

能够轻松实现多重继承。

彻底兼容 CSS 代码，能够方便地应用到老项目中。LESS 只是在 CSS 语法上作了扩展，因此老的 CSS 代码也能够与 LESS 代码一同编译。

七、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*/

}

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

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

由于浏览器的品种不少，每一个浏览器的默认样式也是不一样的，好比<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不一样的，因此，经过重置button标签的CSS属性，而后再将它统必定义，就能够产生相同的显示效果。

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

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

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}

十、什么是圣杯布局？

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

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>

十一、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

一、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]>

<![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]>

<![endif]-->

2 selectivizr.js

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

使用很简单，只要把js include到页面上，而后你就能够

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

<![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.参数和变量不会被垃圾回收机制回收

因为闭包会使得函数中的变量都被保存在内存中，内存消耗很大，因此不能滥用闭包，不然会形成网页的性能问题

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

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

五、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(动态属性)。

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

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

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

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

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

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

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

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

九、call和apply的区别

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

不一样点：函数参数的传递形式

call将函数参数依次传入

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

十、原生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(){})；

十一、split(),join()的区别？

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

join() 方法将数组中的全部元素链接成一个字符串。

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

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

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

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

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

Ajax的面试题

一、解释jsonp的原理

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

二、请尽量详尽的解释ajax的工做原理

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

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

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

三、Ajax的最大的特色是什么。

Ajax能够实现动态不刷新（局部刷新）

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

四、ajax的缺点

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

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

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

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

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参数，形如以下格式：

请求的服务端代码以下：

$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开发

一、px，em，rem的区别？

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

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

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

但相对的只是HTML根元素。

二、jQuery和Zepto的区别？各自的使用场景？Zepto比jQuery轻量的缘由？

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

缘由：

1）Zepto轻量的缘由是没有像jQuery同样处理移动端的兼容性问题，

2）Zepto的模块是放到不一样的模块中，根据业务须要引入模块，减小代码量，提升网页的加载速度

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

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

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

计，来适配不一样的设备

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

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

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

解决方案

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

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

五、什么是mvc开发模式?

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

HTML+CSS+JS（面试题）

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

二、你能描述一下渐进加强和优雅降级之间的不一样吗?

6、如何解决跨域问题?

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