温故而知新，保持空杯心态
HTML 和 CSS
你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么
| 浏览器名称 | 内核 |
|---|---|
| IE | trident |
| Firefox（火狐） | gecko |
| Safari | webkit |
| Opera | 以前是 presto ，现在已改用 Google Chrome 的 Blink 内核 |
| Chrome（谷歌） | Blink（基于 webkit，Google 与 Opera Software 共同开发） |
每个 HTML 文件里开头都有个重要的东西， Doctype,知道这个是干什么的吗？
声明位于文档中的最前面的位置，处于 标签之前，此标签可以告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照哪种规范解析页面）
Quirks 模式是什么？它和 Standards 模式有什么区别？
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差，IE6 将对 CSS 提供更好的支持，然后这时问题就来了，因为有很多页面是基于旧的的布局方式写的，如果 IE6 支持 CSS 则将这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，提供更强大的功能，尤其是新功能不兼容旧功能的时候。遇到这种问题时的一个常见的做法就是增加参数和分支，即当某个参数为真，我们就使用新的功能，如果这个参数不为真的时候，就使用旧的功能，这样就可以不破坏原来的程序，又能提供新的功能。IE6 也是类似这样做，它将 DTD 当成了 这个参数，因为当前的页面大家都不会去写 DTD ，所以 IE6 就假定如果写了 DTD 就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，就采用兼容之前的布局方式，这就是 Quirks 模式（怪癖模式，诡异模式，怪异模式）
实例：
复制代码第一种：表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode ，这种 doctype 是最推荐的一种。
第二种：浏览器同样会选择 Standards Mode ,虽然第一种 doctype 有一些区别，但几乎可以认为是一样的
第三种：浏览器会选择 Almost Standards Mode ，需要注意的是乳沟今后需要把这个页面重新改写成 HTML5 规范，那么 table 标签中的分割图片问题可能会被错乱。
当 doctype 缺失（不注明、写错）时候，浏览器会选择 Quirks Mode,这是非常不推荐的方式，我们应该尽量避免 Quirks Mode
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
-
早期的 IE 浏览器（IE 6 以前）将盒子的 padding 和 border 算到了盒子的尺寸中，这一模型被称为 IE 盒模型。在 IE 盒模型中
-
box width = content width + padding left + padding right + border left + border right
box width = content width + padding left + padding right + border left + border right
而在 W3C 标准的盒模型中，box 的大小就是 content 的大小
- box width = content width，box height = content height
这一区别将导致页面绘制时所有的块级元素都出现很大的差别，所以两种不同的文档模式下的页面也区别很大。
-
-
设置行内元素的高宽，在 Standards 模式下，给
等行内元素设置 width 和 height 都不会生效，而在 quirks 模式下，会生效。 -
设置百分比的高度，在 Standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置了一个百分比的高度是无效用的。
-
margin:0 auto 设置水平居中，使用 margin:0 auto 在 standards 模式下可以使元素水平 居中，但在 quirks 模式下却会失效。
-
在Quirks Mode下，为body设置一个margin是无效的。
-
默认情况下，IE有一个垂直滚动条，尽管当没有东西可以滚动的时候，它是非活动状（迟钝状态），在Quirks Mode下，你可以通过设置body { overflow: auto;}删除它（当不需它的时候），但是在标准模式下，你仍然需要增加html { overflow: auto;}
-
默认的浮动图片的水平margin是3像素（而不是0）。
-
字体属性不会从body或其他封闭元素继承到table中。特别是font-size。字体，颜色，行高也都有可能。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是 看文章看的，甚至完全不知道。）
div+css 的布局较 table 布局有什么优点
- 改版的时候更方便，只要改css 文件
- 页面加载速度更快、结构化清晰、页面显示简洁
- 表现与结构相分离
- 易于优化（seo）搜索引擎更加友好，排名更容易靠前
img 的 alt 与 title 有何异同？strong 与 em 的异同
alt （alt text）：为不能显示图像、窗体或 applets 的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang 属性指定。（在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示）
title （tool tip）: 该属性为设置该属性的元素提供建议性的消息
strong：粗体强调标签，强调，表示内容的重要性
em：斜体强调标签，更强烈强调，表示内容的强调点
描述一下渐进增强与优雅降级之间的不同
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 （graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的攻击，而渐进增强则是从一个非常基础的，能够器作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器前的一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable）” 的浏览体验，可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其他的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有点寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到了内容。这使得“渐进增强“成为了一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其”分级式浏览器支持“策略的原因所在
可以利用多个域名来存储网站资源会更有效？
- CDN 缓存更方便
- 突破浏览器并发限制
- 节约 cookie 带宽
- 节约主域名的连接数，优化页面响应速度
- 防止不必要的安全问题
对网页标准和标准制定机构重要性的理解
网页标准和标准制定机构都是为了能让 web 发展的更 “健康”，开发者遵循了统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG 、安全问题,最终提高网站易用性。
描述一下 cookies，sessionStorage 和 localStorage 的区别
sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因为 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
除此之外，Web Storage 拥有 setItem,getItem,removeItem，clean 等方法，不像 cookie 需要前端开发者自己封装 setCookie,getCookie，但是 Cookie 也不是不可以或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分存在，而 Web Storage 仅仅是为了在本地“存储”数据而生。
前端设置用户设置，获取，清空 Cookie
// 写 cookies
function setCookie(){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "=" + encodeURIComponent(value) + "；expires=" + exp.toGMTString();
}
// 读取 cookies
function getCookie(name){
var arr,reg = new RegExp("(^|)" + name + "+([^;]*)(;|$)");
if(arr.document.cookie.match(reg)
return decodeURIComponent(arr[2]);
else
return null;
}
//删除 cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if(!cval = null){
document.cookie = name + "=" + cval + ";expires" + exp.toGMTString();
}
}
复制代码简述一下 src 与 href 的区别
src 用于替换当前元素， href 用于在当前文档和应用资源之间建立联系。
src 是 srouce 的缩写，指向外部资源的位置，指向的内容和将会嵌入到文档中当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和frame 等元素。