1. 前端面试基础知识体系构建方法论作为前端工程师技术成长的里程碑事件面试准备过程实际上是对知识体系的系统性梳理。Day-5的专项复习应当聚焦于HTML/CSS核心概念、浏览器工作原理和基础算法这三个技术支柱。1.1 HTML语义化深度解析现代Web开发中语义化HTML已从最佳实践演变为基本要求。以下是必须掌握的语义化标签及其应用场景!-- 文档结构类 -- header用于页面页眉或内容区块的引导部分/header nav定义导航链接集合/nav main标识页面主要内容区域/main article表示独立可分发的内容单元/article section对相关内容的逻辑分组/section aside定义与主要内容间接相关的内容/aside footer页脚或内容区块的结尾部分/footer !-- 文本内容类 -- figure包含图像、图表等媒体内容 figcaption为媒体内容提供说明/figcaption /figure time datetime2023-08-15日期时间表示/time mark突出显示文本/mark关键技巧使用W3C验证器检查文档语义结构确保每个语义标签都有明确的用途而非仅用于样式控制1.2 CSS盒模型进阶理解盒模型差异是面试必考点需要掌握以下核心概念标准盒模型width/height content宽度总宽度 width padding border margin触发方式box-sizing: content-boxIE盒模型width/height content padding border总宽度 width margin触发方式box-sizing: border-boxFlex弹性盒模型主轴(main axis)与交叉轴(cross axis)布局flex-grow/shrink/basis的计算规则对齐属性justify-content/align-items/align-selfGrid网格布局显式网格与隐式网格的区别fr单位的计算方式grid-template-areas的命名布局技巧/* 盒模型调试技巧 */ .debug-box { outline: 1px solid rgba(255, 0, 0, 0.5); background: rgba(0, 0, 255, 0.1); }1.3 浏览器渲染原理拆解理解关键渲染路径(Critical Rendering Path)是性能优化的基础构建DOM树字节 → 字符 → 令牌 → 节点 → DOM遇到