前端面试必备:HTML、CSS、JavaScript核心知识点解析
需积分: 41 116 浏览量
更新于2024-07-09
收藏 1.48MB PDF 举报
"这是一份2020年的前端面试题汇总,涵盖了HTML、CSS、JavaScript等前端基础知识,旨在帮助面试者准备前端职位的面试。"
这篇内容详细列举了前端面试中可能出现的各种问题,涉及HTML、CSS、浏览器兼容性、性能优化、网页标准等多个方面。以下是对这些知识点的详细解释:
1. 测试浏览器:前端开发者需要确保其页面在不同的浏览器(如Chrome、Firefox、Safari、Edge等)和内核(Trident、Gecko、Blink、Webkit)下正常工作。
2. Doctype:DOCTYPE声明告诉浏览器应使用哪种HTML或XHTML规范解析页面,以确保兼容性和标准模式。
3. Quirks模式与Standards模式:Quirks模式是浏览器按照早期的非标准行为解析页面,而Standards模式遵循W3C标准。
4. div+css布局优点:相比table布局,div+css提供更好的布局控制,更易于维护,有利于SEO,加载速度更快。
5. alt与title:alt用于当图像无法显示时提供文本描述,而title是鼠标悬停时显示的提示信息;strong强调文本,em表示语气的着重。
6. 渐进增强与优雅降级:渐进增强是从基础功能开始,逐步添加复杂性,确保所有用户都能访问;优雅降级则是先构建高级功能,然后为旧浏览器添加回退机制。
7. 域名存储资源:使用多个域名可以并行下载资源,提高页面加载速度,避免单个域名的并发限制。
8. 网页标准重要性:标准能确保跨浏览器一致性,提高可访问性,降低维护成本,并促进搜索引擎优化。
9. cookies, sessionStorage, localStorage:cookies用于跨页面存储小量数据,但存在大小和安全限制;sessionStorage在当前会话中存储数据,关闭浏览器会丢失;localStorage持久存储数据,除非手动清除。
10. src与href:src引用外部资源,如脚本或图片;href链接到其他文档或位置,如链接和CSS。
11. 图片格式:常见格式包括JPEG(适合照片)、PNG(透明效果)、GIF(动画和简单图形)。
12. 微格式:微格式是一种在HTML中嵌入结构化数据的方法,使搜索引擎和机器可读,有助于SEO和开放数据。
13. 页面加载缓存:HTTP缓存、浏览器缓存、数据库缓存等可以优化性能,减少网络请求。
14. 图片优化:压缩图片、使用CDN、懒加载、合并图片为雪碧图、使用WebP等新格式都是优化手段。
15. HTML语义化:使用恰当的标签描述内容结构,提高可访问性和SEO。
16. SEO:前端需关注元标签、URL结构、图片alt属性、页面加载速度等,以提升搜索引擎排名。
17. 设置DOM样式:通过内联样式、行内样式表、内部样式表、外部样式表以及JavaScript操作CSS属性。
18. CSS选择器:包括类型选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。
19. 隐藏DOM元素:display:none、visibility:hidden、position:absolute/fixed与负margin、opacity:0等。
20. 超链接hover问题:可能由于CSS优先级或JavaScript动态修改导致,解决办法是正确设置CSS规则。
21. CssHack:针对IE浏览器的特定样式调整,例如_、*前缀、条件注释等。
22. 幻灯片效果:使用CSS动画、JavaScript库如jQuery Slider或Swiper实现。
23. 行内元素与块级元素:行内元素不占据整行,如span,块级元素独占一行,如div;行内元素的padding和margin在某些浏览器有限制,但现代浏览器通常支持设置。
24. 外边距重叠:相邻的上下边距可能会合并,导致结果非预期,可以通过设置`overflow`、`clearfix`等解决。
25. rgba()与opacity:rgba()设置元素背景透明,不影响子元素;opacity会影响整个元素及其内容的透明度。
26. 垂直和水平重叠:`position`与`z-index`组合使用,`text-shadow`实现文本重叠。
27. 垂直居中浮动元素:可以使用Flexbox、Grid、绝对定位等方法实现。
28. px与em的区别:px是固定单位,em是相对单位,基于父元素的字体大小。
29. "reset" CSS文件:清除浏览器默认样式,提供统一的起点,便于自定义样式。常见的reset如Eric Meyer Reset或 Normalize.css。
以上知识点涵盖了前端开发的基础和进阶,对于前端面试和实际工作都有重要的参考价值。
点击了解资源详情
点击了解资源详情
点击了解资源详情
2021-06-02 上传
2021-12-14 上传
2024-01-25 上传
2020-07-02 上传
2021-12-14 上传
凌空暗羽
- 粉丝: 686
- 资源: 13
最新资源
- ejercicios-1.9
- hiccup-d3:D3-用Clojure编写的图表
- 递18集运代运助手-crx插件
- documentdb-node-getting-started:此示例向您展示如何快速开始使用Microsoft Azure DocumentDB服务和Node.js
- SoundTestMobile:一个Android手机声音应用程序,用于声音测试的实验,例如频率、延迟等
- hackthenorth-frontend-challenge:提交Hack The North Front-end Challenge
- 步骤8
- confetti:with五彩纸屑效果,新年快乐
- 惠喵-优惠直播-crx插件
- 电子功用-用于检测分布式发电机的孤岛运行的方法
- i18n-cn-autotrans-loader:翻译插件
- OIM-API-Samples:我的第一个 Git 存储库
- EC20 R2.1.7z
- 简历-
- Jeapordy
- d3Chart:d3图表