前端面试必备：HTML、CSS、JavaScript核心知识点解析

"这是一份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。 以上知识点涵盖了前端开发的基础和进阶，对于前端面试和实际工作都有重要的参考价值。