BAT前端H5面试题大全.docx
《BAT前端H5面试题大全.docx》由会员分享,可在线阅读,更多相关《BAT前端H5面试题大全.docx(49页珍藏版)》请在冰豆网上搜索。
BAT前端H5面试题大全
HTML5笔试题
HTML4
1.元素的Alt和title有什么异同,选出正确的说法?
不同的浏览器,表现一样
A、Alt和title同时设置的时候,Alt作为图片的代替文字出现title是图片的解释文字
B、Alt和title同时设置的时候,title作为图片的代替文字出现,Alt是图片的解释文字
C、以上说法都不正确
答案:
Alt属性使用在
Title属性使用在或普通文字
参考答案:
2.想要找到表单中的hidden元素,下面哪个是正确的?
〔单选〕B
A、visibleB、hiddenC、visible<>D、hidden<>
答案:
B
本题考查的是jquery方法介绍
前两个为:
hidden/:
visible用来选择隐藏的/可见的元素;.visible<>/.hidden<>使元素显示/隐藏-为方法
参考答案:
3.介绍一下你对浏览器内核的理解?
答案:
首先:
浏览器内核的常用种类
1、IE:
Trident内核
2、谷歌[Chrome]/Safari:
webkit内核
3、火狐:
Gecko内核
4、Opera:
Presto内核
其次:
从浏览器内核组成方面
主要包含两部分渲染引擎和js引擎
渲染引擎:
负责取得网页的内容〔HTML、XML图像等等〕,整理讯息〔例如加入css〕,
以与计算网页的显示方式、然后输出至显示器或打印机.浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的结果也不相同,所以渲染的效果也不相同.
Js引擎:
解析和执行javascript来实现网页的动态效果
最开始渲染引擎和js引擎并没有区别的很明确,后来js引擎越来越独立,内核就倾向于只指渲染引擎
4.说下行内元素和块级元素的区别?
行内块元素的兼容性使用?
答案:
第一、行内元素和块级元素的区别
1》方案:
行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素
行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,
块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行.
对于行内元素设置with、height、margin值无效,但对于块级元素,设置这些值是有效的.
2》在标准文档流里面:
块级元素具有以下特点:
[display:
block]
1、块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度,与内容无关
2、宽度、高度、行高以与外边距和内边距都可控制
3、块级元素可以设置margin和padding属性
4、它可以容纳内联元素和其他块元素
行内元素的特点:
[dispaly:
inline]
1、行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.
2、宽度、高度、行高与外边距和内边距部分可改变
3、行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,
但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
4、行内元素只能容纳文本或者其他行内元素,不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在IE6中不对上下起作用,只能对左右起作用
第二、行内块[display:
inline-block]元素的兼容性
[参考:
1、行内元素内边界在IE6中不对上下起作用,只能对左右起作用
水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,
但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.
2、行内块级元素在IE8以下的兼容性
div{
display:
inline-block;
*zoom:
1;
*display:
inline;
}
*zoom:
1作用是
在IE下触发hasLayout
*display:
inline作用作用是
一旦触发了hasLayout设置display:
inline和display:
block效果相似.
3、在IE6、IE7下,怎么实现块级元素的inline-block属性值设置,2种方法
1)先使用display:
inline-block属性触发块元素,然后再定义display:
inline,
让块元素呈递为行内对象〔两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,
如果先定义了display:
inline-block,然后再将display设回inline或block,layout不会消失〕,
代码如下:
div{display:
inline-block;} div{display:
inline;}
2〕直接让块元素设置为行内对象呈递〔设置属性display:
inline〕,
然后触发块元素的layout〔如:
zoom:
1或float属性等〕,代码如下:
div{display:
inline-block;_zoom:
1;_display:
inline;}/*推荐IE6*/
div{display:
inline-block;*zoom:
1;*display:
inline;}/*推荐IE6或IE7*/
5.Whatisdoctype?
Whydoyouneedit?
DOCTYPE是documenttype<文档类型>的简写,用来说明你用的XHTML或者HTML是什么版本
DOCTYPE>会影响代码验证,并决定了浏览器最终如何显示你的Web文档
通过指定了标记语言的规则,确保了浏览器能够正确的渲染内容
6.Canyouapplycssruletoapartofhtmldocument?
可以
7.Whatareyouthedifferencesbetweendivandspan?
此题考查的是块元素与行元素区别参考第四题答案
8.Doescsspropertiesarecasesensitive?
Css属性区分大小写吗?
YES是的
9.Doesmargin-topormargin-bottomhaseffectoninlineelement?
No此题参考第4题
margin-bottom和margin-top对行内元素有影响吗?
10.Doespadding-toporpadding-bottomhaseffectoninlineelement?
padding-top和padding-bottom对行内元素有影响吗?
No此题参考第4题
11.Howabsolute,relative,fixedandstaticpositiondiffer?
absolute,relative,fixedandstatic之间的区别
Absolute:
生成绝对定位的元素,相对于static定位[以外]的[第一个父元素]进行定位
Fixed:
生成绝对定位的元素,相对于浏览器窗口进行定位.
Relative:
生成相对定位的元素,相对于其正常位置进行定位.
Static:
默认值.没有定位,元素出现在正常的流中〔忽略top,bottom,left,right或者z-index声明〕
12.列出清除浮动的几种方法<至少3种>?
参考8种方式:
常用的方式:
1、Overflow:
hidden
2、父层容器给固定高
3、较多使用的方式
.clearFloat:
after{
Width:
100%;Height:
0;Clear:
both;Display:
block;
}
13.B标签超过一定长度,以省略号显示?
Overflow:
hidden;white-space:
nowrap;text-overflow:
ellipsis;width:
给一个值;
14.用css绘制一个箭头指向右的三角形?
border-left:
10pxsolidyellow;/border-top:
5pxsolidtransparent;/border-bottom:
5pxsolidtransparent;
15.iframe的使用场景有?
A、与第三方域名下的页面共享cookie;
B、上传图片,避免当前页刷新;
C、左边固定右边自适应的布局:
D、资源加载;
16.通常我们在浏览器内容区看到的内容,都是放入在之内?
A、
doctypehtml>
B、
C、
D、
17.在上添加使用的标签是
A、title标签;
B、img标签;
C、meta标签;
D、a标签;
18.通过分析如下HTML代码,可以得出〔BD〕〔多选〕
员工号
|
学历
专业
|
毕业院校
|
A、该表格共有两行三列[错误:
三行两列]
B、该表格中文字均居中显示
C、该表格边框宽度为10毫米[10px--10像素]
D、"员工号"单元跨两列
19.CSS中的margin属性可谓元素设置外边距,改变元素的内填充padding属性.
20.对ulli的样式设成无,应该用什么属性list-style:
none.
21.合理的页面布局中常听过结构与表现分离,那么结构是数据模型,表现是页面结构以与渲染.
22.在Table中,TR是行,TD是列.
23.下面标签嵌套正确的是〔D〕
A.
B.赶集网
C.
赶集网D.
- 赶集网
24.在HTML中,〔C〕可以在网页上通过打开客户端发送
A.zhou126">发送
B.zhou126">发送
C.zhou126">发送协议:
mailto/tel
D.zhou126">发送
25.请选择所有的置换元素〔ABCD〕
A.imgB.inputC.textareaD.select
置换元素是指:
浏览器根据元素的标签和属性,来决定元素的具体显示内容.
参考:
26.下面哪条声明能固定背景图片〔A〕
A.background-attachment:
fixed;
B.background-attachment:
scroll;
C.background-origin:
initial;
D.background-clip:
initial;
27.下列说法正确的是〔AB〕〔多选〕
A.display:
none;不为被隐藏的对象保留其物理空间
B.visibility:
hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明
C.visibility:
hidden;产生reflow和repaint〔回流与重绘〕
D.visibility:
hidden;与displa:
none;两者没有本质上的区别
28.以下关于盒子模型描述正确的是〔A〕
A.标准盒子模型中:
盒子的总宽度=左右margin+左右border+左右padding+width
B.IE盒子模型中:
盒子总宽度=左右margin+左右border+width
C.标准盒子模型中:
盒子的总宽度=左右margin+左右border+width
D.IE盒子模型中:
盒子总宽度=width
29.英文字母全部转为大写正确的是〔C〕
A.text-transform:
capitalize;
B.text-transform:
lowercase;
C.text-transform:
uppercase;
D.font-weight:
bold;
30.列举W3C推荐的属性标签,说一下p标签和img标签的特点.
本题考查常用标签列举.随便说几个自己了解的标签就好
P标签定义段落,p元素会自动在其前后创建一些空白.浏览器会自动添加这些空间,您也可以在样式表中规定
Img定义HTML页面中的图像,有两个必需的属性:
src和alt,
从技术上讲,图像并不会插入HTML页面中,而是到HTML页面上.
标签的作用是为被引用的图像创建占位符
31.你做的页面在哪些浏览器测试过?
这些浏览器的内核分别是什么?
经常遇到的浏览器的兼容性有哪些?
怎么会出现?
解决的方法是什么?
常用的市场占有率高的浏览器
例如:
谷歌/Safari[webkit]、火狐[Gecko]、IE[Trident]、欧朋[Presto]
浏览器兼容性:
参考:
32.分别写出3个块级元素和内联元素.
块级元素:
10px">
png是一种图片格式,是PortableNetworksGraphics的缩写,做ping.
3、png采用无损压缩,在多数情况下都可以保留图片里所有像素.
PNG无损压缩算法,简单地说,就是把图片里出现的每一个颜色都记录下来.
jpg适用于摄影图片,以与色彩丰富的图片.
最终提高易用性.