前端面试基础题汇总-500题

“优雅降级”观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为 “过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限 定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无 妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏 览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被 直接忽略。 “渐进增强”观点 “渐进增强”观点则认为应关注于内容本身。 内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有 的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为 一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器 支持 (Graded Browser Support)”策略的原因所在。 那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角， 阴影（CSS3），要求兼容（ 前端面试题汇总主要涵盖HTML和CSS相关知识，同时也涉及到浏览器兼容性、网页标准、性能优化以及SEO等核心领域。以下是对这些知识点的详细说明： 1. **浏览器测试**：前端开发者通常需要确保他们的页面在主流浏览器（如Chrome、Firefox、Safari、Edge以及IE等）上运行良好。这些浏览器有不同的内核，例如WebKit（Safari和Chrome）、Gecko（Firefox）和Trident（IE）。 2. **DOCTYPE**：DOCTYPE声明告诉浏览器文档遵循的HTML或XHTML规范，它影响浏览器进入何种模式解析页面，如Quirks模式或Standards模式。 3. **Quirks模式与Standards模式**：Quirks模式允许浏览器以早期版本的方式解析页面，可能导致非标准的行为；而Standards模式遵循最新的W3C标准，提供更一致的渲染。 4. **div+css布局与table布局**：div+css布局更加灵活，可维护性高，利于SEO，而table布局不利于响应式设计且代码冗余。 5. **alt与title**：img的alt属性为图片提供文字替代，当图片无法显示时，alt文字作为描述；title属性提供鼠标悬停提示，提供更多关于图片的信息。 6. **strong与em**：strong用于强调文本，通常表示更重要的内容，浏览器默认加粗；em代表着重，通常斜体表示，强调文本的某种意义。 7. **渐进增强与优雅降级**：渐进增强关注内容，首先保证基本功能在所有浏览器中可用，然后逐步添加高级功能给支持的浏览器；优雅降级则是先为最新、最先进的浏览器设计，再处理旧浏览器的兼容问题。 8. **多域名存储资源**：多域名可分散请求，避免单个域名下的并发请求限制，提高页面加载速度。 9. **网页标准与标准制定机构**：标准如HTML5、CSS3等，由W3C等机构制定，确保跨浏览器一致性，降低开发难度，提高用户体验。 10. **cookies，sessionStorage和localStorage**：cookies存储少量数据，每次请求都发送；sessionStorage在浏览器窗口关闭后丢失；localStorage持久存储，不随窗口关闭丢失。 11. **src与href**：src用于加载外部资源，如图片、脚本；href用于链接到其他文档或资源，如链接和样式表。 12. **图片格式**：常见的有JPEG（适用于高质量照片），PNG（透明和高质量图像），GIF（动画和简单图形），SVG（矢量图）。 13. **微格式**：微格式是将结构化数据嵌入HTML中的方法，帮助搜索引擎理解内容，提高可见性和可搜索性。前端构建时应考虑微格式以提升SEO。 14. **图片加载优化**：可以使用延迟加载、雪碧图、压缩图片、使用WebP格式等方式提高加载速度。 15. **HTML语义化**：通过使用适当的HTML标签来表达页面结构，使屏幕阅读器、搜索引擎和开发者都能更好地理解内容。 16. **前端SEO**：考虑关键词优化、元标签、URL结构、页面速度、移动友好性和结构化数据标记等。 17. **DOM样式设置**：可以使用内联样式、内部样式表（`<style>`标签）和外部样式表（`.css`文件），以及JavaScript的`style`属性或CSSOM操作。 18. **CSS选择器**：包括元素选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**：使用`display:none`或`visibility:hidden`，前者不占据空间，后者占据空间但不可见。 20. **hover样式问题**：已访问链接可能不再触发`:hover`状态，可通过CSS优先级调整或JavaScript解决。 21. **Css Hack**：为了在特定浏览器中修正样式问题，开发者使用特定的CSS语法，如IE6的`*html .class`，IE7的`_property`，IE8的`<!--[if lt IE 8]>`条件注释。 22. **幻灯片效果**：通常使用CSS动画、JavaScript库（如jQuery）或专门的幻灯片插件实现，涉及过渡效果、定时器和事件监听等。 以上内容只是前端面试题的一部分，实际面试中还会涉及JavaScript、DOM操作、网络协议、浏览器原理等多个方面。