abbr 的 title 能解释缩写吗，为什么还要在正文说明？
缩写首次出现时应让读者明白它代表什么。<abbr> 的 title 能提供展开词，却不保证每位用户都方便获得；正文首次写全称、后续再用缩写更易读。 触屏用户尤其难以获得悬浮提示，重要术语的全称应直接出现在可见正文里。
核心关键词abbr title accessibility 缩写
面试知识索引 · 分类、标签与搜索
HTML · 语义与文档面试题，43 道完整答案
HTML · 语义与文档面试题第 1 页，显示第 1–43 题，共找到 43 道完整解析，可继续按分类、标签与关键词缩小范围。
43筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
技术分类52 个
全部分类5000HTML89AI Agent511浏览器301JavaScript285React281AI 开发262CSS240Node.js217TypeScript206Vue180前端工程化138
查看全部 52 个分类
React Native135操作系统135数据库134Docker95计算机网络94API 设计90Kubernetes90Redis89全栈开发88分布式系统88系统设计86HTTP85Next.js60Angular58Linux53Nuxt51PostgreSQL46可观测性46设计模式46小程序45身份与权限45无障碍44MongoDB43PWA43Web 安全43Git42前端测试42前端性能41WebAssembly40测试40AI 工程37SvelteKit37Go35前端数据管理30React Router29AI 全栈28Svelte27算法12Java10数据结构5前端手写题3
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
为什么大多数网站不该随意给按钮设置 accesskey？
accesskey 看似能提供键盘捷径，却可能和浏览器、系统、读屏软件的快捷键冲突，也受键盘布局与组合键差异影响。组合键随平台变化，还可能撞上浏览器或读屏软件快捷键；即使用它，也需要可发现的说明和可替代操作。
核心关键词accesskey 可访问性 键盘冲突 - 0003
有原生 button 时，为什么别给 div 直接加 role=button？
ARIA role 能告诉辅助技术元素扮演的角色，却不会自动补齐原生按钮的焦点、回车与空格交互。再比较 button 和 div role=button，说明原生语义优先的原因，以及何时才需要自己实现复杂控件。
核心关键词ARIA role 第一个规则 原生 HTML - 0004
文章卡片用 article，普通内容分区用 section 吗？
article 适合能独立分发或复用的完整内容，section 用来按主题划分文档或功能区域。以博客列表与文章正文为例说明二者可以嵌套、标题如何帮助识别分区，以及为什么不能只为加样式滥用语义元素。
核心关键词article section 区别 HTML5 - 0005
audio 里面的文字什么时候会显示，能当音频加载失败提示吗？
放在 audio 开始与结束标签之间的普通文本是给不认识 audio 元素的旧浏览器看的回退内容。现代浏览器识别了元素却无法加载音频时，不会自动显示标签内部文字；下载链接和文字稿应有独立入口。
核心关键词audio 回退内容 不支持 - 0006
audio 和 video 里的 source 怎样选择可播放文件？
同一段媒体可以给浏览器提供多个格式来源。浏览器通常按顺序挑能处理的候选格式；字幕、下载链接和加载失败提示仍要分别提供。 多个 source 只解决媒体格式候选，不能把不同片段当成播放列表，也不能代替文字稿。
核心关键词audio video source 回退 格式 - 0007
长引用、短引用和作品标题，分别该用哪个标签？
引用内容和作品名称经常被混用成一个 cite 标签。还要区分 blockquote 表示独立成段的长引文、q 表示句内引文、cite 表示作品标题，并解释 blockquote 的 cite 属性只记录来源 URL，不会自动生成可见署名。
核心关键词blockquote q cite 引用 文本 - 0008
同一内容有多个 URL，canonical 链接该怎么写？
参数页、排序页或追踪链接展示相同内容时，head 中的 rel="canonical" 可以提示搜索引擎首选地址。它是规范化信号而非强制跳转；与重定向和站点地图的职责不同，指向错误 URL 反而可能让页面难以被正确收录。
核心关键词canonical URL 重复内容 SEO - 0009
自定义元素名为什么一定要有连字符？
自定义元素名称必须以 ASCII 小写字母开头，包含连字符，不含 ASCII 大写字母，也不能落入保留名称列表。连字符让浏览器与原生标签区分；注册时命名不合法与同名重复注册是不同的失败情况。
核心关键词自定义元素 命名规则 连字符 - 0010
data-* 适合存什么？屏幕阅读器会读出来吗？
data-* 适合在元素上存放少量与脚本或样式相关的自定义数据，dataset 会把连字符属性名映射为驼峰键，读写值都按字符串处理。它不能代替可见文案、ARIA 名称或表单提交字段，更不适合保存敏感数据。
核心关键词data-* 自定义属性 JavaScript - 0011
datalist 怎么给输入框加候选值？
input 通过 list 引用 datalist 中的 option 后，浏览器会提供输入建议，但用户仍可提交列表之外的合法值。城市搜索等开放输入适合它；若选项必须受控，应使用 select 或额外校验，还要留意浏览器和辅助技术的呈现差异。
核心关键词datalist input list 自动补全 - 0012
HTML 开头不写 DOCTYPE，浏览器会怎样渲染？
现代 HTML 页面应以 <!doctype html> 开头，它让浏览器进入标准模式。省略或使用某些旧式声明可能触发怪异模式，浏览器会为了兼容老网页采用不同的布局规则。它不是给页面“开启 HTML5 标签”的开关，也不是告诉浏览器用哪种字符编码；实际模式可以从 document.compatMode 检查。
核心关键词DOCTYPE HTML 解析 标准模式 怪异模式 - 0013
网站 favicon 要提供哪些文件，sizes 怎么写？
在 <head> 中用 <link rel="icon"> 声明站点图标，type 描述资源的 MIME 类型，sizes 描述位图的固有像素尺寸。可以提供常用的 SVG 与 PNG 候选，让浏览器按自身支持和显示场景选择；不必为了所有可能设备枚举一大串尺寸。
核心关键词favicon 图标 sizes PNG ico - 0014
图片旁边有说明文字，何时用 figure 和 figcaption？
<figure> 表示可作为一个整体引用的自包含内容，<figcaption> 给这个整体提供标题或说明。它常用于图片、代码示例、图表等，说明文字可放在内容前或后。普通装饰图片旁的一句正文不必硬套 figure；关键是图与说明能否作为一个单元被引用或移动，而不破坏正文理解。
核心关键词figure figcaption 图片 标题 - 0015
HTML 的 head 里哪些信息必须先写清楚？
<head> 放的是文档元数据和资源声明，不是页面可见正文。常见基础项包括字符编码、页面标题、视口声明、描述以及样式和图标链接。<meta charset="UTF-8"> 帮助浏览器正确解码文档；移动端 viewport meta 建立合适的布局视口。
核心关键词HTML head meta charset viewport 作用 - 0016
h1 到 h6 怎样组织页面标题才好读？
标题元素表达内容层级，不是用来挑字体大小的标签。页面主标题通常用 h1，其下章节用 h2，再往下用 h3；层级应跟随内容从属关系。辅助技术可按标题快速浏览文档，清晰的标题也帮助搜索系统理解结构。
核心关键词heading hierarchy accessibility SEO - 0017
写了 hidden 的元素，为什么还可能显示出来？
普通 hidden 状态表示元素当前不应呈现，浏览器通常用用户代理样式把它设成 display: none。作者 CSS 如果给它写了会覆盖该规则的 display，元素仍可能被画出来。
核心关键词hidden 属性 display none 覆盖 - 0018
iframe sandbox 默认限制什么，放行权限要注意什么？
给 <iframe> 加空的 sandbox，浏览器会对嵌入页面施加一组限制，例如脚本、表单提交、顶层导航及同源能力受限。按真实需求加 allow-scripts、allow-forms 等令牌逐项放行。
核心关键词iframe sandbox allow-scripts allow-same-origin 权限 - 0019
图片什么时候该写空 alt，什么时候不能空？
图片只负责装饰、旁边文字已完整传达同一信息时，可写 alt=""，让辅助技术跳过这张无额外信息的图。图片承担内容、操作或链接含义时，应写简洁而具体的替代文本。空 alt 与省略 alt 不一样；省略时，辅助技术可能读出文件名或其他不理想的信息。
核心关键词img alt 空 装饰性图片 - 0020
图片的 title 能代替 alt 吗？两者分别给谁看？
alt 是图片内容或功能的文本替代，在图片无法显示及辅助技术读取时尤其重要。title 常表现为鼠标悬停提示，但它不稳定地出现在触摸、键盘和读屏体验中，不能取代 alt。需要额外说明时可用邻近可见文字或图题，不必把同一句话同时塞进两个属性。
核心关键词img title alt 区别 tooltip 可访问性 - 0021
单选和复选框怎么分组，name 起什么作用？
type="radio" 适合一组互斥选项，同一表单里相同 name 的单选按钮组成一组，一次通常只能选一个。type="checkbox" 表示可独立勾选的选项，多项可同时选中。
核心关键词radio checkbox 区别 name 分组 - 0022
label for 怎样关联输入框？不写会少什么？
<label for="id"> 的 for 值对应某个可标注表单控件的唯一 id。关联后，点标签文字也能聚焦输入框或切换复选框，并给控件提供可理解的名称。也可以把控件直接放进 <label> 做隐式关联。
核心关键词label for 属性 表单控件 关联 - 0023
为什么要给 html 写 lang？它会自动改变文字方向吗？
<html lang="zh-CN"> 声明文档主要语言，帮助读屏发音、拼写检查和浏览器语言相关处理。页面局部语言变化时，可在对应元素上另设 lang。lang 不会自动把页面改成从右到左排；文字方向应由 dir 和相应 CSS 规则表达。
核心关键词lang 属性 语言 方向 屏幕阅读器 - 0024
header、main、footer 各放什么？页面能有几个 main？
<header> 是页面或章节的引导内容，<footer> 是对应页面或章节的页脚信息；它们不只按屏幕顶部、底部的位置命名。<main> 标记文档主要内容，通常一个页面只应有一个当前可见的主内容区域，并且不应放进 header、footer、nav 等结构中。
核心关键词HTML main header footer 结构元素 - 0025
多行输入为什么用 textarea？默认值写在哪里？
<input type="text"> 是单行文本控件，用户输入的换行不会作为多行编辑界面呈现；<textarea> 是专门的多行文本控件。textarea 的初始值写在开始和结束标签之间，不写 value 内容属性。
核心关键词textarea input 多行文本 区别 - 0026
meta http-equiv 真能代替 HTTP 响应头吗？
<meta http-equiv> 是 HTML 中少数被浏览器识别的 pragma 指令，不是任意 HTTP 头的通用替代。常见的有 refresh、content-security-policy，以及历史兼容或内容类型相关形式。
核心关键词meta http-equiv HTTP 响应头 对应 - 0027
用 meta refresh 自动跳转，用户会遇到什么问题？
<meta http-equiv="refresh"> 能在指定秒数后刷新或跳转，但自动动作会打断阅读、输入和读屏操作；倒计时不清楚时，用户更难掌控页面。需要真正的永久或临时地址迁移，优先用 HTTP 重定向。
核心关键词meta refresh accessibility 页面刷新 - 0028
type="module" 脚本默认会阻塞 HTML 解析吗？
外部模块脚本及其依赖可与 HTML 解析并行获取，默认等文档解析完成后执行，行为类似普通脚本加 defer。模块默认是严格模式，顶层声明不会自动挂到全局对象。给模块脚本再加 defer 没有效果；加 async 则会改成依赖可用后尽快执行，不再按默认的解析后顺序等待。
核心关键词script type module defer 严格模式 - 0029
哪些链接该放 nav？页面能有多个 nav 吗？
<nav> 表示用于页面或站点主要导航的一组链接，如主菜单、目录、分页或面包屑。普通正文里的每个链接不必放进 nav；看的是这组链接是否承担导航结构。一个页面可以有多个 nav，但多个导航区最好用可见标题或 aria-label 给出可区分的名称，便于读屏用户选择。
核心关键词nav 元素 导航 landmark - 0030
表单计算结果为什么用 output，而不直接用 span？
<output> 表示由计算或用户操作产生的结果，例如滑块选择数量后显示总价。它具有表单结果语义，可用 for 列出参与计算的控件 id，也可用 name 让脚本和表单结构更易识别。
核心关键词output 元素 表单 计算结果 语义 - 0031
picture、source、srcset 和 sizes 各管哪一步？
<picture> 让浏览器按条件在多个 <source> 中选来源，适合换构图或格式。每个来源的 media 或 type 决定它是否可用，srcset 提供该来源的候选文件；使用宽度描述符时，sizes 告诉浏览器预计显示宽度。
核心关键词picture srcset sizes 响应式图片 - 0032
progress 和 meter 都有数值，什么时候选哪一个？
<progress> 表示一个任务的完成进度，例如文件上传到 60%；没有 value 时表示进度未知。<meter> 表示已知范围内某个量的当前值，例如电量、评分或磁盘占用，它不是正在执行任务的进度条。
核心关键词progress meter 语义 区别 - 0033
HTML5 的 required、pattern、maxlength 这些验证属性是怎么工作的？
用户提交注册表单时，required 会拦空值，pattern 检查非空输入的格式，maxlength 通常限制手工输入的长度。浏览器的验证状态可以配合页面提示使用；脚本写入的超长值不会被长度约束兜底，服务端仍需独立检查。
核心关键词required pattern maxlength 约束验证 - 0034
script 的 defer 和 async 什么时候执行？
页面头部有基础库和依赖它的初始化脚本时，defer 能并行下载并按标签顺序在解析结束后执行；独立统计脚本可用 async，但下载完成就可能打断解析。还需分清 DOMContentLoaded 的等待关系，以及内联脚本、模块脚本的不同规则。
核心关键词script defer async 执行顺序 解析 - 0035
select 选项很多时，optgroup 怎么分组？
城市下拉框选项多时，optgroup 可以给华东、华南等选项加组名，选中后提交的仍是 option 的值。label 命名分组，disabled 可禁用整组；占位选项和真正选项的放置还会影响 required 识别，分组也不能嵌套成树。
核心关键词optgroup select 选项分组 - 0036
img 的 srcset 怎么根据视口和像素密度选图？
头像显示宽度固定时，srcset 的 1x、2x 候选对应不同像素密度；封面宽度随布局变化时，要用真实资源宽度的 w 描述符配合 sizes。浏览器会参考布局、DPR 和资源策略选图，最终加载地址应查看 currentSrc，不能只看 src。
核心关键词srcset 选择 dpr viewport - 0037
tabindex 的 0、-1 和正数分别怎样影响键盘焦点？
错误摘要需要在提交失败后被脚本聚焦，却不必每次按 Tab 都经过，可以设 tabindex 为 -1；0 会让元素加入自然顺序，正数则抢在普通控件前。焦点顺序首先应跟 DOM 中的操作流程一致，给普通 div 加焦点也不会自动获得按钮语义。
核心关键词tabindex 键盘导航 顺序 0 -1 - 0038
给表格加标题，用 <caption> 和 aria-label 有什么区别？
一页有多张数据表时，caption 能给每张表提供可见标题，也能成为辅助技术理解表格的名称；aria-label 只提供不可见名称。页面上已有对应标题时，还可用 aria-labelledby 关联，避免视觉文字与读屏名称不一致。
核心关键词table caption aria-label 区别 - 0039
表格里的 th 和 scope 怎样帮读屏找到表头？
商品价格表里的“39 元”只有联系商品行名和价格列名才有意义。th 标记表头，scope 的 row、col 值说明它管辖哪一方向的数据；遇到跨行跨列的复杂表头，则要检查 scope 是否足够，必要时用 id 与 headers 显式关联。
核心关键词table th scope screen reader - 0040
表格有多层表头时，td 的 headers 该怎么写？
年度、季度和收入类型叠在同一张报表上时，一个数字可能需要关联三个表头。给 th 设置唯一 id，并在对应数据格的 headers 中列出这些 id，辅助技术才能获得完整上下文；动态增删列时还要同步维护引用，不能只改视觉排版。
核心关键词table headers id 关联 表头 - 0041
time 的 datetime 怎样把“明天下午”变成机器可读时间？
活动页可以显示“10 月 9 日 15:00”，同时用 time 的 datetime 给出明确日期与时区偏移。可见文字和机器值要指向同一时刻，改期或本地化展示时一起更新；相对日期以及持续时间也要用各自合适的格式表达。
核心关键词time element datetime 机器可读 - 0042
视频的 subtitles 和 captions 轨道有什么区别？
教学视频的翻译字幕适合 subtitles，面向听不到声音的用户则需要 captions，把对白、重要音效和说话人线索都写进去。track 还支持描述、章节和元数据；语言标记、默认轨道与 WebVTT 时间轴都要在实际播放器中检查。
核心关键词track kind captions subtitles 可访问性 - 0043
什么时候应该用 ul 和 li，而不是几段文字或 div？
页脚导航的几个入口是并列项目，用 ul 包住 li 可以明确集合和项目边界；开户步骤有先后顺序则更适合 ol。圆点和横排属于 CSS 样式，移除圆点不必改掉列表结构；普通连续论述也不应只为排版硬拆成列表。
核心关键词ul ol 列表 语义