html5面试题集合.docx
《html5面试题集合.docx》由会员分享,可在线阅读,更多相关《html5面试题集合.docx(34页珍藏版)》请在冰豆网上搜索。
html5面试题集合
一.闭包的理解:
使用闭包主要是为了设计私有的方法和变量。
闭包的优点是可以避免全局变量的污染,缺点是闭包会
常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。
闭包三个特性:
1.函数嵌套函数;2.函数内部可以引用外部的参数和变量;3.参数和变量不会被垃圾回收机制回收
二.Cookie的弊端:
cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的
每个特定的域名下最多生成20个cookie;IE和Opera会清理近期最少使用的cookie,Firefox
理cookie;cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节;
;
会随机清
优点:
极高的扩展性和可用性
1.通过良好的编程,控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
4.控制cookie的生命期,使之不会永远有效。
偷盗者很可能拿到一个过期的
cookie。
缺点:
1.Cookie数量和长度的限制。
每个
domain最多只能有
20条cookie,每个
cookie
长度不能超过
4KB,
否则会被截掉。
2.安全性问题。
如果
cookie被人拦截了,那人就可以取得所有的
session信息。
即使加密也与事无补,
因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。
例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。
如果我们把这个计数器保存在客户端,那么它起不到任何作用。
三.浏览器本地存储
在较高版本的浏览器中,js提供了sessionStorage和globalStorage。
在HTML5中提供了localStorage来
取代globalStorage。
html5中的WebStorage包括了两种存储方式:
sessionStorage和localStorage。
sessionStorage:
用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能
访问并且当会话结束后数据也随之销毁。
因此
sessionStorage不是一种持久化的本地存储,
仅仅是会话级别
的存储。
localStorage:
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
四.webstorage和cookie的区别
WebStorage的概念和cookie相似,区别是
:
Webstorage:
1.是为了更大容量存储设计的。
2.WebStorage拥有
setItem,getItem,removeItem,clear
等方
法.3.WebStorage仅仅是为了在本地“存储”数据而生
Cookie:
1.大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪
费了带宽;2.cookie还需要指定作用域,不可以跨域调用。
3.需要前端开发者自己封装setCookie,getCookie.
4.cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在;
**localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem
等**
五.cookie
和session的区别:
1.cookie数据存放在客户的浏览器上,session数据放在服务器上。
2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行
COOKIE
欺骗考虑到安全应当使
用session。
3.session会在一定时间内保存在服务器上。
当访问增多,会比较占用你服务器的性能考虑到减轻服务
器性能方面,应当使用COOKIE。
4.单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
5.所以个人建议:
将登陆信息等重要信息存放为SESSION其他信息如果需要保留,可以放在COOKIE中
六.display:
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.link方式的样式的权重高于@import的权重.
八.position:
absolute和float属性的异同
共同点:
对内联元素设置`float`和`absolute`属性,可以让元素脱离文档流,并且可以设置其宽高。
不同点:
float仍会占据位置,position会覆盖文档流中的其他元素。
九.介绍一下box-sizing属性?
box-sizing属性主要用来控制元素的盒模型的解析模式。
默认值是
content-box。
content-box:
让元素维持W3C的标准盒模型。
元素的宽度
/高度由border+padding+content的宽度/
高度决定,设置width/height
属性指的是content部分的宽/高
border-box:
让元素维持
IE传统盒模型(IE6以下版本和IE6~7的怪异模式)。
设置
width/height属性
指的是border
+
padding+
content
标准浏览器下,按照W3C规范对盒模型解析,一旦修改了元素的边框或内距,就会影响元素的盒子尺
寸,就不得不重新计算元素的盒子尺寸,从而影响整个页面的布局。
十.CSS选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
CSS3新增伪类有那些?
1.id选择器(#myid)
2.类选择器(.myclassname)3.标签选择器(div,h1,p)
4.相邻选择器(h1
+p)5.子选择器(ul>li)6.后代选择器(lia)
7.通配符选择器(*)8.属性选择器(a[rel="exter
nal"])9.伪类选择器(a:
hover,li:
nth-child
)
可继承的样式:
font-size
font-family
color,text-indent;
不可继承的样式:
border
paddingmarginwidth
height
;
优先级就近原则,同权重情况下样式定义最近者为准
;
载入样式以最后载入的定位为准;
CSS3新增伪类举例:
p:
first-of-type
选择属于其父元素的首个
;元素的每个
元素。
p:
last-of-type
选择属于其父元素的最后
;元素的每个
;
元素。
p:
only-of-type
选择属于其父元素唯一的
;元素的每个
;
元素。
p:
only-child
选择属于其父元素的唯一子元素的每个
;
元素。
p:
nth-child
(2)
选择属于其父元素的第二个子元素的每个
;元素。
:
enabled
:
disabled控制表单控件的禁用状态。
:
checked
:
单选框或复选框被选中。
十一.position的值,relative和absolute分别是相对于谁进行定位的?
absolute:
生成绝对定位的元素,相对于最近一级的定位不是
static的父元素来进行定位。
fixed(老I
E不支持)生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:
生成相对定位的元素,相对于其在普通流中的位置进行定位。
static默认值。
没有定位,元素
出现在正常的流中
十二.CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)transform:
rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);旋
转,缩放,定位,倾斜增加了更多的
CSS选择器多背景
rgba
在CSS3中唯一引入的伪元素是
:
:
selection.
媒体
查询,多栏布局
border-image
十三.XML和JSON的区别?
1.数据体积方面。
JSON相对于XML来讲,数据的体积小,传递的速度更快些。
2.数据交互方面。
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
3.数据描述方面。
JSON对数据的描述性比
4.传输速度方面。
JSON的速度要远远快于
十四.对BFC规范的理解?
XMLXML
较差。
。
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会
影响到外面的元素。
在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会
发生折叠。
(W3CCSS2.1规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的
关系和相互作用
.)
十五.解释下
CSSsprites,以及你要如何在页面或网站中使用它。
CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-imag
e”,“background-repeat,”“background-position的”组合进行背景定位,background-position可以用数字能精
确的定位出背景图片的位置。
这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并
发,但是也有限制,一般浏览器都是6个。
对于未来而言,就不需要这样做了,因为有了http2。
十六.说说你对语义化的理解?
1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.有利于SEO:
和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:
爬虫依赖于标签来确定上下文和各个关键字的权重;
3.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
4.便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循
W3C
标准的团队都遵
循这个标准,可以减少差异化。
十七.Doctype作用?
严格模式与混杂模式如何区分?
它们有何意义?
1.
DOCTYPE>声明位于文档中的最前面,处于标签之前。
告知浏览器以何种模式来渲染文档。
2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3.在混杂模式中,页面以宽松的向后兼容的方式显示。
模拟老式浏览器的行为以防止站点无法工作。
4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
十八.你知道多少种Doctype文档类型?
该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML
4.01规定了三种文档类型:
Strict、Transitional以及Frameset。
XHTML1.0规定了三种XML文档类
型:
Strict、Transitional以及Frameset。
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
十九.HTML与XHTML二者有什么区别
1.所有的标记都必须要有一个相应的结束标记;2.所有标签的元素和属性的名字都必须使用小写;3.所有的XML标记都必须合理嵌套;4.所有的属性必须用引号""括起来;5.把所有<和&特殊符号用编码表
示;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下,如果对元素设置了浮动,同时又设置了margi
n-left或margin-right,margin值会加倍。
)
之下IE会产生20px的距离,解决方案是在
内属性。
(_这个符号只有ie6会识别)
#box{float:
left;width:
10px;margin:
000100px;}这种情况
float的标签样式控制中加入——_display:
inline;将其转化为行
5.渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8
和
IE7、IE6分离开来,这样
IE8
已经独立识别。
refox
6.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用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浏览器下可能会增加额外的
12px的文本强制按照12px
HTTP请求数。
显示,可通过加入
CSS
属性
-webk
10.超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决
方法是改变CSS属性的排列顺序:
L-V-H-A:
a:
link{}a:
visited{}a:
hover{}a:
active{}
11.怪异模式问题:
漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模
式。
为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。
现在可以使用[html5](h
ttp:
//www.w3.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图片格式支持不好(引用一段脚本处理)
二十一.解释下浮动和它的工作原理?
清除浮动的技巧
浮动元素脱离文档流,不占据空间。
浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签定义cssclear:
both.弊端就
是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性overflow:
auto;zoom:
1;zoom:
1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。
具体写法可参照以下示例。
使用中需注意:
该方法中必须为需要清除浮动元素的伪对象中设置height:
0,否则该元素会比实际高出
若干像素.
二十二.浮动元素引起的问题和解决办法?
浮动元素引起的问题:
1.父元素的高度无法被撑开,影响与父元素同级的元素;2.与浮动元素同级的非浮动元素(内联元素)会跟随其后;3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响
页面显示的结构
解决方法:
使用CSS中的clear:
both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下
样式,给父元素添加clearfix样式
二十三.清除浮动的几种方法
1.额外标签法,both;">