前端面试题整理——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技术，跨浏览器的行为根本就没有一致性可言。
§ 触发标准模式:
§
§
§
§
§ 触发准标准模式:
§
§
§
§
§
§
§
§
§
§
§ IE8中关闭超级标准模式：
§ <meta http-equiv="X-UA-Compatible" content="IE=7" />3.HTML和 XHTML之间有什么区别?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
4.页面类型为application/xhtml+xml会有什么问题？
答：application/xhtml+xml是XHTML系列文档的类型，会导致一些老的浏览器不支持。
5.如何保存一个内容包含有多种类型语言的page？
答：常见的办法是做两份相同的程序，然后用不同的文件夹区分开来，然后点切换语言时，链接到不同的文件夹。
6.在设计或者开发一个多语言网站的时候什么事情必须被考虑？
求答案！
7.data- 属性的好处是什么？
答：data-属性是自定义数据属性，在在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性，来进行一些数据的存放。答案参考：http://www.css88.com/archives/4715
例如：
- 使用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 和localStorageHTML5 提供了两种在客户端存储数据的新方法，属于web storage。
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话，Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。Cookie在客户端是由浏览器来管理的，浏览器能够保证Google只会操作Google的Cookie而不会操作Baidu的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 属性规定一旦脚本可用，则会异步执行。所以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模板语言？
14.浏览器渲染
参考：http://www.zhihu.com/question/20117417
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
渲染：构建渲染树，对各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染（可以理解为“画”元素）
15.html5中有哪些新的标签
答：首先HTML5的特点是更加简洁以及更加语义化，html5中新增的标签有如：nav，header，footer，artical，section，aside，canvas，details，mark，audio，video。