1. 对web标准以及W3C的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
2. XHTML与HTML有什么区别？
HTML是一种基于WEB网页设计语言，xhtml是一个基于xml的治标语言最主要的不同：XHTML元素必须被正确的嵌套XHTML元素必须被关闭XHTML标签必须使用小写字母XHTML文档必须拥有根元素
3. Doctype作用?标准模式与兼容模式的区别？
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 标准模式的排版JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4. 元素的分类及内容？
CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：<br> <hr> <img><input> <link> <meta>
鲜为人知的是： <area> <base><col> <command> <embed> <keygen> <param><source> <track> <wbr>
5.CSS基本的盒模型？
CSS中Boxmodel是分为两种:: W3C标准 和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。
在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
（1）基本的盒模型：内容（content），边框border,边界margin,填充padding注：IE的content部分包含了 border 和 pading;
（2）弹性盒模型：优势在于：开发只需声明布局应该具有的行为，而不需要给出具体的实现方式，它的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。与传统布局不同的是，弹性盒模型布局与方向是无关的，传统布局中，block布局是把块在垂直方向从上到下排列的，在inline布局中，是把元素在水平方向上排列的，而在弹性盒模型中，方向是由开发人员控制。性盒模型的两个尺寸：主轴尺寸和交叉轴尺寸，主轴在水平上，与主轴和交叉尺寸对应的属性分别CSS属性中的widht和height；
（3）其他布局：请移步https://www.cnblogs.com/yanayana/p/7066948.html
6.CSS基本的引入方式有哪些？link和@import的区别？
方式：内联，内嵌，外链，导入;
区别：
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
7.CSS的选择符有哪些？哪些属性可以继承？优先级算法如何计算？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child） 可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important比内联优先级高;
8.CSS3新增的伪类有哪些？
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
9.前端页面由哪三层构成？分别是什么？作用是什么？
结构层：html
表示层：CSS
行为层：JavaScript
10.CSS的基本语句构成？
选择器{属性1: 值1;属性2: 值2;……}
11.常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,Tencent Traveler,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [Chrome的：Blink（WebKit的分支）]。
12.写出几种IE6常见的bug及解决方法？
双边距BUG：float引起的，使用display:inline
3像素问题：float引起的，使用display：inline-3px;
超链接hover：点击后失效，使用正确的书写顺序 link visited hover active
z-index问题：给父级添加position:relative
Png透明：使用js代码改
Min-height：最小高度！important解决
select在IE6下遮盖：使用iframe嵌套
为什么没有办法定义1px左右的高度容器：IE默认的行高造成的，使用overflow:hidden; zoom:0.08; line-height:1px;当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？
在父窗口加上overflow：auto； _zoom：
13.imge和title标签的alt属性的区别是什么？
当图片不显示的时候，使用alt的文字代替
title为该属性提供信息
14.描述CSSreset的作用和用途
reset重置浏览器的CSS默认属性，浏览器的分类不同样式不同，然后重置，让他们统一;
15.面向对象的CSS
两个主要的原则:从皮肤分割出结构从内容里分割出容器
16.清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)15.清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
17.HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
18.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：
HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
19.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
20.HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或其下某个input 设置为 autocomplete=off。
21.什么是CSS的预处理器和后处理器？
预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
后处理器是对css进行处理，并最终生成css预处理器，它属于广义上的css预处理器
22.AMD与CMD的区别？
共同点就是都是一种框架在推广的过程中对模块定义的规范产出；而且他们都是异步加载模块。
AMD即Asynchronous Module Definition,翻译过来就是异步模块化定义
CMD即 common moudle definition,翻译过来即通用模块定义
模块定义的方式和模块加载时机不同
1.RequireJS在主文件里是将所有的文件同时加载，然而SeaJS强调一个文件一个模块。
2.AMD推崇依赖前置，CMD推崇依赖就近。
23.ajax是什么？如何创建一个ajax?
Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。
创建：
1. 创建Ajax核心对象XMLHttpRequest
var xmlhttp;
if (window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome,Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// 兼容 IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
2. 向服务器发送请求
xmlhttp.open(method,url,async);
send(string)
3. 服务器响应处理
responseText 获得字符串形式的响应数据;
responseXML 获得XML 形式的响应数据;
3.1 同步处理
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
直接在send()后面处理返回来的数据。
3.2 异步处理
异步处理相对比较麻烦，要在请求状态改变事件中处理。xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4&&xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
一共有5中请求状态，从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：
200: "OK"
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
408 （请求超时） 服务器等候请求时发生超时。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。
24.http的状态码有哪些？分别是什么意思？
1xx(临时响应)：表示临时响应并需要请求者继续执行操作的状态码。
100(继续)请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
101(切换协议)请求者已要求服务器切换协议，服务器已确认并准备切换。只有在切换新的协议更有好处的时候才应该采取类似措施。
102 Processing由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。
2xx (成功)：表示成功处理了请求的状态码。
200(成功)服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。如果是对您的robots.txt 文件显示此状态码，则表示 Googlebot 已成功检索到该文件。
201(已创建)请求成功并且服务器创建了新的资源。
202(已接受)服务器已接受请求，但尚未处理。
203(非授权信息)服务器已成功处理了请求，但返回的信息可能来自另一来源。
204(无内容)服务器成功处理了请求，但没有返回任何内容。
205(重置内容)服务器成功处理了请求，但没有返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图(例如，清除表单内容以输入新内容)。
206(部分内容)服务器成功处理了部分 GET 请求。
3xx (重定向)：要完成请求，需要进一步操作。通常，这些状态码用来重定向。Google 建议您在每次请求中使用重定向不要超过 5 次。您可以使用网站管理员工具查看一下 Googlebot 在抓取重定向网页时是否遇到问题。诊断下的网络抓取页列出了由于重定向错误导致 Googlebot 无法抓取的网址。
300(多种选择)针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301(永久移动)请求的网页已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。您应使用此代码告诉某个网页或网站已永久移动到新位置。
302(临时移动)服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉某个网页或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。
303(查看其他位置)请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。对于除 HEAD 之外的所有请求，服务器会自动转到其他位置。
304(未修改)自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。服务器可以告诉 Googlebot 自从上次抓取后网页没有变更，进而节省带宽和开销。
305(使用代理)请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307(临时重定向)服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应 GET 和 HEAD 请求的 301 代码类似，会自动将请求者转到不同的位置，但您不应使用此代码来告诉 Googlebot 某个页面或网站已经移动，因为 Googlebot 会继续抓取原有位置并编制索引。
4xx(请求错误):这些状态码表示请求可能出错，妨碍了服务器的处理。
400(错误请求)服务器不理解请求的语法。
401(未授权)请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。
403(禁止)服务器拒绝请求。如果您在 Googlebot 尝试抓取您网站上的有效网页时看到此状态码(您可以在 Google 网站管理员工具诊断下的网络抓取页面上看到此信息)，可能是您的服务器或主机拒绝了 Googlebot 访问。
404(未找到)服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
如果您的网站上没有 robots.txt 文件，而您在Google 网站管理员工具"诊断"标签的 robots.txt 页上看到此状态码，则这是正确的状态码。但是，如果您有robots.txt 文件而又看到此状态码，则说明您的 robots.txt 文件可能命名错误或位于错误的位置(该文件应当位于顶级域，名为 robots.txt)。
如果对于 Googlebot 抓取的网址看到此状态码(在"诊断"标签的HTTP 错误页面上)，则表示 Googlebot 跟随的可能是另一个页面的无效链接(是旧链接或输入有误的链接)。
405(方法禁用)禁用请求中指定的方法。
406(不接受)无法使用请求的内容特性响应请求的网页。
407(需要代理授权)此状态码与 401(未授权)类似，但指定请求者应当授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。
408(请求超时)服务器等候请求时发生超时。
409(冲突)服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，以及两个请求的差异列表。
410(已删除)如果请求的资源已永久删除，服务器就会返回此响应。该代码与 404(未找到)代码类似，但在资源以前存在而现在不存在的情况下，有时会用来替代404代码。如果资源已永久移动，您应使用 301 指定资源的新位置。
411(需要有效长度)服务器不接受不含有效内容长度标头字段的请求。
412(未满足前提条件)服务器未满足请求者在请求中设置的其中一个前提条件。
413(请求实体过大)服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414(请求的 URI 过长)请求的 URI(通常为网址)过长，服务器无法处理。
415(不支持的媒体类型)请求的格式不受请求页面的支持。
416(请求范围不符合要求)如果页面无法提供请求的范围，则服务器会返回此状态码。
417(未满足期望值)服务器未满足"期望"请求标头字段的要求。
5xx(服务器错误):这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
500(服务器内部错误)服务器遇到错误，无法完成请求。
501(尚未实施)服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502(错误网关)服务器作为网关或代理，从上游服务器收到无效响应。
503(服务不可用)服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。
504(网关超时)服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505(HTTP 版本不受支持)服务器不支持请求中所用的 HTTP 协议版本。
25.检测浏览器版本的方式有哪些？
使用navigator.userAgent的值来判断。userAgent是JavaScript的内置对象navigator的属性。
26.js有哪些基本的数据类型与内置对象？
JS中的基本数据类型：
String 、number、null、boolean、undefined、symbol（ES6）
object是复杂数据类型
JS中的内置函数（对象）:
String（）、Number（）、Boolean（）、RegExp（）、Date（）、Error()、Array（）、
Function（）、Object（）、symbol（）;类似于对象的构造函数
26.Dom操作节点？
查找：
getElementByID() // 得到单个节点
getElementsByTagName() // 得到节点数组NodeList
getElementsByName() // 得到节点数组 NodeList
同时还可以利用元素节点的属性获取它的父子节点和文本节点：
子节点
Node.childNodes //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点，如果用这种方式获取节点列表，需要进行过滤
Node.firstChild //返回第一个子节点
Node.lastChild //返回最后一个子节点
父节点
Node.parentNode // 返回父节点
Node.ownerDocument //返回祖先节点（整个document）
同胞节点
Node.previousSibling // 返回前一个节点，如果没有则返回null
Node.nextSibling // 返回后一个节点
创建：
createElement() // 按照指定的标签名创建一个新的元素节点
创建代码片段（为避免频繁刷新DOM，可以先创造代码片段，完成所有节点操作之后统一添加到DOM中）
createDocumentFragment()
复制：
clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示复制该节点下的所有子节点；false表示只复制该节点
移除:
parentNode.removeChild(childNode); // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用
插入（移动）：
移动DOM节点也就是把这个节点插入到html文档中的某个地方，这里js给了我们两个方法：
1.appendChild()：把节点插入到父节点的末尾。
document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾
2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。
var oP = createElement('p'); //创建一个p节点
document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面
替换：
替换DOM节点的方法是replaceChild()。
var oSpan = document.createElement('span'); //创建一个span标签
document.body.replaceChild(oSpan,oBox); //用span标签替换div标签
5016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
