HTML经典面试题有哪些_html高频面试题精选及解析【推荐】-html教程-PHP中文网

HTML高频面试题源于真实开发痛点：DOCTYPE缺失致怪异模式、src/href混用影响资源加载、语义标签误用损害SEO与无障碍、viewport缺失导致移动端显示异常。

html经典面试题有哪些_html高频面试题精选及解析【推荐】

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 用（比如 <script href="app.js"></script>），脚本根本不会执行——但更隐蔽的问题出在加载时机上。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<script src="app.js"></script>：默认同步阻塞，暂停 HTML 解析，直到下载+执行完
：并行下载，不阻塞解析，CSS 加载完成才应用样式（但不影响后续 HTML 构建）
误用 async 或 defer 在上无效，它们只对 <script></script> 生效

语义化标签乱套，SEO 和屏幕阅读器就“读不懂”你

不是所有地方都能用

，也不是写了就自动有导航功能。语义失效的典型场景：出现多次、里嵌了、用

 却忘了 tabindex 和键盘事件。

 页面中只能有一个，且不能是 、、 的后代

 应该包裹主导航链接，页脚的“关于我们”“联系方式”不算 —— 它们更适合放  里

 必须带 alt 属性，空字符串 alt="" 表示“纯装饰”，非空字符串则需准确描述图像内容

meta viewport 缺失或写错，移动端页面就“缩成一团”
没有 ，iOS Safari 会按 980px 宽度渲染页面，再整体缩放显示，导致字体模糊、点击区域变小、100vw 超出视口。


width=device-width 是关键，不能写成 width=375 或 width=100%


user-scalable=no 在 iOS 10+ 已被忽略，且影响可访问性，不建议加
若项目需适配横屏，注意 initial-scale 在 orientation change 后可能失效，得配合 JS 监听 resize 重设

这些题背后不是知识点，而是你昨天刚修过的那个按钮点击无响应、那个在 iPhone 上文字被截断、那个被 SEO 工具标为“结构混乱”的页面 —— 真正卡住人的，永远是语义边界模糊、浏览器行为差异、以及“我以为它该这样，但它其实那样”的那一瞬。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！