HTML项目答辩重在解释技术选择原因及影响。适用于无明确主题的布局分块，用于文档大纲中可独立成节的内容；响应式失效常因viewport缺失、父容器固定宽或px单位滥用；HTML性能瓶颈多源于图片懒加载缺失、脚本阻塞、内联大资源及过多iframe；主动说明删减项更能体现工程判断力。
HTML 项目答辩不是考你背了多少标签，而是看你能不能说清「为什么这么写」「改了会怎样」「用户遇到问题你怎么定位」。
答辩时被问到 和 别只说“一个是通用容器，一个是语义化标签”——面试官想听的是你实际怎么选。
- 如果只是布局分块、没明确主题（比如轮播图外层容器），用
更安全，兼容性无压力，也避免过度语义化
- 如果这块内容在文档大纲里能独立成节（比如「产品特性」「客户评价」），必须用
- 常见错：把所有带标题的
都替换成 现场被要求快速修复一个响应式失效的问题
先别急着改 @media，90% 的情况卡在三个地方：
-
width=device-width, initial-scale=1.0 却少了 , user-scalable=no（不推荐加这个，但漏掉 initial-scale=1.0 就直接崩）
- 父容器用了固定宽度（如
width: 1200px），子元素再设 max-width: 100% 也撑不开
- CSS 中用了
px 写死字号/边距，导致小屏文字挤成一团；优先换用 rem 或 clamp()，例如：font-size: clamp(1rem, 2.5vw, 1.25rem);
被追问「这个页面加载慢，你觉得可能哪几处 HTML 导致的」
HTML 层面的性能瓶颈往往藏在看似无害的写法里：
立即学习“前端免费学习笔记（深入）”；
-
![html如何答辩_HTML项目答辩准备与要点梳理【指南】]()
loading="lazy"，首屏外图片提前下载，拖慢 LCP
-
defer 或 async，阻塞 HTML 解析
- 内联了大段 CSS/JS（比如复制粘贴了整个 Bootstrap CSS），增大 HTML 文件体积，影响 TTFB 和首字节时间
- 用了多个
答辩最易被忽略的一点：别光讲「我用了什么技术」，要主动提「我删掉了什么」——比如删了 jQuery 只留原生 DOM 操作，删了冗余的 title 属性。删减比堆砌更能体现工程判断力。
和
别只说“一个是通用容器，一个是语义化标签”——面试官想听的是你实际怎么选。
- 如果只是布局分块、没明确主题（比如轮播图外层容器），用 更安全，兼容性无压力，也避免过度语义化
- 如果这块内容在文档大纲里能独立成节（比如「产品特性」「客户评价」），必须用
，否则屏幕阅读器和 SEO 工具会丢失结构信息- 常见错：把所有带标题的
都替换成—— 实际上或可能更准，得看内容是否可独立分发或附属现场被要求快速修复一个响应式失效的问题
先别急着改
@media，90% 的情况卡在三个地方：-
标签漏了或写错，比如写成width=device-width, initial-scale=1.0却少了, user-scalable=no（不推荐加这个，但漏掉initial-scale=1.0就直接崩） - 父容器用了固定宽度（如
width: 1200px），子元素再设max-width: 100%也撑不开 - CSS 中用了
px写死字号/边距，导致小屏文字挤成一团；优先换用rem或clamp()，例如：font-size: clamp(1rem, 2.5vw, 1.25rem);
被追问「这个页面加载慢，你觉得可能哪几处 HTML 导致的」
HTML 层面的性能瓶颈往往藏在看似无害的写法里：
立即学习“前端免费学习笔记（深入）”；
-
loading="lazy"，首屏外图片提前下载，拖慢 LCP -
放在且没加defer或async，阻塞 HTML 解析 - 内联了大段 CSS/JS（比如复制粘贴了整个 Bootstrap CSS），增大 HTML 文件体积，影响 TTFB 和首字节时间
- 用了多个
（尤其嵌第三方统计、广告），每个都触发独立 DNS 查询和资源加载
答辩最易被忽略的一点：别光讲「我用了什么技术」，要主动提「我删掉了什么」——比如删了 jQuery 只留原生 DOM 操作，删了冗余的
嵌套，删了没用的title属性。删减比堆砌更能体现工程判断力。 - 如果这块内容在文档大纲里能独立成节（比如「产品特性」「客户评价」），必须用
