纯HTML无法单独实现轮播图，需CSS定位与JavaScript控制配合；结构须为三层嵌套：外层.carousel（窗口）、中间.carousel-inner（滚动层）、内层.carousel-item（图片项），且图片必须显式设置宽高防塌陷。
纯 HTML 无法单独实现轮播图——它只是骨架，必须配合 CSS 定位 + JavaScript 控制逻辑才能动起来。直接写 <div class="carousel"> 不会自动切换，也不会隐藏多余图片。
<h3>HTML结构必须包含三个核心容器</h3>
<p>轮播图的 HTML 不是“随便套个 div”，而是有明确职责划分的三层嵌套：</p>
<ul><li><code><div class="carousel">：最外层容器，设固定宽高 + <code>overflow: hidden，起“窗口”作用
<div class="carousel-inner">：中间滚动层，所有图片项并排水平排列（用 <code>display: flex 或绝对定位）
<div class="carousel-item">：每个图片项，建议用 <code><img alt="HTML中如何创建轮播图的基本结构" > 标签而非背景图，利于语义化、SEO 和懒加载
为什么不用 - ？
虽然部分教程用 <ul class="carousel-images"></ul> 包裹 <li>，但实际开发中更推荐 <div class="carousel-inner"> + 多个 <code><div class="carousel-item">：
<ul>
<li>
<code><ul></ul> 暗示“列表语义”，而轮播图本质是视觉流，不是内容序列
<div> 更灵活，避免默认 <code>margin / padding 干扰布局
carousel-item 类名，便于后续扩展常见结构错误：图片没加 width/height 导致塌陷
如果只写 <img src="a.jpg" alt="HTML中如何创建轮播图的基本结构" > 而不设尺寸，.carousel-item 高度可能为 0，整个轮播区域消失。必须显式控制：
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="HTML中如何创建轮播图的基本结构" >加width="100%" height="auto"属性，或用 CSS 设置max-width: 100%; height: auto; - 或统一用
object-fit: cover+ 固定父容器高宽，防止拉伸变形 - 切忌依赖图片原始尺寸——网络加载慢时，未设置宽高的
<img alt="HTML中如何创建轮播图的基本结构" >会引发页面重排（reflow）
要不要加 data-ride="carousel"？
这个属性只对 Bootstrap 有效，纯原生轮播完全不需要。加了反而容易误导：以为写了它就能自动运行，结果发现没引入 JS 文件，控制台报错 Uncaught ReferenceError: bootstrap is not defined。真实项目中，该属性属于「框架耦合信号」，非必要不写。
