前端面试题

HTML相关面试题

1、HTML5为什么只需要写< !DOCTYPE HTML>?

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照他们的应该的方式来运行)；而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的的文档类型

页面导入样式时，使用link和@import有什么区别？

1、link属于XHTML标签，除了加载CSS外，还能用于定义RS5，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS2、页面被加载的同时，link会同时的被加载，而@import引用的CSS会等到页面被加载完再加载3、@import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；

浏览器内核相关问题

浏览器内核主要分成两部分：渲染引擎(layout engineer或Rendering Engineer)和JS引擎。渲染引擎：负责取得网页的内容(HTML，XML，图像等)、整理讯息（例如加入CSS等）,以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。JS引擎：解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

简述一下你对HTML语义化的理解？

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

HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。如何使用：1、页面头部像下面一样加入一个manifest的属性；2、在cache.manifest文件的编写离线存储的资源；CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK://offline.html3、在离线状态时，操作window.applicationCache进行需求实现。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

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

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。存储大小：cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：localStorage:存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage:数据在当前浏览器窗口关闭后自动删除。cookie:设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

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

WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，  我们通过监听事件，控制它的值来进行页面信息通信；  注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>引申：border为1px的内容框<div style="padding: 1px 1px;height: 60px;width: 300px;overflow:hidden;background: black;">     <div style="height: 60px;overflow:hidden;background: white;">     </div></div>

CSS相关面试题

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；（3）区  别： IE的content部分把 border 和 padding计算了进去;

display有哪些值？说明他们的作用

block         块类型。默认宽度为父元素宽度，可设置宽高，换行显示。none          缺省值。象行内元素类型一样显示。inline        行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。list-item     象块类型元素一样显示，并添加样式列表标记。table         此元素会作为块级表格来显示。inherit       规定应该从父元素继承 display 属性的值。

position的值relative和absolute定位原点是？

absolute生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。relative生成相对定位的元素，相对于其正常位置进行定位。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。inherit规定从父元素继承 position 属性的值。

zoom:1的清除浮动原理?

清除浮动，触发hasLayout；Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。来龙去脉大概如下：  当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。  Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。  目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？  可以通过css3里面的动画属性scale进行缩放。

未完待续