html-slides是一个用于创建直接在网络浏览器中运行的演示文稿幻灯片的模板。要查看此类幻灯片的实际效果，请查看演示幻灯片。
演示特点
幻灯片功能
要从幻灯片构建演示文稿，必须在计算机上安装 Node.js。
该演示文稿可以使用任何主要的网络浏览器（Firefox、Chrome、Edge、Safari、Opera...）显示，并且不需要任何额外的软件。
下载或克隆 html-slides 存储库，然后开始在template文件夹中创建演示文稿。您不需要此文件夹之外的任何内容，并且可以重命名或移动它。
template文件夹包含以下文件和文件夹：
slides包含您的幻灯片及其媒体资源。index.build.html包含幻灯片列表。deploy将您的幻灯片组装到单个index.html文件中。index.html是生成的演示文稿。style包含 CSS 样式文件 ( style.inc.css ) 和字体。您可以在此处调整默认字体和颜色。skeleton包含 HTML、CSS 和 JavaScript 代码，可将您的幻灯片转换为演示文稿。您不需要修改这里的任何内容。 幻灯片通常是包含几行 HTML 代码的文件或 SVG 文件。对于纯视频或纯图像幻灯片，框架提供了预定义的 HTML 代码。
index.build.html文件包含演示文稿的标题和幻灯片顺序：
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
slide ( 'slides/title.inc.html' ) ;
slide ( 'slides/intro.inc.html' , 'Introduction' ) ;
slide ( 'slides/system.inc.svg' , 'System' ) ;
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;
slide ( 'slides/next-steps.inc.html' , 'Next steps' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >第一行和最后一行导入演示文稿框架，并且必须保持原样。每张幻灯片均采用以下参数：
文件扩展名决定幻灯片的类型：
.inc.html是 HTML 幻灯片（见下文）。.inc.svg是 SVG 幻灯片（见下文）。.mp4 、 .webm或.ogg是纯视频幻灯片。它们会产生幻灯片上显示的视频播放器。它们最适合“黑色”风格。.png 、 .jpg或.jpeg是纯图像幻灯片。合适的样式是“黑色”（将图像放置在黑色背景上）和“覆盖”（覆盖整个幻灯片）。准备的幻灯片尺寸为 1000 x 600 像素。在演示模式下，它们会缩放以适合显示器的尺寸。
带有要点的简单 HTML 幻灯片 ( slides/slide-name.inc.html ) 如下所示：
< div class =" text left w600 " >
< h1 > Slide title </ h1 >
< ul >
< li > This is bullet 1 </ li >
< li > This is bullet 2 </ li >
< li > This is bullet 3 </ li >
</ ul >
</ div >
< img class =" right w400 " src =" slides/jigsaw.jpg " >该幻灯片在右侧（400 像素）显示图像（img 标签），并使用左侧剩余的 600 像素作为幻灯片标题（h1 标签）和项目符号点（ul 标签、ol 标签、li 标签）。
该模板包含定位文本和图像以及插入表格的示例。
SVG 格式 ( slides/slide-name.inc.svg ) 适用于带有矢量图形的幻灯片，例如图表或原理图。可以使用 Inkscape 或任何其他能够保存或导出 SVG 文件的软件来绘制此类幻灯片。
SVG 文档（页面）的大小必须为 1000 x 600 像素 ( width="1000" height="600" )。 SVG 代码在导入时会进行一些清理。特别是，删除了 Inkscape 特定信息和默认 ID（例如rect1098 ）。
要重建演示文稿 ( index.html )，请打开终端窗口（命令行）并运行
./deploy/run
该脚本不断寻找更改，并在必要时重建index.html 。要退出它，请在终端窗口中按Ctrl-C 。
部署脚本粗略地检查您的 HTML 代码。特别是，如果标签未正确关闭，它会发出警告。
要开始演示，请按F11启用全屏，然后按p切换到演示模式。使用键盘上的左/右箭头键（或Page Up / Page Down ）移至上一张/下一张幻灯片。在移动设备上，您可以向左/向右滑动。
右上角的菜单按钮（三条纹）可打开幻灯片索引。单击任何幻灯片都会切换到该幻灯片。
如果您在演示过程中激活另一个窗口（或幻灯片中的 iframe），菜单按钮会变成红色，表示箭头键（移至下一张幻灯片）不起作用。单击该红色按钮将再次聚焦演示文稿，并使箭头键起作用。
许多浏览器允许打印幻灯片。每张幻灯片都适合 A4 横向页面。
当您连接投影仪作为外部屏幕时，您可以在两个屏幕上显示演示文稿。
为此，请在两个单独的浏览器窗口（同一浏览器）中打开相同的演示文稿。将一个窗口放置在主屏幕上，将另一个窗口放置在外部屏幕上（全屏模式）。两个窗口将始终显示同一张幻灯片。
请注意，交互式内容可能并不总是同步的。
在笔记本电脑上运行的演示可以通过移动电话远程控制。这需要互联网连接，因为控制消息是通过服务器发送的（https://viereck.ch/remote/）。
要进行此设置：
使用video标签插入视频：
< video controls width =" 640 " >
< source src =" slides/video.mp4 " type =" video/mp4 " >
< a href =" slides/video.mp4 " > Play video with external player </ a >
</ video >Web 浏览器支持多种视频格式。几乎所有网络浏览器都支持 MP4（即 MPEG-4/H.264 视频格式）。最流行的浏览器还可以播放 WebM（视频/webm）或 Ogg/Theora（视频/ogg）文件。
类似地，使用音频标签插入音频文件。
可以简单地从幻灯片索引创建带有全屏视频的幻灯片：
slide ( 'slides/video.mp4' , 'Video' , 'black' ) ;幻灯片索引可以使用topic和subTopic来构建：
< ?
use ( 'skeleton/presentation.lib.js' ) ;
title ( 'Title of your presentation' ) ;
topic ( 'Topic 1' ) ;
subTopic ( 'Subtopic 1' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
subTopic ( 'Subtopic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
topic ( 'Topic 2' ) ;
slide ( '...' ) ;
slide ( '...' ) ;
include ( 'skeleton/presentation.inc.html' ) ;
? >主题和副主题仅出现在幻灯片索引中。它们对幻灯片或演示流程没有影响。
名为slides/slide-name.inc.js的 JavaScript 文件会自动插入各自的幻灯片中。 JavaScript 允许创建带有模拟、动画、交互元素等的高级幻灯片。
一个简单的幻灯片脚本可能如下所示：
const counter = document . getElementById ( 'fancySlideCounter' ) ;
let count = 0 ;
slide . onSlideAppears = function ( ) {
count += 1 ;
counter . textContent = 'This slide has appeared ' + count + ' times so far.' ;
} ;
slide . onSlideDisappears = function ( ) {
// ...
} ;加载演示文稿时将执行该代码。 slide是对相应幻灯片<div>元素）的引用。当幻灯片出现在屏幕上时，将调用onSlideAppears函数。相反，当幻灯片消失时会调用onSlideDisappears 。最好仅在幻灯片可见时运行动画。请注意，多张幻灯片可能同时可见。
为了避免变量和函数名称冲突，幻灯片的 JavaScript 代码被放置在匿名函数中。生成的幻灯片具有以下结构：
< div class =" slide " >
<!-- The slide's HTML or SVG content -->
< script >
( function ( ) {
const slide = document . currentScript . parentElement ;
// The slide's JavaScript code
} ) ( ) ;
</ script >
</ div >幻灯片仍然可以通过window对象相互通信：
// In slide A
let fancyState = ... ;
window . getFancyState = function ( ) {
return fancyState ;
} ;
// In slide B
const state = window . getFancyState ( ) ;
...元素 ID 在整个 HTML 页面中必须是唯一的。因此，幻灯片应使用唯一的幻灯片名称作为前缀（上例中的fancySlide ）。
交互式幻灯片可以通过远程控制将其状态与其他实例同步（见上文）。请注意，这仅适用于少量数据，例如几个数字、元素 ID 或短文本。
以下示例使用sendState和状态侦听器来同步文本输入的内容：
const input = document . getElementById ( 'fancySlideInput' ) ;
slide . onSlideAppears = function ( ) {
remote . addStateListener ( onStateChanged ) ;
} ;
slide . onSlideDisappears = function ( ) {
remote . removeStateListener ( onStateChanged ) ;
} ;
// Receive a state update
function onStateChanged ( state ) {
if ( ! state . fancySlide ) return ;
input . value = state . fancySlideText ;
}
// Send a state update when the text changes
input . oninput = function ( ) {
remote . sendState ( 'fancySlideText' , input . value ) ;
} ; 
