HTML校招面试通关攻略：从DOCTYPE到语义化全解析

“你写一个基础 HTML 页面结构吧。”——这句话我在这几年校招面试里说过很多次。大多数同学都能刷刷刷写出!DOCTYPE html、html、head、body这套标准模板但当我紧接着问“第一行为什么要写 DOCTYPE”“lang 属性里的 zh-CN 到底是什么意思”“meta charset 不写会怎么样”时对面就会陷入沉默。HTML 简单到没人认真复习但它恰恰是校招面试里最容易被“试水”、也最容易拉开差距的一块。这篇文章我就以面经整理的形式把那些“你以为你知道但真问起来会卡壳”的 HTML 考点挨个过一遍给准备校招的同学一份能直接照着补的清单。1. 一张HTML模板就是一道综合题DOCTYPE、lang、charset、viewport 逐行拆先回到那个最常见的标准模板本身。面试官让写基本页面结构不是真的要看你会不会写而是想顺着模板里的每一行往下追问。四行代码四个考点谁基本功扎实几句话就能试探出来。1.1 第一行DOCTYPE为什么面试官总从这里开始“设套”!DOCTYPE html这一行在 HTML5 里看起来非常短短到很多人以为它就是个形式。它不是 HTML 标签而是文档类型声明核心作用是告诉浏览器用标准模式还是怪癖模式来渲染这个页面。浏览器在解析页面时有两套规则。标准模式下CSS 布局按照 W3C 规范来比如width的默认计算就是 content 的宽度一旦不写 DOCTYPE浏览器会进入 quirks mode也就是怪癖模式。这个模式是为了兼容 IE5 时代的老页面而保留的里面充满了各种“历史遗留行为”最典型的就是盒模型。在怪癖模式下width: 100px的div会把padding和border也算进这 100px 里导致同样一套样式在标准模式和怪癖模式下渲染结果完全不同。面试官追问到这一层还会顺便考一个进阶点除了 standards mode 和 quirks mode还有一个 almost standards mode。它主要处理表格单元格里图片垂直对齐的老问题!DOCTYPE html在部分老版本浏览器里就会触发这个模式。现在主流浏览器基本已经没有感知上的差异但能说出这个概念说明你真的去了解过浏览器渲染机制而不是只背了模板。实操建议就一句话新建页面直接复制标准模板别手敲。!doctype html和!DOCTYPE html大小写不敏感都能识别但漏掉任何一个字符整个页面就可能掉进怪癖模式这种问题排查起来特别隐蔽。1.2 lang 属性zh-CN、zh-Hans、hreflang 都是什么意思html langzh-CN里的lang属性是给浏览器、搜索引擎、屏幕阅读器看的语言声明不是给人看的装饰。面试官经常拿一个词来考人zh-CN和zh-Hans有什么区别。很多同学会愣住因为平时根本没人区分。zh-CN是语言加地区zh 表示中文CN 表示中国地区zh-Hans是语言加文字系统Hans 表示简体中文。一个新加坡的中文页面可能写zh-SG或者更精确地写zh-Hans-SG。这个区别在 HTML 规范里属于 bcp47 语言标签体系面试能答出这层是很明显的加分项。lang的实际影响也很具体浏览器翻译插件需要靠它判断当前页面是什么语言要不要弹出翻译提示屏幕阅读器会根据lang选择合适的发音规则中英文混排的页面如果标签标错朗读器会用错误的语言读出来搜索引擎也会参考lang来识别页面内容语言。另外还有一个容易混淆的点hreflang。它写在link或a标签上用于告诉搜索引擎当前页面和其他语言版本页面的对应关系比如link relalternate hreflangen href/en/。lang是声明当前页面语言hreflang是声明链接目标页面的语言方向完全不同。面试里能主动把这个区分讲清楚面试官会记住你的。1.3 meta charset 与 viewport基础模板里的“连带考点”meta charsetutf-8声明的是文档字符编码。浏览器解析 HTML 时第一步是解码字节流而解码用什么字符集就取决于这个声明。如果不写浏览器会自己猜编码一旦猜错页面就是一堆乱码中文字符会出现经典的“锟斤拷”“烫烫烫”。这里有个细节值得记住W3C 建议 charset 声明必须出现在 head 的前 1024 字节内。原因是浏览器解析 HTML 时会边下载边解析HEAD 区域的字节已经足够用来做编码决策。所以实际项目里的规范就是把 charset 放在 head 的第一行紧跟其后才是 title 和 viewport。meta nameviewport contentwidthdevice-width, initial-scale1.0则是移动端适配的第一道题。老式智能手机浏览器的默认布局视口宽度是 980px如果不设置 viewport页面会先在 980px 宽度下布局再整体缩小到手机屏幕显示。结果就是页面能看但字小得没法点。widthdevice-width把布局视口设成设备宽度initial-scale1.0确保初始缩放比例是 1:1。面试官喜欢追问的是maximum-scale1和user-scalableno为什么不推荐因为这俩属性会禁用用户缩放页面的能力对视力不好的用户非常不友好属于可访问性上的坑。而且 iOS 10 开始 Safari 直接忽略这两个属性写了也没用。如果能顺势把 layout viewport、visual viewport、ideal viewport 这三个概念讲出来移动端适配这一块基本就过关了。2. 语义化标签从背概念到现场手写语义化是 HTML 面试绝对绕不开的考点。这个知识点问得浅答案就是“用合适的标签表达合适的内容”问得深能一路问到无障碍、SEO、文档大纲。我通常建议应届生从三个维度来组织答案。2.1 面试官问“语义化是什么”时他到底想听什么只回答“语义化就是不要全部用 div”是远远不够的。一个完整的回答应该覆盖三个受益方。第一是开发者自己。语义化标签让页面结构更清晰别人接手代码时不用看 CSS 就能从标签猜出内容性质比如header是页头、nav是导航、aside是侧边栏。类名可以少写一大半维护成本明显降下来。第二是浏览器和搜索引擎。爬虫需要理解页面结构才能正确建立索引。一个文章页面里article包裹正文、h1放标题、time标记发布时间这些信息对搜索引擎判断内容质量很有帮助也是 SEO 的基础。第三是辅助技术和无障碍用户。屏幕阅读器会朗读标签的语义信息比如“这是一个按钮”“这是一个导航区域”。用div模拟按钮屏幕阅读器只会告诉用户“这是一个分组”键盘用户也无法正常操作。反过来说button天然支持 Tab 聚焦、Enter 和 Space 触发、屏幕阅读器朗读这些能力不需要任何额外代码。我面过不少同学能答出这三个维度的人不足三成大多数人都卡在“为了让搜索引擎看得懂”这一层。如果能主动把“开发者、浏览器、用户”三个视角都覆盖这道题的分数直接拉满。2.2 面经里很少提的“加分标签”address、time、details、dialogheader、footer、nav、main、article、section、aside这七个是基础大家在简历上都写过。但面试官想判断一个候选人的知识广度往往喜欢挑一些不那么常用的标签来问。address是表示联系信息的标签不是给网页底部放公司地址那么简单。它应该包裹具体的联系方式比如邮箱、电话、物理地址。放在article里时它表示文章作者的联系方式这是一个很语义化的细节。time配合datetime属性可以让时间变得机器可读。time datetime2026-06-01T10:00:0008:002026年6月1日/time这种写法搜索引擎能直接提取事件时间格式可以精确到秒甚至带时区。details和summary是原生折叠面板不需要任何 JS。details open控制默认展开状态它还会触发toggle事件。面试官问“原生折叠和 divJS 实现的折叠有什么区别”时核心答案是原生实现自带键盘操作和可访问性支持浏览器还能记住展开状态交互成本几乎为零。dialog是原生弹窗支持showModal()方法配合::backdrop可以做遮罩层。它天然支持Esc关闭、焦点锁定在弹窗内这些都是自定义弹窗需要手动实现的。还有mark表示高亮文本、meter表示度量值、progress表示任务进度。能准确说出这些标签的适用场景比背十个八股题都管用。2.3 h1-h6 的层级纪律一个页面到底该有几个 h1“一个页面有几个 h1”是语义化里的经典追问。我的建议是一个页面只放一个 h1一般用于站点主标题或页面核心标题。HTML5 的文档大纲理论上允许每个 section 有自己的 h1但实际场景里搜索引擎对多 h1 的页面往往视为结构不清晰而且主流工具对 sectioning 内容的支持也参差不齐所以保守做法就是“一页一 h1”。h1 到 h6 不能跳级也是容易被忽略的点。h1 后面直接跟 h3文档大纲就缺了一级屏幕阅读器用户按标题跳转导航时会突然找不到 h2 层级的内容体验很差。我在面试里会让候选人现场给一篇博客文章写标题结构很多人会写成“h1 是 logoh2 是文章标题”这是错的。logo 应该用div包裹图片h1 应该是文章真正的标题或者是站点名不能把装饰性 logo 当作 h1。2.4 现场手写文章列表页“标准答案”长什么样面试手写题最常见的场景之一是写一个博客文章列表。很多同学会写出一堆 div class样式看起来没问题但结构没有任何语义。参考实现可以是这样main h1最新文章/h1 article h2a href/post/1前端校招面经HTML 到底要怎么复习/a/h2 p面经整理从基础模板到语义化从表单细节到资源加载……/p p time datetime2026-05-202026-05-20/time /p /article /main每个标签的选择都有理由main标记页面主内容区域一个页面只有一个article表示每条文章是独立、自包含的内容h2作为 h1 下的直接子级a包裹标题是文章链接的标准写法time标记发布时间。面试官看的是结构思维能力而不是代码量。3. 表单与交互HTML 里细节最多的一章表单是 HTML 里细节密度最高的部分也是校招面试经常会出场景题的地方。一个搜索框、一个注册表单都能问出很多花样。3.1 input 的 type 属性一个属性值能问出多少东西type最基础的是 text 和 password但面试官真正关心的往往是移动端输入体验相关的细节。比如“移动端让用户输入手机号用 typenumber 还是 typetel”很多同学直接答 number。面试官想听到的答案是要看场景。typenumber会调起带小数点和正负号的数字键盘更侧重数值输入typetel调起的是纯数字键盘适合手机号这种“本质上是数字串但不参与数学运算”的输入。如果只是要一个数字软键盘但不想改变数据的语义类型可以用inputmodenumeric它只控制软键盘样式不改变输入值类型。typeemail在移动端会调出带 和 .com 的键盘typesearch在 WebKit 内核浏览器里会自带一个清除按钮typedate在 Chrome 是日历控件在 iOS Safari 是滚轮选择不同浏览器表现差异很大实际项目要提前评估 UI 统一性。3.2 HTML5 原生校验required、pattern 与 setCustomValidity表单校验是前端必考题。现代浏览器支持的原生校验属性包括required、minlength、maxlength、min、max、step、pattern加上typeemail这类自动约束。校验触发时机是表单 submit 时浏览器会阻止不合法的表单提交并弹出气泡提示。如果项目想用异步校验拦截提交、同时不触发浏览器自带气泡可以在form上加novalidate属性自己做校验逻辑。面试高频题“原生实现一个手机号校验的输入框”。参考写法input typetel namephone pattern1[3-9][0-9]{9} inputmodenumeric required 如果想自定义错误提示文字用 JavaScript 的setCustomValidity()设置后元素会进入:invalid状态提交时显示自定义文案。注意用完后要重置为空字符串否则元素会一直处于校验失败状态这是实际开发里很容易踩的坑。3.3 label 的两种绑定方式和“点击命中面积”label看似简单实际是表单可访问性的关键。两种绑定方式一种是用for属性指向输入框的id另一种是直接包裹输入框。label forusername用户名/label input idusername nameusername typetext !-- 另一种写法 -- label 用户名 input nameusername typetext /labellabel的价值在于扩大点击命中面积。对复选框和单选框来说尤其重要一个手指头在移动端很难精准点中一个小圆圈但包了 label 之后点击文字也能触发选中。屏幕阅读器朗读时label 的内容会成为控件的可访问名称没有 label 的输入框辅助技术只会念“编辑框”用户根本不知道要输入什么。面试里有个经典错误用placeholder当标签。placeholder 在用户输入后就消失了而且它不构成合法的可访问名。视觉设计上确实有人不爱显示 label但正确的做法是视觉上隐藏 label而不是删掉它或者用aria-label提供名称。3.4 场景题搜索表单如何写出“加分项”让候选人写一个搜索表单是我个人很喜欢的考察方式。高效能完成的人会写出类似这样的结构form rolesearch action/search label forq搜索内容/label input idq nameq typesearch autocompleteoff enterkeyhintsearch required button typesubmit搜索/button /formrolesearch告诉辅助技术这是一个搜索区域nameq决定提交后 URL 的查询参数名typesearch在部分浏览器自带清除按钮autocompleteoff避免浏览器历史记录干扰搜索词联想enterkeyhintsearch会让移动端键盘的回车键变成“搜索”样式。这些细节任何一个被面试官看到都是“基本功扎实”的直接证据。4. 资源加载的“性能题”script 和 link 标签比你想的复杂HTML 不只是结构和语义资源加载相关的标签属性也是校招面试的高频考点。尤其是性能优化方向的候选这一章几乎是必问。4.1 defer 与 async脚本加载面试题的“标准图解”这是经典中的经典。面试官会问“默认情况下浏览器解析到 script 标签时会发生什么”答案是在下载并执行脚本时暂停 HTML 解析等脚本跑完再继续解析后面的 DOM。页面越复杂、脚本越多、体积越大阻塞就越明显这就是脚本阻塞渲染的机制。defer和async都是为了让脚本下载不阻塞解析。区别在于执行时机defer下载不阻塞解析等整个 DOM 解析完成后、DOMContentLoaded 事件触发前按文档顺序执行。async下载不阻塞解析但下载完成后立刻执行执行时依然会阻塞解析。多个 async 脚本执行顺序不保证谁先下载完谁先执行。代码示例script srca.js defer/script script srcb.js defer/script script srcc.js async/scripta 和 b 一定会按顺序在 DOMContentLoaded 之前执行c 可能在下载完成后随时插入执行甚至会跑在 a 前面。工程上的建议是业务代码依赖 DOM 和依赖执行顺序用 defer独立统计脚本、广告脚本、第三方埋点用 async因为它们不依赖页面其它部分。把这两条使用原则说清楚比单纯背定义更有说服力。4.2 preload、prefetch、preconnectlink 标签里的性能三件套这三兄弟在性能优化题里出镜率很高功能也容易混淆。preload是提前加载当前页面马上要用的资源典型场景是首屏字体。自定义字体文件如果不提前加载浏览器要等用到字体的文本渲染时才去下载会出现 FOIT不可见文本闪烁。用link relpreload hreffont.woff2 asfont typefont/woff2 crossorigin可以让字体下载提前开始。这里有个坑preload 字体资源必须带上crossorigin属性否则浏览器会下载两次。原因是字体请求默认以 CORS 模式发出不带 crossorigin 的 preload 请求模式不匹配就会造成重复下载。这个细节我在面试里问过很多次很少有人能答上来。prefetch是提前加载用户未来可能访问的页面资源比如下一页、弹窗里的内容浏览器会在空闲时下载。preconnect是在页面加载早期提前完成 DNS 解析、TCP 握手、TLS 协商。如果网站用了第三方字体 CDN、图片 CDN提前preconnect可以明显减少后续请求的建立时间。实际场景题“网站用了一款自定义字体怎么优化首次加载”可以组合答font-display: swap显示降级字体preload提前下载字体文件preconnect提前连接字体服务器三管齐下。4.3 img 的 loading、decoding、fetchpriority一张图片的完整加载链路图片加载优化是性能题的重灾区。新时代的 img 标签有一组属性值得熟记loadinglazy是懒加载浏览器会在图片进入视口附近时才加载。注意首屏图片不要加 lazy否则首屏内容会延迟加载反而拖慢 LCP。decodingasync让图片解码异步进行不阻塞主线程上的渲染工作但它不会让加载变快只是让解码过程不卡渲染。fetchpriorityhigh是告诉浏览器这张图片的加载优先级高适合首屏 LCP 图片。还有一个老生常谈但重要的事img 要写width和height属性。这不是为了限制图片显示大小而是让浏览器在图片未加载完时就能预留出正确的占位空间。不写的话图片加载完成后布局会突然跳动也就是 CLS布局偏移问题这在性能评分里是一个重要指标。4.4 SRI 与 crossoriginscript 标签上的安全题integrity属性是 Subresource Integrity 的缩写给外部脚本或样式加上哈希值浏览器下载文件后会用哈希校验不匹配就拒绝执行。这个机制主要用来防御 CDN 被篡改。如果资源是在第三方 CDN 上需要同时设置crossoriginanonymous否则浏览器在同源策略下无法拿到原始响应做哈希比对。面试官喜欢变体追问“为什么有些跨域脚本报错时只能看到 Script error拿不到详细信息”原因是浏览器默认不向跨域脚本暴露错误信息。在 script 标签上加crossoriginanonymous并且服务器返回对应的 CORS 头window.onerror 才能拿到具体的错误堆栈。这个点把跨域、CORS、错误监控串在了一起能答好说明知识体系是连通的。5. 可访问性与 SEO面试官眼中的“非功能需求”可访问性在大部分前端简历里都是“熟悉”但真能被问出东西来的很少。校招面试里不太会要求你背 WCAG 条款但 alt、aria、SEO 这几个基础点是绕不开的。5.1 alt 的正确姿势不是所有图片都需要“描述”alt 的第一个作用是图片加载失败时显示替代文本第二个作用是屏幕阅读器朗读图片内容第三个作用是在弱网环境下提供内容降级。但很多人不知道不是所有图片都该写描述性 alt。纯装饰性图片比如一条分割线、一个背景图里的元素应该写alt空 alt 会让屏幕阅读器直接跳过图片如果不写 alt 属性屏幕阅读器会去念文件名比如 “logo-final-v2.png”这才是灾难。所以“装饰性图片用空 alt有信息量的图片用描述性 alt”是一条重要规则。图片包含文字时alt 应该写文字本身除非这些文字已经在旁边 HTML 里出现。图片作为链接内容时alt 会成为链接文本的一部分要写清楚“点了之后会去哪里”而不是描述图片长什么样。title属性只是悬停提示不能替代 alt这条也是容易踩的坑。5.2 aria-*什么时候该用什么时候是画蛇添足aria 属性是让 HTML 元素能被辅助技术正确理解的关键。面试最常见的题是给一个自定义控件补无障碍属性比如自定义 checkboxspan rolecheckbox aria-checkedtrue tabindex0 aria-label同意用户协议 /spanrolecheckbox告诉屏幕阅读器这是一个复选框aria-checked表达当前选中状态tabindex0让它可以被键盘聚焦aria-label提供控件名称。这四个属性缺一不可。但 aria 不是越多越好。如果元素已经有可见文本就不要再加aria-label否则辅助技术会忽略可见文本只念 aria-label 的内容。aria-hiddentrue是给装饰性元素用的但如果这个元素内部有可聚焦的链接或按钮加上 aria-hidden 会造成键盘用户“聚焦到看不见的元素上”这是严重的可访问性事故。我的建议是能用原生元素就用原生元素。button自带所有按键交互和可访问性dialog自带焦点锁定和关闭逻辑。自定义交互组件才需要 aria 来补全语义。5.3 SEO 方向的 meta 与结构化数据两道不算偏的加分题HTML 里和 SEO 直接相关的一是 title 和 meta description二是 Open Graph三是结构化数据。title是搜索结果里的大标题meta namedescription是摘要描述。这两个是搜索引擎最基础的理解入口。Open Graph 协议控制的是链接分享到社交平台时的预览卡片。og:title、og:description、og:image是最常用的三个属性。很多业务方要求在分享到微信/掘金/知乎时展示好看的卡片前端要做的就是正确输出这些 meta 标签。结构化数据的现代实现是 JSON-LD比如给一篇文章加 Article 类型的结构化数据{ context: https://schema.org, type: Article, headline: 前端校招面经分享这些 HTML 你知道吗, datePublished: 2026-05-20 }搜索引擎会基于这些数据生成富摘要比如搜索结果里直接展示发布时间、作者、评分。面试不需要背 schema 全量字段但要知道 JSON-LD 是什么、和 microdata 相比为什么更推荐——JSON-LD 写在 script 标签里不影响 HTML 结构更干净。6. 冷门但能拉开差距的 HTML 细节最后这一章是我从历年校招面试和开发实战里挑出来的“偏门但确实会考”的点。它们不常见但一旦出现就能明显区分“背过八股”和“真的研究过”。6.1 浏览器最小字号 12px但页面里为什么能做 8px这是一个很经典的奇怪问题。Chrome 浏览器对中文页面默认设置了一个最小字号限制通常是 12px