前端面试必备：知识点精编与解析

"这是一份针对前端初级工程师的面试题集锦，涵盖了HTML和CSS两个主要部分，旨在帮助求职者准备一线互联网公司的面试。文档详细解析了多个常见问题，包括HTML语义化、HTML5新特性、浏览器对离线储存的处理、CSS布局模型、盒模型、居中方法、优先级、自适应布局以及GPU加速等关键概念和技术。" **HTML篇知识点** 1. **HTML语义化**：HTML语义化是指使用正确的HTML标签来表达网页内容的含义，有助于搜索引擎理解和屏幕阅读器的读取，提高可访问性和SEO。 2. **HTML5新标签**：例如<header>、<nav>、<article>、<section>、<footer>等，用于更好地组织网页结构。 3. **metaviewport**：用于设置移动设备上的视口大小，控制页面缩放和布局。 4. **H5**：HTML5是HTML的最新版本，引入了许多新特性如离线存储、音频/视频播放、canvas绘图、geolocation定位等。 5. **label标签**：用于与表单元素关联，提高用户体验，点击label会触发关联元素的焦点。 6. **行内元素与块级元素**：行内元素如<span>、<a>，不会独占一行；块级元素如<div>、<p>，默认占据整行。 7. **a标签禁用href**：可以使用`href="#"`配合JavaScript阻止跳转。 8. **canvas宽高设置**：在标签上设置宽高是初始尺寸，CSS设置宽高影响绘制区域和布局。 9. **浏览器内核**：常见的有Trident（IE）、Gecko（Firefox）、Webkit（Safari, Chrome）和Blink（Chrome, Opera）。 10. **iframe缺点**：性能消耗大、SEO不友好、可能导致跨域安全问题。 11. **HTML5离线储存**：通过`applicationCache`实现离线存储网页资源，提高离线访问速度。 12. **离线储存的管理与加载**：浏览器会自动缓存指定的静态资源，在离线状态下优先加载缓存中的内容。 13. **DOCTYPE**：声明文档类型，严格模式下浏览器按标准解析，混杂模式则兼容老版本HTML。 14. **HTML与XHTML**：HTML语法较宽松，XHTML更严格，要求所有标签闭合且属性值需加引号。 **CSS篇知识点** 1. **CSS布局模型**：如盒模型（content-box/wire-box），影响元素的宽高计算。 2. **获取宽高**：包括offsetWidth/offsetHeight、clientWidth/clientHeight、getBoundingClientRect()等方法。 3. **BFC（Block Formatting Context）**：解决边距重叠问题，创建新的块格式化上下文。 4. **cssreset与normalize.css**：前者重置样式，消除浏览器差异；后者规范化样式，保持一致的基础样式。 5. **居中方法**：包括margin auto、display: flex、position绝对定位等。 6. **CSS优先级**：结合选择器类型、ID、类、属性等确定样式优先级。 7. **清除浮动**：使用clear属性、overflow属性、伪元素等方法避免父元素高度塌陷。 8. **自适应布局**：包括百分比布局、媒体查询、响应式设计等。 9. **画三角形**：利用边框塌陷和透明边框创建不同形状的三角形。 10. **link与@import**：link是HTML标签，同步加载；@import是CSS导入，异步加载。 11. **长宽比方案**：如使用padding-bottom与绝对定位实现等比例容器。 12. **display相关**：包括block、inline、inline-block、flex、grid等布局模式。 13. **CSS优化**：减少选择器复杂度、合并CSS、避免使用!important、使用CSS预处理器等。 14. **GPU加速**：通过transform、opacity、will-change等属性开启，提高动画性能。 15. **GPU硬件加速问题**：可能导致内存占用增加、GPU渲染层过多、Z-index问题等。 16. **link与@import的区别**：link支持样式表并行加载，@import导致阻塞渲染。 17. **CSS选择器列表优先级**：选择器越具体，优先级越高。 这份面试题集锦详尽地覆盖了前端基础，对于准备面试的开发者来说，是极好的学习参考资料。通过深入理解和实践这些知识点，可以有效提升面试表现和实际工作能力。