HTML 结构

相关源文件

• README.md
• demo.html
• index.html
• js/reveal.js

本页面介绍了创建 reveal.js 演示文稿所需的基本 HTML 结构。它涵盖了构建演示文稿所需的核心元素、幻灯片组织模式和关键属性。有关使用 Markdown 替代 HTML 进行演示文稿的信息，请参阅 Markdown 支持。

基本结构

reveal.js 演示文稿需要特定的 HTML 结构才能正常运行。最基本的形式是包含一个类名为 reveal 的容器元素，其中包含另一个类名为 slides 的元素。在 slides 容器内，使用 <section> 元素创建单个幻灯片。

来源： index.html1-40 demo.html1-40

核心容器元素

reveal.js 演示文稿的 DOM 层级结构遵循框架正确运行所需的特定模式。

来源： index.html16-22 js/reveal.js140-143

在初始化过程中，reveal.js 会查找这些特定的元素

• 它查找 .reveal 元素作为演示文稿的根目录
• 在其中，它需要一个 .slides 容器来存放所有幻灯片内容

如果找不到这些元素，初始化将失败并显示错误，如 js/reveal.js133-143 中所示。

幻灯片组织

Reveal.js 支持两种幻灯片导航方式：水平（主）和垂直（次）。这创建了幻灯片的二维布局。

水平幻灯片

水平幻灯片是主要的组织方式，它们是通过将 <section> 元素作为 .slides 容器的直接子元素来创建的。

来源： index.html18-21 js/reveal.js1250-1251

垂直幻灯片

垂直幻灯片是通过将 <section> 元素嵌套在父级 <section> 内创建的。这会形成一个“堆叠”的幻灯片，可以垂直导航。

来源： demo.html48-71 js/reveal.js1011-1065

幻灯片导航结构

以下图示说明了幻灯片如何在二维网格中组织。

来源： demo.html48-71 js/reveal.js1250-1304

幻灯片内容元素

在每个 <section> 元素内部，您可以使用标准的 HTML 元素来构建内容。

常用 HTML 元素

Reveal.js 可与标准的 HTML 元素配合使用来构建幻灯片内容

• 标题： <h1>、<h2> 等。
• 文本元素： <p>、<blockquote> 等。
• 列表： <ul>、<ol>、<li>
• 图片： <img>
• 代码： <pre><code>
• 表格： <table>、<tr>、<td>

来源： demo.html342-389

布局辅助

Reveal.js 提供布局辅助类来排列内容。

来源： demo.html152-163 demo.html167-171 demo.html219-222 js/reveal.js898-920

幻灯片属性

Reveal.js 使用 HTML 数据属性来定制幻灯片行为和外观。

核心幻灯片属性

来源： demo.html80-85 demo.html87-101 demo.html149-172 demo.html286-317 js/reveal.js298-316

附加属性

• data-markdown： 表示幻灯片内容使用 Markdown 编写。
• data-auto-animate-id： 用于自动动画的幻灯片链接。
• data-auto-animate-restart： 强制重新启动动画。
• data-background-color： 设置背景颜色。
• data-background-image： 设置背景图片。
• data-background-video： 设置背景视频。
• data-background-iframe： 将 iframe 嵌入为背景。
• data-background-interactive： 使背景 iframe 具有交互性。

来源： demo.html182-198 demo.html300-312 demo.html335-340 js/reveal.js1436-1441

片段系统

片段是可以在幻灯片中分步显示的元素。

可以通过添加修饰类来应用不同的片段样式。

来源： demo.html225-250 js/reveal.js8

HTML 到 Controller 的关系

下图展示了演示文稿中的 HTML 元素与 reveal.js 控制器的对应关系

来源： js/reveal.js1-19 js/reveal.js108-126

必需的 CSS 和 JavaScript

要使 reveal.js 演示文稿正常工作，您需要包含特定的 CSS 和 JavaScript 文件

必需文件

来源： index.html9-14 index.html24-27 index.html32-36

初始化

在设置好 HTML 结构后，您必须使用 JavaScript 初始化 reveal.js

初始化过程执行以下操作：

1. 验证所需的 DOM 元素是否存在
2. 应用配置选项
3. 加载插件
4. 设置事件监听器
5. 准备演示文稿以供查看

来源： index.html28-38 js/reveal.js131-168 js/reveal.js195-248

幻灯片识别和导航

Reveal.js 使用数字索引来识别和导航幻灯片

来源： js/reveal.js61-63 js/reveal.js1231-1287

完整的结构示例

以下是一个完整的 reveal.js 演示文稿结构的最小示例

来源： index.html1-40 demo.html1-40 demo.html48-71 demo.html286-317

DOM 元素访问

在初始化过程中，reveal.js 将关键 DOM 元素的引用存储在一个 dom 对象中

来源： js/reveal.js88 js/reveal.js140-141 js/reveal.js175-188 js/reveal.js358-374

这些 DOM 元素在代码库中被广泛用于操作演示文稿。在设置过程中，会创建额外的辅助元素并将其附加到 DOM 中，用于控件、进度条、背景和其他功能。