前端面试必备：HTML、CSS、JS问题精选

"WEB面试题汇总.pdf" 这篇PDF文件主要涵盖了HTML、CSS和JavaScript等方面的前端面试问题，旨在帮助求职者准备技术面试。以下是部分关键知识点的详细说明： 1. **HTML和CSS基础** - **DOCTYPE**：定义文档类型，告诉浏览器按照哪种HTML或XHTML规范解析页面。 - **Quirks模式**：浏览器按照早期的非标准方式进行渲染，而**Standards模式**则遵循W3C标准。 - **Div+CSS布局**优于Table布局，因为它更灵活，有利于SEO，代码量少，且分离了结构和样式。 2. **HTML元素和属性** - **alt和title**：`alt`提供图片替代文本，用于图片无法显示时；`title`为元素添加提示信息。 - **strong和em**：两者都用于强调文本，但`strong`强调内容的重要性，而`em`强调内容的语义。 3. **前端优化** - **多域名存储**：减少同一域名下的并发请求限制，提高加载速度。 - **网页标准**：确保跨浏览器兼容性，提升用户体验，便于维护和更新。 - **cookies, sessionStorage, localStorage**：它们都是客户端存储数据的方式，各有其生命周期和用途。 4. **前端性能优化** - **图片优化**：使用恰当的图片格式（如JPEG、PNG、SVG），压缩图片，利用CDN，使用懒加载等。 - **CSS和JS缓存**：利用HTTP头信息设置缓存策略，减少网络请求。 5. **HTML语义化** - 使用有意义的标签（如<header>, <nav>, <article>）使页面结构清晰，利于SEO和辅助技术。 6. **SEO优化** - 前端应关注元标签（如<title>，<meta>），使用语义化标签，确保可爬虫性，以及提供无障碍访问。 7. **DOM操作和CSS选择器** - 可以通过CSS直接设置样式，或者使用JavaScript的style属性、类操作、内联样式等方式。 - CSS选择器包括标签选择器、类选择器、ID选择器、属性选择器等，以及更高级的伪类和伪元素选择器。 8. **CSS隐藏元素** - `display:none`、`visibility:hidden`、`opacity:0`和`position:absolute/fixed`配合`z-index`可实现元素隐藏。 9. **CSS兼容性问题** - **CssHack**用于解决浏览器之间的兼容性差异，如针对IE6的`*html`, IE7的`_width`等。 10. **CSS动画和过渡** - 编写CSS实现幻灯片效果涉及`transition`和`animation`属性，以及关键帧规则。 11. **元素类型和边距** - **行内元素**不能设置宽高，但可以通过`display`属性转换；**块级元素**可设置宽高，行内元素的`padding`和`margin`在某些浏览器下可能无效。 12. **外边距重叠** - 当相邻的块级元素垂直外边距相遇时，可能会发生外边距合并，导致重叠结果。 13. **透明度** - `rgba()`允许在颜色中设置透明度，而`opacity`影响整个元素及其所有子元素的透明度。 14. **垂直居中** - 实现元素垂直居中可以使用`line-height`、`display:flex`、`position`和`transform`等方法。 15. **单位** - **px**是绝对单位，而**em**是相对单位，基于父元素的字体大小。 16. **CSS Reset** - 重置CSS文件消除浏览器默认样式差异，如`*{margin:0;padding:0;}`，便于自定义样式。 以上只是部分问题的解答，完整版PDF文件中还包含更多深入的前端技术问题和答案，对于准备面试和提升技能非常有帮助。