html面试重在真实项目经验：button内嵌div会因内容模型冲突导致渲染异常；display:none与visibility:hidden在可访问性、seo及布局影响上本质不同；img缺失alt违反wcag强制标准；template与slot分属不同机制，不可混用。
HTML 面试题不是考你背了多少标签，而是看你有没有在真实项目里踩过坑、改过兼容性、调过语义结构——下面这几个问题，90% 的面试官会盯着细节问。
为什么 <button></button> 里面放 <div> 会触发渲染异常？
<p>这是个典型的“看似合法实则危险”的操作。<code><button></button> 是可替换元素（replaced element），其内容模型只接受 phrasing content（短语级内容），而 <div> 属于 <em>flow content</em>，浏览器会自动截断或重排 DOM 树。
<ul><li>Chrome 和 Safari 会静默把 <code><div> 提到 <code><button></button> 外面，导致点击区域错位
<div>，只渲染文本节点
<li>正确做法是用 <code><span></span> + CSS display: block 模拟布局，或改用 <role></role> 包裹 <div>
<h3>
<code>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 错误。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
alt=""表示该图纯装饰，屏幕阅读器跳过；空字符串不能省略引号，写成alt属性缺失就是错误 - 含信息的图必须写有意义的
alt文本，长度控制在 125 字符内（JAWS 截断阈值） - SVG 图标若内联，需用
<title></title>+role="img"替代alt，否则无法被识别
<template></template> 和 <slot></slot> 在实际组件开发中容易混淆的点
这两个都是“不渲染但可编程操作”的机制，但生命周期和作用域完全不同。
-
<template></template>内容永不激活，直到 JS 调用.content.cloneNode(true)插入 DOM；它没有作用域，变量全靠 JS 绑定 -
<slot></slot>是 Web Components 的内容分发机制，依赖自定义元素的 Shadow DOM，插槽内容在 light DOM 中定义，由 shadow root 渲染时动态投影 - 常见错误：试图在
<template></template>里写<slot></slot>—— 这不会生效，因为<template></template>不解析内部标签，<slot></slot>必须在 shadow root 中声明
真正难的不是记住这些规则，而是当产品要求“这个按钮要支持图标+文字+徽标+下拉箭头”时，你能立刻判断该用 <button></button> 套 <span></span> 还是换 <div role="button">，以及要不要补 <code>aria-expanded 和键盘焦点管理——这才是 HTML 功底的分水岭。
