常见面试题

最新推荐文章于 2020-02-28 21:19:26 发布

bajun3444570

最新推荐文章于 2020-02-28 21:19:26 发布

阅读量152

点赞数

文章标签：面试 json xhtml

原文链接：http://www.cnblogs.com/nemoDuoo/p/4960200.html

版权

Post 和Get 方法有如下区别:
1.Post 传输数据时，不需要在URL 中显示出来，而Get 方法要在URL 中显示。
2.Post 传输的数据量大，可以达到2M，而Get 方法由于受到URL 长度的限制,
只能传递大约1024 字节.
3.Post 顾名思义,就是为了将数据传送到服务器段,Get 就是为了从服务器段取得
数据.而Get 之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样
的数据.Post 的信息作为http 请求的内容，而Get 是在Http 头部传输的。
get 方法用Request.QueryString["strName"]接收
post 方法用Request.Form["strName"] 接收
注意：
虽然两种提交方式可以统一用Request("strName")来获取提交数据，但是
这样对程序效率有影响，不推荐使用。
一般来说，尽量避免使用Get 方式提交表单，因为有可能会导致安全问题
1、什么是JSONP？
要了解JSONP，不得不提一下JSON，那么什么是JSON ？
JSON is a subset of the object literal notation of JavaScript. Since JSON is
a subset of JavaScript, it can be used in the language with no muss or
fuss.
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script

tags 返回
至客户端，通过javascript callback 的形式实现跨域访问（这仅仅是JSONP 简单的实

现形
式）。
2、JSONP 有什么用？
由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的

资源，
为了实现跨域请求，可以通过script 标签实现跨域请求，然后在服务端输出JSON 数据

并
执行回调函数，从而解决了跨域的数据请求。
3、如何使用JSONP？
下边这一DEMO 实际上是JSONP 的简单表现形式，在客户端声明回调函数之后，客户

端
通过script 标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函

数。
Jsonp 原理：
首先在客户端注册一个callback, 然后把callback 的名字传给服务器。
此时，服务器先生成json 数据。
然后以javascript 语法的方式，生成一个function , function 名字就是传
递上来的参数jsonp.
最后将json 数据直接以入参的方式，放置到function 中，这样就生成了
一段js 语法的文档，返回给客户端。
客户端浏览器，解析script 标签，并执行返回的javascript 文档，此时数
据作为参数，传入到了客户端预先定义好的callback 函数里.（动态执行回调函
数）;
JSONP 的优点是：它不像XMLHttpRequest 对象实现的Ajax 请求那样受到同源策略

的限制；它的
兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest 或

ActiveX 的支持；并
且在请求完毕后可以通过调用callback 的方式回传结果。
JSONP 的缺点则是：它只支持GET 请求而不支持POST 等其它类型的HTTP 请求；它

只支持跨域
HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript 调用的问题

。
使用JSON 的优点在于：
 比XML 轻了很多，没有那么多冗余的东西。
 JSON 也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML 这样
的浏览器可以直接显示，浏览器对于JSON 的格式化的显示就需要借助一些插件了。
 在JavaScript 中处理JSON 很简单。
 其他语言例如PHP 对于JSON 的支持也不错。
JSON 也有一些劣势：
 JSON 在服务端语言的支持不像XML 那么广泛，不过JSON.org 上提供很多语言的
库。
 如果你使用eval()来解析的话，会容易出现安全问题。
JSONP 原理
JSONP 的最基本的原理是：动态添加一个<script>标签，而script 标签的src 属性是

没有跨域的限制
的。这样说来，这种跨域方式其实与ajax XmlHttpRequest 协议无关了。
这样其实"jQuery AJAX 跨域问题"就成了个伪命题，jquery $.ajax 方法名有误导人之

嫌。
如果设为dataType: 'jsonp'，这个$.ajax 方法就和ajax XmlHttpRequest 没什么关系

了，取而代之的
则是JSONP 协议。JSONP 是一个非官方的协议，它允许在服务器端集成Script tags

返回至客户端，
通过javascript callback 的形式实现跨域访问。
JSONP 即JSON with Padding。由于同源策略的限制，XmlHttpRequest 只允许请求

当前源（域名、
协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html 的script 标记来

进行跨域请求，
并在响应中返回要执行的script 代码，其中可以直接使用JSON 传递javascript 对象。

这种跨域的
通讯方式称为JSONP。
jsonCallback 函数jsonp1236827957501(....)：是浏览器客户端注册的，获取跨域服

务器上的json 数
据后，回调的函数
Jsonp 的执行过程如下：
首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback 的名字

(如:jsonp1236827957501)
传给服务器。注意：服务端得到callback 的数值后，要用jsonp1236827957501(......)

把将要输出的json
内容包括起来，此时，服务器生成json 数据才能被客户端正确接收。
然后以javascript 语法的方式，生成一个function， function 名字就是传递上来的参

数
'jsoncallback'的值jsonp1236827957501 .
最后将json 数据直接以入参的方式，放置到function 中，这样就生成了一段js 语法的

文档，返
回给客户端。
客户端浏览器，解析script 标签，并执行返回的javascript 文档，此时javascript 文档

数据，作为参
数，传入到了客户端预先定义好的callback 函数(如上例中jquery $.ajax()方法封装的

的success:
function (json))里。
可以说jsonp 的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的

(qq 空间就是大
量采用这种方式来实现跨域数据交换的)。JSONP 是一种脚本注入(Script Injection)行

为，所以有一
定的安全隐患。
那jquery 为什么不支持post 方式跨域呢？
虽然采用post+动态生成iframe 是可以达到post 跨域的目的(有位js 牛人就是这样把

jquery1.2.5 打
patch 的)，但这样做是一个比较极端的方式，不建议采用。
也可以说get 方式的跨域是合法的，post 方式从安全角度上，被认为是不合法的，万

不得已还是不要
剑走偏锋。
client 端跨域访问的需求看来也引起w3c 的注意了，看资料说html5 WebSocket 标准

支持跨域的数
据交换，应该也是一个将来可选的跨域数据交换的解决方案。
来个超简单的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript"
src="http://crossdomain.com/jsonServerResponse?

jsonp=jsonpCallback"></script
>
</head>
<body>
</body>
</html>
其中jsonCallback 是客户端注册的，获取跨域服务器上的json 数据后，回调的函数。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback 这个url 是

跨域服务器取
json 数据的接口，参数为回调函数的名字，返回的格式为：jsonpCallback({msg:'this

is json data'})
简述原理与过程：首先在客户端注册一个callback, 然后把callback 的名字传给服务器

。此时，服务
器先生成json 数据。然后以javascript 语法的方式，生成一个function , function 名

字就是传递
上来的参数jsonp。最后将json 数据直接以入参的方式，放置到function 中，这样就

生成了一段js
语法的文档，返回给客户端。
客户端浏览器，解析script 标签，并执行返回的javascript 文档，此时数据作为参数，

传入到了客
户端预先定义好的callback 函数里。（动态执行回调函数）
在javascript 中有==和===两种比较运行符，有什么区别呢？
一、对于string,number 等基础类型，==和===是有区别的
1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===

如果类
型不同，其结果就是不等
2）同类型比较，直接进行“值”比较，两者结果一样
二、对于array,object 等高级类型，==和===是没有区别的
当一个变量定义为arrary 和一个变量定义为object 类型时，但是其值相同时，==和

===
比较的结果是相同的，因为它是进行“指针地址”比较
三、基础类型与高级类型，==和===是有区别的
1）对于==，将高级转化为基础类型，进行“值”比较
2）因为类型不同，===结果为false，
call, apply 都属于Function.prototype 的一个方法,它是JavaScript 引擎内在实现的,

因为
属于Function.prototype,所以每个Function 对象实例,也就是每个方法都有call,

apply
属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混
淆的,因为它们的作用一样,只是使用方式不同.
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同
call, apply 方法区别是,从第二个参数起, call 方法参数将依次传递给借用的方法
作参数, 而apply 直接将这些参数放到一个数组中再传递, 最后借用方法的参数
列表是一样的.
当参数明确时可用call, 当参数不明确时可用apply 给合arguments
Trident(IE 内核),
Gecko(Firefox 内核),
Presto(Opera 前内核) (已废弃).Opera 现已改用Google Chrome
的Blink 内核
Webkit(Safari 内核,Chrome 内核原型,开源)
web 标准简而言之就是将页面的结构、表现和行为各自独立实现
W3C 一直都相信Web 上的语义是可管理的，需要正确使用的，认为
Web 应该是安全可信的，必须建立一个普遍的、全社会易于使用的
公共网络环境！现在各大主流浏览器的升级改版都在向web 标准靠
拢
img 标签的title 与alt
1、含义不同
alt 是当图片不存在时的替代文字;title 是对图片的描述与进一步说明
2、在浏览器中的表现不同
在firefox 和ie8 中，当鼠标经过图片时title 值会显示，而alt 的值不会显示;只有在ie6
中，当鼠标经过图片时title 和alt 的值都会显示。
对于网站seo 优化来说，title 与alt 还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt 属性。所以在图片alt 属性中以简要文字说明，
同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title 属性里，进一

步对
图片说明。
CSS Reset 是什么？编辑
在HTML 标签在浏览器里有默认的样式，例如p 标签有上下边距，strong 标签有字体
加粗样式，em 标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul

默认
带有缩进的样式，在IE 下，它的缩进是通过margin 实现的，而Firefox 下，它的缩进

是由
padding 实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影

响开发
效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过

重新
定义标签样式。“覆盖”浏览器的CSS 默认属性。最最简单的说法就是把浏览器提供

的默认
样式覆盖掉！这就是CSS reset。
HTML 与XHTML 的区别
最主要的区别：
 XHTML 元素必须合理嵌套
 XHTML 文档形式上必须符合规范
 标签必须使用小写
 所有的XHTML 元素都必须有始有终
以下是XHTML 相对HTML 的几大区别：
 XHTML 要求正确嵌套
 XHTML 所有元素必须关闭
 XHTML 区分大小写
 XHTML 属性值要用双引号
 XHTML 用id 属性代替name 属性
 XHTML 特殊字符的处理
XHTML 用id 属性代替name 属性
HTML 很多元素，比如a，applet，frame，iframe，img 和map，有name 属性。

在XHTML
里是要废除的，而用id 属性取而代之。
XHTML 特殊字符的处理
& 应该在XHTML 里应该写成&。
比如：
You & Me
应该写成：
You & Me
从浏览器的角度看待上面几个不同，大致是下面的测试结果(IE 和Firefox 我都测试过)

：
 XHTML 要求正确嵌套：如果你没有嵌套，浏览器会试图帮你嵌套。
 XHTML 所有元素必须关闭：如果你没有关闭，浏览器会试图帮你关闭。
 XHTML 区分大小写：你非要写成大写，浏览器帮你转换成为小写。
在给Tag 用class 指定CSS 的时候，是区分大小写的
link 与import 的区别
两者都是外部引用CSS 的方式，但是存在一定的区别：
区别1：link 是XHTML 标签，除了加载CSS 外，还可以定义RSS 等其他事务；

@import
属于CSS 范畴，只能加载CSS。
区别2：link 引用CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入
以后加载。
区别3：link 是XHTML 标签，无兼容问题；@import 是在CSS2.1 提出的，低版本
的浏览器不支持。
区别4：ink 支持使用Javascript 控制DOM 去改变样式；而@import 不支持。
块级元素和行内元素的区别
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,
其宽度随元素的内容而变化.
块级元素可以设置width,height 属性.
行内元素设置width,height 属性无效.
块级元素即使设置了宽度,仍然是独占一行.
块级元素可以设置margin 和padding 属性.
行内元素的margin 和padding 属性,水平方向的
padding-left,padding-right,margin-left,margin-right 都产生边距效果,但竖直方向

的
padding-top,padding-bottom,margin-top,margin-bottom 却不会产生边距效果.
块级元素对应于display:block.
行内元素对应于display:inline.
CSS 选择器
选择器例子例子描述CSS
.class .intro 选择class="intro" 的所有元素。1
#id #firstname 选择id="firstname" 的所有元素。1
* * 选择所有元素。2
element p 选择所有<p> 元素。1
element,element div,p 选择所有<div> 元素和所有<p> 元素。1
element element div p 选择<div> 元素内部的所有<p> 元素。1
element>element div>p 选择父元素为<div> 元素的所有<p> 元素。2
element+element div+p 选择紧接在<div> 元素之后的所有<p> 元素。2
[attribute] [target] 选择带有target 属性所有元素。2
[attribute=value] [target=_blank] 选择target="_blank" 的所有元素。2
[attribute~=value] [title~=flower] 选择title 属性包含单词"flower" 的所有元素。2
[attribute|=value] [lang|=en] 选择lang 属性值以"en" 开头的所有元素。2
:link a:link 选择所有未被访问的链接。1
:visited a:visited 选择所有已被访问的链接。1
:active a:active 选择活动链接。1
:hover a:hover 选择鼠标指针位于其上的链接。1
:focus input:focus 选择获得焦点的input 元素。2
:first-letter p:first-letter 选择每个<p> 元素的首字母。1
:first-line p:first-line 选择每个<p> 元素的首行。1
:first-child p:first-child 选择属于父元素的第一个子元素的每个<p> 元素。2
:before p:before 在每个<p> 元素的内容之前插入内容。2
:after p:after 在每个<p> 元素的内容之后插入内容。2
:lang(language) p:lang(it) 选择带有以"it" 开头的lang 属性值的每个<p> 元素。2
element1~element2 p~ul 选择前面有<p> 元素的每个<ul> 元素。3
[attribute^=value] a[src^="https"] 选择其src 属性值以"https" 开头的每个<a> 元

素。3
[attribute$=value] a[src$=".pdf"] 选择其src 属性以".pdf" 结尾的所有<a> 元素。3
[attribute*=value] a[src*="abc"] 选择其src 属性中包含"abc" 子串的每个<a> 元素

。3
:first-of-type p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p> 元素。3
:last-of-type p:last-of-type 选择属于其父元素的最后<p> 元素的每个<p> 元素。3
:only-of-type p:only-of-type 选择属于其父元素唯一的<p> 元素的每个<p> 元素。

3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个<p> 元素。3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个<p> 元素的每个<p> 元

素。3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。

3
:last-child p:last-child 选择属于其父元素最后一个子元素每个<p> 元素。3
:root :root 选择文档的根元素。3
:empty p:empty 选择没有子元素的每个<p> 元素（包括文本节点）。3
:target #news:target 选择当前活动的#news 元素。3
:enabled input:enabled 选择每个启用的<input> 元素。3
:disabled input:disabled 选择每个禁用的<input> 元素3
:checked input:checked 选择每个被选中的<input> 元素。3
:not(selector) :not(p) 选择非<p> 元素的每个元素。3
::selection ::selection 选择被用户选取的元素部分。3
CSS 中的继承
所有元素可继承：visibility 和cursor。
内联元素可继承： letter-spacing 、word-spacing 、
white-space、line-height、color、font、font-family、font-size、
font-style 、font-variant 、font-weight 、text- decoration 、
text-transform、direction。
块状元素可继承：text-indent 和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、
list-style-image。
表格元素可继承：border-collapse。
CSS 优先级算法:
优先级的算法：
每个规则对应一个初始"四位数"：0、0、0、0
若是行内选择符，则加1、0、0、0
若是ID 选择符，则加0、1、0、0
若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符/伪元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从
左到右进行比较，大的优先级越高。
需注意的是：
①、!important 的优先级是最高的，但出现冲突时则需比较”四位数
“；
②、优先级相同时，则采用就近原则；
③、继承得来的属性，其优先级最低；
CSS 盒模型
CSS 中， Box Model 叫盒子模型（或框模型），Box Model 规定了
元素框处理元素内容（element content）、内边距（padding）、边
框（border）和外边距（margin）的方式。在HTML 文档中，每
个元素（element）都有盒子模型，所以说在Web 世界里（特别是页
面布局），Box Model 无处不在。
W3C 盒子模型的范围包括margin、border、padding、content，并且content 部
分不包含其他部分。
IE 盒子模型的范围也包括margin、border、padding、content，和标准W3C 盒
子模型不同的是：IE 盒子模型的content 部分包含了border 和pading。
IE6 兼容问题
100% 高度
在IE6 下，如果要给元素定义100%高度，必须要明确定义它的父级
元素的高度，如果你需要给元素定义满屏的高度，就得先给html 和
body 定义height:100%;。
最小宽度
同max-height 和max-width 一样，IE6 也不支持min-width。
双边距Bug
当元素浮动时，IE6 会错误的把浮动方向的margin 值双倍计算。个
人觉得较好解决方法是避免float 和margin 同时使用
IE6 怪异解析之padding 与border 算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>
img 于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或img { display: block; }
或_margin: -5px;
一、什么是CSS Hack？
不同的浏览器对CSS 的解析结果是不同的，因此会导致相同的CSS
输出的页面效果不同，这就需要CSS Hack 来解决浏览器局部的兼
容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就
叫CSS Hack。
CSS Hack 常见的有三种形式：CSS 属性Hack、CSS 选择符Hack
以及IE 条件注释Hack， Hack 主要针对IE 浏览器。
/* CSS 属性级Hack */
color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别*/
*color:red; /* IE6、IE7 识别*/
+color:red; /* IE6、IE7 识别*/
*+color:red; /* IE6、IE7 识别*/
[color:red; /* IE6、IE7 识别*/
color:red\9; /* IE6、IE7、IE8、IE9 识别*/
color:red\0; /* IE8、IE9 识别*/
color:red\9\0; /* 仅IE9 识别*/
color:red \0; /* 仅IE9 识别*/
color:red!important; /* IE6 不识别!important*/
-------------------------------------------------------------
/* CSS 选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别*/
*+html #demo { color:red;} /* 仅IE7 识别*/
body:nth-of-type(1) #demo { color:red;} /* IE9+ 、FF3.5+ 、
Chrome、Safari、Opera 可以识别*/
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、
Safari、Opera 可以识别*/
:root #demo { color:red\9; } : /* 仅IE9 识别*/
--------------------------------------------------------------
/* IE 条件注释Hack */









三、IE6 对!important 的支持
!important 一般用来做区分IE6 和Firefox 等浏览器的基本Hack
手法。因为IE6 不支持!important，而Firefox 能读懂!important，
其改变了样式的优先级。其实IE6 在某些情况下，也能认
识!important。

转载于:https://www.cnblogs.com/nemoDuoo/p/4960200.html

bajun3444570

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见面试题

Post 和Get 方法有如下区别:1.Post 传输数据时，不需要在URL 中显示出来，而Get 方法要在URL 中显示。2.Post 传输的数据量大，可以达到2M，而Get 方法由于受到URL 长度的限制,只能传递大约1024 字节.3.Post 顾名思义,就是为了将数据传送到服务器段,Get 就是为了从服务器段取得数据.而Get 之所以也能传送数据,只是用来设计告诉服务器,你到底需...
复制链接

扫一扫