前端面试必备：HTML, CSS, JS 知识点精要

"面试宝典 v2-新增Vue和React.pdf" 这份面试宝典涵盖了前端开发者在面试中可能会遇到的关键知识点，特别关注JavaScript、HTML和CSS的相关问题。以下是这些知识点的详细说明： 1. **HTML和CSS兼容性**：面试者需要了解主要浏览器的内核，如Chrome的Blink，Firefox的Gecko，Safari的WebKit，以及IE/Edge的Trident，确保网页在这些浏览器中的兼容性。 2. **DOCTYPE**：DOCTYPE声明告诉浏览器文档使用哪种HTML或XHTML规范，这对于触发标准模式（Standards Mode）至关重要，避免Quirks Mode，即浏览器按照自己的非标准方式进行解析。 3. **Quirks模式和Standards模式**：Quirks模式是浏览器为了兼容老式网页而采用的一种解析方式，Standards模式则遵循W3C标准，两种模式下CSS和HTML的渲染规则有所不同。 4. **div+css布局**：相对于传统的table布局，div+css布局提供了更好的灵活性、可维护性和页面性能，避免了表格布局导致的复杂嵌套和渲染速度问题。 5. **img的alt与title**：alt属性用于当图像无法显示时提供文本替代，对搜索引擎友好；title属性则为鼠标悬停时显示提示文本。 6. **渐进增强与优雅降级**：渐进增强是从基础功能开始，逐步增加更复杂的功能，确保所有浏览器都能正常工作；优雅降级则是先为现代浏览器设计复杂功能，然后为旧版浏览器提供回退方案。 7. **多域名存储资源**：这可以分散请求，减少单一域名下的连接限制，提高页面加载速度。 8. **网页标准与标准制定机构**：W3C等组织制定的网页标准保证了不同浏览器间的一致性，提高了可访问性和互操作性，对于前端开发极其重要。 9. **cookies，sessionStorage和localStorage的区别**：cookies存储量小且每次请求都会发送；sessionStorage只在当前会话中有效；localStorage则持久化存储，直到手动清除。 10. **src与href的区别**：src用于引入外部资源，如脚本、图片等；href用于链接到其他文档或资源。 11. **图片格式**：常见的图片格式有JPEG、PNG、GIF、SVG等，每种格式有不同的应用场景和压缩效果。 12. **微格式**：微格式是一种将结构化数据嵌入HTML的方式，便于机器解析，有助于SEO和富搜索结果。 13. **页面性能优化**：缓存策略、延迟加载、合并请求、图片压缩等技术可以改善加载速度。 14. **HTML结构的语义化**：语义化的HTML使页面内容含义明确，有利于无障碍访问和搜索引擎理解。 15. **前端SEO**：关键词、元标签、页面结构、可爬取性、快速加载时间等都是SEO的重要考虑因素。 16. **设置DOM样式**：可以通过内联样式、内部样式表、外部样式表以及JavaScript操作DOM的style属性来设置样式。 17. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 18. **隐藏DOM元素**：可以使用display:none或visibility:hidden，两者在视觉效果和占用空间方面有所不同。 19. **超链接hover问题**：访问后可能因CSS伪类顺序问题导致hover样式不出现，通过调整CSS选择器顺序可解决。 20. **CssHack**：针对不同IE版本的兼容性问题，如`_height`、`*width`等，但应尽量避免使用，依赖更现代的前缀和特性检测。 21. **行内元素与块级元素**：行内元素（如span）不会独占一行，块级元素（如div）会；行内元素的padding和margin通常在IE6及以下版本有限制。 22. **外边距重叠**：相邻块级元素的顶部和底部外边距可能重叠，形成单一的最大值。 23. **rgba()与opacity**：rgba()定义带有透明度的颜色，仅影响背景颜色；opacity影响元素及其所有子元素的透明度。 24. **垂直居中**：浮动元素的垂直居中可以通过相对定位、flexbox或CSS Grid实现。 25. **px和em**：px是绝对单位，em是相对单位，基于父元素的字体大小。 26. **CSS reset**：reset CSS用于消除浏览器默认样式差异，通常使用 Normalize.css 或 Reset.css 来实现标准化起点。 以上内容是面试中可能涉及的基本技能和理解，对前端开发者来说至关重要。理解并掌握这些知识点能帮助面试者更好地展示其专业能力。