前端面试题

1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
答：作用是告诉的html使用的那个版本的html协议写的.按照声明的协议执行.怪异模式和严格模式（译注：一般称为标准模式：Standards Mode,下文中的严格模式都可以理解为标准模式）是浏览器解析CSS时的两种‘模式’。这篇文章将简单阐述这两种模式之间的差异。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2、HTML5 为什么只需要写 ？
答:html5 不基于SGML，因此不需要对它DTD进行引用，但是需要doctype来规范浏览器的行为。而Html4基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p 知名的空元素： 鲜为人知的是：
4、页面导入样式时，使用link和@import有什么区别？
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
差别5：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表。
5、介绍一下你对浏览器内核的理解？
那内核是什么呢？内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各种说法通用）。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。这就是编写网页的麻烦所在啊。。。要让所有浏览器显示大概一致，有时候很麻烦。
现在市面上常见的 内核基本是一下4种：Trident：
这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的 IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内 核名称而只好如此说，至少老N就是如此。。。）。自从发布后，Trident不断地被更新和完善：
Trident II（IE5）——增进对CSS1.0的支持及对CSS2重大的变更；
Trident III（IE5.5）——修正部分CSS的排版控制；
Trident IV（IE6）——修正了一部分box-model的错误以及增加了“兼容模式（Quirks Mode）”切换功能，以增加对文件类型描述（Document Type Definition，DTD）的支持；
Trident V（IE7）——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道（半透明）的支持。（这就是IE6经常被诟病的对png图片支持不良的之处！）
Geckos：
Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的，Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。Geckos 现在由Mozilla基金会维护。
Presto：
Presto是一个由Opera Software开发的浏览器排版引擎，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，也是目前公认网页浏览速度最快的浏览器内核。
Webkit：
苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软 件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开发源代码。在安全方面不受IE、Firefox的制约，所以 Safari浏览器在国内还是很安全的。
简单的总结一下：
使用Trident内核的浏览器：IE、Maxthon、TT、The World等；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome。
6、常见的浏览器内核有哪些？
(Q1) 浏览器** ：IE，Chrome，FireFox，Safari，Opera
(Q2)** 内核** ：Trident，Gecko，Presto，Webkit
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。*
  拖拽释放(Drag and drop) API 语义化更好的内容标签（header,nav,footer,aside,article,section） 音频、视频API(audio,video) 画布(Canvas) API 地理(Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 表单控件，calendar、date、time、email、url、search 新的技术webworker, websocket, Geolocation
• 移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：
• IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
• 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 如何区分： DOCTYPE声明\新增的结构元素\功能元素
  8、简述一下你对HTML语义化的理解？
  1、什么是HTML语义化？
  <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
  　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
  2、为什么要语义化？
  为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
  用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
  有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？
尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

** 4、HTML5新增了哪些语义标签，详述之。**
　　见这位前端大拿的blog。
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
http://www.ibm.com/developerworks/cn/web/wa-offlinehtml/
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
http://www.codeceo.com/article/html5-cache.html
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
12、iframe有那些缺点？
框架的优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
方便制作导航栏
框架的缺点
会产生很多页面，不容易管理
不容易打印
浏览器的后退按钮无效
代码复杂,无法被一些搜索引擎索引到
多数小型的移动设备（PDA 手机）无法完全显示框架
多框架的页面会增加服务器的http请求
由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃
提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。
1.<iframe>优点：
解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本
2.<iframe>的缺点：
*iframe会阻塞主页面的Onload事件
*即时内容为空，加载也需要时间
*没有语意
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 FOR属性 功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 用法：姓名 ACCESSKEY属性： 功能：表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。 用法：姓名局限性：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。 注释 要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是，要提交表单，你必须为 LABEL 元素所绑定到的控件指定 NAME。 有两种方法给所指定的快捷键添加下划线。LABEL 元素的 rich text 支持可以在 ACCESSKEY 属性所指定的快捷键字符两侧加上 U 元素。如果你更愿意使用样式表(CSS)来应用样式，可以将该字符包含在 SPAN 中，并设置样式为“text-decoration: underline”。 如果用户单击 LABEL，则会先触发 LABEL 上的 onclick 事件，然后触发由 htmlFor 属性所指定的控件上的 onclick 事件。按下 LABEL 设定的快捷键将设置焦点但并不触发 onclick 事件。 标签不允许嵌套。