HTML面试重在真实项目经验：button内嵌div会因内容模型冲突导致渲染异常；display:none与visibility:hidden在可访问性、SEO及布局影响上本质不同；img缺失alt违反WCAG强制标准；template与slot分属不同机制，不可混用。
HTML 面试题不是考你背了多少标签，而是看你有没有在真实项目里踩过坑、改过兼容性、调过语义结构——下面这几个问题，90% 的面试官会盯着细节问。
为什么 <button> 里面放 <div> 会触发渲染异常？
这是个典型的“看似合法实则危险”的操作。<button> 是可替换元素（replaced element），其内容模型只接受 phrasing content（短语级内容），而 <div> 属于 flow content，浏览器会自动截断或重排 DOM 树。
- Chrome 和 Safari 会静默把
<div>提到<button>外面，导致点击区域错位 - 旧版 Edge 可能直接忽略子
<div>，只渲染文本节点 - 正确做法是用
<span>+ CSSdisplay: block模拟布局，或改用<role="button">包裹<div>
display: none 和 visibility: hidden 在语义与可访问性上的区别
两者都让元素不可见，但对屏幕阅读器、SEO、DOM 占位的影响完全不同。
-
display: none：元素完全脱离渲染树，屏幕阅读器跳过，搜索引擎不索引，父容器高度塌陷 -
visibility: hidden：元素仍占文档流位置，屏幕阅读器默认仍可读（除非加aria-hidden="true"），搜索引擎照常抓取 - 如果目标是“隐藏但保留占位”，又不想被读出，必须组合使用：
visibility: hidden; position: absolute; clip: rect(0 0 0 0);或直接上aria-hidden="true"
为什么 <img> 不写 alt 会导致 Lighthouse 评分掉分？
这不是“建议”，而是 WCAG 2.1 A 级强制要求。Lighthouse 的 Accessibility 审计项会直接报 Image elements do not have [alt] attributes 错误。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
-
alt=""表示该图纯装饰，屏幕阅读器跳过；空字符串不能省略引号，写成alt属性缺失就是错误 - 含信息的图必须写有意义的
alt文本，长度控制在 125 字符内（JAWS 截断阈值） - SVG 图标若内联，需用
<title>+role="img"替代alt，否则无法被识别
<template> 和 <slot> 在实际组件开发中容易混淆的点
这两个都是“不渲染但可编程操作”的机制，但生命周期和作用域完全不同。
-
<template>内容永不激活，直到 JS 调用.content.cloneNode(true)插入 DOM；它没有作用域，变量全靠 JS 绑定 -
<slot>是 Web Components 的内容分发机制，依赖自定义元素的 Shadow DOM，插槽内容在 light DOM 中定义，由 shadow root 渲染时动态投影 - 常见错误：试图在
<template>里写<slot>—— 这不会生效，因为<template>不解析内部标签，<slot>必须在 shadow root 中声明
真正难的不是记住这些规则，而是当产品要求“这个按钮要支持图标+文字+徽标+下拉箭头”时，你能立刻判断该用 <button> 套 <span> 还是换 <div role="button">，以及要不要补 aria-expanded 和键盘焦点管理——这才是 HTML 功底的分水岭。
