HTML基础篇

由于一些原因，要换工作了，毫无准备，心情郁闷了几天。但是还是更新了简历，准备复习面试。面 了3天。面试中问到了一些问题，想好好整理一下。越是大公司越看重基础。这几天遇到的面试题，有15到简答题，有两页面试基础题。最夸张的是有5页面试题，我做了一个多小时。拿到面试题内心是崩溃的。

我计划按照，Html篇，css篇，js篇，和架构篇来总结一下。总结的可能不全。后面再补充。

HTML基础篇

1 ，DOCTYPE有什么作用？严格模式与混杂模式如何区分？它们有何意义?

1，告诉浏览器使用哪个版本的HTML规范来渲染文档。

2，严格模式，又称标准模式，是指浏览器按照W3C标准来解析代码，一种严格要求的DTD，排版和JS运作模式均是以该浏览器支持的最高标准运行。

3，混杂模式，又称怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，页面以宽松的向后兼容的方式显示，就严格度上来说不如严格模式，但是模拟老式浏览器的行为可以防止站点无法工作。

2，行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素：a span img input select 
块级元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

3，介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

4，常见的浏览器内核有哪些？

1. Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
2. Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
3. Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
4. Webkit：Safari Chrome

5，cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。

区别：

1. cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2. 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
3. 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
4. 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

6,iframe框架有那些优缺点？

优点：

1. iframe能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

1. 搜索引擎的爬虫程序无法解读这种页面
2. 框架结构中出现各种滚动条
3. 使用框架结构时，保证设置正确的导航链接。
4. iframe页面会增加服务器的http请求

7,HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

新增加了图像、位置、存储、多任务等功能。
新增元素：

1. canvas
2. 用于媒介回放的video和audio元素
3. 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
4. 语意化更好的内容元素，比如 article footer header nav section
5. 位置API：Geolocation
6. 表单控件，calendar date time email url search
7. 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
8. 拖放API：drag、drop

移除的元素：

1. 纯表现的元素：basefont big center font s strike tt u
2. 性能较差元素：frame frameset noframes

8,src 和href的区别 ？

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

9,浏览器渲染过程？

　1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

　2. 将CSS解析成 CSS Rule Tree 。

　3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

　4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。

　5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。