前端面试必备知识点：HTML, CSS, 性能优化与浏览器兼容性

"前端面试题集锦，涵盖了HTML和CSS的基础与高级概念，包括浏览器兼容性、网页标准、性能优化、SEO策略以及CSS选择器、布局技巧等核心知识点。" 在前端面试中，掌握HTML和CSS的基本原理及最佳实践至关重要。以下是部分关键问题及其解析： 1. **浏览器兼容性**：面试者应熟悉主流浏览器如Chrome、Firefox、Safari、Edge（Chromium内核）和IE的特性，理解它们的内核差异，如 Trident（IE）、Gecko（Firefox）、Webkit（Safari、Chrome早期版本）和Blink（Chrome、Opera）。 2. **DOCTYPE的作用**：DOCTYPE声明告知浏览器文档遵循的HTML或XHTML规范，影响浏览器进入哪种渲染模式（Quirks模式或Standards模式）。 3. **Quirks模式与Standards模式**：Quirks模式模拟旧版浏览器的行为，而Standards模式遵循最新标准，后者通常提供更一致的渲染结果。 4. **div+css布局的优点**：相比table布局，div+css更有利于维护和扩展，提高页面加载速度，实现更好的响应式设计。 5. **img的alt与title**：alt是图片无法显示时的替代文本，对SEO友好；title是鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**：渐进增强从基础功能开始，逐步增加复杂功能以支持现代浏览器；优雅降级则在保证主流浏览器体验的同时，为老版本浏览器提供基本功能。 7. **多域名存储资源**：可分散请求，避免单个域名下的连接限制，提高加载速度。 8. **网页标准和标准机构**：W3C等机构制定的标准确保跨平台、跨浏览器的一致性，促进网络的健康发展。 9. **cookies、sessionStorage和localStorage的区别**：cookies存储有限且每次请求都会发送；sessionStorage仅在当前会话中有效；localStorage持久存储，但容量更大。 10. **src与href**：src用于引入外部资源，如图片、脚本等；href用于链接页面或资源，如链接跳转和样式表引用。 11. **图片格式**：常见的有JPEG（高质量图像）、PNG（透明支持）、GIF（动画支持）等。 12. **微格式**：微格式是将结构化数据嵌入HTML中的方式，有助于搜索引擎理解和解析内容。 13. **性能优化**：缓存策略包括HTTP缓存、浏览器缓存、CDN等，优化图片加载可通过压缩、延迟加载、雪碧图、懒加载等技术。 14. **HTML结构语义化**：使用合适的标签描述页面结构，提高可读性和辅助设备的兼容性。 15. **SEO优化**：前端应关注关键词、元标签、URL结构、可爬取性、页面速度等，确保搜索引擎能正确索引和排名页面。 16. **设置DOM样式**：通过内联样式、内部样式表、外部样式表、JavaScript操作style属性等方式。 17. **CSS选择器**：包括标签选择器、类选择器、ID选择器、伪类、属性选择器等。 18. **隐藏DOM元素**：display:none和visibility:hidden，前者不占用空间，后者保留空间。 19. **超链接 hover 样式**：已访问链接的:hover可能被浏览器默认样式覆盖，通过CSS重置或优先级设置解决。 20. **CssHack**：针对不同IE版本的CSS兼容性问题，如_前缀、*前缀、条件注释等。 21. **行内元素与块级元素**：行内元素（如span）沿行排列，不接受宽高设置；块级元素（如div）独占一行，接受宽高设置，可设置padding和margin。 22. **外边距重叠**：相邻垂直外边距有时会合并，可通过清除浮动、设置border、使用margin:0 auto等方法避免。 23. **rgba()与opacity**：rgba()设定元素背景色的透明度，不影响子元素；opacity影响元素及其所有后代元素的透明度。 24. **垂直居中浮动元素**：可使用负margin、display:table-cell、Flexbox或Grid布局实现。 25. **px与em的区别**：px是固定单位，em是相对单位，基于父元素的字体大小。 26. **reset CSS**：重置浏览器默认样式，确保各浏览器统一呈现；normalize.css则是规范化样式，保留一些基本样式。 27. **了解“reset”CSS文件**：如Eric Meyer Reset、Normalize.css等，用于消除浏览器样式差异，创建一致的起点。 以上是前端面试中常见的问题，熟练掌握这些知识点将有助于在面试中脱颖而出。