html5面试题集合.docx

1、html5面试题集合一.闭包的理解 :使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。闭包三个特性 : 1.函数嵌套函数 ; 2.函数内部可以引用外部的参数和变量 ; 3.参数和变量不会被垃圾回收机制回收二.Cookie 的弊端 :cookie 虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的每个特定的域名下最多生成 20 个 cookie;IE 和 Opera 会清理近期最少使用的 cookie ，Firefox理 cookie;cookie 的最大大约为 4096

2、 字节，为了兼容性，一般不能超过 4095 字节 ;会随机清优点：极高的扩展性和可用性1.通过良好的编程，控制保存在 cookie 中的 session 对象的大小。2.通过加密和安全传输技术（ SSL），减少 cookie 被破解的可能性。3.只在 cookie 中存放不敏感数据，即使被盗也不会有重大损失。4.控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。缺点 :1.Cookie 数量和长度的限制。每个domain 最多只能有20 条 cookie，每个cookie长度不能超过4KB ，否则会被截掉。2.安全性问题。如果cookie 被人拦截了，那人

3、就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。三.浏览器本地存储在较高版本的浏览器中， js 提供了 sessionStorage和 globalStorage。在 HTML5 中提供了 localStorage 来取代 globalStorage。html5 中的 Web Storage 包括了两种存储方式： sessionStorage和

4、localStorage。sessionStorage:用于本地存储一个会话（ session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。四.web storage和 cookie 的区别Web Storage 的概念和 cookie 相似，区别是:Web storage:1.是为了更大容量存储设计的。 2.Web Storage 拥有setItem,getItem,removeIte

5、m,clear等方法.3.Web Storage 仅仅是为了在本地 “存储 ”数据而生Cookie:1.大小是受限的， 并且每次你请求一个新的页面的时候 Cookie 都会被发送过去， 这样无形中浪费了带宽 ;2.cookie 还需要指定作用域，不可以跨域调用。 3.需要前端开发者自己封装 setCookie，getCookie.4.cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ;*localStorage 和 sessionStorage都具有相同的操作方法，例如 setItem、 getItem 和 removeItem等 *五.cookie和 session

6、 的区别：1.cookie 数据存放在客户的浏览器上， session数据放在服务器上。2.cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行COOKIE欺骗 考虑到安全应当使用 session。3.session会在一定时间内保存在服务器上。当访问增多， 会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用 COOKIE 。4.单个 cookie 保存的数据不能超过 4K ，很多浏览器都限制一个站点最多保存 20 个 cookie。5.所以个人建议 :将登陆信息等重要信息存放为 SESSION 其他信息如果需要保留 ,可以放在 COOKIE 中六.display

7、:none 和 visibility:hidden 的区别？display:none: 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。visibility:hidden: 隐藏对应的元素，但是在文档布局中仍保留原来的空间。七.CSS 中 link 和 import 的区别是？1.link 属于 HTML 标签，而 import 是 CSS 提供的 ;2.页面被加载的时， link 会同时被加载，而 import 引用的 CSS 会等到页面被加载完再加载 ;3.import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题 ;4.l

8、ink 方式的样式的权重 高于 import 的权重 .八.position:absolute和 float 属性的异同共同点：对内联元素设置 float 和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。不同点： float 仍会占据位置， position 会覆盖文档流中的其他元素。九.介绍一下 box-sizing 属性？box-sizing 属性主要用来控制元素的盒模型的解析模式。默认值是content-box 。content-box：让元素维持 W3C 的标准盒模型。元素的宽度/高度由 border + padding + content 的宽度 /高度决定，设置

9、width/height属性指的是 content 部分的宽 /高border-box：让元素维持IE 传统盒模型（ IE6 以下版本和 IE67 的怪异模式）。设置width/height 属性指的是 border+padding +content标准浏览器下， 按照 W3C 规范对盒模型解析， 一旦修改了元素的边框或内距， 就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。十.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3 新增伪类有那些？1.id 选择器（ # myid ）2.类选择器（ .myclassname） 3.标签选择器（ d

10、iv, h1, p）4.相邻选择器（ h1+ p） 5.子选择器（ ul li ） 6.后代选择器（ li a）7.通配符选择器（ * ） 8.属性选择器（ arel = external ） 9.伪类选择器（ a: hover, li:nth-child）可继承的样式： font-sizefont-familycolor, text-indent;不可继承的样式： borderpadding margin widthheight;优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准 ;CSS3 新增伪类举例：p:first-of-type选择属于其父元素的首个;元素的

11、每个 元素。p:last-of-type选择属于其父元素的最后; 元素的每个 ;元素。p:only-of-type选择属于其父元素唯一的; 元素的每个 ;元素。p:only-child选择属于其父元素的唯一子元素的每个;元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个; 元素。:enabled:disabled 控制表单控件的禁用状态。:checked:单选框或复选框被选中。十一 .position 的值， relative 和 absolute 分别是相对于谁进行定位的？absolute :生成绝对定位的元素，相对于最近一级的定位不是static 的父元素来进行定位。

12、fixed （老 IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。relative :生成相对定位的元素，相对于其在普通流中的位置进行定位。 static 默认值。没有定位，元素出现在正常的流中十二 .CSS3 有哪些新特性？CSS3 实现圆角（ border-radius），阴影（ box-shadow），对文字加特效（ text-shadow），线性渐变（ g radient），旋转（ transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); 旋转,缩放 , 定

13、位 ,倾斜 增加了更多的CSS 选择器 多背景rgba在 CSS3中唯一引入的伪元素是:selection.媒体查询，多栏布局border-image十三 .XML 和 JSON 的区别？1.数据体积方面。 JSON 相对于 XML 来讲，数据的体积小，传递的速度更快些。2.数据交互方面。 JSON 与 JavaScript 的交互更加方便，更容易解析处理，更好的数据交互。3.数据描述方面。 JSON 对数据的描述性比4.传输速度方面。 JSON 的速度要远远快于十四 .对 BFC 规范的理解？XML XML较差。BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的

14、子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。 （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局， 以及与其他元素的关系和相互作用.）十五 .解释下CSS sprites，以及你要如何在页面或网站中使用它。CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的 “ background-image”，“ background- repeat ，”“ background-position 的”组合进行背景定位， background-posit

15、ion 可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是 6 个。对于未来而言，就不需要这样做了，因为有了 http2。十六 .说说你对语义化的理解？1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构2.有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；3.方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；4.便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可

16、以减少差异化。十七 .Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?1. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。4.DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。十八 .你知道多少种 Doctype 文档类型？该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。 HTML4.01 规定了三种文档类型： Strict 、Trans

17、itional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型： Strict 、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。十九 .HTML 与 XHTML 二者有什么区别1.所有的标记都必须要有一个相应的结束标记 ; 2.所有标签的元素和属性的名字都必须使用小写 ; 3.所有的 XML 标记都必须合理嵌套 ; 4.所有的属性必须用引号 括起来 ; 5.把所有 和& 特殊

18、符号用编码表示; 6.给所有属性赋一个值 ; 7.不要在注释内容中使 “- ”; 8.图片必须有说明文字 ; 二十 .常见兼容性问题？1.png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8. 也可以引用一段脚本处理 .2.浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *margin:0;padding:0; 来统一。3.IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。4.浮动 ie 产生的双倍距离（ IE6 双边距问题：在 IE6 下，如果对元素设置了浮动，

19、同时又设置了 margin-left 或 margin-right ， margin 值会加倍。）之下 IE 会产生 20px 的距离，解决方案是在内属性。 (_这个符号只有 ie6 会识别 )#box float:left; width:10px; margin:0 0 0 100px; 这种情况float 的标签样式控制中加入 _display:inline; 将其转化为行5.渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用 “9”这一标记，将 IE 游览器从所有情况中分离出来。接着，再次使用 “+”将 IE8和IE7 、 IE6 分离开来，这样IE8已经独立识别。refox6.IE

20、 下,可以使用获取常规属性的方法来获取自定义属性 , 也可以使用 getAttribute() 获取自定义属性 ; Fi下 ,只能使用 getAttribute() 获取自定义属性 . 解决方法 :统一通过 getAttribute() 获取自定义属性 .7.IE 下,event 对象有 x,y 属性 , 但是没有 pageX,pageY 属性 ; Firefox 下,event 对象有 pageX,pageY 属性 ,但是没有 x,y 属性 .8.解决方法：（条件注释）缺点是在9.Chrome 中文界面下默认会将小于it-text-size-adjust: none; 解决 .IE 浏览器下

21、可能会增加额外的12px 的文本强制按照 12pxHTTP 请求数。显示 , 可通过加入CSS属性-webk10.超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序 : L-V-H-A : a:link a:visited a:hover a:active 11.怪异模式问题：漏写 DTD 声明， Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。现在可以使用 html5(http:/www.w3.

22、org/TR/html5/single-page.html) 推荐的写法： 12.上下 margin 重合问题 ie 和 ff 都存在， 相邻的两个 div 的 margin-left 和 margin-right 不会重合， 但是margin-top 和 margin-bottom 却会发生重合。 解决方法，养成良好的代码编写习惯，同时采用 margin-top或者同时采用 margin-bottom 。13.ie6 对 png 图片格式支持不好 (引用一段脚本处理 )二十一 .解释下浮动和它的工作原理？清除浮动的技巧浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框

23、停留。1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义 css clear:both. 弊端就是增加了无意义标签。2.使用 overflow 。给包含浮动元素的父标签添加 css属性 overflow:auto; zoom:1; zoom:1 用于兼容 IE6 。3.使用 after 伪对象清除浮动。 该方法只适用于非 IE 浏览器。具体写法可参照以下示例。使用中需注意 :该方法中必须为需要清除浮动元素的伪对象中设置 height:0 ，否则该元素会比实际高出若干像素 .二十二 .浮动元素引起的问题和解决办法？浮动元素引起的问题： 1.父元素的高度无法被撑开，影响与父

24、元素同级的元素 ; 2.与浮动元素同级的非浮动元素（内联元素）会跟随其后 ; 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法：使用 CSS 中的 clear:both;属性来清除元素的浮动可解决 2、3 问题，对于问题 1，添加如下样式，给父元素添加 clearfix 样式二十三 .清除浮动的几种方法1.额外标签法， ( 缺点：不过这个办法会增加额外的标签使 HTML 结构看起来不够简洁 .); 2.使用 after 伪类 ; 3.浮动外部元素 ; 4.设置 overflow 为 hidden 或者 auto二十四 .IE 8 以下版本的浏览器中的盒模型

25、有什么不同IE8 以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框二十五 .DOM1.创建新节点操作 怎样添加、移除、移动、复制、创建和查找节点createDocumentFragment() /创建一个 DOM 片段 createElement() / 创建一个具体的元素createTextNode() / 创建一个文本节点2.添加、移除、替换、插入appendChild() removeChild() replaceChild() insertBefore() /在已有的子节点前插入一个新的子节点3.查找 getElementsByTagName() / 通过标签名称 getElem

26、entsByName() /通过元素的 Name 属性的值 (IE 容错能力较强，会得到一个数组，其中包括 id 等于 name 值的 ) getElementById() /通过元素 Id ，唯一性二十六 .html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5 ？1.HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。2.拖拽释放 (Drag and drop) API 语义化更好的内容标签（ header,nav,footer,aside,article,section） 音频、视频 A

27、PI(audio,video) 画布 (Canvas) API 地理 (Geolocation) API 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 表单控件， calendar、 date、 time、email 、 url 、 search 新的技术 webworker, websocket, Geolocation3.移除的元素 纯表现的元素： basefont， big，center， font, s， strike， tt， u； 对可用性产生负面影响的元素： frame， framese

28、t，noframes；支持 HTML5 新标签：4.IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式：可以利用这一特性让这些浏览器支5.当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 src=二十七 .iframe 的优缺点？ 优点： 解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本 solve slow to load third-party content such as icons and adver

29、tisements of loading problems Securitysandbox parallel load script 的缺点 : 1.iframe 会阻塞主页面的 Onload 事件； 2.即时内容为空， 加载也需要时间 3.没有语意二十八 .如何实现浏览器内多个标签页之间的通信 ?调用 localstorge、cookies 等本地存储方式二十九 .线程与进程的区别一个程序至少有一个进程 ,一个进程至少有一个线程 . 线程的划分尺度小于进程，使得多线程程序的并发性高。 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。 每个独立的线程有一个程序运行的入口、 顺序执行序列和程序的出口。 但是线程不能够独立执行， 必须依存在应用程序中，