，得手动给每个加
role="region" 和
aria-roledescription="slide"，否则屏幕阅读器会把整页读成一段
display: block 和垂直流式布局，避免因 CSS 重置导致幻灯片叠在一起 <main class="slides">
<section><h2>封面</h2></section>
<section><p>内容页</p></section>
<section><img src="chart.svg"></section>
</main>
Reveal.js 里怎么让某页不参与自动播放
给对应 data-visibility="hidden" 属性，不是 data-slide="skip" 或 class="skip"——后者会被忽略，前者才是 Reveal.js 4+ 的正式开关。
- 这个属性只影响自动播放（
autoSlide）、键盘翻页（keyboard）和触摸滑动，不影响手动调用 Reveal.slide(2) 跳转 - 如果用了
data-transition="none"，记得同时加 data-visibility="hidden"，否则过渡动画仍会触发一次空白帧 - 备注页（
常见错误：写成 data-hide="true" 或 hidden（HTML 原生属性），这两者会让该页彻底从 DOM 流中移除，Reveal.js 初始化时直接跳过，后续也无法通过 API 激活
CSS-only 幻灯片为什么点不动、切不了
核心是漏了 :target 选择器绑定，或 :target 显示对应
- 所有
id，且 #slide2 必须严格匹配该 id - 默认状态下，所有
display: none；只有 display: block - 别用
opacity: 0 / 1 替代 display 切换——视觉隐藏但元素仍在流中，会导致焦点、尺寸计算、打印样式全部错乱
典型错误示例：:target 识别，应改用 id="slide-2"
移动端手势失效或响应迟钝
根本原因是没关掉浏览器默认的双击缩放和长按选中，同时 touch-action CSS 属性没设对。
- 必须在根容器（如
style="touch-action: pan-y pinch-zoom;"，不能只写 pan-y——否则横向滑动幻灯片时，手指稍微偏斜就会触发页面整体滚动 user-scalable=no 会导致双击放大后布局崩坏 - 不要用
pointer-events: none 盖一层蒙版来“防误触”——它会直接禁掉所有 touch 事件，包括 Reveal.js 的 swipe 监听
容易被忽略的一点：iOS Safari 对 touch-action 的支持从 iOS 13.4 才稳定，低于这个版本需降级为监听 touchstart/touchmove 手动 preventDefault，但代价是可能影响页面内表单输入框的聚焦
今天关于《HTML制作幻灯片及结构划分方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！
Golang观察者模式与事件机制详解
