轮播图必须用包裹，因浏览器无“轮播”语义，js和css依赖dom层级实现显隐、位移等控制；须含alt、width、height属性，禁用等复杂标签。
轮播图必须用 浏览器不识别“轮播”这个语义，所有控制逻辑（显隐、位移、索引）都依赖 DOM 层级关系。如果把 这会导致：无法用 正确结构只有一种主流模式： 初学最容易忽略的是 必须用 原因很实际： 所有按钮必须设 以下结构看似合理，实测会导致切换逻辑断裂或样式失效： 轮播的稳定性，90% 来自结构干净——<div> 包裹，<code><img> 是唯一合法的图片容器标签，不能用 <picture></picture>、<figure></figure> 或直接写多个 <img> 平铺在 body 里。
为什么必须用
<div> 套 <code><img>？
<img> 直接丢在 下，JS 没法批量选中、CSS 没法统一设 position: absolute 或 display: none。常见错误是写成这样：@@##@@
@@##@@
@@##@@
document.querySelectorAll('.carousel img') 安全获取全部图片；切换时容易漏清状态；响应式或动画时布局失控。<div class="carousel"><div class="carousel-inner">
<img src="a.jpg"><img src="b.jpg"><img src="c.jpg">
</div></div>。外层 <div> 提供作用域，内层 <code><div> 提供定位上下文或 flex 容器，每张图严格为独立 <code><img> 子元素。
<img> 标签必须带哪些属性？alt 和宽高控制——不是可选，是功能前提：
alt 必须写，否则图片加载失败时无法降级显示描述，且部分屏幕阅读器会跳过无 alt 的 <img>
<img> 应有明确的 width 和 height 属性（如 width="800" style="max-width:90%"），避免 layout shiftsrc 写逗号分隔多图（如 src="a.jpg,b.jpg"），src 只接受单个 URL，写错等于图片不显示loading="lazy" 或 <picture></picture> 的 <source></source>，这些会干扰 JS 对图片加载状态的判断，初学先关掉导航控件该用
<button></button> 还是 <a></a>？<button type="button"></button>，不是 <a href="#"></a> 或 <span></span>。
<a></a> 默认触发页面跳转或锚点滚动，即使加 preventDefault() 也容易漏掉，尤其在移动端会触发意外 focus 或缩放<button></button> 天然可聚焦、可键盘操作、点击无副作用，加 data-index="2" 也更安全（<a></a> 的 href 会被解析为 URL，可能污染数据）<button type="button"></button>，别用 <div> 或 <code><li>，否则无法用空格/回车触发，也不符合无障碍规范
type="button"，否则在 <form></form> 内会默认提交。绝对不能用的标签组合
<img> 嵌在 <figure><figcaption></figcaption></figure> 里：语义正确但增加 DOM 深度，JS 查找目标图时容易多走一层，且 <figure></figure> 默认有 margin，撑开轮播高度<ul><li><img></li></ul>：列表项自带 display: list-item 和 margin，破坏层叠定位，CSS 调整成本陡增<img> 的 data URL：根本无法拆解为多张图，JS 没法做索引控制<div> 和 <code><img> 是唯二不可替换的基础标签，其余都是锦上添花。别为了“语义化”提前引入复杂标签，等轮播能稳稳切图了再考虑 <figure></figure> 或 <picture></picture>。
