前端面试题整理——HTML篇
一、HTML部分
1.什么是DOCTYPE？
DOCTYPE是Document Type的简写，在页面中，用来指定页面所用的HTML或者XHTML的版本。想要制作符合标注的页面，DOCTYPE声明是必不可少的组成部分。只有确定一个正确的DOCTYPE，XHTML或者HTML里的标识和CSS才能正常生效。 以XHTML 1.0为例： XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。
2.标准模式、准标准模式和混杂模式的区别？
不同文档模式主要影响CSS内容呈现，尤其是浏览器对于盒模型的解析，某些情况下也会影响到JS的解析执行。
目前文档模式有四种
- 混杂模式（quirks mode）
让IE的行为与（包含非标准特性的）IE5相同
标准模式（standards mode）
让IE的行为更接近标准行为
准标准模式（almost standards mode）
这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。
- 超级标准模式:
IE8引入的一种新的文档模式，超级文档模式可以让IE以其所有版本中最符合标准的方式来解释网页内容。
总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。** 触发混杂模式: 如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
触发标准模式:
触发混杂模式:
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
§ 触发标准模式:
§ <!-- HTML 4.01 严格型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
§
§ <!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
§ 触发准标准模式:
§ <!-- HTML 4.01 过渡型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
§
§ <!-- HTML 4.01 框架集型 -->
§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
§
§ <!-- XHTML 1.0 过渡型 -->
§ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
§
§ <!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
§ IE8中关闭超级标准模式：
§ <meta http-equiv="X-UA-Compatible" content="IE=7" />3.HTML和 XHTML之间有什么区别?
XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
4.页面类型为application/xhtml+xml会有什么问题？
答：application/xhtml+xml是XHTML系列文档的类型，会导致一些老的浏览器不支持。
5.如何保存一个内容包含有多种类型语言的page？
答：常见的办法是做两份相同的程序，然后用不同的文件夹区分开来，然后点切换语言时，链接到不同的文件夹。
6.在设计或者开发一个多语言网站的时候什么事情必须被考虑？
求答案！
7.data- 属性的好处是什么？
答：data-属性是自定义数据属性，在在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。答案参考：http://www.css88.com/archives/4715
例如：<div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>
- 使用attribute方法可以存取 data-* 自定义属性的值；
- dataset属性存取data-*自定义属性的值；
- data-属性选择器；
data-属性选择器是很有用的一个选择器，可以根据自定义的 data- 属性选择相关的元素。
例如：使用querySelectorAll选择元素：
// 选择所有包含 'data-flowering' 属性的元素
document . querySelectorAll ( '[data-flowering]' ) ;
// 选择所有包含 'data-text-colour' 属性值为red的元素
document . querySelectorAll ( '[data-text-colour="red"]' ) ;同样的我们也可以通过 data- 属性值对相应的元素设置CSS样式，例如下面这个例子：
<style type ="text/css"> .user { width : 256px ; height : 200px ; } .user[data-name='feiwen'] { color : brown } .user[data-name='css'] { color : red } </style>
<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>
<div class = "user" data-id = "124" data-name = "css" > 码头 </div>更多参考：http://ejohn.org/blog/html-5-data-attributes/
8.Consider HTML5 as an open web platform. What are the building blocks of HTML5?
这个问题不是很明白
9.谈谈cookie, sessionStorage 和localStorage之间的区别.
答案参考：http://zha-zi.iteye.com/blog/1974315 和 http://www.cnblogs.com/tylerdonet/p/4833681.html
答：sessionStorage 和localStorage属于web storage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
10.script, script async 和 script defer之间的区别？
答：defer使得browsers延迟脚本的执行，直到文档的载入和解析完成，并可以操作（在onload事件触发前），加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！
async使得browsers可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析（异步）。在不支持async的browsers中，通过动态创建script元素并把它插入文档中，来实现脚本的异步载入和执行。
若两个属性同在，会忽略defer而遵从async
11.为什么css样式的位置一般在head中而js的样式则是在body中？那有没有其他例外情况？
参考：http://www.zhihu.com/question/20357435/answer/14878543
答：因为这和需要的加载顺序有关，CSS放在头部会先被加载，因为css样式表规定了网页总体样式，而js一般是在其他内容加载完成之后起作用的，所以一般加载在尾部。head 内的 JavaScript 需要执行结束才开始渲染 body，如果有多个外连接脚本放在head中，那么，当加载脚本时会阻塞页面的渲染，也就是常说的空白。而 CSS 应当写在 head 中，以避免页面元素由于样式确实造成瞬间的白页或者给用户闪烁感。
例外是：1.个别特殊JS，比如用于调试的基础脚本（部署时未必有）、性能日志之类，必须放在尽量最前的位置。2.一些需要在body之前加载的js文件，html5-shim脚本必须在body之前加载。3.渐进式渲染中也需要先加载js。
12.What is progressive rendering?
参考网址：http://calendar.perfplanet.com/2014/async-fragments-rediscovering-progressive-html-rendering-with-marko/
答：普通渲染方式
渐进式渲染方式
13.是否用过不同的html模板语言？