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标签