面试题集合

纸质面试题基础总结：　　

1.请介绍一下H5有哪些新特性，如何让低版本IE支持HTML5标签？

答：1.video/audio 视频/音频

2.canvas 绘画

3.geolocation 定位

4.WebSocket 前后端双向通讯

5.localStorage/sessionStorage代替cookie本地存储

6.文件拖拽（drag事件+dataTransfer+FileReader）

7.WebWorker js多线程,提高性能

8.WebSQL 前端数据库(已被官方弃用)

9.manifest 离线缓存

第二项：1.H5新增标签在低版本浏览器无法被识别时会将无法识别的标签解析为inline（行内元素）,所有我们要把必要标签转化为block就可以使用，但是在IE9版本以下，无法解析这些标签，我们就可以通过document.creataElement(‘tagname’)来创建自定义标签，来替代那些标签这样低版本的IE也可以使用那些H5标签

2.处理方式：在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题（测试在IE下面的兼容性：ieTester软件的使用）

主要是针对于ie低版本的，也就是只有低版本ie才执行才对

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

<!-- 条件注释  ie 6.7.8 能执行，其余浏览器忽略这句话 -->
<!--[if lt IE 9]>   

   <script src="js/html5shiv.min.js"></script> 

<![endif]-->

html5shiv.min.js

respond.js 都可以解决这个问题 原理是使用正则表达式来匹配标签

 

2.做过的项目适配过哪些浏览器，这些浏览器的内核分别是什么？

a、 IE(IE浏览器) : trident 内核    -ms-

b、 Firefox(火狐浏览器) ： gecko 内核     -moz-

c、 Safari(苹果浏览器) ：webkit 内核      -webkit-

d、 Opera(欧朋浏览器)：以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核     -o-

e、 Chrome(谷歌浏览器)：Blink(基于 webkit ， Google 与 Opera Software 共同开发 )      -webkit-

3.如何实现浏览器内多个标签页之间的通信？

方法一：使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作

方法二：使用cookie+setInterval HTML代码

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

⒈localStorage长期存储数据，浏览器关闭数据后不丢失；

⒉sessionStorage数据在浏览器关闭后自动删除；

⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client   Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session  storage和local storage不会自动把数据发给服务器，仅在本地保存；

⒋存储大小：cookie数据大小不会超过4K，session  storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；

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

 

5,css有哪两种盒子类型，他们分别包含了哪些元素？

一、CSS的盒子模型

1、CSS标准盒子模型：宽度 = 内容宽度（content）+ border + padding + margin

2、低版本IE盒子模型：宽度 = 内容宽度（content + border + padding）+ margin 

二、元素分类

1、行内元素

<a> 、<abbr>（缩写）、<acronnym>（首字母）、<b>、<bdo> 、<big>、<br>、<cite>（引用）、<code>、<dfn>（定义字段）、<em>（强调）、<font>、<i>（斜体）、<img>、<input>、<kbd>（定义键盘文本）、<label>（表格标签）、<q>（短引用）、<s>（中画线、不推荐）、<samp>（代码）、<select>、<small>、<span>、<strike>（中划线）、<strong>、<sub>（下标）、<sup>（上标）、<textarea>、<tt>（电传文本）、<u>（下划线）、var

2、块级元素

<address>、<blockquote>（块引用）、<center>、<dir>（目录列表）、<div>、<dl>（定义列表）、<fieldset>（form控制组）、<form>、<h1>~<h6>、<hr>、<isindex>（input prompt）、<menu>（菜单列表）、<noframes>（frames可选内容）、<noscript>、<ol>、<p>、<pre>（格式化文本）、<table>、<ul>

3、可变元素（根据上下文语境决定该元素为块元素或内联元素）

<applet>、<button>、<del>、<iframe>、<ins>（插入文本）、<map>、<script>

4、空元素（在HTML[1]元素中，没有内容的元素）

<br/>、<hr/>、<input>、<img>、<link>、<meta>

6.介绍您掌握的几种跨域请求资源的方法，以及各自的优缺点？