面试前端HTML 往往是第一道隐形门槛。很多候选人简历上写精通 HTML结果面试官随口问一句!DOCTYPE html是干什么的答案就开始打转。我做了多年前端开发和面试官太清楚这类现象了问题看起来简单恰恰能筛掉一大批只写过页面、没思考过原理的人。这篇文章我整理了 5 道在面试中反复出现、最能体现 HTML 基础功底的题目每道题都附上详细解析把我自己当面试官时的评分视角、当开发时踩过的坑一并写出来。目标很简单让你看完之后遇到这类基础题不再靠背而是真正能讲清楚为什么。1. 第一道题DOCTYPE 声明从一坨乱码排查说开去面试开场最常见的问题就是你平时写 HTML第一行!DOCTYPE html为什么不写它的作用是什么这题不复杂但能看出你是真做过页面还是只敲过模板。1.1 标准模式与怪异模式一个让整个页面布局崩掉的开关DOCTYPE全称Document Type Declaration也就是文档类型声明。它的核心作用只有一个告诉浏览器用哪一种模式来渲染这个页面。浏览器的渲染模式主要分为两种标准模式Standards Mode和怪异模式Quirks Mode。怪异模式是浏览器为了兼容老网页特意保留的一种向后兼容模式。在早期浏览器大战时期很多老页面依赖非标准的渲染规则比如 IE 的盒模型、不严格的嵌套容错、默认字号等。如果页面没有 DOCTYPE浏览器就会默认进入怪异模式按照老一套规则渲染。我自己在实际项目中遇到过一件很典型的事接手一个维护多年的老项目某个页面实际加载出来整体宽度溢出了一截排查了半天最后发现是模板里有一段被注释掉的代码把!DOCTYPE html挡住了浏览器直接当成没有文档类型声明来处理进入了怪异模式。怪异模式下box-sizing的默认表现、百分比宽度的计算、行内元素的基线对齐都会变得不讲道理这也是为什么很多老同事一遇到诡异布局问题第一反应就是先看一眼页面头部有没有 DOCTYPE。1.2 为什么 HTML5 的 DOCTYPE 这么简短如果你看过 HTML4 时代的代码会发现当时写的是这样一串长声明!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd而 HTML5 只需要!DOCTYPE html。原因很简单HTML5 里面不需要再通过 DTD 来定义文档结构了浏览器只要看到doctype关键词就知道你要用标准模式渲染。所以这一行文字既是给浏览器看的开关也是给维护者看的页面正常运行的保险丝。面试官问这道题通常还会追问一句如果我不写 DOCTYPE浏览器会报错吗不会报错页面照样能显示但是会以怪异模式渲染而这种模式下的表现细节和标准模式差异很大。把这个逻辑讲清楚比背一个定义要有说服力得多。1.3 趁热打铁lang 属性和 charset 为什么要紧跟着写HTML 文档的html标签上通常有langzh-CNhead里则有meta charsetutf-8这两样也常常被面试官连带问起。langzh-CN的作用是声明页面主要语言。它有三个实际价值一是帮助搜索引擎判断页面语言区域二是帮助屏幕阅读器用正确的发音规则朗读内容第三是当浏览器内置翻译功能时可以准确识别源语言。很多只写静态页面的开发者会忽略这个属性但做 SEO 和无障碍时它是有分量的。meta charsetutf-8则决定了浏览器以什么字符编码来解析文档。编码声明如果写得太靠后或者写错成gb2312、gbk导致和实际文件编码不一致就会出现中文乱码。规范里有一个细节编码声明应该放在文档前 1024 字节内因为浏览器要提前知道用哪种编码读取后续内容。所以实操上的标准姿势是把meta charsetutf-8放在head的最前面、越靠前越好。我自己习惯先写!DOCTYPE html紧接着就是html langzh-CN下一行就是 charset然后是 title 和 viewport这个顺序不会出错。2. 第二道题语义化标签别再说div 一把梭谈谈对 HTML 语义化的理解几乎每十场面试就要出现八场。很多面试者能背出语义化就是使用语义恰当的标签这句话但真要让他分析一段页面结构立刻露馅。2.1 语义化到底解决了哪三个问题语义化不是用 header 代替 div这种表面动作它解决的是三个实际问题。第一是 SEO。搜索引擎的爬虫不认识哪块是导航、哪块是正文它依靠的是一套权重和结构分析算法。使用h1到h6表达标题层级、用article标记正文主体、用nav标记导航比一大堆div classtitle更容易被搜索引擎正确识别页面结构和内容重点。第二是无障碍访问。屏幕阅读器会按语义标签来朗读页面。比如遇到nav时辅助工具可以直接跳过导航区域让用户快速进入正文遇到table时会用表格导航模式遇到button时会识别出这是可交互控件。如果你全用div onclick模拟按钮在无障碍层面它就是一块没有角色的死区域。第三是代码可维护性。语义化结构让代码变成一种自描述文档。新人接手项目时看header、main、aside、footer这些标签一下子就能理解页面骨架而不需要逐个 class 去猜。2.2 一张标准页面骨架应该怎么搭我建议面试者心里要有一个标准的页面骨架模板遇到语义化问题可以直接用它来举例!DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body header h1网站标题或文章标题/h1 nav主导航/nav /header main article h2文章标题/h2 p正文内容/p time datetime2025-01-012025年1月1日/time /article aside侧边栏相关内容/aside /main footer版权与联系方式/footer /body /html这里有三个高频误区要特别注意。section不是随便用来包内容的规范建议它应当包含一个标题如果一段内容独立出来也能自成一体应该用article而不是sectionaside也不只是右侧栏它表示与主内容只有间接关系的内容比如引述、广告、相关推荐放在左边也一样可以用 aside。2.3 面试官爱挖的坑h1 到底能出现几个语义化的追问环节我经常出这几道小坑题页面上h1能出现多个吗严格意义上 HTML 规范没有禁止多个h1但从 SEO 最佳实践和文档结构清晰度来看一个页面建议只保留一个h1用来表达整张页面的核心主题。多h1会让搜索引擎难以判断主标题。strong和b、em和i有什么区别strong表示内容重要性强em表示语气强调它们是有语义的b和i原本是纯视觉样式标签在 HTML5 里的语义也弱化成了样式偏移作用。开发时更推荐使用strong和em。还有一个实用细节h1字号能通过 CSS 改吗当然可以。语义化不等于不允许设置样式h1的默认样式只是一个浏览器默认值你用 CSS 把h1字号改成16px完全没问题语义不会因此改变。很多面试者误以为语义化标签不能修改外观这是个典型的理解偏差。3. 第三道题meta 标签里藏着的移动端适配细节第三道高频题往往藏在head里你解释一下viewport这个 meta 是干什么的如果候选人连viewport都不清楚移动端适配这一块基本就是要扣分项。3.1 charset 和乱码一张办公文档引发的惨案讲 meta 先从charset说起。我遇到过最典型的乱码场景是这样的产品从办公室同事那里拿到一份 HTML 模板同事在 Windows 上用记事本另存为时默认编码是gbk但模板的meta charsetutf-8又写的是 UTF-8浏览器按 UTF-8 去解析 GBK 编码的文件于是中文全部变成口口。排查乱码问题的标准顺序是这样的先确认文件本身是什么编码再确认meta charset声明是否一致最后确认服务器返回的响应头里Content-Type是否有冲突。三者只要有两个不一致就可能乱码。这个经验写成面试答案也很管用说到charset时带上实际排查案例分数明显不一样。3.2 viewport为什么手机页面不写它就会缩成一团viewport是移动端页面适配的关键设置标准写法是meta nameviewport contentwidthdevice-width, initial-scale1.0先解释一个基本概念手机浏览器的默认布局视口宽度大约是 980px不同浏览器略有差异。如果不写 viewport页面在手机上就会按 980px 的宽度渲染然后被整体缩小塞进屏幕于是出现文字小得看不清、用户双击才能放大的体验。加入widthdevice-width之后布局视口宽度被设置成设备的屏幕宽度页面就能按设计稿的正常比例展示。这里面有三个参数经常被追问width控制布局视口宽度一般是device-width也可以写具体数值。initial-scale是初始缩放比例1.0表示不缩放。user-scalable用于控制用户能否手动缩放但为了无障碍体验主流做法已经不建议禁用缩放iOS 上maximum-scale也经常被忽略不计。面试官如果继续深挖会问布局视口、视觉视口和理想视口有什么区别。布局视口是 CSS 布局时用的视口视觉视口是用户当前在屏幕里看到的那一区域理想视口则是设备屏幕宽度这个理想值。widthdevice-width就是把布局视口设置为理想视口。能把这个链条讲出来这个答案就是满分。3.3 附加题页面分享卡片和 SEO 相关 metameta 相关的加分项还有很多。比如description是页面的搜索摘要描述写得准确能提高搜索结果的点击率keywords在现在的搜索引擎权重算法里已经几乎没有什么作用了不写也没有影响。做社交分享时还要用 Open Graph 协议比如meta propertyog:title content页面的分享标题 meta propertyog:image contenthttps://example.com/cover.jpg meta propertyog:description content分享摘要这些标签在微信、FB、Twitter 等平台分享页面时会被读取用来生成卡片。很多面试者不知道这一层如果你能顺口说出来面试官会觉得你不只是写内部页面还做过对外传播场景。老项目里还有一种写法也值得知道meta http-equivX-UA-Compatible contentIEedge作用是让老版本 IE 用最高版本的文档模式渲染。虽然 IE 已经退出历史舞台但维护过老系统的前端还是很有必要知道这个历史遗留知识点。4. 第四道题块级元素与行内元素基础题里的陷阱div和span有什么区别这种题小学生都会答但面试官换个问法就变成陷阱img是块级元素还是行内元素答案不是简单一句行内能带过的。4.1 用盒子来理解两类元素的本质差异块级元素和行内元素的核心差别按盒子模型来理解最清晰。块级元素如div、p、h1、ul、li默认独占一行可以设置width、height上下margin、上下padding都能生效多个块级元素会纵向排列。行内元素如span、a、em、strong默认不会独占一行多个行内元素在一行里排到放不下才换行它不能设置宽高设置上下margin和上下padding也不会把周围元素推开只有左右方向的margin、padding生效。用生活场景类比块级元素像一箱一箱整齐叠放的货物每个箱子都要占用一整层货架行内元素则像一条流水线上的零件沿着同一个平面往前排只能左右挪动、不能单独占一层。理解了这个盒子占有规则布局上很多怪问题都能解释清楚。4.2 特殊角色替换元素为什么能设宽高接下来是重点陷阱。img、input、button、textarea这类元素默认display值其实还是inline但你可以给它们设置宽度和高度而且上下margin、padding也生效。这是因为它们属于替换元素replaced elements内容由外部资源或浏览器控件替换元素本身在渲染时拥有内在尺寸所以宽高规则和普通行内元素不同。面试里如果问到img是行内还是块级我的建议是分层回答默认display是inline但替换元素可以设置宽高更准确地描述是它们呈现出inline-block的很多特征。这种回答既照顾了默认值又体现了对替换元素的理解不会被人钻空子。4.3 高频追问inline-block 之间的缝隙哪来的块级、行内讲完面试官很自然的下一问是inline-block是什么有什么坑inline-block兼有两者的特点元素不会独占一行同时可以设置宽高和上下margin、padding。但它有一个著名的幽灵空白节点问题源代码里两个inline-block元素如果之间有换行符或空格页面上就会出现几个像素的间隙。div classbox/div div classbox/div当这两个.box都是inline-block时中间的换行会被渲染成一个空白字符于是两张盒子之间就多了些空隙。解决办法有三种父容器设置font-size: 0再给子元素恢复字号或者把两个元素直接写成一行中间不加换行或者用负margin抵消。我自己的建议是现在做布局优先用flex或grid它们从设计上绕过了行内元素的空白问题而且对齐能力更强。但面试题还是会问inline-block因为有大量老代码和某些场景比如横向菜单、简单图标排版仍然依赖它。能讲清楚这个坑说明你写过真实页面而不是只看过文档。5. 第五道题HTML5 新特性怎么答才有区分度说说 HTML5 有哪些新特性是一道百科全书式问题面试者最容易答得又乱又浅。有人上来就背canvas、video、localStorage背完结束了面试官什么也没听出来。这道题的答题思路应该是有结构、有主次、有实战。5.1 先搭框架新特性可以这样分类我把 HTML5 新特性按用途分成四类面试答题用这套框架特别稳。第一类是语义化标签与页面结构比如header、nav、main、section、article、aside、footer、figure、figcaption等。第二类是表单增强包括新输入类型email、url、number、date、color、range等还有required、placeholder、pattern、autofocus、datalist这种表单控件属性。第三类是多媒体与绘图也就是audio、video、canvas、svg内联使用。第四类是 Web 应用 API最常见的是localStorage、sessionStorage、Web Worker、history API、地理定位、拖拽 API等。这样说一遍面试官会觉得你有体系。接下来要做的是挑其中最容易被追问的两个点深入展开。5.2 面试官必问的区分题Canvas 与 SVG 有什么不同如果候选人提到了canvas我几乎一定会追问一句Canvas 和 SVG 有什么区别答案可以用一张表说清楚对比维度CanvasSVG图形类型位图像素矢量几何图形绘制方式通过 JavaScript API 逐笔绘制通过 XML 标签描述图形DOM 节点只有一个画布元素内部无节点每个图形都是独立 DOM 节点事件绑定需要自行计算坐标命中检测每个图形节点可以直接绑定事件缩放表现放大后会模糊任意缩放不失真适用场景游戏、实时图表、大量动态绘制图标、地图、简单交互图形补充一个实战经验如果一个场景要渲染上万个节点并且频繁更新Canvas 性能更好如果只是几个图标、简单的可交互图形SVG 更合适。用项目体验来支撑这个回答往往能让面试官眼睛一亮。5.3 localStorage、sessionStorage 与 Cookie一道高频对比题HTML5 存储相关的问题也属于必考题型。核心是要能说清楚三者的差别对比项CookielocalStoragesessionStorage容量约 4KB约 5MB 或更大约 5MB 或更大请求携带每次 HTTP 请求自动携带不会自动携带不会自动携带生命周期按 Expires/Max-Age 控制持久保存手动清除才消失会话结束即被清除作用域域名内同源共享仅当前标签页会话存储类型字符串字符串字符串这里有个经常被忽略的细节存储 API 只能保存字符串如果你要存一个对象必须JSON.stringify之后再存读取时再JSON.parse回来。很多新人直接localStorage.setItem(user, userObject)控制台不报错但取出来就变成[object Object]这就是原型坑。还有一个有意思的知识点sessionStorage即使在新开标签页时复制了地址也不会共享只在当前标签页生命周期内有效刷新页面数据还在但关闭标签页就没了。这个特性在实现页面临时草稿功能时会非常有用。5.4 容易被继续追问的实战细节视频自动播放和 datalistvideo标签也算高频。经典坑是自动播放策略。现代浏览器普遍限制了带声音的视频自动播放你设置autoplay属性不一定生效。实际方案是给video加muted属性静音视频通常可以自动播放用户点击后再打开声音。移动端 WebView 还要注意加playsinline、x5-playsinline之类的属性否则视频在 iOS 上容易默认进入全屏播放。datalist是一个好用但存在感不高的新特性它能给输入框提供下拉建议值input listbrowsers namebrowser datalist idbrowsers option valueChrome option valueFirefox option valueEdge /datalist用户既可以从建议里选也可以自由输入不需要引入任何 JavaScript。提到这个很容易比那些只背大路货特性的面试者更让人觉得技术面广。6. 把答案组织成面试官想听到的样子说完了五道题最后再聊几句面试技巧。同样一道题组织方式不同效果差很多。6.1 答案结构结论加原理加场景我建议大家按结论、原理、场景三段式答题。比如被问到 DOCTYPE先说结论DOCTYPE 是用于触发标准模式的文档类型声明再解释原理没有它浏览器会进入怪异模式导致盒模型、排版不一致最后补一个场景我之前遇到过某老页面没有 DOCTYPE布局宽度溢出加上后恢复正常。这种结构不但信息完整还给面试官留出了追问空间。无论他追问哪个方面你都还有内容可讲。6.2 防止翻车的三个细节第一不要背标准答案背得太流利。面试官能听出来机械记忆和真实理解的区别。如果某个点你确实只知其然不知其所以然宁可停下来想想再说也别张口就来。第二不知道的 API 要诚实承认但可以补一句自己的排查思路。比如问到陌生的标签可以说这个我实际项目里没用过不过按规范推断它的作用应该是这样我会去 MDN 确认一下。坦诚加合理推断比硬编一个答案可信得多。第三随手写一点 HTML 再上考场。面试前打开编辑器把标准骨架写一遍把 meta、语义化标签、表单控件、多媒体标签都跑一遍比翻一百篇面经都顶用。我见过很多候选人嘴上概念背得清让他现场写一个完整的表单结构却连action、method都交代不清楚这种反差非常减分。我也把话说回来HTML 基础题难吗真的不难。但它是一面很好的照妖镜能照出你是真正写过大量页面、处理过乱码和移动端适配的人还是只在文档里见过这些标签的人。把这五道题吃透至少在 HTML 这一关你能给面试官留下一个基础扎实、思路清晰的印象。