BAT前端H5面试题大全.doc

《BAT前端H5面试题大全.doc》由会员分享，可在线阅读，更多相关《BAT前端H5面试题大全.doc（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、如有侵权，请联系网站删除，仅供学习与交流BAT前端H5面试题大全【精品文档】第 29 页HTML5笔试题HTML41. 元素的Alt和title有什么异同，选出正确的说法？不同的浏览器，表现一样 ( C)A、Alt和title同时设置的时候，Alt作为图片的代替文字出现title是图片的解释文字B、Alt和title同时设置的时候，title作为图片的代替文字出现，Alt是图片的解释文字C、以上说法都不正确答案：Alt属性使用在Title属性使用在链接或普通文字参考答案：2. 想要找到表单中的hidden元素，下面哪个是正确的？（单选）BA、 visible B、hidden C、visibl

2、e() 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），以及计算网页的显示方式、然

3、后输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的结果也不相同，所以渲染的效果也不相同。Js引擎：解析和执行javascript来实现网页的动态效果最开始渲染引擎和js引擎并没有区别的很明确，后来js引擎越来越独立，内核就倾向于只指渲染引擎4. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？答案：第一、 行内元素和块级元素的区别1方案：行内元素最好不要包裹块级元素，但是块级元素可以任意的包裹行内元素行内元素如果其上一个元素也是行内元素，则他们会分布在统一水平线上，即在一行上排列，块级元素不论上一个元素是行内元素还是块级元素都要另起一行，单独占一行。对于行内

4、元素设置with、height、margin值无效，但对于块级元素，设置这些值是有效的。2在标准文档流里面：块级元素具有以下特点：【display:block】1、 块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度，与内容无关2、 宽度、高度、行高以及外边距和内边距都可控制3、 块级元素可以设置margin和padding属性4、 它可以容纳内联元素和其他块元素行内元素的特点：【dispaly:inline】1、 行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化.2、 宽度、高度、行高及外边距和内边距部分可改变3、 行内元素的m

5、argin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果, 但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果.4、 行内元素只能容纳文本或者其他行内元素，不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在IE6中不对上下起作用，只能对左右起作用第二、 行内块【display:inline-block】元素的

6、兼容性 参考： / 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

7、设置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

8、;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. What is doctype?Why do you need it?DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本会影响代码

9、验证，并决定了浏览器最终如何显示你的Web文档通过指定了标记语言的规则，确保了浏览器能够正确的渲染内容6. Can you apply css rule to a part of html document?可以7. What are you the differences between div and span?此题考查的是块元素与行元素区别参考第四题答案8. Does css properties are case sensitive ?Css属性区分大小写吗？YES是的9. Does margin-top or margin-bottom has effect on inline el

10、ement?No此题参考第4题margin-bottom和margin-top对行内元素有影响吗？10. Does padding-top or padding-bottom has effect on inline element?padding-top 和 padding-bottom 对行内元素有影响吗？No此题参考第4题11. How absolute ,relative ,fixed and static position differ?absolute ,relative ,fixed and static之间的区别Absolute：生成绝对定位的元素，相对于 static 定位【

11、以外】的【第一个父元素】进行定位Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。Relative：生成相对定位的元素，相对于其正常位置进行定位。Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）12. 列出清除浮动的几种方法(至少3种)？参考8种方式：常用的方式：1、Overflow：hidden2、父层容器给固定高3、较多使用的方式.clearFloat：after Width:100%；Height:0;Clear：both；Display:block;13. B标签超过一定长度，以省略号显示

12、？Overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:给一个值;14. 用css绘制一个箭头指向右的三角形？border-left: 10px solid yellow; / border-top: 5px solid transparent; / border-bottom: 5px solid transparent;15. iframe的使用场景有?(B ) A、与第三方域名下的页面共享cookie; B、上传图片，避免当前页刷新; C、左边固定右边自适应的布局： D、资源加载;16. 通常我们在浏览器内容区看到

13、的内容，都是放入在 ( B ) 之内? A、 B、 C、 D、17. 在网站上添加链接使用的标签是( D ) A、title标签; B、img标签; C、meta标签; D、a标签;18. 通过分析如下HTML代码，可以得出（BD）（多选） 员工号 学历 专业 毕业院校 A、该表格共有两行三列【错误：三行两列】B、该表格中文字均居中显示C、该表格边框宽度为10毫米【10px-10像素】D、“员工号”单元跨两列19. CSS中的margin属性可谓元素设置外边距，改变元素的内填充padding属性。20. 对ul li的样式设成无，应该用什么属性list-style：none。21. 合理的页面

14、布局中常听过结构与表现分离，那么结构是 数据模型，表现是页面结构以及渲染。22. 在Table中，TR是行，TD是列。23. 下面标签嵌套正确的是（D）A. 赶集网B. 赶集网C. 赶集网D. 赶集网24. 在HTML中，（C）可以在网页上通过链接打开邮件客户端发送邮件A. 发送邮件B. 发送邮件C. 发送邮件 协议： mailto邮箱/ tel电话D. 发送邮件25. 请选择所有的置换元素（ABCD）A. img B. input C.textarea D.select置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。参考：26. 下面哪条声明能固定背景图片（A）A. ba

15、ckground-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;两者没有本质上的区

16、别28. 以下关于盒子模型描述正确的是（A ）A. 标准盒子模型中:盒子的总宽度=左右margin + 左右border + 左右padding + widthB. IE盒子模型中：盒子总宽度 = 左右margin + 左右border + widthC. 标准盒子模型中：盒子的总宽度 = 左右margin + 左右border + widthD. IE盒子模型中：盒子总宽度 = width29. 英文字母全部转为大写正确的是（C）A. text-transform:capitalize;B. text-transform:lowercase;C. text-transform:upperca

17、se;D. font-weight:bold;30. 列举W3C推荐的属性标签，说一下p标签和img标签的特点。本题考查常用标签列举。随便说几个自己了解的标签就好P标签定义段落，p元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定Img定义 HTML 页面中的图像，有两个必需的属性：src 和 alt，从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符31. 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？经常遇到的浏览器的兼容性有哪些？怎么会出现？解决的方法是什么？常用的市场占有率高的浏览

18、器例如：谷歌 / Safari(window电脑也可以使用)【webkit】、火狐【Gecko】、IE【Trident】、欧朋【Presto】浏览器兼容性：参考：32. 分别写出3个块级元素和内联元素。块级元素： / 内联元素： 参考：33. 解释以下4个标签的含义strong em b i:加粗文本标签:强调文本:加粗文本:定义斜体文字扩展注释：根据 HTML 5 的规范， 标签应该做为最后的选择，只有在没有其他标记比较合适时才使用它。HTML 5 规范声明：标题应该用 - 标签表示，被强调的文本应该用标签表示，重要的文本应该用标签表示，被标记的或者高亮显示的文本应该用标签表示34. Dis

19、abled与readonly的区别两个属性都为input的属性，主要区别为一个禁用的 元素，另一个只能读取35. 行内元素有哪些？块级元素有哪些？空元素有哪些？空元素：没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的参考：36. 定义链接四种状态的伪类的正确书写顺序是?考查a标签“ ”爱恨情仇“” Love hate ：link 【 定义正常链接的样式 】：visited 【 定义已访问过链接的样式 】：hover【 定义鼠标悬浮在链接上时的样式 】：active【 定义鼠标点击链接时的样式 】37. 你知道的css选择器有哪些考查css选择器种类基本选择器【通配符选择器、类

20、选择器、id选择器、元素选择器、后代选择器、子元素选择器、群组选择器、相邻兄弟、通用兄弟选择器】属性选择器伪类选择器38. 下面两个div的间距应该是多少？为什么？ Margin代表上下左右四个值间距为5+10 = 15px39. png8、24的区别是？这个为图片保存格式定义，一般ps保存web图片格式时候选用二者区别：png是一种图片格式，是Portable Networks Graphics的缩写，做ping。“PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；png8：每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，例

21、如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小png24：每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；40. Png和jpg这两种图片格式分别适用的场景是？Png：1、小图标，用png储存最好2、png可以储存透明，完爆gif的地方在于失真小，没锯齿；劣势是不支持动画3、png采用无损压缩，在多数情况下都可以保留图片里所有像素。 PNG无损压缩算法，

22、简单地说，就是把图片里出现的每一个颜色都记录下来。 通过记录这些颜色相对应的值记录一张图片Jpgjpg适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，会对图片上每8px*8px的像素进行处理，通过强制渐变的方法来减小文件尺寸，因此无论选择的储存质量多高，还是会多多少少失真一些，但对于摄影之类的图片来说，jpg格式就会比png小很多了41. 请谈一下你对网页标准和标准制定机构重要性的理解网页标准和标准制定机构都是为了能让web发展的更健康，首先约束浏览器开发者遵循统一的标准，其次约束网站开发者，这样降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高

23、网站易用性。42. 简述一下src和href的区别Href：表示超文本引用（hypertext reference）主要应用为标签和标签主要用于引用跳转链接以及样式文件Src：src 表示来源地址主要用于、和标签上用于引入图片文件和js文件src 的内容，是页面必不可少的一部分，是引入。href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。HTML543. 请描述一下cookies,sessionStorage和localStorage的区别？1、 大小上Cookie：4kbwebStorage：5M2、 性能带宽Cookie浪费带宽，使用性能有问题webStorage性能优良，读

24、取速度较快，保存在本地、对服务器依赖较小3、 使用Cookie使用操作较繁琐webStorage官方提供专有API【setItem() / getItem() / .key() / removeItem() / clear()】操作简单方便4、 应用场景Cookie多用于服务器用户身份判断webStorage多用于客户端数据存储Local本地存储，为长时间存储，一经存储，如果用户不手动清除，将永远保存Session临时会话存储，随着浏览器关闭消失，多用于临时数据的存储，用户登录信息等44. html5有哪些新特性？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？Htm

25、l新特性：新的文档类型( )脚本和链接无需type语义化标签本地存储离线存储Canvas、svg视频、音频等如何处理html5新标签的浏览器兼容性问题：核心本质，重新生成新标签并添加样式属性方法：1） 快捷方便：使用bootstrap官方网站提供的htmlshiv.js文件2） 手写如何区分html与html5方法：查看文档声明看里面是否有新标签新属性并且是否支持45. 简述一下你对HTML语义化的理解？什么是html语义化：语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用为什么要进行语义化：便于团队合作和搜索引擎建立良好沟通，有助于爬虫抓取更多

26、的有效信息考虑到代码的可复用性，可移植性，方便其他设备的解析执行。移动设备、盲人阅读器等。46. HTML5的离线缓存，描述一下cookies。离线缓存技术：就是断网的情况下依然能够加载缓存的文件这种技术主要目的是提高用户的用户体验，当没有网络或者网络状态不好的情况的下依然能够加载事先缓存下的文件对于我们前端来说，想要实现离线缓存，需要在html标签上添加一个manifest属性链入缓存配置文件Cookie:是前端保存数据的一种方式，主要用户前端和服务器用户的验证最多存储4KB，操作比较复杂，浪费带宽对于前端来说实际上操作的是document.cookieCookie主要包含以下几个字段Nam

27、e：名称Value：值Domain：作用域Path：路径Expires：有效时间Secure：安全状态47. 简述Doctype的作用；区分严格模式与混杂模式有何意义？如何触发这两种模式？DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本会影响代码验证，并决定了浏览器最终如何显示你的Web文档通过指定了标记语言的规则，确保了浏览器能够正确的渲染内容区别：严格模式是浏览器根据规范去显示页面 【标准模式是指，浏览器按W3C标准解析执行代码】混杂模式是以一种向后兼容的方式去显示 【怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解

28、析执行的方式不一样，所以我们称之为怪异模式】意义：决定浏览器如何渲染网站（浏览器使用那种规范去解析网页）【浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式】触发：浏览器根据doctype是否存在和使用的是那种dtd来决定。48. HTML5为什么只需要写？进化了，更加方便用户使用49. html5新增哪些标签？ header、footer、article、section、nav、hgroup、datalist、output、mark、au

29、dio、video50. html5新增表单元素有哪些(至少5个)？时间类型：date、dataTime、dataTime-local、month、time、week非时间类型：email、color、range、file、number、tel51. 有没有关注HTML5和CSS3？如有请简单说一些您对他们的了解情况！有，html5新特性【新标签，新属性、语义化等】，css3新特性【变形、转换、过渡、动画特效、盒属性等】52. H5新增的标签？header、footer、article、section、nav、hgroup、datalist、output、mark、audio、video53.

30、 H5新增的标签类元素标签？54. 描述一下常见存储机制的区别？本地存储：将数据保存在本地便于随时使用、技术实现【webStorage技术，cookie技术等】离线存储：将数据保存在本地，便于离线没有网络时候使用主要用于提高用户体验，技术实现【配置manifest文件】55. 使用HTML5中的本地存储保存一个json对象？通过将JSON格式数据的JSON.stringify()方法转换字符串数据然后通过Storage.setItem()方法进行保存CSS256. 下列哪个样式定以后，内联（非块状）元素可以定义宽度和高度（C）A、display:inlineB、display:noneC、di

31、splay:blockD、display:inherit57. CSS单位中px和em分别代表什么？其中em是如何计算的？Px：像素，相对长度单位。像素px是相对于显示器屏幕分辨率而言的Em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸em 特点：1. em的值并不是固定的；2. em会继承父级元素的字体大小。计算方法：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声

32、明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。参考：58. 请用DIV+CSS实现一个3列布局，要求：左右两列宽度固定，为100像素，中间列宽度为页面剩余宽度。即：中间列宽度=页面宽度-左侧宽度-右侧宽度。lefterheight:100px; width:200px;float:left;righterheight:100px;width:200px;float:right;middle width:100px;margin-left

33、:200px;margin-right:200px;position:absolute;59. 简述CSS优先级。优先级的引入只是为了更好的为页面渲染做服务因为较高的优先级的样式可以覆盖较低版本的优先级的样式，便于页面渲染与布局60. Position 的值有哪些？Relative和absolute的定位原理是什么？参考12题Absolute：生成绝对定位的元素，相对于 static 定位【以外】的【第一个父元素】进行定位Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。Relative：生成相对定位的元素，相对于其正常位置进行定位。Static：默认值。没有定位，元素出现在正常的流中

34、（忽略 top, bottom, left, right 或者 z-index 声明）61. 简述下为什么要用css reset。因为里面讲常使用的一些样式进行了封装了，方便我们的快速开发和使用62. 列出几个常用的meta。 63. 请写出必要的HTML/CSS，B元素水平垂直居中，A不固定（A是B的父元素）。64. 填空为div同时设置两个样式a和b，应如何编写HTML代码 65. 填空请在样式表中填写内容，使该元素字体大小为20像素ASCII.titlefont-size:20px！important;66. Position的值relative和absolute定位原点是？Absolu

35、te：生成绝对定位的元素，相对于 static 定位【以外】的【第一个父元素】进行定位Relative：生成相对定位的元素，相对于其正常位置进行定位。67. 经常遇到的浏览器的兼容性有哪些(列举3-4个)？原来，解决方法是什么？常用的hack的技巧。1. 不同浏览器的标签默认的margin和padding不同*margin:0;padding:0;2. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大在float的标签样式控制中加入 display:inline;将其转化为行内属性3. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超

36、出自己设置高度给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。4. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug在display:block;后面加入display:inline;display:table;5. 图片默认有间距使用float属性为img布局6. 标签最低高度设置min-height不兼容如果我们要设置一个标签的最小高度200px，需要进行的设置为：min-height:200px; height:auto !important; height:200p

37、x; overflow:visible;Hack技术参考网址：68. 用CSS如何实现下图的布局？多种方式：1、 float方式2、 弹性盒方式3、 绝对布局方式69. 请指出以下结构中A标签内的字体颜色值？ acolor:#ccc; #container acolor:#f60; h1 acolor:#eee 爱投资70. 在空白处加行css，让这个div在页面居中（上下左右都居中）Hello 爱投资！此题考查？position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px;71. 页面导入样式时，使用link和

38、import有什么区别？直接在页面中添加的话使用link方式，在css文件中引入其他的css文件的话使用import72. 常用哪几种浏览器测试？有哪些内核（Layout Engline）？参考之前的73. 清除浮动有哪些方式？比较好的是哪一种？参考：12题74. 使用CSS来格式化网页，共有三种方式，一下哪一种不是? ( B )A、在HEAD中引用;B、作为标记来使用;C、在BODY中引用;D、作为文件来引用;75. 下述有关border : none以及border : 0的区别，描述错误的是? ( CD )(多选)A、border:none表示边框样式无;B、border:0 表示边框宽度为0;C、当定义了border : none，即隐藏了边框的显示，实际就是边框宽度为0;D、当定义边框时，仅设置边框宽度也可以达到显示的效果;76. 清除浮动的常用方法？zoom实现的原理？参考12题：77. 如何让img标签在div中上下居中？1、添加margin控制2、div display:table-cell;vertical-align:middle;Imgvertical-align:middle;78. CSS选择符有哪