HTML
Doctype作用？标准模式与兼容模式各有什么区别？
> 声明位于HTML文档中的第一行，处于html标签之前，告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和js运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器以防止站点无法工作过。
介绍一下你对浏览器内核的理解
> 主要分成两部分：渲染引擎(layout engine 或 rendering engine)和js引擎
渲染引擎：负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入css等)，以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网格内容的应用程序都需要内核
js引擎：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和js引擎并没有区分很明确，后来js引擎越来越独立
- 浏览器组成：
从原理构成上分为七个模块，分别是 User Interface（用户界面）、 Browser engine（浏览器引擎） 、 Rendering engine（渲染引擎） 、 Networking（网络） 、 JavaScript Interpreter（js解释器） 、 UI Backend（UI后端） 、Date Persistence（数据持久化存储）
其中，最重要的是渲染引擎（内核）和 JavaScript 解释器（JavaScript引擎）
浏览器内核主要负责 HTML 、CSS 的解析，页面布局、渲染与复合层合成; JavaScript 引擎负责 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的分支)]
h5新特性有哪些?
- 增强了图形渲染(canvas)
- 影音(video,audio)
- 数据存储(sessionStorage/localStorage)
- 语义化更好的元素，比如article、footer、header、nav、section
- 表单控件，calendar、date、time、email、url、search
- 新的技术，webworker(专用线程)、websocket(全双工通信)、Geolocation地理定位
如何处理html5新标签的兼容性
> IE6/7/8支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式，最好的方式是直接使用成熟的框架，使用最多的是html5shiv框架 <!--[if it IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
简述一下你对HTML语义化的理解
- 用正确的标签做正确的事情
- html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
- 即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
请描述一下cookie、sessionStorage和localStorage的区别
- 相同点：都存储在客户端
- 不同点：
- 存储大小：
- cookie数据大小不能超过4k
- sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大的多，可以达到5M或更大，就是为了解决cookie存储空间不足而诞生的
- 有限时间：
- localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
- sessionStorage数据在当前浏览器窗口关闭后自动删除
- cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
- 数据域服务器之间的交互方式
- cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
iframe有哪些缺点
- iframe会阻塞主页面的onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于seo
- iframe和主页面共享连接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载
> 使用iframe之前需要考虑这些缺点，如果需要使用iframe，最好通过JavaScript动态给iframe添加src属性值
网页验证码是干嘛的，是为了解决什么安全问题？
> 是为了防止一些人使用软件恶意注册、发帖等行为而设的，它的存在是为了确保登录网站的是一个坐在电脑面前的真人，而不是一个自动登录的软件
如何判断浏览器的userAgent
- 如果userAgent中包含MSIE，说明一定是IE浏览器
- 如果userAgent中包含Trident却不包含MSIE，说明一定是IE11浏览器
- 如果userAgent中包含Firefox，说明一定是Firefox浏览器
- 如果userAgent中包含OPR，说明一定是Opera浏览器
- 如果userAgent中包含Edge，说明一定是Edge浏览器
- 如果userAgent中包含Edge，说明一定是Chrome浏览器
- 如果userAgent中包含Edge，说明一定是Edge浏览器
请简述js的垃圾回收机制
垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，
并释放掉它们所指向的内存; 主要为了以防内存泄漏，
(内存泄漏: 当已经不需要某块内存时这块内存还存在着),
JS有两种变量: 全局变量和在函数中产生的局部变量。
局部变量的生命周期在函数执行过后就结束了，
此时便可将它引用的内存释放(即垃圾回收);
但全局变量生命周期会持续到浏览器关闭页面。
JS执行环境中的垃圾回收器有两种方式：
标记清除（mark and sweep）、
引用计数(reference counting)。
标记清除: 垃圾收集器给内存中的所有变量都加上标记，
然后去掉环境中的变量以及被环境中的变量引用的变量的标记。
在此之后再被加上的标记的变量即为需要回收的变量，
因为环境中的变量已经无法访问到这些变量。
引用计数(reference counting): 这种方式常常会引起内存泄漏，
低版本的IE使用这种方式。机制就是跟踪一个值的引用次数，
当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。
当该值引用次数为0时就会被回收。
什么是渐进式渲染（progressive rendering）？
> 渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
一些举例：
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使- 用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
- 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在这里找到。
viewport是什么？
> Viewport ：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。举个例子：如果我们的屏幕是320像素 * 480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。
为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。
- Viewport属性值
- width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
- initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
- height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
- user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
img中的alt和元素的title属性作用
- img的alt属性
如果无法显示图像，浏览器将显示alt指定的内容
- 元素title属性
在鼠标移到元素上时显示title的内容
href和src区别
- href
href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
- src
src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载），直到将该资源加载、编译、执行完毕，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
行内元素和块级元素有哪些
- 行内元素
一个行内元素只占据它对应标签的边框所包含的空间
一般情况下，行内元素只能包含数据和其他行内元素
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
- 块级元素
占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
label标签有什么作用
> label 标签通常是写在表单内，它关联一个控件，使用 label 可以实现点击文字选取对应的控件。
<input type="checkbox" id="test">
<label for="test" >test</label>
HTML5的form如何关闭自动完成功能
> 将不想要自动完成的 form 或 input 设置为 autocomplete=off
DOM和BOM有什么区别
- DOM：
Document Object Model，文档对象模型
DOM 是为了操作文档出现的 API，document 是其的一个对象
DOM和文档有关，这里的文档指的是网页，也就是html文档。DOM和浏览器无关，他关注的是网页本身的内容。
- BOM：
Browser Object Model，浏览器对象模型
BOM 是为了操作浏览器出现的 API，window 是其的一个对象
window 对象既为 javascript 访问浏览器提供API，同时在 ECMAScript 中充当 Global 对象
为什么最好把 CSS 的标签放在之间？为什么最好把 JS 的
