HTML高频面试题源于真实开发痛点：DOCTYPE缺失致怪异模式、src/href混用影响资源加载、语义标签误用损害SEO与无障碍、viewport缺失导致移动端显示异常。
HTML 面试题不是考背诵，而是考你写代码时有没有踩过坑、改过 bug、调过兼容性——真正高频的题，都来自日常开发中那些“咦？怎么没生效？”“为什么在 Safari 里错位？”的瞬间。
DOCTYPE 写错或漏掉，页面就进怪异模式
浏览器看到不合法或缺失的 ，会自动切到 Quirks Mode（怪异模式），这时 box-sizing、margin 折叠、height 百分比等行为全都不按标准来。常见现象：CSS 布局在 Chrome 正常，IE 或旧版 Safari 里元素塌陷、文字偏移、<code>min-height 失效。
- 必须放在文档最开头，前面不能有任何字符（包括空格、BOM）
大小写不敏感，但规范写小写；不要加引号、不要写成 <code>（虽能解析，但易被 lint 工具报错）- HTML5 不需要 DTD 引用，
这类写法已过时，反而可能触发兼容模式
src 和 href 混用，资源加载顺序和阻塞行为就乱套
把 src 当 href 用（比如 <link src="style.css">），浏览器直接忽略；反过来把 href 当 src 用（比如 <script href="app.js"></script>），脚本根本不会执行——但更隐蔽的问题出在加载时机上。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
<script src="app.js"></script>：默认同步阻塞，暂停 HTML 解析，直到下载+执行完 -
<link href="style.css">：并行下载，不阻塞解析，CSS 加载完成才应用样式（但不影响后续 HTML 构建） - 误用
async或defer在<link>上无效，它们只对<script></script>生效
语义化标签乱套，SEO 和屏幕阅读器就“读不懂”你
不是所有地方都能用 <section></section>，也不是写了 <header></header> 就自动有导航功能。语义失效的典型场景：<main></main> 出现多次、<article></article> 里嵌了 <nav></nav>、用 <div role="button"> 却忘了 <code>tabindex 和键盘事件。
立即学习“前端免费学习笔记（深入）”；
-
<main></main>页面中只能有一个，且不能是<article></article>、<aside></aside>、<footer></footer>的后代 -
<nav></nav>应该包裹主导航链接，页脚的“关于我们”“联系方式”不算 —— 它们更适合放<footer></footer>里 -
<img alt="HTML经典面试题有哪些_html高频面试题精选及解析【推荐】" >必须带alt属性，空字符串alt=""表示“纯装饰”，非空字符串则需准确描述图像内容
meta viewport 缺失或写错，移动端页面就“缩成一团”
没有 <meta name="viewport" content="width=device-width, initial-scale=1.0">，iOS Safari 会按 980px 宽度渲染页面，再整体缩放显示，导致字体模糊、点击区域变小、100vw 超出视口。
-
width=device-width是关键，不能写成width=375或width=100% -
user-scalable=no在 iOS 10+ 已被忽略，且影响可访问性，不建议加 - 若项目需适配横屏，注意
initial-scale在 orientation change 后可能失效，得配合 JS 监听resize重设
这些题背后不是知识点，而是你昨天刚修过的那个按钮点击无响应、那个在 iPhone 上文字被截断、那个被 SEO 工具标为“结构混乱”的页面 —— 真正卡住人的，永远是语义边界模糊、浏览器行为差异、以及“我以为它该这样，但它其实那样”的那一瞬。
