BAT前端H5面试题大全.docx

上传人:b****9 文档编号:23383591 上传时间:2023-05-16 格式:DOCX 页数:49 大小:45.94KB
下载 相关 举报
BAT前端H5面试题大全.docx_第1页
第1页 / 共49页
BAT前端H5面试题大全.docx_第2页
第2页 / 共49页
BAT前端H5面试题大全.docx_第3页
第3页 / 共49页
BAT前端H5面试题大全.docx_第4页
第4页 / 共49页
BAT前端H5面试题大全.docx_第5页
第5页 / 共49页
点击查看更多>>
下载资源
资源描述

BAT前端H5面试题大全.docx

《BAT前端H5面试题大全.docx》由会员分享,可在线阅读,更多相关《BAT前端H5面试题大全.docx(49页珍藏版)》请在冰豆网上搜索。

BAT前端H5面试题大全.docx

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

    Margin代表上下左右四个值

    间距为5+10=15px

    39.png8、24的区别是?

    这个为图片保存格式定义,一般ps保存web图片格式时候选用

    二者区别:

    png是一种图片格式,是PortableNetworksGraphics的缩写,做ping.

    "PNG8"是指8位索引色位图,"PNG24"是24位索引色位图;

    png8:

    每一张"png8"图像,都最多只能展示256种颜色,所以"png8"格式更适合那些颜色比较单一的图像,

    例如纯色、logo、图标等;因为颜色数量少,所以图片的体积也会更小

    png24:

    每一张"png24"图像,可展示的颜色就远远多于"png8"了,最多可展示的颜色数量多大1600万;

    所以"png24"所展示的图片颜色会更丰富,图片的清晰度也会更好,图片质量更高,

    当然图片的大小也会相应增加,所以"png24"的图片比较适合像摄影作品之类颜色比较丰富的图片;

    40.Png和jpg这两种图片格式分别适用的场景是?

    Png:

    1、小图标,用png储存最好

    2、png可以储存透明,完爆gif的地方在于失真小,没锯齿;劣势是不支持动画

    3、png采用无损压缩,在多数情况下都可以保留图片里所有像素.

    PNG无损压缩算法,简单地说,就是把图片里出现的每一个颜色都记录下来.

    通过记录这些颜色相对应的值记录一张图片

    Jpg

    jpg适用于摄影图片,以与色彩丰富的图片.

    它采用压缩算法,会对图片上每8px*8px的像素进行处理,通过强制渐变的方法来减小文件尺寸,因此无论选择的储存质量多高,

    还是会多多少少失真一些,但对于摄影之类的图片来说,jpg格式就会比png小很多了

    41.请谈一下你对网页标准和标准制定机构重要性的理解

    网页标准和标准制定机构都是为了能让web发展的更‘健康’,

    首先约束浏览器开发者遵循统一的标准,

    其次约束开发者,

    这样降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,

    最终提高易用性.

    42.简述一下src和href的区别

    Href:

    表示超文本引用〔hypertextreference〕

    主要应用为标签和标签主要用于引用跳转以与样式文件

    Src:

    src表示来源地址

    主要用于

    copyright@ 2008-2022 冰豆网网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1