浏览器的内核

渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
IE——Trident
Safari——Webkit
Chrome——Blink引擎（基于Webkit2）
Opera——Blink
Firefox——Gecko

DOCTYPE

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

HTML5 ：不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

HTML4.01 ：基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

link和@import

相同：都是外部引用CSS方式
区别：
1、link是xhtml标签，无兼容问题；除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS，且低版本的浏览器不兼容
2、link引用CSS时候，页面载入时同时加载；@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
3、link支持使用javascript控制去改变样式，而@import不支持
4、link方式的样式的权重高于@import的权重
5、import在html使用时候需要style标签

很多网站不常用table iframe的原因

浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

jpg和png格式图片的区别

jpg是有损压缩格式，png是无损压缩格式。相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

seo优化问题

meta标签
name=“keywords”
name=“description”
img标签
增加alt=" ",
h1~h6标签
h1——要分配给网站名称或给带alt标签的logo使用，用以强调网站名称。
h2——定义“站点副标题”。如果没有副标题最好空着。
h3——定义导航栏目名称。
h4——定义文章列表标题，但大多数内容系统，文章列表输出用UL标签，所以h4可能就派不上用场，这里只是以此类推。浏览器会自动地在标题的前后添加空行。
请确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号文本而使用标题因为搜索引擎使用标题为你的网页的结构和内容标志索引。

页面结构清晰
使用语义化标签比如header、footer、content、section，js、css使用外部文件

添加robots.txt
在项目根目录添加robots.txt文件，robots.txt文件可以告诉搜索引擎哪些是重点，哪些又是可以忽略的，节约搜索引擎蜘蛛抓取网页的时间，也在一定程度上节省了服务器资源

网站外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高排名。

H5的新标签

canvas

H5移除的元素

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

< a >标签

两个< a >标签换行写会有空格，如果不想要空格，则两个< a >写在同一行
含义不同：alt是当前图片不存在时的替代文字；tittle是对图片的描述与进一步说明
在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。

strong与em的异同

strong粗体强调标签，强调，表示内容的重要性；
em斜体强调标签，更强烈强调，表示内容的强调点；

渐进增强 和 优雅降级

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级（graceful degradation）:一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

优雅降级观点
认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作拿牌在开发周期的最后阶段，并把测试对象限定在主流浏览器（如IE、Mozilla等）的前一个版本。在这种规范下，旧版浏览器被认为仅能提供“简陋却无妨（poor,but passable）”的浏览体验。你可以做一些小的调整来适应某个特定浏览器。但由于他们并非我们关注重点，所以除了修复较大的错误之外，其他的差异将被直接忽略。

渐进增强观点
认为应关注内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都设计到内容。这使得渐进增强称为一种更合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持”策略的原因所在。

cookies，sessionStorage和localStorage的区别

sessionStorage——用于本地存储一个回话（session）中的数据，
localStorage——概念和cookie相似，区别是它是为了更大容器存储设计的，仅为了在本地存储数据而生。
Cookie——为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递。

有效时间
· localStorage —— 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage —— 数据在当前浏览器窗口关闭后自动删除。
· cookie —— 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
存储大小
· cookie —— 不能超过4k
· sessionstorage、localstorage —— 可达到5M
作用域
· cookie、localstorage —— 在所有的同源窗口都共享
· sessionstorage —— 在不同的浏览器不共享，即使同一页面

iframe框架优缺点

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

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