最稳妥结构是用嵌套<section>并外包<main class="slides">；Reveal.js中禁用自动播放需加data-visibility="hidden"；CSS-only方案依赖:id与:target匹配及display切换；移动端须设touch-action和viewport。
HTML幻灯片用什么结构最稳妥
用 <section> 套 <section>，外层加一个 <div class="slides"> 或 <main> 容器。别用 <article> 或 <aside>——语义错位，轮播逻辑和可访问性支持都会出问题。
- 浏览器原生滚动/手势切换依赖的是块级容器的层级关系，
<section>是唯一被所有 slide 库（Reveal.js、impress.js、even CSS-only 方案）默认识别的分页标签 - 如果混用
<div>，得手动给每个加role="region"和aria-roledescription="slide"，否则屏幕阅读器会把整页读成一段 -
<section>自带隐式display: block和垂直流式布局，避免因 CSS 重置导致幻灯片叠在一起
<main class="slides"> <section><h2>封面</h2></section> <section><p>内容页</p></section> <section><img src="chart.svg"></section> </main>
Reveal.js 里怎么让某页不参与自动播放
给对应 <section> 加 data-visibility="hidden" 属性，不是 data-slide="skip" 或 class="skip"——后者会被忽略，前者才是 Reveal.js 4+ 的正式开关。
- 这个属性只影响自动播放（
autoSlide）、键盘翻页（keyboard）和触摸滑动，不影响手动调用Reveal.slide(2)跳转 - 如果用了
data-transition="none"，记得同时加data-visibility="hidden"，否则过渡动画仍会触发一次空白帧 - 备注页（
<aside class="notes">）不用额外处理，它天然不参与主流程
常见错误：写成 data-hide="true" 或 hidden（HTML 原生属性），这两者会让该页彻底从 DOM 流中移除，Reveal.js 初始化时直接跳过，后续也无法通过 API 激活
CSS-only 幻灯片为什么点不动、切不了
核心是漏了 :target 选择器绑定，或 <a> 链接 href 指向错误。纯 CSS 方案不依赖 JS，全靠 URL hash + :target 显示对应 <section>。
立即学习“前端免费学习笔记（深入）”；
- 所有
<section>必须有id，且<a href="#slide2">中的#slide2必须严格匹配该 id - 默认状态下，所有
<section>要设display: none；只有<section:target>设为display: block - 别用
opacity: 0 / 1替代display切换——视觉隐藏但元素仍在流中，会导致焦点、尺寸计算、打印样式全部错乱
典型错误示例：<section id="2"> 配 <a href="#2"> 看似合理，但数字开头的 ID 在某些老浏览器中不被 :target 识别，应改用 id="slide-2"
移动端手势失效或响应迟钝
根本原因是没关掉浏览器默认的双击缩放和长按选中，同时 touch-action CSS 属性没设对。
- 必须在根容器（如
<main class="slides">）上加style="touch-action: pan-y pinch-zoom;"，不能只写pan-y——否则横向滑动幻灯片时，手指稍微偏斜就会触发页面整体滚动 -
<meta name="viewport">缺一不可：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">，漏掉user-scalable=no会导致双击放大后布局崩坏 - 不要用
pointer-events: none盖一层蒙版来“防误触”——它会直接禁掉所有 touch 事件，包括 Reveal.js 的 swipe 监听
容易被忽略的一点：iOS Safari 对 touch-action 的支持从 iOS 13.4 才稳定，低于这个版本需降级为监听 touchstart/touchmove 手动 preventDefault，但代价是可能影响页面内表单输入框的聚焦
