前端面试必备：HTML、CSS、JS重点解析

"这是一份前端面试题集，涵盖了HTML、CSS和JavaScript的相关知识点，旨在帮助准备面试的前端开发者巩固和提升技术能力。" 在前端面试中，掌握HTML、CSS和JavaScript的基础及进阶知识至关重要。以下是部分题目涉及的知识点详解： 1. HTML和CSS： - 测试浏览器：主要考虑Chrome、Firefox、Safari、Edge和IE/Edge(Chromium)，它们分别基于Blink、Gecko、WebKit和Trident内核。 - Doctype：用于声明文档类型，确保浏览器以标准模式解析HTML，避免Quirks模式。 - Quirks模式：旧版浏览器的兼容模式，解析规则与W3C标准不一致。 - Div+CSS布局优于Table布局：更灵活、可维护性高、页面加载速度快，利于SEO。 - img的alt和title：alt是图片无法显示时的文字替代，title是鼠标悬停时显示的提示信息。 - strong和em：都用于强调文本，但strong表示重要性，em表示强调。 2. 渐进增强和优雅降级：渐进增强是先保证基本功能，再逐步添加复杂特性；优雅降级则是先创建高级功能，然后为旧浏览器提供回退方案。 3. 域名存储资源：多域名可分散请求，减少单个域名的并发限制，提高加载速度。 4. 网页标准和机构：W3C等组织制定标准，确保跨平台和设备的一致性，推动技术发展。 5. cookies，sessionStorage和localStorage：cookies存储量小，常用于会话管理；sessionStorage和localStorage分别用于页面会话和长期存储，不随HTTP请求发送。 6. src与href：src用于加载外部资源，如图片、脚本等；href用于链接到其他页面或资源。 7. 图片格式：常见格式有JPEG、PNG、GIF、SVG，需根据需求选择合适格式，平衡质量与体积。 8. 微格式：将结构化数据嵌入HTML，方便机器识别，利于搜索引擎和Web服务。 9. JS性能优化：包括缓存策略（如HTTP缓存、浏览器缓存）、延迟加载、代码压缩等。 10. 图片优化：如懒加载、响应式图片、压缩、合并、CDN托管等。 11. HTML语义化：使页面结构更清晰，利于爬虫抓取，提升可访问性和SEO。 12. SEO：考虑关键词、元标签、URL结构、内容质量、页面速度等因素。 13. 设置DOM样式：通过内联样式、内部样式表、外部样式表，以及JavaScript的style属性或CSSOM操作。 14. CSS选择器：如id、class、元素选择器、属性选择器、伪类等，用于精准匹配元素。 15. 不显示DOM：display:none或visibility:hidden，前者不占空间，后者保留空间。 16. 超链接hover问题：可能因a:visited样式覆盖，解决方法是正确设置CSS优先级。 17. CssHack：针对特定浏览器的样式修复，如_针对IE6的私有属性，*html或@media screen and (min-width:0\0)针对IE7/8。 18. 幻灯片效果：涉及CSS动画、过渡和JavaScript控制。 19. 行内元素和块级元素：行内元素不会独占一行，块级元素会。行内元素的padding和margin有限制，但可通过display属性转换。 20. 外边距重叠：相邻垂直外边距会合并，导致结果不预期。可使用clearfix、伪元素或改变布局来避免。 21. rgba()和opacity：rgba()指定颜色透明度，不影响子元素；opacity影响整个元素及其子元素。 22. 文字垂直和水平重叠：使用position、transform、line-height等属性实现。 23. 垂直居中浮动元素：可以使用Flexbox或Grid布局，或者经典的负margin和绝对定位方法。 24. px和em的区别：px是固定单位，em是相对单位，基于父元素字体大小。 25. "reset" CSS文件：清除浏览器默认样式，确保各元素在不同浏览器中的表现一致。 以上是部分前端面试题涉及的关键知识点，全面理解和掌握这些内容对于提升面试成功率非常关键。