1、简述同步与异步的区别：同步是阻塞模式，需要一段时间收到返回信息才继续执行下去，异步是非阻塞模式，不需要一直等下去，有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
2、px和em都是长度单位：px的值为固定而em值不是的会继承父级元素的字体大小16px（默认）=1em，10px=0.625em。
3、渐进增强 progressiveenhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 gracefuldegradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：a. 优雅降级是从复杂开始，意味着往回看，并减少用户体验的供给；b. 渐进增强则意味着朝前看，是从一个非常基础的版本开始，保证最基本的功能并不断扩充，以适应未来环境的需要；
4、浏览器的内核：Opera、Chrome：Blink内核。Safari：webkit内核；IE: trident内核；Firefox：gecko内核。
IE6盒子模型与W3C盒子模型：文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。CSS3中有个box-sizing属性可以控制盒子的计算方式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
· JavaScript部分
1怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName()//通过标签名称
getElementsByName()//通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
实现一个函数可以对JS中的5种主要的数据类型（Number、String、Object、Array、Boolean）进行值复制。
如何消除一个数组里面重复的元素？
在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args =Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console,args);
};
Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
说说get和post请求的区别？
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式。
原生js发送ajax请求一般经历哪些步骤？
谈谈垃圾回收机制方式及内存管理？
开发过程中遇到的内存泄露情况，如何解决的？
跨域请求资源的方法有哪些？
sessionStorage、localStorage 和 cookie 之间的区别？
1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。
2.HTML5 提供了两种在客户端存储数据的新方法：(HTML 5 Web 存储)...两者都是仅在客户端（即浏览器）中保存，不参与和服务器的通信；
· localStorage - 没有时间限制的数据存储,第二天、第二周或下一年之后，数据依然可用。
· sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除。
3、区别
· 共同点：都是保存在浏览器端，且同源的。
· 区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
· 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
· 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
· 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。WebStorage 的 api 接口使用更方便。
如何理解类的闭包/创建/继承？
JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。
function a() {
var i = 0;
function b() { alert(++i); }
return b; }
varc=a();当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。
c();
如何理解JavaScript原型链?
JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。
原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。
当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined；
谈一谈JavaScript作用域链?
当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。
作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。
· 职业规划
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
· 正则表达式
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email)); //验证邮箱
function trim(str) {
if (str &&typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
}
}
· 设计模式：对MVC、MVVM的理解
早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架.
随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。
如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。
长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。
从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的 MV框架，这个状况会大有改观。
之所以感受不到 MV*框架的重要性，是因为Model部分代码较少，View的相对多一些。如果主要在操作View和Controller，那当然 jQuery 这类库比较好用了。
· Web安全：web攻击技术
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。
· 前端性能：谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
如何优化图像、图像格式的区别？
浏览器是如何渲染页面的？
· 算法相关
"快速排序"的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为"基准"（pivot）。
（2）所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。
（3）对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
var quickSort = function(arr) {
if (arr.length<= 1) { return arr; }
var pivotIndex =Math.floor(arr.length / 2);
var pivot =arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i< arr.length; i++){
if (arr[i] <pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
returnquickSort(left).concat([pivot], quickSort(right));
};
JavaScript实现二分法查找
// 非递归算法
functionbinary_search(arr, key) {
var low = 0,
high =arr.length - 1;
while(low <=high){
var mid =parseInt((high + low) / 2);
if(key ==arr[mid]){
return mid;
}else if(key> arr[mid]){
low = mid+ 1;
}else if(key< arr[mid]){
high = mid -1;
}else{
return -1;
}
}
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result =binary_search(arr,10);
alert(result); // 9 返回目标元素的索引值
// 递归算法
functionbinary_search(arr,low, high, key) {
if (low >high){
return -1;
}
var mid = parseInt((high +low) / 2);
if(arr[mid] ==key){
return mid;
}else if(arr[mid] > key){
high = mid -1;
returnbinary_search(arr, low, high, key);
}else if(arr[mid] < key){
low = mid +1;
returnbinary_search(arr, low, high, key);
}
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result =binary_search(arr, 0, 13, 10);
alert(result); // 9 返回目标元素的索引值
· HTTP协议
1.简介
HTTP协议（Hyper Text Transfer Protocol，超文本传输协议）,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议，80端口。
HTTP基于TCP/IP通信协议来传递数据。
HTTP基于客户端/服务端（C/S）架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议的（Secure HypertextTransfer Protocol）安全超文本传输协议。
HTTP/2提供了HTTP语义的传输优化，添加了一种服务器推送模式，支持HTTP/1.1的所有核心特征，并且在其他方面做得更高效。
2.特点
（1）HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
（2）HTTP是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
（3）HTTP是无状态：无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
一次完整的HTTP事务是怎样的一个过程？（输入完网址按下回车）
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
HTTP的状态码有哪些？
HTTPS是如何实现加密？
简答题：（1）请说出三种减少页面加载时间的方法
a:尽量减少页面重复的http请求的数量；
b:服务器开启gzip压缩；
c:css样式的定义放置在文件头部；
d:js脚本放在文件末尾
e:压缩合并js、css代码
f使用多域名负载网页中的文件、图片
（2）进程和线程的区别
a、一个线程至少有一个进程，一个进程至少有一个线程
b、线程的划分尺度小于进程，使得多线程并发性高
c、进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率
d、每个独立的1线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，由应用程序控制执行线程
e、多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。
（3）cookie的弊端
a、每个特定的域名下最多生成的cookie个数有限制
b、IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie
c、为了兼容性，cookie一般不能超过最大字节4095.
d、安全性问题。如果cookie被人拦截了，那就可以取得所有的session信息
（4）浏览器本地存储
在HTML5中提供了sessionstorage和localstorage。
sessionstorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且会话结束后数据也随之销毁，是会话级别的存储。
localstorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
（5）web storage和cookie的区别
a、Cookie的大小是受限的
b、每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了宽带。
c、cookie还需要指定作用域，不可以跨域调用
d、web storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie,getCookie
e、Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而web storage仅仅是为了在本地“存储数据”而生
f、IE7 、IE6中的userdata通过简单的代码封装可以统一所有的浏览器都支持web storage
(6)、WEB应用从服务器主动推送Data到客户端有哪些方式？
a、html5 websoket
b、WebSocket通过Flash
c、XHR长时间连接
d、XHR Multipart Streaming
e、不可见的frame
f、<script>标签的长时间连接（可跨域）
（7）、对前端界面工程师这个职位是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
（8）、你在现在的团队处于什么样的角色，起到了什么明显的作用？
（9）、你的优点是什么？缺点是什么？
（10）、如何管理前端团队?
（11）、最近在学什么？能谈谈你未来3，5年给自己的规划吗？
（12）、平时如何管理你的项目？
a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
d. 页面进行标注（例如页面 模块 开始和结束）；
e. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
f. JS 分文件夹存放命名以该JS功能为准的英文翻译。
g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
（13）、说说最近最流行的一些东西吧？常去哪些网站？
CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
（14）、Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash：
a. Flash适合处理多媒体、矢量图形、访问机器
b. 对CSS、处理文本上不足，不容易被搜索
Ajax：
a. Ajax对CSS、文本支持很好，支持搜索
b. 多媒体、矢量图形、机器访问不足
共同点：
a. 与服务器的无刷新传递消息
b. 可以检测用户离线和在线状态
c. 操作DOM
（15）、请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
（16）、AMD和CMD 规范的区别？
AMD 提前执行依赖 - 尽早执行，requireJS 是它的实现
CMD 按需执行依赖 - 懒执行，seaJS 是它的实现
参考《SeaJS与RequireJS最大的区别》、《与 RequireJS 的异同》
（17）、网站重构的理解
重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进行优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
（18）、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
（19）、请介绍下cache-control
每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久
-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires）。
（20）、前端页面有哪三层构成，分别是什么？作用是什么？
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
（21）、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng：全称是“Animated PortableNetwork Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。
（22）、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
参考《一次HTTP请求中有哪些地方可以缓存》
（23）、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
（24）、谈谈以前端角度出发做好SEO需要考虑什么？
a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接广泛度（Link Popularity）
f. 合理的标签使用
二、HTML
2.1、<img>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》
2.2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体
加粗：<b>、<strong>
下标：<sub>
居中：<center>
字体：<font>、<basefont>、参考《HTML标签列表》
2.3、请写出至少5个html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
参考《HTML5 标签列表》
2.4、请说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
2.5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.6、你知道多少种Doctype文档类型？
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
2.7、HTML与XHTML——二者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须用小写字母。
d. XHTML 文档必须拥有根元素。
参考《XHTML 与 HTML 之间的差异》
2.8、html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. 音频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页面会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可用性产生负面影响的元素：frame，frameset，noframes；
2.9、iframe的优缺点？
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
b. iframe无刷新文件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页面的Onload事件
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
参考《iframe的一些记录》
2.10、Quirks模式是什么？它和Standards模式有什么区别？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
b. 设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用
d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
2.11、请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
f. 不够语义
参考《为什么说table表格布局不好？》
2.12、简述一下src与href的区别
src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
扫一扫
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
