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 datetime="2023-08-15">日期时间表示</time> <mark>突出显示文本</mark>关键技巧：使用W3C验证器检查文档语义结构，确保每个语义标签都有明确的用途而非仅用于样式控制
1.2 CSS盒模型进阶理解
盒模型差异是面试必考点，需要掌握以下核心概念：
标准盒模型：
width/height= content宽度- 总宽度 = width + padding + border + margin
- 触发方式：
box-sizing: content-box
IE盒模型：
width/height= content + padding + border- 总宽度 = width + margin
- 触发方式：
box-sizing: border-box
Flex弹性盒模型：
- 主轴(main axis)与交叉轴(cross axis)布局
- flex-grow/shrink/basis的计算规则
- 对齐属性：justify-content/align-items/align-self
Grid网格布局：
- 显式网格与隐式网格的区别
- 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
- 遇到
