12、xhtml和html有什么区别
①HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
②最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
13、行内元素有哪些?块级元素有哪些?空(void)元素有那些？
行内元素和块级元素的区别是什么？行内块元素的兼容性使用？（IE8 以下）
**块级元素：**div p h1 h2 h3 h4 form ul ol dl dt dd
行内元素: a b br i span input select image strong（强调的语气）
常见空元素：
<br>/<hr>/<img>/<input>/<link>/<meta>
不常见空元素：
<area>/<base>/<col>/<command>/<embed>/<keygen>/<param>/<source>/<track>/<wbr>
**行内元素：**会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
**块级元素：**各占据一行，垂直方向排列。从新行开始结束接着一个断行。
兼容性：
display:inline-block;*display:inline;*zoom:1;
14、CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式包括内联 内嵌 外链 导入
link和@import的区别是 ：
①link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；
④后者优先级更高
15、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?介绍一下你对浏览器内核的理解
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opera(blink)
对内核的理解：
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
①渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
②JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
16、解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
适用于以下情况：
①静态图片，不随用户信息的变化而变化
②小图片，图片容量比较小
③加载量比较大
17、清除浮动的几种方式，各自的优缺点
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
比较好的是第3种方式，好多网站都这么用。
18、Doctype作用？标准模式与兼容模式各有什么区别?
①<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
②标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
注意点：
HTML5 只需要写<!DOCTYPEHTML>不需要对DTD进行引用，因为HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
19、iframe有哪些缺点？
①iframe会阻塞主页面的Onload事件，搜索引擎的检索程序无法解读这种页面，不利于SEO；
②iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
20、如何实现浏览器内多个标签页之间的通信?
①通过WebSocket、SharedWorker来实现；
②也可以调用localstorge、cookies等本地存储方式。
localstorge另一个浏览上下文（另一个标签页）里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。
21、如何在页面上实现一个圆形的可点击区域？
①map+area或者svg
②border-radius
③纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
22、CSS3有哪些新特性？
① CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）；
② 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）；
③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜
④ 增加了更多的CSS选择器 多背景 rgba
Html5
1、Html5与html4相比，各有何优缺点？ 怎样处理html5新标签的兼容性问题？
html5余html4的异同请看以下的链接
兼容性问题
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。
Javascript
1、JS如何使页面跳转?怎么引入一个外部JS文件?
①直接在head标签内写入js代码，如下
②引入写好的js文件，使用语句
也是直接放入到head标签里头，也有的是放在前面。
2、输入框的验证用什么事件?
change(fn)
3、undefined与null有何异同？
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
undefined：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
null：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
它们都表示空，转换为boolean后都为false，但是null代表一个对象变量已经被初始化，但未装入对象；undefined表示未初始化变量
4、=与有何异同？
相同点：都是判定两个值是否相等
不同点：不会判断类型，而=会判断类型
5、如何判断一个变量的值是否为数字？以及有哪些手段判断变量值的数据类型？
全局函数isNaN可以判断一个变量的值是否为数字。
可以使用运算符type、instanceof判断变量值的数据类型。
6、什么是Bom什么是Dom?你如何理解Dom?
7、Array的join、push、splice、slice各有何用途，splice与slice有何异同？
join：使用指定间隔符连接所有元素为字符串
push：在尾部添加元素并维护array实例的length
splice与slice都是截取一部分元素。不同的在于：slice返回截取后的新实例，splice在原array实例上操作，更详细的请见下文链接。
8、如何阻止表单提交？
在onsubmit事件中返回false
9、如何动态操作表格？
可以像普通dom一样操作，但是因为表格的dom比较复杂，所以我通常是使用table的insertRow、deleteRow及tr对象的insetCell、deleteCell操作。
10、String.match与RegExp.exec有何区别？
match只会返回没有分组的全部匹配结果或者有分组的第一次匹配结果；
而exec可以利用循环返回全部匹配结果。
11、为验证手机号写一个正则。
function checkSubmitMobil()
{
if ($(“#phoneNum”).val() == “”) {
alert(“手机号码不能为空！”);
//$(“#moileMsg”).html(“手机号码不能为空！”);
$(“#mobile”).focus();
return false;
}
if (!KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲phoneNum").val(…/))
{
alert(“手机号码格式不正确！”);
//$(“#moileMsg”).html(“手机号码格式不正确！请重新输入！”);
$(“#phoneNum”).focus();
return false;
}
return true;
}
12、正则的i标记与g标记各有何用途？
i：不区分大小写；
g：全局匹配。
13、为String添加trim()方法。
String.prototype.trim = function() {
return this.replace(/^ +| +$/g,“”);
}
14、简述COOKIE。在JS中如何操作Cookie?
15、谈谈javascript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制。
16、谈谈innerHTML outerHTML innerText之间的区别。
①innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法；
②innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；
③outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码；
④innerText代表一个元素节点内由所有子文本节点内容组成的文本；
17、在JavaScript中定时调用函数 foo() 如何写？
setTimeout(
foo,
1000 //这里设置延时数
);
18、setTimeout与setInterval有何区别?
①setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
②不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
19、你在js中用过array吗？如果用过，array中添加数据用什么方法？
在尾部添加使用push();
在头部添加使用unshift();
在任意位置添加使用splice(),但要注意把它的删除个数设置为0;
array详细介绍请看下文链接
20、简述javascript的优缺点。
**优点：**简单易用，与Java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可执行程序，并且事先不用编译，逐行执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；
**缺点：**不适合开发大型应用程序；
21、Javascript有哪些内置对象?
只有Math和Global（在浏览器环境中，Global就是Window）
22、列举Javascript的本地对象。
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
23、javascript的typeof返回哪些数据类型
object number function boolean undefind string
24、例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（== – ===）
25、IE和DOM事件流的区别
①执行顺序不一样、
②参数不一样
③事件加不加on
④this指向问题
26、事件绑定和普通事件有什么区别
①事件绑定就是针对dom元素的事件，绑定在dom元素上
②普通事件即为非针对dom元素的事件
27、事件委托是什么
利用事件冒泡的原理，让自己的所触发的事件，由他的父元素代替执行！
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
例子请看以下链接
28、闭包是什么，有什么特性，对页面有什么影响
什么是闭包
“官方”的解释：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等语言中都能找到对闭包不同程度的支持。
通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在；
对页面的影响
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。
详细请看以下推荐链接
深入理解JavaScript的闭包特性 如何给循环中的对象添加事件
29、javascript的本地对象，内置对象和宿主对象
①本地对象为array obj regexp等可以new实例化
②内置对象为gload Math 等不可以实例化的
③宿主为浏览器自带的document,window 等
30、编写一个数组去重的方法
思路：
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
代码如下：
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,‘你好’,112,112,34,‘你好’,‘str’,‘str1’];
alert(arr.unique3());
31、this对象的理解
①this总是指向函数的直接调用者（而非间接调用者）；
②如果有new关键字，this指向new出来的那个对象；
③在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
32、eval是做什么的？
①它的功能是把对应的字符串解析成JS代码并运行；
②应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
③由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
33、new操作符具体干了什么呢?
①创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
②属性和方法被加入到 this 引用的对象中。
③新创建的对象由 this 所引用，并且最后隐式的返回 this 。
34、call() 和 apply() 的区别和作用？
①apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
如：function.apply(this,[1,2,3])；
②call()的第一个参数是上下文，后续是实例传入的参数序列。
如：function.call(this,1,2,3)；
如何获取UA
JS代码
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
35、请解释一下 JavaScript 的同源策略
**概念:**同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
36、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；
Ajax
1、什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。
2、如何使用Ajax从服务器获取数据？
①创建XMLHttpRequest对象，注意兼容IE6的情况
②使用XMLHttpRequest对象的open方法，其中有三个参数：
a.字符串，代表html的请求:GET,POST。
b.要访问的服务器的URL。
c.Boolean值，true表示异步，flase表示同步，一般情况下是异步，默认为true。
③ajax的回调函数。xhr.readyState==4表示请求已经结束，服务器响应完成。
status表示http请求的状态，200表示正常响应；404表示资源找不到；500表示服务器端错误。
④发送ajax请求。如果没有数据，可以不传或者传递null；如果post请求传递数据：首先设置xhr的请求头信息：
xhr.setRequestHeader(“Content-type”,“application/x-www-formurlencoded”);
再传递参数：
xhr.send(name=liujianhong&password=123);
3、解释XMLHttpRequest是什么？
XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。
4、谈谈你对Ajax的理解。你在项目中如何使用Ajax？手写一个简单的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，主要用来页面异步刷新，也是构建RIA的一种基础技术。因为它涉及浏览器兼容、跨域等问题，在项目中一般会使用一些基础类库辅助实现，如jQuery等。
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：
进阶阶段
进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。
JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。
我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。
然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。
1、JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
2、前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
以 Vue 为例，我整理了如下的面试题。
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
