前端开发面试必备：HTML/CSS选择器与优化策略

"本文档包含了前端面试中关于HTML和CSS的部分常见问题，涵盖了从基本概念到高级技术的应用，包括浏览器兼容性、布局模式、图片优化、SEO策略、CSS选择器、DOM操作以及预处理器等内容。" 在前端开发面试中，HTML和CSS的知识是不可或缺的。以下是一些重要的知识点： 1. **浏览器兼容性**：开发人员需要考虑多种浏览器的兼容性，如IE、Firefox、Chrome、Safari等，它们分别基于不同的内核，如Trident、Gecko、Blink和Webkit。 2. **DOCTYPE的作用**：声明文档类型，使浏览器以标准模式解析HTML，确保跨浏览器的一致性。 3. **Div+CSS布局与Table布局**：Div+CSS布局提供更好的灵活性和控制，易于维护，而Table布局常用于表格数据展示，但不利于响应式设计。 4. **Img的alt和title属性**：alt用于提供图像的替代文本，当图像无法显示时显示；title提供额外信息，鼠标悬停时显示。 5. **Strong与Em的异同**：两者都用于强调文本，Strong默认加粗，强调更强烈；Em默认斜体，表示着重。 6. **渐进增强与优雅降级**：渐进增强是在基础功能上逐步增加增强特性，确保所有用户都能访问核心内容；优雅降级则是先为现代浏览器构建复杂功能，然后为旧浏览器添加回退支持。 7. **多域名存储资源**：能分散请求，避免单一域名下的请求过多导致的浏览器并发限制，提高页面加载速度。 8. **网页标准和制定机构**：如W3C，规范了网页开发的标准，保证了不同浏览器间的一致性和可访问性。 9. **Cookies、sessionStorage和localStorage**：Cookies存储在客户端，大小有限，且每次请求都会发送；sessionStorage和localStorage也存储在客户端，但不随HTTP请求发送，sessionStorage只在当前会话中有效，localStorage长期有效。 10. **src与href**：src用于引入外部资源，如图片、脚本等；href用于链接外部文档，如CSS样式表或链接。 11. **图片优化**：可以通过压缩图片、使用CDN、延迟加载、雪碧图等技术提高加载速度。 12. **HTML语义化**：使用合适的标签表达内容结构，如<header>、<nav>、<article>等，有助于屏幕阅读器和搜索引擎理解。 13. **SEO优化**：包括关键词优化、元标签使用、URL结构、内部链接、移动友好性等。 14. **设置DOM样式**：通过内联样式、内部样式表或外部样式表，以及JavaScript的style属性或CSSOM操作。 15. **CSS选择器**：包括类选择器、ID选择器、标签选择器、后代选择器、伪类等，CSS3新增了更多的选择器如通用兄弟选择器、属性选择器等。 16. **隐藏DOM元素**：可以使用`display:none`、`visibility:hidden`或CSS3的`opacity:0`。 17. **Hover问题**：访问过的链接可能因浏览器行为不再响应hover，可以通过CSS重置或JavaScript处理。 18. **CssHack**：针对IE浏览器的样式兼容性问题，如`_height`、`*height`、`!important`等。 19. **行内元素与块级元素**：行内元素不能设置宽高，但可以设置`display`属性转换。 20. **外边距重叠**：相邻的块级元素上下外边距可能会合并，可使用`clearfix`解决。 21. **RGBA与Opacity**：RGBA允许设置透明度同时保持颜色独立，Opacity会影响元素及其所有子元素。 22. **垂直居中**：可以使用`flexbox`、`grid`布局、绝对定位等方法实现。 23. **Px与Em**：Px是固定单位，Em是相对单位，基于父元素字体大小。 24. **Reset CSS**：清除浏览器默认样式，如Eric Meyer Reset，normalize.css则保留部分默认样式，提供更一致的基线。 25. **Sass与LESS**：预处理器，允许变量、嵌套规则、混合等功能，简化CSS编写。 以上知识点是前端面试中常见的HTML和CSS相关问题，深入理解和掌握这些内容对于面试和实际开发至关重要。