web前端知识汇总21-40

21、事件委托是什么？

利用事件冒泡的原理，自己触发的事件让他的父元素代替执行。

22、渐进增强和优雅降级之间有什么不同

渐进增强：一开始只构建站点的最少特性，然后不断的对不同的浏览器追加不同的功能

优雅降级：一开始就构建站点的完整功能，然后针对浏览器进行测试和修复

优雅降级和渐进增强都关注与统一网站在不同设备里不同浏览器下的表现程度，关键的却别在于他们各自关注于何处，以及这种关注对工作流程的影响。

优雅降级认为应该针对那些最高级最完善的浏览器来设计网站，会忽略那些旧版的浏览器。

渐进增强认为应关注于内容本身。

优雅降级即功能衰减、往回看，渐进增强意味着朝前看的同时保证其根基处于安全地带。

23、简述border：none以及border：0的区别

none表示边框的样式为无，0表示边框宽度为0，当定义为none即隐藏了边框的显示，实际就是边框宽度为0.当定义边框时，必须定义边框的显示样式，因为边框默认的样式为none所以仅设置边框宽度不设置样式边框的宽度也自动被设置为0；

24、为div设置类a b，应编写HTML代码<div class="a b"></div>使用时a的CSS样式会被b的CSS样式覆盖（相同属性）

25、不换行必须设置：white-space:nowrap;

26、写出ul ol dl三种列表的HTML结构

<ul>

  <li></li>

  <li></li>

</ul>

<ol>

  <li></li>

  <li></li>

</ol>

<dl>

  <dt></dt>

  <dd></dd>

  <dd></dd>

  <dd></dd>

</dl>

27、将代码进行缩写

background-position:0 0;  

background-repeat:no-repeat;  

background-attachment:fixed;  

background-color:#f00;  

background-image:url(background.gif);

=》background:#f00url(background.gif)no-repeat fixed 0 0;

font-style:italic;  

font-family:"Lucida Grande",sans-serif;  

font-size:1em;  

font-weight:bold;  

font-variant:small-caps;  

line-height:140%;

=》font:italic bold small-caps1em/140%'Lucida Grande',sans-serf;

 

list-style-position:inside;  

list-style-type:square;  

list-style-image:url(image.gif);

=》list-style:url(on.jpg)square inside;

28、XHTML和CSS如何注释？

XHTML：<!-- -->

CSS：/* */

29、请以缩写方法写出1px直线（实线）灰色，上面无边框的矩形边框样式

border:1px solid gray;

border-top:0;

或者

border:1px solid gray;

broder-top:none;

30、为什么无法定义1px左右高度的容器？

这是因为IE6有默认的行高

解决方法是overflow:hidden超出部分隐藏

31、为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，而且当其中某个域名崩溃用户也能通过其他域名访问网站

CDN缓存更方便（浏览器本地缓存失效后，浏览器会向CDN边缘节点发起请求，类似浏览器缓存，CDN节点边缘也存在着一套缓存机制。CDN的分流作用不仅减少了用户的访问延时，也减少了源站的负载。但缺点也很明显，当网站更新时，如果CDN节点上的数据没有及时更新那么即使用户在浏览器使用Ctrl+f5的方式使浏览器端的缓存失效，也会因为CDN边缘节点没有同步更新数据而导致用户访问异常。当客户端向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，如果没有过期直接返回数据给客户，否则CDN节点就会向源站发出回源请求，从源站取得最新数据更新本地缓存并将数据返回给客户端）

突破浏览器并发限制（一般每个域名建立的连接不超过6个）

cookieless节省带宽，尤其是上行带宽一般比下行要慢

对于UGC的内容和主战隔离防止不必要的安全问题（上传js窃取主站cookie之类的）。正式这个原因要求用户内容的域名必须不是自己主站的子域名而是一个完全独立的第三方域名

数据做了划分，甚至切到了不同物理集群，通过子域名来分流比较省事。

32、JavaScript的typeof返回那些数据类型？

string类型返回string

number类型返回number

boolean类型返回boolean

方法函数返回function

对象、数组、null返回object

undefined和未声明变量返回undefined

33、列举3种强制类型转换和2种隐式类型转换

强制：parseInt，parseFloat，number

隐式：==和===

==会自动转换类型 ===不会

对于不同类型的基础类型比较，==会将比较的元素转换成同一类型后比较，===不会转化类型，如果不是相同类型则===结果为false；

34、数组方法pop() push() shift() unshift()

push：尾部添加

pop：尾部删除

unshift：头部添加

shift：头部删除

35、事件绑定和普通事件的区别？

普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定方式可以添加多个事件

事件绑定是针对DOM元素的事件，绑定在DOM元素上

普通事件是非针对DOM元素的事件

36、Firefox中标签的居中问题的解决方法

margin:0 auto;

37、请写出超链接的顺序或者你在初始样式中的链接方法（要求无下划线，鼠标经过有下划线）

顺序是LVHA即link visited hover active，注意只有a标签写了href的时候visited效果设置才能正确显示

a:link{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

38、在新的网页中打开链接的方法是：target=_bank;

39、简述ajax的工作原理

ajax的核心是JavaScript对象XmlHTTPRequest，XmlHTTPRequest可以使你使用JavaScript向服务器提出请求并处理响应而不阻塞用户

创建ajax对象（XMLHTTPRequest/ActiveXObject）

判断数据传输方式（get/post）

打开连接open

发送send

服务器响应判断

处理从服务器得到的数据

40、文档类型的作用是什么，你知道多少种文档类型

作用是告诉通用标准语言解析器用什么类型的DTD（文档类型定义）来解析文档帮助浏览器正确显示网页

HTML

HTML+

HTML2.0

HTML3.2

HTML4.0.1

HTML5

XHTML5