飒姐1. 从"什么是DOCTYPE"开始：文档模式与渲染模式的底层逻辑
1.1 面试官为什么每次都要问DOCTYPE
我面试前端候选人时，几乎每一场都会把DOCTYPE作为第一个HTML问题抛出来。说实话，这个问题不是考背诵，而是考一个开发者在打开浏览器渲染页面的那一瞬间，脑子里有没有完整的渲染链路。
<!DOCTYPE html> 是HTML5的文档类型声明，它的作用不是告诉浏览器"这是一个HTML文件"，而是告诉浏览器用哪一种渲染模式去解析和绘制这个页面。这里有个很容易被忽略的细节：DOCTYPE必须在文档最顶部，放在<html>标签之前，而且不能有任何前置内容——哪怕是空字符或注释，在某些旧版浏览器里都会被解析为处于怪异模式。
很多人会问：为什么DOCTYPE能决定页面渲染方式？因为早期网页存在两种书写规范：W3C的标准规范和微软IE时代遗留的非标准模式。浏览器为了兼容老页面，遇到没有完整DOCTYPE声明的页面就会启用怪异模式（Quirks Mode），按IE 5.5时代的盒模型规则来渲染。这个盒模型差异直接导致width计算方式完全不同，现代CSS布局会在不经意间全部崩掉。
1.2 标准模式与怪异模式到底差在哪
我在面试过程中发现，很多候选人能背出"标准模式"和"怪异模式"这两个词，但说不出它们的具体差异。这里我习惯用一个例子来引导：
假设一个盒子设置了：
css复制.box {
width: 300px;
padding: 20px;
border: 5px solid #000;
}
在标准模式下，这个盒子的实际总宽度是 300 + 20×2 + 5×2 = 350px，因为width属性默认表示内容区宽度，padding和border要额外累加。
而在怪异模式下，width会被解读为整个盒子的总宽度，padding和border从这300px里"挤占"，实际内容区只有250px。同一个CSS写在两种模式下，页面视觉效果出入很大。浮动、定位、行高计算的细节也存在差异，只是盒模型是最直观的体现。
现在HTML5标准要求统一使用标准模式，所以文档头部必须写<!DOCTYPE html>。但很多项目里模板继承、服务端渲染拼接页面时，稍不留神就会把DOCTYPE挤到第二行，导致浏览器自动进入怪异模式。我排查过不止一次类似问题，症状就是"页面样式只有某个环境不对"。
1.3 一个能加分的回答话术
如果面试被问到DOCTYPE，建议不要只说标准答案。更好的回答结构是：
第一句讲用途：DOCTYPE是文档类型声明，用于让浏览器选择标准模式渲染页面，不写或写错会导致怪异模式。第二句讲机制：通过触发渲染模式，浏览器对HTML和CSS的解析规则会不同，尤其是盒模型和行高规则。第三句讲工程影响：在实际开发中，模板拼接、注释位置、BOM头等原因都有可能让DOCTYPE失效，上线前需要检查页面是否处于标准模式。
这样回答，既展示了原理理解，又带出了实操经验，面试官通常会继续往下追问渲染机制的相关问题，正好进入下面的环节。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 语义化标签不能只背"利于SEO"，要讲出背后的工程价值
2.1 语义化标签的真实收益不只是SEO
HTML5引入了<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>这批结构标签。绝大多数面试者都会说"语义化有利于SEO、方便屏幕阅读器识别"，但这么回答只能算及格。
我做项目维护时感受最深的一点是：语义化首先是降低团队的认知成本。一个新人接手一个全是<div id="header">、<div class="nav">写法的老页面时，需要一层层去看CSS和注释才能搞清楚结构；而使用语义标签的页面，看一眼DOM结构就能知道哪里是导航、哪里是正文、哪里是侧边栏。这种可维护性的提升是长期的、隐性的。
另外，语义化对页面结构异常时的容错也有帮助。浏览器在解析不规范的HTML时有一套容错机制，语义化标签与非语义标签的容错路径不同。比如段落文本直接放在<body>下和放在<main>里，读屏软件的朗读顺序都会不一样。一个以阅读为主的站点，如果正文区没有用<main>包裹，无障碍体验会打折扣。
2.2 常用语义标签怎么选才不踩坑
面试中经常有追问：<section>和<article>到底什么区别？<div>是不是就不该用了？
我的使用习惯是这样的：
<article>用于独立成篇、可被单独分发的内容，比如一篇博客、一条评论、一个组件卡片。它在逻辑上不依赖其他部分。<section>用于同一页面内的一组相关内容，通常含有标题。如果一张页面要用多个<section>分成不同区域，每个<section>最好有一个标题说明它是什么。<div>仍然是纯粹的分块容器，但当块内带有明确的语义角色时，优先使用语义