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

"这份资料是前端面试题的汇总，涵盖了HTML、CSS、JavaScript等多个方面的知识，旨在帮助前端工程师准备面试和自我检测技能。" **HTML和CSS** 1. **浏览器兼容性**：面试中可能会询问你是否测试过不同浏览器，比如IE、Chrome、Firefox、Safari等，以及它们的内核，如Trident、Blink、Gecko、Webkit等。 2. **DOCTYPE的作用**：DOCTYPE声明告知浏览器文档应按照哪种HTML或XHTML规范解析。 3. **Quirks模式与Standards模式**：Quirks模式下，浏览器模拟老版本的行为；Standards模式则遵循最新的W3C标准，呈现效果更一致。 4. **div+css布局的优势**：相比table布局，div+css更利于SEO，代码结构清晰，易于维护，响应式设计更方便。 5. **img的alt与title**：alt是图片无法显示时的替代文本，对SEO友好；title是鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**：渐进增强是从基础功能开始，逐步增强用户体验；优雅降级则是确保核心功能在旧浏览器中正常工作，然后添加新特性。 **网页资源管理与优化** 7. **多域名存储**：可以分散请求，减少单个域名的并发限制，提高加载速度。 8. **网页标准和机构的重要性**：标准保证了网页的互操作性，降低了开发成本，提高了用户体验。 9. **cookies，sessionStorage和localStorage**：cookies存储量小，每次请求都会发送；sessionStorage只在当前会话有效；localStorage长期存储，但不随会话关闭而消失。 10. **src与href**：src用于引入外部资源，如脚本、图片；href用于链接页面或资源。 **图像优化与性能** 11. **图片格式**：常见的有JPEG、PNG、GIF、SVG等，根据需求选择合适的格式。 12. **微格式**：微格式是一种将结构化数据嵌入HTML的方式，有助于搜索引擎理解和解析页面内容。 13. **缓存处理**：包括HTTP缓存、浏览器缓存、本地存储等，通过设置缓存策略提升页面加载速度。 14. **图片优化**：如延迟加载、合并图片为雪碧图、使用WebP等高效格式、压缩图片大小等。 **HTML语义化与SEO** 15. **HTML语义化**：使页面结构更清晰，有利于屏幕阅读器和搜索引擎理解。 16. **前端SEO**：考虑关键词、元标签、URL结构、页面速度、可爬取性等因素。 **CSS相关** 17. **DOM样式设置**：通过内联样式、内部样式表、外部样式表或JavaScript操作DOM元素的style属性。 18. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**：display:none、visibility:hidden等。 20. **超链接hover问题**：确保a:hover样式写在a:link和a:visited之后。 **CSS高级技巧** 21. **CssHack**：针对不同IE版本的样式兼容性问题，如_、*前缀、条件注释等。 22. **幻灯片效果**：通常使用CSS动画、过渡或JavaScript实现。 **元素类型与布局** 24. **行内元素与块级元素**：行内元素不独占一行，如span；块级元素独占一行，如div。行内元素的padding和margin有限制，但可通过display属性转换类型。 **CSS其他特性** 25. **外边距重叠**：相邻的垂直外边距会合并，结果是最大的那个。 26. **rgba()与opacity**：rgba()指定颜色的透明度，不影响子元素；opacity影响整个元素及其所有子元素。 27. **垂直和水平重叠**：使用position属性和z-index控制元素叠加。 28. **垂直居中浮动元素**：可以使用负margin、display:table-cell等方法。 29. **px与em**：px是固定单位，em是相对单位，基于父元素的字体大小。 30. **CSS reset**：清除浏览器默认样式，如Eric Meyer Reset，确保跨浏览器的一致性。 这份资料全面覆盖了前端开发者需要掌握的基础和进阶知识，对面试和实际工作都具有很高的参考价值。