HTML高频面试题及答案解析

这篇文章直击HTML面试中的真实痛点，揭示高频考题并非考察死记硬背，而是检验开发者是否真正踩过坑、调过兼容性、修过那些“咦？怎么没生效？”的诡异bug——从DOCTYPE缺失引发的怪异模式、src/href混用导致的资源加载失控，到语义标签误用损害SEO与无障碍体验，再到viewport配置错误让移动端页面缩成一团，每一道题都源于日常开发中令人抓狂的瞬间，帮你把零散经验升华为可复用的工程直觉。

HTML 面试题不是考背诵，而是考你写代码时有没有踩过坑、改过 bug、调过兼容性——真正高频的题，都来自日常开发中那些“咦？怎么没生效？”“为什么在 Safari 里错位？”的瞬间。

DOCTYPE 写错或漏掉，页面就进怪异模式

浏览器看到不合法或缺失的 ，会自动切到 Quirks Mode（怪异模式），这时 box-sizing、margin 折叠、height 百分比等行为全都不按标准来。常见现象：CSS 布局在 Chrome 正常，IE 或旧版 Safari 里元素塌陷、文字偏移、min-height 失效。

• 必须放在文档最开头，前面不能有任何字符（包括空格、BOM）
• 大小写不敏感，但规范写小写；不要加引号、不要写成 （虽能解析，但易被 lint 工具报错）
• HTML5 不需要 DTD 引用， 这类写法已过时，反而可能触发兼容模式

src 和 href 混用，资源加载顺序和阻塞行为就乱套

把 src 当 href 用（比如 ），浏览器直接忽略；反过来把 href 当 src 用（比如 ），脚本根本不会执行——但更隐蔽的问题出在加载时机上。