前端面试宝典(附答案、带索引目录)资源-CSDN文库

需积分: 4 52 浏览量 2022-11-08 15:01:21 上传评论收藏 375KB DOCX 举报

《前端面试宝典》是一本针对前端开发者的面试准备指南，涵盖了HTML、CSS以及JavaScript等核心领域的知识。本文将深入解析其中的一些关键知识点。一、HTML与CSS 1. 测试浏览器：通常需要确保页面在主流浏览器上表现一致，如Chrome（Blink内核）、Firefox（Gecko内核）、Safari/IE/Edge（WebKit内核）和Opera（Presto或Blink内核）。了解这些浏览器的内核有助于解决兼容性问题。 2. Doctype：声明文档类型，告诉浏览器应以哪种标准模式解析HTML。例如，`<!DOCTYPE html>`用于HTML5，确保浏览器以标准模式运行。 3. div+css布局：比table布局更灵活，更利于SEO，因为它将结构和样式分离，使页面加载更快，且更易于维护和响应式设计。 4. img的alt与title：alt是图片无法显示时的文字替代，对SEO和可访问性至关重要；title是鼠标悬停时显示的提示信息。 5. 渐进增强与优雅降级：渐进增强是从基本功能开始，逐步增加复杂性，确保所有用户都能访问；优雅降级则是先构建复杂功能，然后确保在旧浏览器中仍能正常工作。二、前端性能与优化 6. 多域名存储资源：可分散请求，避免单个域名下的请求限制，提高加载速度，同时利于CDN部署。 7. 网页标准与机构：W3C等机构制定的标准有助于保持一致性，提高互操作性和可访问性，推动互联网健康发展。 8. cookies，sessionStorage和localStorage的区别：cookies数据量小，发送到服务器；sessionStorage和localStorage存储在本地，sessionStorage仅限当前会话，localStorage长期存储。 9. src与href：src是加载外部资源，如图片、脚本等；href用于链接，如跳转URL或引用样式表。三、图片优化与用户体验 10. 图片格式：JPEG适用于照片和色彩丰富的图像，PNG适用于透明或简单图形，GIF适合动画，SVG用于矢量图。 11. 图片加载优化：延迟加载（只加载视口内的图片）、图片压缩、使用合适格式、CSS精灵、WebP格式等。 12. HTML结构语义化：使页面结构更清晰，有利于搜索引擎理解页面内容，提高可访问性。四、SEO与DOM操作 13. SEO：考虑关键词策略、元标签、URL结构、内链、移动友好、页面速度等因素。 14. 设置DOM样式：通过内联样式、内部样式表、外部样式表，或JavaScript动态修改style属性。五、CSS选择器与样式控制 15. CSS选择器：包括标签选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。 16. 隐藏DOM元素：使用`display:none`或`visibility:hidden`，两者效果不同，前者不再占用空间，后者仍保留空间。 17. 超链接hover问题：访问后，浏览器可能认为状态已改变，不触发hover效果。通过CSS伪类`a:visited:hover`解决。 18. Css Hack：用于解决浏览器之间的样式差异，如`_height`为IE6私有属性，`*height`针对IE7，`height`通用。 19. 行内元素与块级元素：行内元素不独占一行，如`<span>`，margin/padding有限制；块级元素独占一行，如`<div>`，可设置margin/padding。 20. 外边距重叠：当相邻的垂直外边距相遇时，只取较大者。可通过负边距、`display`属性或`overflow`属性规避。以上是《前端面试宝典》的部分重点内容，全面理解并掌握这些知识点将有助于开发者在面试中脱颖而出。

资源推荐

资源详情

资源评论

前端开发面试题集(真题整理)

面试题集 ..........................................................................................................................................1

一、 HTML 和 CSS ......................................................................................................................1

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

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

3. div+css 的布局较 table 布局有什么优点？....................................................................1

4. img 的 alt 与 title 有何异同？ strong 与 em 的异同？.................................................2

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

6. 为什么利用多个域名来存储网站资源会更有效？.......................................................2

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

8. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？...................................3

9. 简述一下 src 与 href 的区别。 .......................................................................................3

10. 知道的网页制作会用到的图片格式有哪些？.......................................................3

11. 在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次

js 请求一般情况下有哪些地方会有缓存处理？ ...................................................................4

12. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这

些图片的加载，给用户更好的体验。...................................................................................4

13. 你如何理解 HTML 结构的语义化？ .......................................................................4

14. 谈谈以前端角度出发做好 SEO 需要考虑什么？...................................................4

15. 有哪项方式可以对一个 DOM 设置它的 CSS 样式？.............................................5

16. CSS 都有哪些选择器？............................................................................................5

17. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围

内？ 7

18. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？....................7

19. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？ ..................................................7

20. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设

置吗？ 7

21. 什么是外边距重叠？重叠的结果是什么？...........................................................8

22. rgba()和 opacity 的透明效果有什么不同？ ...........................................................8

23. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？ .....................8

24. 如何垂直居中一个浮动元素？...............................................................................8

25. px 和 em 的区别。 ..................................................................................................9

26. 描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他

们的不同之处？ ......................................................................................................................9

27. Sass、LESS 是什么？大家为什么要使用他们？..................................................10

28. display:none 与 visibility:hidden 的区别是什么？................................................10

29. CSS 中 link 和@import 的区别是：.......................................................................10

30. 简介盒子模型： ....................................................................................................10

31. 为什么要初始化样式？.........................................................................................11

32. BFC 是什么？ .........................................................................................................11

33. Doctype 的作用？严格模式与混杂模式的区别？ ..............................................12

34. IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin 比设

置的较大。 ............................................................................................................................12

35. HTML 与 XHTML——二者有什么区别？..............................................................12

36. html 常见兼容性问题？ ........................................................................................12

37. 对 WEB 标准以及 W3C 的理解与认识 .................................................................13

38. 行内元素有哪些?块级元素有哪些? .....................................................................13

39. 前端页面有哪三层构成，分别是什么?作用是什么? .........................................13

40. Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

41. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？..........................13

42. CSS 的盒子模型？..................................................................................................14

43. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪

类有那些？ ............................................................................................................................14

44. 浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方

法是什么，常用 hack 的技巧？ .........................................................................................14

45. 列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位

原点是？ ................................................................................................................................15

46. absolute 的 containing block 计算方式跟正常流有什么不同？..........................16

47. 对 WEB 标准以及 W3C 的理解与认识 .................................................................16

48. css 的基本语句构成是?.........................................................................................16

49. 浏览器标准模式和怪异模式之间的区别是什么? ...............................................17

50. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围

内？ 17

51. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设

置吗？ 17

52. 什么是外边距重叠？重叠的结果是什么？.........................................................17

55、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们

的不同之处？ ........................................................................................................................18

56、说 display 属性有哪些？可以做什么？ .......................................................................18

57、哪些 css 属性可以继承？......................................................................................18

58、css 优先级算法如何计算？...........................................................................................18

59、 b 标签和 strong 标签,i 标签和 em 标签的区别？ ...............................................18

60、有那些行内元素、有哪些块级元素、盒模型？.................................................18

61、有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先

级高？ 20

62、我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以

吗？ 20

63、 CSS 的盒模型由什么组成？..................................................................................20

64、说说 display 属性有哪些？可以做什么？............................................................20

65、哪些 css 属性可以继承？......................................................................................20

66、 css 优先级算法如何计算？...................................................................................20

二、HTML5 CSS3 ............................................................................................................................21

1. CSS3 有哪些新特性？....................................................................................................21

2. html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问

题？如何区分 HTML 和 HTML5？ .....................................................................................21

3. 本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区

别是什么？ ............................................................................................................................22

4. 如何实现浏览器内多个标签页之间的通信? ...............................................................22

5. 你如何对网站的文件和资源进行优化？.....................................................................22

6. 什么是响应式设计？ ....................................................................................................22

7. 新的 HTML5 文档类型和字符集是？ .........................................................................22

8. HTML5 Canvas 元素有什么用？...................................................................................22

9. HTML5 存储类型有什么区别？ ...................................................................................22

10. 用 H5+CSS3 解决下导航栏最后一项掉下来的问题.............................................23

11. CSS3 新增伪类有那些？........................................................................................23

12. 请用 CSS 实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。23

13. 描述下 CSS3 里实现元素动画的方法...................................................................23

14. html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览

器兼容问题？如何区分 HTML 和 HTML5？......................................................................23

15. 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏

品字布局如何设计?...........................................................................................................24

16. 知道 css 有个 content 属性吗？有什么作用？有什么应用？............................24

17. 如何在 HTML5 页面中嵌入音频? .......................................................................24

18. 如何在 HTML5 页面中嵌入视频？ .....................................................................25

19. HTML5 引入什么新的表单属性？ .......................................................................25

20. CSS3 新增伪类有那些？........................................................................................25

21. 描述一段语义的 html 代码吧。 ...........................................................................25

22. cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 区别.26

23. html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容

问题？如何区分 HTML 和 HTML5？..................................................................................26

24. HTML5 的离线储存？............................................................................................26

25. 写出 HTML5 的文档声明方式 ...............................................................................27

26. HTML5 和 CSS3 的新标签 ......................................................................................27

27. 自己对标签语义化的理解.....................................................................................27

三、JS 基础 ...................................................................................................................................27

1. javascript 的 typeof 返回哪些数据类型........................................................................27

2. 例举 3 种强制类型转换和 2 种隐式类型转换? ...........................................................27

3. split() 、join() 的区别...................................................................................................27

4. 数组方法 pop() push() unshift() shift()...........................................................................28

5. 事件绑定和普通事件有什么区别.................................................................................28

6. IE 和 DOM 事件流的区别 ..............................................................................................28

7. IE 和标准下有哪些兼容性的写法.................................................................................29

8. call 和 apply 的区别 .......................................................................................................29

9. Worker 继承 Person 的方法 ..........................................................................................29

10. 如何阻止事件冒泡和事件默认行为.....................................................................29

11. 添加删除替换插入到某个元素的方法...........................................................30

12. javascript 的内置对象和宿主对象 ........................................................................30

13. window.onload 和 document ready 的区别.........................................................30

14. ”==”和“===”的不同................................................................................................30

15. 浏览器的同源策略.................................................................................................30

16. JavaScript 是一门什么样的语言，它有哪些特点？............................................30

17. JavaScript 的数据类型都有什么？........................................................................31

18. 已知 ID 的 Input 输入框，希望获取这个输入框的输入值，怎么做？(不使用第

三方框架) ...............................................................................................................................31

19. 希望获取到页面中所有的 checkbox 怎么做？(不使用第三方框架)..................31

20. 设置一个已知 ID 的 DIV 的 html 内容为 xxxx，字体颜色设置为黑色(不使用第三

方框架) 32

21. 当一个 DOM 节点被点击时候，我们希望能够执行一个函数，应该怎么做？32

22. 看下列代码输出为何？解释原因。.....................................................................32

23. 看下列代码,输出什么？解释原因。....................................................................32

24. 看下列代码,输出什么？解释原因。....................................................................32

25. 看代码给答案。 ....................................................................................................33

26. 已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”] ， Alert 出 ”

This is Baidu Campus”。 ......................................................................................................33

剩余123页未读，继续阅读

评论收藏

内容反馈

香妃_C

粉丝: 7
资源: 26

前端面试宝典(附答案、带索引目录)

前端面试宝典

前端面试宝典V3.0.docx

web前端面试宝典

前端面试资料.zip

前端面试宝典大全.pdf

前端面试宝典（前端知识）

面试宝典（前端）.zip

前端面试知识点目录一览

WEB前端面试宝典

前端面试题之VUE.pdf

程序员面试笔试宝典

传智播客面试宝典

java最新面试宝典

前端面试宝典V4.0--2022.1.pdf

前端面试题含答案.pdf

前端面试题整理

Frontend:前端学习宝典

汇总大全！前端面试必看宝典！

前端面试题汇总

面试宝典-v4.0

面试八股文-面试宝典3

Java面试宝典（包含javaWeb开发的各种常见面试题型）

程序员面试宝典笔记总结

Java面试宝典2020修订版V1.0.1.doc

最新资源