前端面试题及其总结

HTML部分

一、Doctype做用？标准模式与兼容模式有什么区别？

• 声明位于HTML文档的第一行，处于标签以前。用来告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会致使文档以兼容模式呈现
• 标准模式：排版和js运做方式都是以该浏览器支持的最高标准运行。
• 兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点没法运行。
• 例子：一、width不一样 在严格模式中，width是内容宽度(content)，可是在兼容模式中，width是(元素的实际宽度),(怪异盒模型是margin以外是width的范围)

二、html5为何只须要写<!DOCTYPE>

HTML5不基于SGML，所以不须要对DTD进行引用，可是须要doctype来规范浏览器的行为

因此，html5只有一种：<!DOCTYPE> 可是html4.01有三种，分别是strict（不包含展现性和弃用元素，不容许框架集）、transitional（包含展现性和弃用元素，不容许框架集）、frameset（容许框架集）

三、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

常见的行内元素有：a，b，span，img（我曾觉得是block），input，strong，select

常见的块级元素有：div、ul（无序）、ol（有序）、li、p等

常见的空元素：<br><hr><link><script>

空元素定义：html元素的内容就是其两个标签之间的content，因此，标签之间没有内容的就是空元素

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

写法上：

<link rel="stylesheet" href="路径" />

<style type="text/css">
    @import '路径'
</style>
复制代码

本质上：link属于XHTML标签，除了加载css以外，还能定义RSS，定义rel链接属性等做用。而@import是css提供的，只能用于加载css

解析上：link是跟着页面加载同时加载的，可是@import会等到页面加载完再加载

兼容上：@import IE5以上才能识别，无限制

五、介绍一下你对浏览器内核的理解？

主要分为两部分：

• 渲染引擎
• JS引擎

渲染引擎：取得网页的内容（html、xml、图片）、构造cssom树、计算网页的显示方式，好比各元素宽高，而后输出至显示器或打印机。

js引擎：解析和执行javascript来实现网页的动态效果

六、常见的浏览器内核有哪些（背记）？

• Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
• Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

*Blink是Chrome使用的，webkit的简化版本，可是效率等都较以前有了提高

详细文章：浏览器内核的解析和对比

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

实现上：h5再也不是SGML的子集。

新特性：主要是关于图像，位置，存储，多任务等功能的增长。

如：

绘画canvas

用于媒介回放的video和audio元素

本地离线存储localStorage，长期存储，浏览器关闭以后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除

语意化更好的内容元素，好比 article、footer、header、nav、section

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

新的技术webworker, websocket, Geolocation;

移除的元素：
  纯表现的元素：basefont，big，center，font, s，strike，tt，u;
  对可用性产生负面影响的元素：frame，frameset，noframes；
复制代码

处理兼容性： IE8/IE7/IE6支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加标签默认的样式。

也可使用html5shim，可让IE9或更低版本能支持html5

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

如何区分HTML5： DOCTYPE声明\新增的结构元素\功能元素

八、对html语义化的理解（了解）

• 用正确的标签作正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 搜索引擎的爬虫也依赖于HTML标记来肯定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

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

在用户没有与因特网链接时，能够正常访问站点或应用，在用户与因特网链接时，更新用户机器上的缓存文件。 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，经过这个文件上的解析清单离线存储资源，这些资源就会像cookie同样被存储了下来。以后当网络在处于离线状态下时，浏览器会经过被离线存储的数据进行页面展现。

如何使用：

一、页面头部像下面同样加入一个manifest的属性；

二、在cache.manifest文件的编写离线存储的资源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

三、在离线状态时，操做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过时时间以前一直有效，即便窗口或浏览器关闭

十二、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；
• 搜索引擎的检索程序没法解读这种页面，不利于SEO;
• iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。
• 使用iframe以前须要考虑这两个缺点。若是须要使用iframe，最好是经过javascript
• 动态给iframe添加src属性值，这样能够绕开以上两个问题。

1三、Label的做用是什么？是怎么用的？

用来关联某个标签，能够是表单标签，也能够是button，这样就能够直接点击label的范围来触发绑定标签的事件

用法：

1四、HTML5的form如何关闭自动完成功能？

自动完成：当你给输入框输入内容时，浏览器会从以前同名输入框的历史记录中查找出相似的内容并列在输入框下面。

给form或者该input设置autocomplete=off。

通过实验，提交以后，历史记录才会存储，固然，必须是name相同的input才会共享历史记录

1五、如何实现浏览器内多个标签页以前的通讯（阿里）？

WebSocket、SharedWorder（须要实现试试）

也能够调用localstorage、cookies等本地存储方式

1六、webSocket如何兼容低浏览器？(阿里)（暂时没有实现）

Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于 multipart 编码发送 XHR 、基于长轮询的 XHR

1七、页面可见性（Page Visibility API） 能够有哪些用途？

页面可见性：该网页是否处于可见状态。好比网页最小化，或是一个非前置的网页卡，那么visibilityState 的值就是hidden，若是是可见状态，则是visible。

用途：

• 经过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
• 在页面被切换到其余后台进程的时候，自动暂停音乐或视频的播放；

详细可见：Page Visibility(页面可见性) API介绍、微拓展

1八、如何在页面上实现一个圆形的可点击区域？（只有第二个会，其他须要实现）

一、map+area或者svg

二、border-radius

三、纯js实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等

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

<div style="height:1px;overflow:hidden;background:red"></div>

20、网页验证码是干吗的，是为了解决什么安全问题。

区分用户是计算机仍是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水；

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。

简单的归总，就是为了分清楚操做者是人仍是恶意程序

title与h1的区别、b与strong的区别、i与em的区别？

这个问题涉及到语义化的问题

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，主要影响的页面爬虫与SEO

strong是标明重点内容，有语气增强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展现强调内容。

i内容展现为斜体，em表示强调的文本

Physical Style Elements -- 天然样式标签: b, i, u, s, pre

Semantic Style Elements -- 语义样式标签:strong, em, ins, del, code

若是不能肯定时首选使用天然样式标签。

（。。。未完待续）