纯 html 无法实现 netflix 首页交互效果，仅能构建静态结构；需用 flex/grid 布局实现垂直分块与水平滚动，配合 srcset/picture 响应式图片、loading="lazy" 懒加载及基础可访问性支持。
纯 HTML 无法仿出 Netflix 首页的交互和动态内容加载——它依赖 JavaScript 渲染轮播区、悬停缩放、用户登录态、视频元数据拉取等，HTML 只能做静态结构骨架。
用 flex 和 grid 搭出 Netflix 主体布局结构
Netflix 首页核心是「垂直分块 + 每块内水平滚动」，不能靠 float 或老式 inline-block 硬凑。现代写法是外层用 flex 做纵向流，每行（如“热门影片”“继续观看”）设为 display: flex 并加 overflow-x: auto 实现横向滑动。
关键点：
-
scroll-behavior: smooth加在容器上能让滚动更自然（但不兼容 IE） - 每个卡片用
min-width: 200px+flex: 0 0 auto防止被压缩变形 - 务必加
-webkit-scrollbar相关样式隐藏原生滚动条，否则破坏视觉一致性 - 不要给父容器设固定高度——Netflix 所有区块高度是自适应内容的
图片懒加载和响应式海报必须用 srcset + picture
Netflix 海报尺寸多变：桌面端宽屏、平板横竖、手机小图。只写一个 src 会导致小屏下载大图，浪费流量且慢。
正确做法：
- 用
<picture></picture>包裹多个<source media="(max-width: 768px)" srcset="..."></source> - 主
<img>的srcset提供 1x/2x 版本，sizes告诉浏览器不同断点下占视口宽度比（如sizes="(max-width: 768px) 100vw, 30vw"） - 所有海报图必须预设
width和height属性（哪怕只是占位值），防止布局抖动 - 别用 CSS
background-image放海报——无法被爬虫识别，也不支持懒加载原生属性loading="lazy"
轮播组件没有 JS 就只能做「单帧静态快照」
所谓“仿 Netflix 轮播”，如果只用 HTML/CSS，本质是做一个带左右箭头的固定图组容器，点击箭头只能靠锚点跳转或伪类切换（如 :target），无法真正滚动、缓动、循环或响应鼠标拖拽。
常见翻车点：
- 用
transform: translateX()写死偏移量 → 无法适配不同屏幕宽度下的卡片数量 - 给所有卡片加
position: absolute→ 键盘焦点丢失，无障碍访问失败 - 忽略
tabindex和aria-live→ 视障用户完全无法感知当前播放项 - 把「下一帧」按钮写成
<div onclick="..."> → 无键盘回车支持，不符合可访问性基础要求 <p>真要接近效果，至少得用轻量 JS 控制 <code>scrollLeft或transform，哪怕只有 20 行代码。纯 HTML 的“轮播”只是幻灯片快照，不是交互组件。
