前端面试必备：HTML、CSS与浏览器兼容性解析

PDF文件

下载需积分: 50 | 1.48MB | 更新于2024-07-19 | 132 浏览量 | 6 评论 | 举报收藏

立即下载

"这是一份前端面试题的汇总，涵盖了HTML和CSS的相关知识，包括浏览器兼容性、网页标准、前端优化、DOM操作、CSS选择器、样式定义以及一些实际问题的解决方案。" 在前端面试中，了解HTML和CSS的基础及进阶知识至关重要。下面将详细阐述其中的一些关键点： 1. **浏览器兼容性**：前端开发者需要测试多种浏览器，如Chrome（Blink内核）、Firefox（Gecko内核）、Safari（WebKit内核）和IE/Edge（Trident和EdgeHTML内核）。不同的内核可能对CSS和JavaScript的支持程度不同，需要确保页面在所有主流浏览器下都能正常工作。 2. **DOCTYPE**：这是声明文档类型和版本，告诉浏览器应以何种方式解析页面，比如`<!DOCTYPE html>`用于HTML5，它开启Standards模式，避免Quirks模式，后者会导致一些非标准的渲染行为。 3. **Quirks模式与Standards模式**：Quirks模式是早期浏览器的兼容模式，允许一些非标准的行为；而Standards模式遵循W3C标准，提供更一致的渲染。 4. **div+css布局**：相对于表格布局，div+css布局更灵活，易于维护，有利于SEO，且代码结构清晰，利于响应式设计。 5. **img的alt与title**：alt属性提供图像不可见时的文字替代，对SEO和无障碍访问很重要；title则为鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**：渐进增强是在基础功能上逐步增加复杂性，确保所有用户能访问核心内容；优雅降级则保证高级浏览器的良好体验，同时处理旧浏览器的兼容问题。 7. **跨域资源存储**：利用多个域名可以突破浏览器的同源策略限制，提高并发请求能力，减少单一域名下的Cookie传输，从而优化性能。 8. **网页标准**：W3C等机构制定的标准有助于确保网页的互操作性和持久性，提高用户体验和可访问性。 9. **cookies，sessionStorage和localStorage**：cookies用于客户端存储小量信息，每次HTTP请求都会发送；sessionStorage仅在当前会话中存储数据；localStorage则长期保存，但不随HTTP请求发送。 10. **src与href**：src用于引入外部资源，如图片、脚本等；href用于链接，如链接到其他页面或CSS文件。 11. **图片格式**：常见的有JPEG（适合照片）、PNG（支持透明）、GIF（动画）和SVG（矢量图形）。 12. **微格式**：微格式是一种将结构化数据嵌入HTML中的方法，有助于机器理解和解析网页内容，例如用于搜索引擎优化。 13. **缓存处理**：JS请求可能涉及HTTP缓存（如ETag和Last-Modified头）、浏览器缓存、服务端缓存等，通过设置缓存策略可以减少网络请求，提升加载速度。 14. **图片优化**：可以采用延迟加载、雪碧图、响应式图片、WebP格式等方式提升图片加载效率。 15. **HTML语义化**：使用合适的标签（如<header>、<nav>、<article>等）来描述页面结构，使页面内容对人类和机器更具可理解性。 16. **SEO**：前端应考虑关键词优化、元标签、URL结构、页面速度、移动友好等因素，以提高搜索引擎排名。 17. **DOM样式设置**：可通过JavaScript的style属性、CSS类操作（addClass/removeClass）或内联样式来改变DOM样式。 18. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**：display:none和visibility:hidden可实现元素不可见，前者不占据空间，后者仍占据空间。 20. **超链接hover问题**：已访问的链接默认无hover样式，可通过CSS重写此规则。 21. **CssHack**：针对IE浏览器的兼容性问题，使用特定的CSS语法，如`_width`、`*width`和`width/**/`等。 22. **幻灯片效果**：可通过CSS动画、JavaScript库（如jQuery）实现，关键在于切换图片的时机和过渡效果。 23. **行内元素与块级元素**：行内元素（如<span>）在同一行显示，不接受宽度和高度设置；块级元素（如<div>）独占一行，可设置宽高。 24. **外边距重叠**：当相邻的上下外边距相遇时，通常只显示其中一个较大值，称为外边距塌陷。 25. **rgba()与opacity**：rgba()可设置颜色的透明度，不影响子元素；opacity会影响整个元素及其所有子元素。 26. **垂直和水平重叠**：使用position属性（如absolute/fixed）结合top/bottom/left/right设置，配合z-index控制层次。 27. **垂直居中浮动元素**：可以使用负margin、Flexbox或Grid布局来实现。 28. **px与em**：px是固定单位，em是相对单位，基于父元素的字体大小。 29. **"reset" CSS文件**：用于清除浏览器默认样式，如Eric Meyer Reset，以实现更一致的跨浏览器渲染。这些面试题涉及到前端开发的核心技能，掌握这些知识点对于提升面试表现和实际工作能力都非常重要。

62、如何阻止事件冒泡和默认事件？

................................................................................

162

63、添加删除替换插入到某个接点的方法？

..............................................................

162

64、你用过 require.js 吗？它有什么特性？

..................................................................

162

65、谈一下 JS 中的递归函数，并且用递归简单实现阶乘？

..........................................

162

66、请用正则表达式写一个简单的邮箱验证。

................................................................

162

67、简述一下你对 web 性能优化的方案？

........................................................................

162

68、在 JS 中有哪些会被隐式转换为 false

.......................................................................

163

69、定时器 setInterval 有一个有名函数 fn1，setInterval（fn1,500）与 setInterval

（fn1(),500）有什么区别？

...............................................................................................

163

70、外部 JS 文件出现中文字符，会出现什么问题，怎么解决？

..................................

163

71、谈谈浏览器的内核，并且说一下什么是内核？

........................................................

163

72、JavaScript 原型，原型链 ? 有什么特点？

.............................................................

163

73、写一个通用的事件侦听器函数

.....................................................................................

164

74、事件、IE 与火狐的事件机制有什么区别？如何阻止冒泡？

.................................

166

75、什么是闭包（closure），为什么要用？

..................................................................

166

76、如何判断一个对象是否属于某个类？

........................................................................

166

77、new 操作符具体干了什么呢?

........................................................................................

167

78、JSON 的了解

...................................................................................................................

167

79、js 延迟加载的方式有哪些

............................................................................................

167

80、模块化怎么做？

.............................................................................................................

167

81、异步加载的方式

.............................................................................................................

168

82、告诉我答案是多少？

.....................................................................................................

168

83、JS 中的 call()和 apply()方法的区别？

...................................................................

168

84、Jquery 与 jQuery UI 有啥区别？

..............................................................................

168

85、jquery 中如何将数组转化为 json 字符串，然后再转化回来？

............................

169

86、JavaScript 中的作用域与变量声明提升？

...............................................................

169

87、前端开发的优化问题（看雅虎 14 条性能优化原则）。

..........................................

169

88、http 状态码有那些？分别代表是什么意思？

...........................................................

170

89、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说

的越详细越好）

.....................................................................................................................

170

八、流行框架

.................................................................................................................................

170

1、JQuery 的源码看过吗？能不能简单概况一下它的实现原理？

.................................

170

2、jQuery.fn 的 init 方法返回的 this 指的是什么对象？为什么要返回 this？

......

170

3、jquery 中如何将数组转化为 json 字符串，然后再转化回来？

...............................

170

4、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

....................

170

5、jquery.extend 与 jquery.fn.extend 的区别？

.......................................................

170

6、谈一下 Jquery 中的 bind(),live(),delegate(),on()的区别？

.............................

171

7、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？

.................................

171

8、Jquery 与 jQuery UI 有啥区别？

..................................................................................

171

9、jQuery 和 Zepto 的区别？各自的使用场景？

.............................................................

171

10、针对 jQuery 的优化方法？

.........................................................................................

171

11、Zepto 的点透问题如何解决？

......................................................................................

171

12、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么?

能讲出他们各自的优点和缺点么?

.......................................................................................

172

13、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？172

14、使用过 angular 吗？angular 中的过滤器是干什么用的

.........................................

172

九、移动 APP 开发

.........................................................................................................................

172

1、移动端最小触控区域是多大？

.......................................................................................

172

十、NodeJs

.....................................................................................................................................

172

1、对 Node 的优点和缺点提出了自己的看法：

................................................................

172

2、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确

响应。给出你的技术实现方案？

.........................................................................................

172

3、Node.js 的适用场景？

....................................................................................................

173

4、(如果会用 node)知道 route, middleware, cluster, nodemon, pm2, server-side

rendering 么?

........................................................................................................................

173

5、解释一下 Backbone 的 MVC 实现方式？

....................................................................

173

6、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和

缺点?

.......................................................................................................................................

173

7、对 Node 的优点和缺点提出了自己的看法？

................................................................

173

十一、前端概括性问题

.................................................................................................................

174

1、常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

..................

174

2、对 BFC 规范的理解？（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容

进行定位,以及与其他元素的关系和相互作用。）

........................................................

174

3、99%的网站都需要被重构是那本书上写的？

................................................................

174

4、WEB 应用从服务器主动推送 Data 到客户端有那些方式？

.........................................

174

5、加班的看法

.......................................................................................................................

174

6、平时如何管理你的项目，如何设计突发大规模并发架构？

......................................

174

7、那些操作会造成内存泄漏？

...........................................................................................

175

8、你说你热爱前端，那么应该 WEB 行业的发展很关注吧？说说最近最流行的一些东西

吧？

.........................................................................................................................................

175

9、你有了解我们公司吗？说说你的认识？

......................................................................

175

10、移动端（比如：Android IOS）怎么做好用户体验?

................................................

175

11、你所知道的页面性能优化方法有那些？

....................................................................

175

12、除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

....................

175

13、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）

规范区别？

.............................................................................................................................

175

一、HTML 和 CSS

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident

内核

Firefox：gecko 内核

Safari:webkit 内核

Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核

Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏

览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3、Quirks 模式是什么？它和 Standards 模式有什么区别

从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上

的正确处理达到在指定浏览器中的程度。

在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS

提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如

果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的

渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，

尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某

个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能

不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，

因为以前的页面大家都不会去写 DTD，所以 IE6 就假定如果写了 DTD，就意味着这个页面

将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks

模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，

而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和 height 都

不会生效，而在 quirks 模式下，则会生效。

设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如

果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平

居中，但在 quirks 模式下却会失效。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是

看文章看的，甚至完全不知道。）

4、div+css 的布局较 table 布局有什么优点？

改版的时候更方便只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？

a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指

定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt

当成 tool tip 显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

6、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功

能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器

进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个

非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰

减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

剩余177页未读，继续阅读

资源评论

东郊椰林放猪散仙

2025.04.26

通过这些面试题可以快速检验自己的前端技能水平。

士多霹雳酱

2025.04.18

这份文档是前端面试题的精华集合，适合面试准备和自我提升。

地图帝

2025.04.17

内容覆盖全面，对前端基础知识点考察很有帮助。

傅融

2025.02.14

适合初学者和中级开发者巩固基础。

张博士-体态康复

2025.01.15

面试题难度适中，有助于系统性复习前端知识。

阿葱的葱白

2024.12.28

文档排版清晰，查找题目非常方便。

hqh642134542

粉丝: 7

前端面试必备：HTML、CSS与浏览器兼容性解析

Web前端开发经典面试题（附参考答案）

前端面试题

前端面试题及答案大全汇总，2022年最新.zip

前端面试题总结

前端面试题汇总_madeaef_html/css/javascript_前端面试题汇总_

2021年前端面试题汇总包括腾讯华为等前端面试题

前端面试题汇总1

WEB前端面试题汇总

2023Vue前端面试题汇总

一线大厂前端面试题汇总

前端面试题汇总.pdf

前端面试题汇总.PDF

前端面试题汇总.rar

2023前端面试题汇总

vue前端面试题汇总

2025最新前端面试题汇总

2019年前端面试题

java前端面试题

【Camera专题】低温下Camera打开花屏或者读不到id

基于COMSOL的热湿耦合模拟及其在蒸汽上部通入冷凝的应用研究

最新资源