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.

1. 赶集网

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">