reveal.js 快速入门：怎么创建第一个 HTML 幻灯片

一、准备工作：选择极简的引入方式

reveal.js 是一个基于 Web 技术的开源演示文稿框架，它把幻灯片呈现为一个个标准的 HTML 节点，支持 CSS3 动画过渡、代码语法高亮、演讲者双屏备注以及全景缩略图预览。

在实际使用中，构建 reveal.js 幻灯片有两种常见路径：一种是通过 npm 下载并配合构建工具打包，适合有深层定制需求的前端工程；另一种是直接通过公共 CDN 引入样式与脚本。对于首次接触并快速创建首个幻灯片的目标而言，通过公共 CDN 引入单文件方式最为直接：

• 零依赖环境：电脑无需预装 Node.js、npm 或任何构建脚本，只需一个纯文本编辑器（如 VS Code、Sublime Text 或系统自带记事本）和一个现代浏览器。
• 即写即看：保存为一个扩展名为 .html 的文件后，双击就能在 Chrome、Edge、Firefox 或 Safari 中全屏放映。
• 便于携带与分享：演示文稿就是一个完整的网页文件，发给任何人都能跨操作系统一致运行。

二、核心概念：理解 DOM 容器与多维空间结构

传统 PPT 往往是单一维度的从左至右翻页，而 reveal.js 的核心特色在于它支持“水平主线”与“垂直分支”构成的二维导航体系。在编写正文内容前，必须先理清页面中三个必不可少的容器层级：

1. 宿主外壳 <div class="reveal">：作为整个演示文稿的最外层视口。它负责监听键盘方向键、手势滑动、全屏切换等全局事件，并为内部幻灯片提供样式上下文。
2. 舞台视口 <div class="slides">：位于 .reveal 内部，是所有幻灯片的总挂载容器。reveal.js 默认会给它设定一个固定的基准画布分辨率（默认为 960×700 像素），并在不同尺寸的显示器上自动保持等比缩放，避免排版在不同屏幕上错位。
3. 单张幻灯片 <section>：直接代表一张幻灯片视图。
   • 水平推进：直接并列在 .slides 下的多个 <section> 会在水平方向依次排布，按键盘向右键即可按主线顺序浏览。
   • 垂直下潜：如果在一个 <section> 内部再嵌套子 <section>，这些子卡片就会形成一个垂直列。演讲者可以在讲到某个主题时按向下键展开细节，讲完后再按向右键返回主线。

三、手把手操作：四步完成首个 HTML 幻灯片

下面按照实际操作顺序，一步步从零编写完整的 index.html 文件。

步骤 1：新建 index.html 文件并写入骨架

在电脑任意工作目录（例如桌面）创建一个空文件夹，在其中新建一个名为 index.html 的文件，写入标准的 HTML5 模板结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个 reveal.js 幻灯片</title>
</head>
<body>

</body>
</html>

步骤 2：在 head 与 body 引入核心资源

运行 reveal.js 至少需要三项资源：

• reveal.css：提供幻灯片的基本定位、隐藏、层叠及转场动画规则。
• 主题样式表：负责文字配色、字体和背景底色。常用的预设主题有 black.css（经典黑底）、white.css（明亮白底）、league.css、sky.css 等。本次选用白底的 white.css。
• reveal.js 核心脚本：提供事件侦听与翻页调度引擎。

将样式链接放到 <head> 中，将脚本放到 <body> 的底部：

<!-- 放在 <head> 中 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">

<!-- 放在 <body> 末尾 -->
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>

步骤 3：编写幻灯片内容（水平与纵向结合）

在 <body> 中添加带有固定类名的外层容器，并编写三组演示页面：封面、带有垂直子页的章节、以及总结页：

<div class="reveal">
  <div class="slides">

    <!-- 第 1 页：封面页 -->
    <section>
      <h2>你好，reveal.js！</h2>
      <p>这是我的第一个基于 HTML5 的交互式幻灯片。</p>
      <p><small>请按键盘右箭头 [→] 继续阅读</small></p>
    </section>

    <!-- 第 2 组：带有垂直深入子页面的复合章节 -->
    <section>
      <!-- 垂直子页 1 -->
      <section>
        <h3>章节：核心优势</h3>
        <p>reveal.js 支持二维矩阵排版。</p>
        <p><small>按键盘下箭头 [↓] 查看详细特性</small></p>
      </section>

      <!-- 垂直子页 2 -->
      <section>
        <h3>详细特性说明</h3>
        <ul>
          <li>基于原生 HTML/CSS/JS，自由定制样式</li>
          <li>开箱支持移动端触控滑动与手势</li>
          <li>按 [↑] 可返回本章封面，按 [→] 进入下一章节</li>
        </ul>
      </section>
    </section>

    <!-- 第 3 页：总结与结束 -->
    <section>
      <h2>快速入门完成</h2>
      <p>已成功掌握最小运行示例！</p>
    </section>

  </div>
</div>

步骤 4：调用初始化方法激活引擎

在 reveal.js 脚本标签之后，编写一个内联 <script> 标签，调用 Reveal.initialize()。在初始化对象中传入常用配置项：

<script>
  Reveal.initialize({
    // 启用 URL Hash 锚点记录（刷新或分享链接可准确定位当前页码）
    hash: true,
    // 显示右下角的导航方向控制箭头
    controls: true,
    // 显示底部的放映进度条
    progress: true,
    // 显示当前页码与总页数
    slideNumber: true,
    // 页面切换动效（可选：none, fade, slide, convex, concave, zoom）
    transition: 'slide'
  });
</script>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第一个 reveal.js 幻灯片</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css">
</head>
<body>

  <div class="reveal">
    <div class="slides">
      <section>
        <h2>你好，reveal.js！</h2>
        <p>这是我的第一个基于 HTML5 的交互式幻灯片。</p>
        <p><small>按键盘右箭头 [→] 继续</small></p>
      </section>
      <section>
        <section>
          <h3>第二章：核心亮点</h3>
          <p>支持垂直深入结构。</p>
          <p><small>按键盘下箭头 [↓] 查看更多</small></p>
        </section>
        <section>
          <h4>垂直子页面内容</h4>
          <p>在这里可以补充更多技术细节或代码说明。</p>
        </section>
      </section>
      <section>
        <h2>全篇结束</h2>
        <p>恭喜你已经成功运行首个幻灯片！</p>
      </section>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      slideNumber: true,
      transition: 'slide'
    });
  </script>
</body>
</html>

四、演示与交互：高频快捷键与进阶技巧

当在浏览器中打开该文件后，reveal.js 默认赋予了页面极强的演讲互动能力。掌握以下快捷键可以让演示体验与传统 PPT 工具媲美：

巧用碎片动效（Fragments）实现单步显现

在很多演示场景中，我们不希望一次性把所有列表内容展现给观众，而是希望讲一条放一条。在 reveal.js 中，只需为 HTML 元素添加 class="fragment" 即可实现这一效果：

<section>
  <h3>核心学习步骤</h3>
  <ul>
    <li class="fragment">第一步：理解 DOM 容器层级</li>
    <li class="fragment">第二步：引入 CDN 基础静态资源</li>
    <li class="fragment">第三步：按需嵌套 Section 标签</li>
  </ul>
</section>

当切到该页时，列表项会默认隐藏；每按一次空格或方向键，下一条内容才会伴随淡入动效逐步浮现。

五、避坑检查与进阶交付

初次使用 reveal.js 编写 HTML 幻灯片时，读者容易遇到一些典型疑问或排错阻碍。结合下方的四维核查表，可以快速排查故障并完成最终演示文件的导出：

1. 为什么页面出现空白或样式错乱？

如果在浏览器中打开后看到的是纯垂直排列的普通 HTML 文本，或者控制台报错，应按顺序排查以下三点：

• 检查容器类名是否拼错：外层必须是 class="reveal"，内层必须是 class="slides"。单复数拼写错误（如写成 slide）会导致引擎无法抓取舞台。
• 检查 CDN 资源加载状态：按 F12 打开浏览器开发者工具的 Console（控制台）和 Network（网络）标签页。如果发现 404，确认网络是否正常连接，或者 CDN 链接中的版本号路径是否存在拼写瑕疵。
• 确认初始化代码的执行顺序：Reveal.initialize() 必须位于 <div class="reveal"> DOM 结构之后。若放在 <head> 中执行，由于舞台节点尚未在 DOM 树中生成，会导致初始化失败。

2. 本地直接双击与启动简易 HTTP 服务的区别

上面编写的极简单文件通过双击（file:/// 协议）即可顺畅运行基础演讲和动画。但是，如果你后续需要使用外部 Markdown 独立文件加载（data-markdown="slides.md"）或使用 S 键演讲者双屏模式，现代浏览器的同源安全策略（CORS）会拦截本地文件的跨窗口通信与异步读取。

遇到这类场景时，只需在 index.html 所在目录下打开终端，运行一行极其轻量的内置本地服务命令即可：

# 使用系统内置的 Python 启动本地 Web 服务器
python3 -m http.server 8000

# 或者使用 Node.js 的 npx 临时启动
npx serve

随后在浏览器访问 http://localhost:8000，所有涉及网络通信的高级插件功能即可全部正常运转。

3. 如何导出为不可篡改的 PDF 文件？

在需要向主办方提交静态讲义或将幻灯片归档时，reveal.js 提供了内置的 PDF 打印机制：

1. 使用 Google Chrome 或 Microsoft Edge 浏览器打开幻灯片。
2. 在网页地址栏的 URL 尾部添加参数 ?print-pdf，例如：http://localhost:8000/?print-pdf 或 index.html?print-pdf 并刷新。
3. 页面会自动重新排版为适合分页打印的平铺视图。按下快捷键 Ctrl + P（Mac 为 Cmd + P）调出打印窗口。
4. 在打印设置中将目标打印机选择为“另存为 PDF”，方向设置为“横向（Landscape）”，边距选择“无（None）”，并务必勾选“背景图形（Background graphics）”，点击保存即可获得高清可交付的矢量幻灯片 PDF。