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

"web前端面试宝典" Web前端面试宝典涵盖了HTML、CSS、JavaScript以及其他相关技术的基础知识和最佳实践，是准备前端面试的重要参考资料。以下是一些关键知识点的详细解释： 1. **HTML和浏览器兼容性**：面试者应熟悉各种浏览器的内核，如Chrome的Blink、Firefox的Gecko、Safari的WebKit等，并测试页面在这些浏览器中的表现。 2. **DOCTYPE的作用**：DOCTYPE声明指定了文档遵循的HTML或XHTML规范，影响浏览器以何种模式解析页面，影响Quirks模式和Standards模式。 3. **Quirks模式与Standards模式**：Quirks模式是浏览器按照旧的、非标准的方式渲染页面，而Standards模式遵循最新的W3C标准，提供更一致的渲染结果。 4. **div+css布局的优势**：相比table布局，div+css更利于页面的模块化，代码结构清晰，易于维护，同时有利于SEO和页面性能优化。 5. **img的alt与title**：alt用于替换图片无法显示时的文字描述，而title是鼠标悬停时显示的提示信息；**strong与em**：strong强调文本，通常加粗；em表示重要性，通常斜体。 6. **渐进增强与优雅降级**：渐进增强从基本功能开始，逐步增加增强功能，确保所有浏览器都能工作；优雅降级则在现代浏览器中提供高级功能，但保证在旧浏览器中核心功能可用。 7. **多域名存储资源**：可以利用浏览器并发请求限制，提高页面加载速度，避免单个域名下的请求阻塞。 8. **网页标准与制定机构**：W3C等机构制定的标准有助于提升网页的互操作性和可访问性，对开发者和用户都至关重要。 9. **cookies，sessionStorage和localStorage**：cookies用于跨域跟踪，有限存储量；sessionStorage用于同一窗口内的数据存储，关闭窗口后数据消失；localStorage持久化存储，不随窗口关闭而丢失。 10. **src与href**：src用于引入外部资源，如图片、脚本等；href用于链接页面或资源，如链接到CSS文件。 11. **图片格式**：常见的包括JPEG、PNG、GIF、SVG等，各有其适用场景。 12. **微格式**：微格式是一种将结构化信息嵌入HTML的方式，便于机器解析，提升网页的语义性。 13. **JS请求缓存**：HTTP缓存策略包括浏览器缓存、强缓存、协商缓存等，优化加载性能。 14. **图片优化**：可以使用懒加载、合并图像为雪碧图、压缩图片、使用WebP等高效格式等方式提高加载速度。 15. **HTML语义化**：通过合适的标签描述页面结构，如<header>、<nav>、<main>等，使页面更具可读性和可访问性。 16. **前端SEO**：考虑元标签、关键词、URL结构、页面速度、可访问性等因素，提高搜索引擎的索引和排名。 17. **DOM样式设置**：可以通过内联样式、内部样式表、外部样式表、JavaScript操作CSS属性等方式。 18. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**：使用display:none或visibility:hidden可使元素不可见。 20. **超链接hover问题**：已访问链接可能不再响应hover样式，通过CSS设置a:visited:hover解决。 21. **CssHack**：为解决浏览器兼容性问题，采用特定的CSS写法，如_为IE6添加样式，*为IE6和7添加，!important为IE8。 22. **行内元素与块级元素**：行内元素如span不会独占一行，不支持宽高设置；块级元素如div独占一行，支持宽高设置。行内元素的padding和margin设置有限制。 23. **外边距重叠**：相邻的垂直外边距会合并，导致重叠效果，可以通过清除浮动或使用margin负值避免。 24. **rgba()与opacity**：rgba()允许指定颜色的透明度，不影响子元素；opacity影响元素及所有子元素的透明度。 25. **垂直和水平重叠**：使用position和z-index实现元素的层叠，以及text-align和vertical-align调整位置。 26. **浮动元素垂直居中**：可使用line-height、display:table-cell、flexbox或CSS Grid实现。 27. **px与em**：px是固定单位，em是相对单位，基于父元素的字体大小。 28. **CSS reset**：清除浏览器默认样式，保证不同浏览器样式一致性；normalize.css则是标准化浏览器样式，保留部分基本样式。 以上只是部分关键点，完整的面试宝典还包括JavaScript、DOM操作、Ajax、响应式设计、性能优化、框架与库的应用等更多内容。