轮播图正确HTML结构必须为三层嵌套：外层.carousel设overflow:hidden和固定宽高；中层.carousel-inner用flex或absolute排列；内层.carousel-item包裹img。每张img须显式设宽高或通过CSS约束，导航按钮与指示器须用type="button"的button元素，初始仅一张.carousel-item带active类。
轮播图 HTML 结构必须用三层嵌套容器
单层 <div class="carousel"> 包一堆 <img> 是错的，会导致 CSS 定位失效、JS 控制混乱、后续加动画或响应式极难扩展。真正可用的结构是明确分工的三层：
-
<div class="carousel">：最外层“窗口”，必须设overflow: hidden+ 固定宽高（如width: 100%; height: 400px），否则图片溢出或容器塌陷 -
<div class="carousel-inner">：中间“滚动层”，所有图片项并排排列（用display: flex或position: absolute），不设宽高，由子项撑开 -
<div class="carousel-item">：每个图片项，内部放<img>，不要直接把<img>当作轮播项顶层元素
常见错误是用 <ul> 或 <figure> 替代 <div class="carousel-item">——语义错位、默认样式干扰大、JS 选择器难统一。
每张图必须显式设置宽高或约束尺寸
只写 <img src="a.jpg" alt="..."> 不设尺寸，页面加载时会反复重排，轮播区域可能瞬间消失或跳动。这不是 JS 没跑起来的问题，是 HTML 层就漏了防护：
- 推荐给
<img>加width="800" height="450"属性（像素值需与设计稿一致），强制保留占位 - 或用 CSS 统一控制：
.carousel-item img { width: 100%; height: auto; object-fit: cover; }，但前提是.carousel-item有固定高（如height: 450px） - 绝对不要依赖图片原始尺寸——网络慢、CDN 故障、404 时，
offsetHeight可能为 0，整个轮播塌成一条线
导航按钮和指示器要放在正确层级，且禁用默认行为
按钮和指示器不是装饰，它们要能被 JS 精准绑定事件，同时在无 JS 或报错时也不破坏布局：
立即学习“前端免费学习笔记（深入）”；
- 左右箭头用
<button type="button" class="carousel-prev">，不能用<a href="#">或没type的<button>，否则点击会跳顶或刷新 - 指示器放
<div class="carousel-indicators">内，每个点用<button type="button" data-index="0">，不用<span>——可聚焦、可键盘操作、语义清晰 - 所有按钮默认不设
disabled，JS 初始化后按需添加；避免提前写disabled导致首次渲染不可点
初始状态必须手动指定第一张激活，且仅一张
靠 CSS 默认显示第一张（比如只给第一个 <img> 加 display: block）不可靠——DOM 加载顺序、JS 执行时机、图片加载失败都会导致多图叠加或全黑：
- HTML 中只有一张带
class="active"，例如：<div class="carousel-item active"><img ...></div> - JS 初始化函数第一件事就是确认当前只有一个
.active，用document.querySelector(".carousel-item.active")检查，不存在则补上，存在多个则清空后重设 - 别信 “CSS 里写
.carousel-item:first-child { display: block; }” ——它无法应对动态插入、懒加载或服务端渲染场景
结构搭错，后面所有动画、暂停、触摸支持都建立在流沙之上。最常被忽略的是容器高度锁定和图片尺寸防护，这两点上线后才暴露，但修复成本远高于写代码时多敲两行属性。
