引言：为什么这些“基础题”能难倒80%的前端新人？
在BAT等大厂的前端面试中，看似简单的“基础题”往往成为筛选的关键——比如“说说语义化标签的意义”“var/let/const的区别”。这些题目背后，考察的是开发者对前端核心机制的理解深度。本文结合 d:\lesson_si\batjtmd 文件夹中的真实代码与文档，拆解名企考题的核心逻辑，帮你理清知识脉络。
一、HTML语义化标签：让页面“会说话”的隐形竞争力
1. 为什么大厂总问“语义化”？
在 batjtmd/readme.md 中明确提到：“html质量很重要”。早期页面用 div+class 堆砌，但这种“黑箱结构”对搜索引擎（SEO）、屏幕阅读器（无障碍访问）、团队协作都极不友好。 以 batjtmd/html 下的两个文件为例：
-
反例：1.html （部分代码）：
<div class="container" id="header"> <div class="header header-main">Super duper best blog ever</div> <div class="site-navigation">...</div> </div>用 div +类名描述结构，需通过类名猜测“header-main”是标题、“site-navigation”是导航，可读性差。
-
正例：2.html （部分代码）：
<header> <h1>Super duper best blog ever</h1> <nav>...</nav> </header> <main> <article>...</article> </main>直接用 header （头部）、 nav （导航）、 main （主体）、 article （文章）标签，结构一目了然。
2. 语义化标签的“名企考点”
根据 batjtmd/readme.md 总结，大厂常问以下几点：
- 意义 ：提升SEO（搜索引擎更易抓取内容）、无障碍支持（屏幕阅读器正确解析）、代码可维护性（开发者快速理解结构）。
- 常见标签 ： header （页面/区块头部）、 nav （导航）、 section （独立区块）、 article （可独立分发的内容）、 aside （侧边栏）、 footer （页脚）。
- 与div的本质区别 ： div 是无意义容器，语义化标签自带“角色说明”（如 nav 告诉浏览器“这是导航”）。
二、JavaScript变量与作用域：代码执行的“隐形规则”
1. 变量声明：var、let、const的“前世今生”
在 batjtmd/js/readme.md 中，明确区分了三者的核心差异。结合 js 文件夹中的代码，我们逐一解析： （1）var：被淘汰的“全局污染者” js/1.js 示例：
var a;
console.log(typeof a); // "undefined"
a = 1;
var isSingle = true;
-
特性 ：函数作用域（块级无效）、变量提升（声明提前，值为 undefined ）、可重复声明（污染作用域）。
-
问题 ： js/4.js 中 var value 在 if 块外可访问，导致“变量泄露”： javascript
var a; console.log(typeof a); // "undefined" a = 1; var isSingle = true;（2）let：块级作用域的“守护者” js/5.js 示例：
javascript
function fn(){
let a=2;
if(true){ var b=3; } // var声明的b是函数作用域
console.log(b); // 3（b泄露到函数作用域）
if(true){ let c=4; }
console.log(c); // 报错：c is not defined（let的块级作用域）
}
- 特性 ：块级作用域（ if / for 等块内有效）、无变量提升（TDZ暂时性死区）、不可重复声明（避免误操作）。 （3）const：常量的“双刃剑” js/3.js 示例：
javascript
const a = 1;
// a = 2; // 报错：Assignment to constant variable
const obj = { name: "test" };
obj.name = "new"; // 允许（修改对象属性）
// obj = {}; // 报错：重新赋值
- 特性 ：声明时必须初始化、不可重新赋值（基本类型值不可变，引用类型地址不可变）。
2. 作用域链：变量查找的“寻宝路径”
batjtmd/js/readme.md 提到：“作用域链是变量查找的路径：当前作用域→父级→全局”。以 js/2.js 的 getType 函数为例：
javascript
function getType(value){
return Object.prototype.toString.call(value).slice(8,-1);
}
当调用 getType(arr) 时，引擎会：
- 在 getType 函数作用域查找 value （参数）。
- 若未找到，向上查找父级作用域（全局作用域）。
- 最终找到 Object （全局对象）完成调用。
三、从考题到实战：名企面试如何“避坑”？
1. 高频考点总结
结合 batjtmd 文档与代码，大厂常考以下问题：
- 语义化 ：“为什么用 article 而不是 div ？”“列举5个语义化标签并说明场景”。
- 变量声明 ：“var/let/const的区别”“解释变量提升与TDZ”。
- 作用域 ：“for循环中用var声明i，为什么定时器打印10？”（参考 js/5.js 的块级作用域示例）。
2. 实战建议
- 动手调试 ：用 batjtmd/js 中的代码（如 4.js 的变量提升、 5.js 的块级作用域）在浏览器控制台运行，观察输出结果。
- 阅读MDN ：查阅 Object.prototype.toString （ js/2.js 的 getType 函数原理）、 let / const 的官方文档，理解底层机制。
- 总结错题 ：记录“为什么 const 对象可以修改属性？”“ nav 标签适合包裹哪些内容？”等问题，形成个人知识脑图。
结语：基础决定上限，细节成就高手
BAT的“基础题”从不是“送分题”——它们考察的是开发者对前端核心机制的深度理解。无论是语义化标签的“隐形价值”，还是 let / const 的“作用域魔法”，都是构建复杂应用的基石。掌握这些，你离“高手”就更近了一步。
