面向前端面试的 HTML 高频知识整理。重点不在“背定义”，而在“能解释浏览器行为 + 能给工程取舍”。
1. 语义化标签的价值
题目
为什么推荐使用语义化标签，而不是全用 div？
作答
语义化标签的价值主要在三方面：
- 结构语义更清晰，团队协作和维护成本更低
- 搜索引擎更容易理解页面层级与内容重点
- 屏幕阅读器等辅助技术可基于语义提供更准确导航
常见语义标签包括：header、nav、main、section、article、aside、footer。
追问延展
section和article的区别：article更偏“可独立分发”的内容单元（如新闻、帖子）section更偏“同一主题下的内容分区”
main标签通常在页面内应保持唯一，表示主体内容区域
常见误区
- 把“语义化”理解为“标签越多越好”，导致结构冗余
- 所有模块都用
section，不区分内容语义边界
2. defer 与 async 的区别
题目
script 标签的 defer 和 async 有什么区别？
作答
async：脚本下载不阻塞 HTML 解析；下载完成后立即执行，执行时会打断解析；多个async脚本执行顺序不保证defer：脚本下载同样不阻塞解析；在 HTML 解析完成后按文档顺序执行；适合有依赖顺序的业务脚本
追问延展
- 不带属性的
script（传统同步脚本）会阻塞 HTML 解析 defer对外链脚本最常用，内联脚本不适用defer行为
常见误区
- 误以为
async比defer“更快就一定更好” - 有依赖顺序的脚本使用
async导致运行不稳定
3. src 与 href 的差异
题目
src 和 href 的核心区别是什么？
作答
src：将资源嵌入当前文档并参与当前文档处理流程，常见于script、img、iframehref：建立资源引用关系，常见于a、link
追问延展
link rel="stylesheet"使用href引用 CSS 资源script src="..."通过src加载并执行脚本逻辑
常见误区
- 只回答“一个是路径，一个是链接”，但无法结合标签场景解释
4. 为什么通常 CSS 放头部、JS 放底部
题目
页面中 CSS 常放在 head，JS 常放在 body 末尾，原因是什么？
作答
- CSS 放
head：尽早完成样式计算，减少无样式内容闪烁（FOUC） - JS 放底部：避免同步脚本阻塞 HTML 解析，提升首屏可见速度
追问延展
- 现代工程中若脚本使用
defer，可放在head且降低阻塞风险 - 关键目标是减少解析阻塞，而不是机械遵循“必须放底部”
常见误区
- 只记位置，不解释“解析-渲染-执行”的时序关系
5. <!DOCTYPE html> 的作用
题目
doctype 的作用是什么？不写会怎样？
作答
<!DOCTYPE html> 声明文档类型，通知浏览器以标准模式（Standards Mode）渲染。
缺失或不规范时，浏览器可能进入怪异模式（Quirks Mode），导致盒模型与布局行为出现兼容差异。
追问延展
- 怪异模式下常见差异包括宽高计算和排版表现不一致
- 现代项目统一使用 HTML5 doctype，写法固定且简洁
常见误区
- 只说“这是固定写法”，无法说明和渲染模式的关系
6. 可访问性（a11y）基础实践
题目
HTML 层面常见的可访问性优化有哪些？
作答
- 表单控件绑定
label，并保证for与控件id对应 - 非装饰图片补充
alt，纯装饰图片使用空alt - 交互优先使用原生可聚焦元素（如
button、a），减少div + click - 语义不足时再补充
aria-*，避免滥用
追问延展
- 键盘可达性：
Tab顺序、焦点可见性 - 仅靠颜色传达信息不可靠，应配合文本或图标提示
常见误区
- 把
aria-*当“万能补丁”，忽略原生语义优先原则
7. meta viewport 的作用
题目
移动端开发中 meta viewport 是做什么的？
作答
meta viewport 用于控制移动端视口行为，常见写法是：
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
其核心作用是让布局宽度与设备宽度对齐，避免默认缩放导致页面显示异常。
追问延展
- 结合响应式布局（媒体查询、弹性布局）才能形成完整移动端适配
常见误区
- 只记模板代码，不理解“设备宽度映射到 CSS 像素”的意义
8. id 与 class 的使用边界
题目
id 和 class 如何区分使用？
作答
id：页面内应唯一，适合标识唯一元素、锚点跳转、表单关联class：可复用，适合样式复用和组件化命名
追问延展
- CSS 选择器优先级中，
id高于class，过度依赖id不利于样式维护
常见误区
- 把
id当作通用样式钩子，造成样式耦合与复用困难
9. 行内元素与块级元素（面试表达版）
题目
如何解释行内元素和块级元素差异？
作答
- 块级元素通常独占一行，可设置宽高
- 行内元素通常不独占一行，直接设置宽高通常不生效
现代布局中元素的显示行为更推荐通过 display 控制（如 block、inline、inline-block、flex）。
追问延展
inline-block兼具“同行排列 + 可设宽高”的特点- 语义标签默认 display 可被 CSS 改写，但语义本身不变
常见误区
- 把“默认显示行为”误解为“标签不可变属性”
10. HTML 面试答题通用框架
遇到 HTML 问题可按下列顺序组织回答：
- 定义：先给出准确概念
- 行为：解释浏览器解析/渲染或加载执行时序
- 场景：给一到两个工程实践场景
- 取舍：补充边界条件与常见误区