前端面试被问到 HTML很多人第一反应是“这还不简单”。但作为面过不下两百个前端候选人的老面试官我可以很负责任地说HTML 基础题恰恰是最容易看出一个人是真懂还是背稿子的环节。你背得出所有标签不代表你能说清 DOCTYPE 为什么要放在第一行也不代表你能解释清楚 src 和 href 到底哪里不一样。这篇博文整理了 5 道真实面试中出现频率极高的 HTML 高频面试题每道都给出完整的分析思路、标准答案的骨架、以及面试官可能追加的提问。准备校招、社招初级岗的朋友可以拿它当自查清单带新人的老手也可以用它做一轮基础摸底。1. 这份题目清单是怎么选出来的1.1 面试官问 HTML其实在问什么我在面试里经常看到一种候选人简历上写着“熟悉 HTML/CSS/JS”但你问他一个meta viewport参数是什么意思他能愣住十秒。这说明一个很普遍的问题——很多人把 HTML 当成了“背标签大会”以为认识div、span、table就算会了。但面试官真正想考察的从来不是你会不会写标签而是你有没有理解“一个 HTML 文档从加载到渲染浏览器到底在做什么”。HTML 是标记语言它负责描述文档的结构和语义不负责逻辑也不负责表现。因此面试官在 HTML 环节问的问题核心方向就四个文档解析规则、资源加载机制、结构语义设计、元信息配置。这四类问题有一个共同点就是“看起来基础但都能往浏览器原理方向深挖”。比如 DOCTYPE 那道题表面是考标签实际上考的是渲染模式对 CSS 盒模型的影响src 和 href 那道题表面是考属性实际上考的是浏览器解析 HTML 时的阻塞机制。所以准备 HTML 面试题先要改变思路你想要的不只是一个答案而是一个能沿着“是什么—为什么—有什么坑—怎么排查”这条线讲清楚的完整知识链路。我会选出的 5 道题正是这种具备强延伸能力的基础题。1.2 5道题的覆盖面与学习优先级我选的这 5 道题不是随机凑数而是按上面四个考察方向各取了一道最经典的。整理成表格你就能看得很清楚题号题目考察方向学习优先级第 1 题DOCTYPE 与两种渲染模式文档解析规则高第 2 题src 与 href 的区别资源加载机制高第 3 题HTML 语义化结构语义设计高第 4 题块级元素与行内元素布局基础中第 5 题meta 标签常见用途元信息配置中如果准备时间有限我的建议是优先吃透第 1 题和第 2 题。这两道题是典型的“会就会、不会就露馅”而且特别容易出现在一面开场。第 3 题考察工程意识答得好能拉开档次。第 4 题和第 5 题相对温和但你要小心它们经常以“追问”的形式出现比如面试官会冷不丁问一句“img 是行内元素为什么能设置宽高”或者“你这个页面线的 viewport 参数都是干嘛的”如果前面聊得顺结果在这里卡壳非常可惜。所以 5 道题都值得花时间实际准备起来一个晚上绝对够。2. 逐题拆解上文档模式与资源加载2.1 第 1 题DOCTYPE 是干什么的两种渲染模式差在哪标准答法DOCTYPEDocument Type Declaration文档类型声明用来告知浏览器当前页面使用哪种渲染模式。正确写法是!DOCTYPE html。这句话里有一个很容易被忽略的细节它不是一个普通的 HTML 标签而是一个声明。它不是元素没有结束标签也不会渲染出任何可见内容。它的位置也有讲究必须放在 HTML 文档的第一行在html之前。浏览器看到这一行之后会决定用标准模式还是怪异模式来解析和渲染后续内容。所谓标准模式就是浏览器按照 W3C 规范来解析 CSS、计算布局所谓怪异模式是浏览器模拟早期 IE5 时代的一套“野路子”规则目的是兼容那些在老浏览器环境下开发的旧网页。HTML5 的规范里其实已经不再区分“严格模式”和“标准模式”这种带历史色彩的说法你只需要理解为一个开关有!DOCTYPE html就走标准模式没有就可能触发怪异模式。早期 HTML 4.01 时代还有一堆很长很长的 DTD 声明现在不用记HTML5 统一了这一行简写。!DOCTYPE html这段代码虽然短但它和页面的 CSS 计算直接相关。最典型的就是盒模型。我们在标准模式里给一个元素设置width: 200px; padding: 20px; border: 2px solid;按默认的content-box计算这个元素在页面上实际占用的总宽度是 200 20×2 2×2 244px。但在怪异模式下情况就变了width会包含padding和border整体宽度保持在 200px而内容可用宽度只有 156px。这个问题在实际项目里真的很常见。我之前排查过一个老系统页面错位的问题页面在旧版浏览器里一切正常换到 Chrome 上就各种对不齐。查来查去最后发现是后端模板在拼接页面时漏写了!DOCTYPE html导致所有浏览器都进入了混杂模式。不同浏览器对同样的“野路子”规则解析结果还不一致这才是最让人头疼的。你完全可以通过一行代码快速检测当前页面处于什么模式if (document.compatMode BackCompat) { // 当前处于怪异模式quirks mode }document.compatMode返回CSS1Compat表示标准模式返回BackCompat表示怪异模式。这个知识点面试官通常会追加一句“你平时怎么判断页面是不是怪异模式”能答出这个 API 的候选人大概率是真正排查过兼容问题的印象分会高很多。提示项目里如果用了* { box-sizing: border-box; }这类全局重置会让元素表现得有点像怪异模式下的宽度计算但这是 CSS 层面的主动选择和文档解析模式是两码事。面试时能主动区分这一点很加分。2.2 第 2 题src 和 href 到底哪里不一样这道题的答案其实可以浓缩成两句话src是 source用于把外部资源嵌入当前文档href是 hypertext reference用于建立当前文档与外部资源之间的关联。但只说这两句话在面试里是不够的因为你没有回答一个最关键的问题——它们对页面解析的影响完全不同。浏览器在解析 HTML 时说白了就是一个边下载边构建 DOM 的过程。遇到link relstylesheet hrefstyle.css这种情况浏览器只是发一个请求去取样式表然后继续解析后续的 HTML不会停下手头的工作。但遇到script srcmain.js/script就不一样了脚本内容可能修改 DOM可能调用document.write浏览器为了安全必须先把脚本下载并执行完再继续解析后面的 HTML。这就是最经典的“阻塞”来源。我把这两者的差异整理成一张表方便你记忆对比项srchref英文全称sourcehypertext reference含义将资源嵌入当前文档与外部资源建立关联是否阻塞 HTML 解析默认会阻塞以 script 为例不会阻塞常见标签script、img、iframelink、a典型场景引入 JS 脚本引入 CSS 样式面试官很爱追问的一个点是既然 script 默认阻塞那怎么优化这时候你把async和defer的区别说出来基本上这题就过关了。async是脚本下载完成后立即执行不保证多个脚本之间的执行顺序defer是等整个 HTML 文档解析完成后再执行而且保持文档里的顺序。一个比较粗暴的记忆方式统计代码、独立小工具用async没问题依赖 DOM 结构、有顺序要求的脚本用defer才稳。还有一个容易混淆的点img 标签的 src 会不会阻塞严格来说图片下载是不阻塞 HTML 解析的但它会占用网络带宽影响页面加载速度和window.onload的触发时间。所以现在做性能优化常会见到图片懒加载、loadinglazy这类方案。你要是能顺带说出link relpreload hrefxxx asimage这种预加载方式面试官会觉得你不仅有记忆还有性能优化实践。答这题的时候我强烈建议你带一个真实场景别干巴巴背概念。比如说“我之前把script放在 head 里页面首屏白屏时间很长后来加了defer之后明显改善。”这样一个例子比十句理论都管用。3. 逐题拆解下语义化、元素分类与 meta 标签3.1 第 3 题语义化标签解决的是“机器读得懂”的问题先说清楚一个误解语义化不是让你把所有div都换成更高级的标签也不是为了看起来“专业”。它解决的核心问题是让机器——尤其是搜索引擎和读屏软件——能够理解页面里某块内容扮演的是什么角色。对比一下这两段代码!-- 非语义化写法 -- div classheader div classnav导航链接区域/div /div div classmain div classarticle div classtitle文章标题/div div正文内容/div /div /div!-- 语义化写法 -- header nav导航链接区域/nav /header main article h1文章标题/h1 p正文内容/p /article /main这两段在视觉上可能没有任何差别但机器的视角完全变了。搜索引擎的爬虫可以通过标签直接判断哪个区域是导航、哪个是正文读屏软件可以把header、nav、main这些区域当作“地标”landmark让视障用户通过快捷键快速跳转不用一行行听完全部内容。这就是语义化对无障碍访问的意义也是很多候选人容易漏掉的一个价值点。那语义化的好处到底怎么总结我认为核心是四点对 SEO 友好搜索引擎更容易索引内容对无障碍友好读屏软件可以识别结构对团队协作友好新同事看代码就能明白页面骨架对维护友好修改样式和结构时你不用在密密麻麻的div里猜“这个 class 到底是干嘛的”。但有几个分寸要拿捏好。section里面通常需要有一个主题标题比如h1到h6因为它是“章节”的概念article要求是独立、完整的内容比如一篇博客、一条评论aside用于放和主体内容相关但不是必需的侧边信息。如果只是需要一个没有任何语义的容器div就是最合适的。还有h1到h6的层级不要乱跳比如页面主标题是h1下一级直接写h3会让标题结构断层对 SEO 和无障碍都不友好。如果面试官问你“旧项目里都是 div 堆出来的怎么改造语义化”我的做法是不推翻重写。先给页面补上header、nav、main、footer这四个骨架标签再命名h1层级然后顺手把明显的“标题内容”结构替换成article或section。这样改动范围小收益最明显风险也最低。这个回答方式会显得你有工程判断力而不是“背了一套漂亮话”。3.2 第 4 题块级元素和行内元素别只背定义这道题如果只是回答“块级独占一行行内不换行”那就太亏了。面试官真正想看的是你是否清楚这两种元素在布局细节上的各种差异以及那些“看似矛盾”的特殊元素。先看核心差异维度块级元素行内元素换行行为独占一行同一行内依次排列默认宽度占满父容器由内容撑开width / height可以设置无效margin上、下、左、右都生效水平 margin 生效垂直 margin 不生效padding四个方向生效水平 padding 生效垂直 padding 只扩大背景不影响周围元素占位代表标签div、p、h1-h6、ul、table、sectionspan、a、strong、em、label、code有一个细节很多人说不清行内元素设置垂直方向上的padding看起来背景范围变大了但不会把上下相邻的内容推开很容易出现背景重叠、文字叠在一起的情况。这是因为行内元素的垂直 padding 不会参与行盒的高度计算。这个点你在面试中主动讲出来会显得你确实深入看过盒子模型而不是只看过一篇“面试题合集”。然后是inline-block。它兼具两者的特点可以设宽高又能在一行内排列导航菜单、卡片列表非常喜欢用。但inline-block有一个经典坑标签之间的换行会在页面上表现为一个空格大约有 4 到 8 像素的间隙。我早年调导航间距时被这个坑折磨过根本看不见是什么在撑开宽度后来才发现是 HTML 源码里的换行符。解决方法有三个父容器设置font-size: 0;再给子元素单独设字体大小把换行删掉或者用注释“吃掉”空隙或者干脆改用flex布局一劳永逸。还有一个容易被追问的点img明明是内联元素为什么能设置宽度和高度这不矛盾吗答案是img属于替换元素。替换元素的内容不是直接写在标签里的而是通过src等属性引入的外部资源浏览器对这类元素有一套独立的尺寸计算规则。既然它是行内级的默认又按基线对齐所以实际布局中经常出现图片底部有一条空隙的问题。常见的解决办法是给图片设置display: block;或者vertical-align: bottom;。这个经验你背不下来也没关系平时写页面时留意一次就会记住。3.3 第 5 题meta 标签的高级用法与业务价值meta 标签这道题表面上最“送分”实际上最考验一个前端工程师有没有真正理解页面和浏览器、搜索引擎、社交平台之间的关系。很多候选人只记得meta charsetUTF-8和meta nameviewport回答完就结束了。其实可以展开的地方特别多。先从必答项说起。meta charsetUTF-8这一行告诉浏览器当前文档用 UTF-8 编码解析。如果它缺失浏览器会按照默认编码去猜很容易出乱码。尤其页面里有中文、日文等非 ASCII 字符时我们会在head的最前面写它需要在title之前。然后是移动端必写的 viewportmeta nameviewport contentwidthdevice-width, initial-scale1.0拆开解释就两个重点。widthdevice-width的意思是让布局视口宽度等于设备的屏幕宽度。移动端浏览器默认有一个比屏幕宽得多的“虚拟布局视口”通常是 980px如果不设置 viewport页面会按 980px 的宽度去排版再缩小到屏幕大小出来的效果就是字小到看不清。initial-scale1.0则把初始缩放比设为 1避免移动端页面自动放大。这个属性的各种坑也很值得说比如不要随便加user-scalableno禁用缩放那是典型的无障碍反面教材主流做法是保留用户放大能力。SEO 向的 meta 标签也要会说。description是给搜索引擎看的页面简介有一定概率被展示在搜索结果摘要里keywords虽然现在搜索引擎基本不参考了但写了也不算错。robots用来控制爬虫contentnoindex, nofollow就是告诉搜索引擎别收录这个页面、别追踪页面里的链接。author、generator这类属于锦上添花了解就行。meta namedescription content页面简介控制在 150 字以内更佳 meta namerobots contentnoindex, nofollow再往深说还有社交平台抓取页面信息时使用的 Open Graph 协议也就是你在微信、Twitter 里分享链接时出现的那张“小卡片”meta propertyog:title content文章标题 meta propertyog:description content分享摘要 meta propertyog:image contenthttps://example.com/cover.jpg meta nametwitter:card contentsummary_large_image如果候选人能从charset、viewport一路聊到og:image说明他不只是会背标签而是真正在业务里配过分享链接、关注过多端展示效果这个加分空间会非常明显。很多面试官潜意识里就是在找这种“基础题答出了业务味”的候选人。4. 面试官视角追问方向、翻车点与答题节奏4.1 高频追问方向速查表面试官问完一道基础题之后很少会直接跳到下一题通常都会顺着答方向再挖一两层目的不是刁难你而是看你的知识树能长多远。我把这 5 道题最常见的高频追问整理成了速查表你可以在模拟面试时自测基础题常见追问建议回答要点DOCTYPE标准模式和怪异模式在盒模型上有什么差异标准模式 content-boxwidth 不含 padding 和 border怪异模式下 width 包含可通过document.compatMode检测src / hrefscript 的阻塞问题怎么解决defer等解析完再执行并保序async下载完即执行不保序把脚本放 body 底部也是老办法语义化语义化对无障碍有什么帮助提供 landmark 地标读屏软件可以通过快捷键在 header、nav、main 之间跳转块级 / 行内inline-block 为什么会有空隙源码里的换行符会被渲染成空格用父级 font-size:0、注释掉换行或改用 flexmetaviewport 的 widthdevice-width 是干嘛的让布局视口等于设备屏幕宽度防止移动端 980px 宽排布再缩小的“近视”效果遇到追问里不会的知识点我建议你直接说“这个没有深入研究过但我的理解是……”然后给出一个基于常识的推导。面试官要的是诚实和思路而不是听你现场编一个正确答案。说“我会查”也不丢人硬拗才会留下坏印象。4.2 基础题最容易翻车的 3 个瞬间第一背概念不举实例。你说“src 是嵌入href 是关联”这句话本身没问题但如果你不主动带出script src和link href的例子面试官就不知道你是真懂还是记住了一个定义。只要是基础题都尽量在回答里自然带入一个项目场景这是最简单也是最高级的差异化。第二把 HTML5 说成一种编程语言。我见过不止一次候选人聊得兴起脱口而出“HTML5 做单页应用”。这里要明确的是HTML 是标记语言它负责结构化内容CSS 负责视觉表现JavaScript 才负责行为与交互。这种“三层结构”的概念是前端的地基说反了会直接给人留下基础不牢的印象。第三简历写“熟练 HTML/CSS/JS”却解释不了自己天天写的代码。比如项目里明明用了meta nameviewport contentwidthdevice-width, initial-scale1.0但被问参数含义时就说不上来。这里有一个非常实用的学习方法叫作“删除测试”写完一个页面回头问自己几个问题——这个标签删掉会怎样这个属性的默认值是什么如果不用它浏览器会怎么处理你在平时的工作里多做几次“删除测试”面试时你会发现很多基础题根本不用背已经变成肌肉记忆了。4.3 一套可复制的答题节奏附实例演示最后分享一个我面试时很受用的答题节奏四个步骤一句话给结论直接说“是什么”说关键区别或原理把“不是什么”讲清楚举一个自己写过或遇到过的例子主动抛出可延展的方向比如“这里其实还涉及 CSS 阻塞渲染我也可以展开讲”。举第 2 题为例用这套节奏走一遍就是这样“src 是把资源嵌入当前文档href 是建立关联。区别在于 script 的 src 默认会阻塞 HTML 解析而 link 的 href 不会。我之前项目里把脚本放在 head 里导致首屏白屏后来加了 defer 才解决。另外这块还牵扯到 CSS 会不会阻塞渲染以及用 preload 预加载关键资源你需要我展开吗”这个节奏总时长控制在 1 到 2 分钟既不拖沓又给了面试官很多可以继续追问的“钩子”。如果面试官沉默不要慌这种沉默往往是在等你自己把话题延展下去。你可以顺着其中一个方向继续讲比如补一句“其实 defer 和 async 也是经常被问到的问题”。这里与其被动等下一个问题不如主动掌握节奏把题目带向自己最熟悉的地方。我从面试官的角度再给一个实在建议别把 HTML 题当“送分题”去水也别把它当“背标签”去准备。你只要愿意花一个晚上把 DOCTYPE、src/href、语义化、块级与行内、meta 这几个点背后的“为什么”搞清楚再拿自己写的页面挨个对照一遍这 5 道题就能变成你面试里的稳定分。每次看到候选人把基础题回答出层次感我都会在评价里多写一句“基础扎实”。这种第一印象后面会一直跟着你。