html5面试题集合Word格式.docx
- 文档编号:18539327
- 上传时间:2022-12-19
- 格式:DOCX
- 页数:34
- 大小:43.46KB
html5面试题集合Word格式.docx
《html5面试题集合Word格式.docx》由会员分享,可在线阅读,更多相关《html5面试题集合Word格式.docx(34页珍藏版)》请在冰豆网上搜索。
在较高版本的浏览器中,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
选择属于其父元素的最后
元素的每个<
元素。
only-of-type
选择属于其父元素唯一的
only-child
选择属于其父元素的唯一子元素的每个<
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>
声明位于文档中的最前面,处于<
html>
标签之前。
告知浏览器以何种模式来渲染文档。
2.严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
3.在混杂模式中,页面以宽松的向后兼容的方式显示。
模拟老式浏览器的行为以防止站点无法工作。
4.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
十八.你知道多少种Doctype文档类型?
该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML
4.01规定了三种文档类型:
Strict、Transitional以及Frameset。
XHTML1.0规定了三种XML文档类
型:
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
十九.HTML与XHTML二者有什么区别
1.所有的标记都必须要有一个相应的结束标记;
2.所有标签的元素和属性的名字都必须使用小写;
3.所有的XML标记都必须合理嵌套;
4.所有的属性必须用引号"
"
括起来;
5.把所有<
和&
amp;
特殊符号用编码表
示;
6.给所有属性赋一个值;
7.不要在注释内容中使“--”;
8.图片必须有说明文字;
二十.常见兼容性问题?
1.png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.
2.浏览器默认的margin和padding不同。
解决方案是加一个全局的*{margin:
0;
padding:
}来统一。
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)推荐的写法:
<
doctypehtml>
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;
1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。
具体写法可参照以下示例。
使用中需注意:
该方法中必须为需要清除浮动元素的伪对象中设置height:
0,否则该元素会比实际高出
若干像素.
二十二.浮动元素引起的问题和解决办法?
浮动元素引起的问题:
1.父元素的高度无法被撑开,影响与父元素同级的元素;
2.与浮动元素同级的非浮动元素(内联元素)会跟随其后;
3.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响
页面显示的结构
解决方法:
使用CSS中的clear:
both;
属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下
样式,给父元素添加clearfix样式
二十三.清除浮动的几种方法
1.额外标签法,<
divstyle="
clear:
>
/div>
(缺点:
不过这个办法会增加额外的标签使HTML结构看
起来不够简洁.);
2.使用after伪类;
3.浮动外部元素;
4.设置overflow为hidden或者auto
二十四.IE8以下版本的浏览器中的盒模型有什么不同
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
二十五.DOM
1.创建新节点
操作——怎样添加、移除、移动、复制、创建和查找节点
createDocumentFragment()//创建一个DOM片段createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点
2.添加、移除、替换、插入
appendChild()removeChild()replaceChild()insertBefore()//在已有的子节
点前插入一个新的子节点
3.查找getElementsByTagName()//通过标签名称getElementsByName()//通过元素的Name属性的值(I
E容错能力较强,会得到一个数组,其中包括id等于name值的)getElementById()//通过元素Id,唯一性
二十六.html5有哪些新特性、移除了那些元素?
如何处理HTML5新标签的浏览器兼容问题?
如何区
分HTML和HTML5?
1.HTML5
现在已经不是
SGML
的子集,主要是关于图像,位置,存储,多任务等功能的增加。
2.拖拽释放(Draganddrop)API语义化更好的内容标签(header,nav,footer,aside,article,section)音频、
视频API(audio,video)画布(Canvas)API地理(Geolocation)API本地离线存储localStorage长期存储数
据,浏览器关闭后数据不丢失;
sessionStorage的数据在浏览器关闭后自动删除表单控件,calendar、dat
e、time、email、url、search新的技术webworker,websocket,Geolocation
3.移除的元素纯表现的元素:
basefont,big,center,font,s,strike,tt,u;
对可用性产生负面影响
的元素:
frame,frameset,noframes;
支持HTML5新标签:
4.IE8/IE7/IE6支持通过document.createElement方法产生的标签,
持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式:
可以利用这一特性让这些浏览器支
5.当然最好的方式是直接使用成熟的框架、使用最多的是
html5shim
框架<
--[ifltIE9]>
script>
sr
c="
[endif]-->
二十七.iframe的优缺点?
iframe>
优点:
解决加载缓慢的第三方内容如图标和广告等的加载问题Securitysandbox并行加载脚
本solveslowtoloadthird-partycontentsuchasiconsandadvertisementsofloadingproblemsSecurity
sandboxparallelloadscript
的缺点:
1.iframe会阻塞主页面的Onload事件;
2.即时内容为空,加载也需要时间3.没有语意
二十八.如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
二十九.线程与进程的区别
一个程序至少有一个进程,一个进程至少有一个线程.线程的划分尺度小于进程,使得多线程程序的并
发性高。
另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的
运行效率。
线程在执行过程中与进程还是有区别的。
每个独立的线程有一个程序运行的入口、顺序执行序
列和程序的出口。
但是线程不能够独立执行,必须依存在应用程序中,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html5 试题 集合