马上秋招了，储备一点干货，为自己加油! fighting！
html相关问题
1.doctype(文档类型) 的作用是什么？
此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。
XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode,它有两个值：BackCompat对应quirks mode，CSS1Compat对应strict mode。
2.浏览器标准模式(standards mode)、几乎标准模式(almost standards mode)和怪异模式(quicks mode)之间区别是什么？
标准模式是指浏览器按W3C标准解析执行代码。怪异模式是指使用浏览器自己的方式解析，几乎标准模式的浏览器特性都是符合标准的，不标准的地方主要体现在处理图片间隙的时候。Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页
3.HTML 和 XHTML 有什么区别？
XHTML 元素必须被正确地嵌套 XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br /> XHTML 标签名必须用小写字母 XHTML 文档必须拥有根元素 XHTML 文档要求给所有属性赋一个值 XHTML 要求所有的属性必须用引号""括起来 XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示 XHTML 文档不要在注释内容中使“--” XHTML 图片必须有说明文字 XHTML 文档中用id属性代替name属性
4.页面使用‘application/xhtml+xml’会有什么问题？
content类型分为text/html和application/xhtml+xml 两种，前面一种表示HTML文档的类型，后一种是xhtml系列文档的类型。若使用‘application/xhtml+xml’要求比较严格，一些老的浏览器会不支持。
5.如果网页内容需要支持多语言，你会怎么做？
编码使用UTF-8，空间域名需要支持多浏览地址,准备多套模板。
下面这些问题需要考虑：
应用字符集的选择，选择UTF-8编码
语言书写习惯&导航结构
数据库驱动型网站
6.使用 data- 属性的好处是什么？
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div> div.dataset.commentNum; // 10
7.如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
- 语义 - 提供更准确地描述内容。
- 连接 - 提供新的方式与服务器通信。
- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
- 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
- 2D/3D 图形和特效 - 提供更多种演示选项。
- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
- 设备访问 - 允许使用各种输入、输出设备。
- 外观 - 可以开发丰富的主题。
8.请描述 cookies、sessionStorage 和 localStorage 的区别。
共同点：都是保存在浏览器端，且同源的。
区别：
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
9.请解释 <script>、<script async> 和 <script defer> 的区别。
1.defer和async在网络加载过程是一致的，都是异步执行的；
2.两者的区别在于脚本加载完成之后何时执行，< script async>是加载完之后自动执行,< script defer>需要等到页面加载之后再执行。
3.如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的；而对于async，它的加载和执行是紧紧挨着的，无论声明顺序如何，只要加载完成就立刻执行，它对于应用脚本用处不大，因为它完全不考虑依赖。
其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
10.为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
浏览器从上到下依次解析html文档。将 css 文件放到头部， css 文件可以先加载。
避免先加载 body 内容，导致页面一开始样式错乱，然后闪烁。将 javascript 文件放到底部是因为：
若将 javascript 文件放到 head 里面，就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成
之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟，窗口一片空白。
为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。
页面加载的问题，先把页面加载出来，然后再去加载效果，提高用户体验度
11.什么是渐进式渲染 (progressive rendering)？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。
- 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听
DOMContentLoaded/load事件加载其他资源和内容。- 异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器
12.html5中有哪些新的标签
首先HTML5的特点是更加简洁以及更加语义化，html5中新增的标签有如：nav，header，footer，artical，section，aside，canvas，details，mark，audio，video。
13.你用过哪些不同的 HTML 模板语言？
Django的模板语言、PHP的smarty模板语言(没用过)