3. 特色

6. 页面样式统一、美观
   精心定制了常见页面元素的样式，如色彩、对齐、大小、字体、行距等，并可以一次性地更改所有文稿的样式。
7. 支持多种页面版式
   定义了多种页面分栏版式，以及图文框浮动对齐方式。
8. 可结合学校的智慧教室功能在页面自由书写
   可直接在触摸屏上用手指或触屏笔进行书写或标记。
9. 可导出为 PDF 文件
   便于分享、归档。
10. 无限的扩展功能
    借助 HTML、CSS、JavaScript、Canvas 等现代的网页开发技术，使页面展示效果具有无限的提升空间。

5. 常用 HTML 元素

简单总结：

• 段落最常用，用 p 来标记；
• 标题分多级，常用一至四 h1～h4；
• 列表分两种，无序 ul 和有序 ol，内部有多项 li；
• 图文框 figure 小世界，内部包万象；
• 链接 a 锚（anchor）他物，href 赋 URL；
• 粗体最重要（strong），斜体较重要（emphasize » em）；
• 上标 sup 与下标 sub，区分 p 与 b；
• 变量 var 用斜体，该用就得用。

6.1 插入图像

前面已经说过怎么插入图像了，img 元素的格式如下：

另外还可以为其指定 width、height 等属性。一般将图像文件放在 images 子目录中，如下：

			
西科徽标：
		

其显示效果为：

西科徽标：

6.1 插入图像

另外，在 img 元素中，我们常用 data-src 属性代替其 src 属性，data-src 具有延迟加载的功效：即当显示到包含图片的这页幻灯片时，才开始从网上下载并加载此图像，从而避免在仅查看少数几页时加载所有页的图片。

以下代码使用 data-src 属性代替 src 属性：

			
西科徽标：
		

6.2 插入图文框

前面插入的图像属于行内元素，即其完全处于文本流中。有时需要插入相对独立的图文框，其中往往包含图像、图像标题以及其他说明文本。这种功能可用 figure 元素实现。示例如下：

					

						
						
						
雏菊是菊科雏菊属的一种，别名长命菊、延命菊，原产于欧洲，原种被视为丛生的杂草，开花期在春季。
					
				

雏菊是菊科雏菊属的一种，别名长命菊、延命菊，原产于欧洲，原种被视为丛生的杂草，开花期在春季。

6.3 插入表格

				

					
表格标题
					

						
第 1 行第 1 列
						
第 1 行第 2 列
						
第 1 行第 3 列
					
					

						
第 2 行第 1 列
						
第 2 行第 2 列
						
第 2 行第 3 列
					
					

						
第 3 行第 1 列
						
第 3 行第 2 列
						
第 3 行第 3 列
					
				
			

6.4 插入公式

以前在网页中显示公式一直是一个老大难问题，不过现在借助 MathJax、KaTeX 等开源公式渲染引擎，已经能够做到在网页中显示精美的公式了。本演示文稿模板自带了 KaTeX 库（对应 katex 目录），因此能够向网页中插入 LaTeX 文本格式的公式了。以下是一个一元二次方程的求根公式：

要插入该公式，需要在单独的一行中输入如下代码：

			$$x_{1,2}=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$$
		

6.4 插入公式

公式也分为行内公式和块级公式。要插入行内公式需要用一对 $ ... $ 或 \( ... \) 符号将公式包括起来。如下所示：

			
令 $\Delta =b^2-4ac$，当 $\Delta >0$ 时，方程有两个不同的实数根。
		

其显示效果如下：

令 $\Delta =b^2-4ac$，当 $\Delta >0$ 时，方程有两个不同的实数根。

要插入块级公式，需要用一对 $$ ... $$ 或 \[ ... \] 符号将公式包括起来，且在单独的一行中输入公式，如上一页幻灯片所示。

6.4 插入公式

需要以写作学术论文常用的 LaTeX 格式的文本表示公式，该格式学起来可并不容易。所幸的是，你也可以不必学习这些枯燥的东西，而仅仅使用公式编辑器就可以可视化地编辑公式，并将他们导出为 LaTeX 格式。这里推荐几个公式编辑器：

• EqnEditor：一个在线的公式编辑器；
• LaTeXLive：另一个在线的公式编辑器，国人创作；
• MathType：老牌的桌面端公式编辑器，可将公式导出为多种格式，价格不菲；
• AxMath：国人创作的桌面端公式编辑器，价格低，功能够用。

当然，若你致力于高端学术创作，也推荐以硬核的方式学习 LaTeX，那么建议先查看这个英文维基百科页面，它详细列出了各种 LaTeX 公式元素的表示法。

6.4 插入公式

有些时候，我们的公式非常简单，完全可以使用 HTML 格式表达，这时可以通过为公式添加 formula 和 blockformula 类来以合适的样式显示公式。如下为一个包含行内公式的段落：

			
在公式 y = a x2 + b x + c 中。
		

其显示效果为：

在公式 y = a x² + b x + c 中。

这里将公式用通用的行内标记 span 包括起来，并为其添加 formula 类。在公式中，将各个变量分别用 var 标记（不用此标记也行，但变量将不会显示为斜体），而上下标分别用 sup 和 sub 标记。

6.4 插入公式

同样，若要以 HTML 格式显示行内公式，也可以通过为元素添加 blockformula 类来实现。如下所示：

			

				y = a x2 + b x + c
			
		

其显示效果为：

y = a x² + b x + c

另外，如果公式很复杂，无法用 HTML 格式表示，但又不想用 LaTeX 格式，也可以将公式保存为图片格式，从而用 img 元素显示，不过要仔细地设置好图片的高度属性 height，避免其过高或过低。

6.4 插入公式

若要为公式添加编号，可以在公式后面添加一个 <span class="number"> 标签项，如下所示：

			

				y = a x2 + b x + c
				(1)
			
		

其显示效果为：

y = a x² + b x + c (1)

其中 <span class="formula"> 标签内的公式也可以是 LaTeX 公式。

6.5 插入代码

我们经常需要在演示文稿中插入各种编程语言的代码片段，这些代码也分两种：行内代码和代码块。其中行内代码直接用 code 标记，如 <code>bytes</code> 将显示为 bytes。我们改变了代码的文字颜色和背景色，并用等宽字体显示，从而使行内代码更容易被辨识。

代码块的表示要复杂一点，通常会设置代码块的背景色，用等宽字体显示文字，禁用自动换行，同时根据语法用不同的颜色高亮显示各类代码元素。

本演示文稿使用开源的语法高亮库 highlight.js 实现代码块的语法高亮显示。它支持近 200 种语言，并有很多预设的显示样式。

6.5 插入代码

通常要插入代码块，可以使用如下方式：

			<pre><code class="language-<name>" data-trim>
    <!-- 多行代码 -->
</code></pre>
		

在具体使用时，应将 <name> 替换为具体的语言名称。以下片段插入了一段 Python 代码：

			<pre><code class="language-python" data-trim>
    # add list items
    thislist = ["apple", "banana", "cherry"]
    thislist.append("orange")
    print(thislist)
</code></pre>
		

6.5 插入代码

上页代码的显示效果为：

			# add list items
			thislist = ["apple", "banana", "cherry"]
			thislist.append("orange")
			print(thislist)
		

以上 data-trim 表示要删除 code 元素开头和结尾的所有空白

还可以为 code 元素添加 data-line-numbers 属性而在左侧显示行号，甚至可以突出显示部分行。另外，也可添加 data-noescape 属性设定是否对 HTML 标记进行自动转义。详见 此页。

6.6 插入视频

有两个方法可以插入视频：

❶ 使用 video 元素：

			<video controls data-autoplay data-src="path/to/the/video.mp4">你的浏览器不支持播放此视频。</video>
		

其中 data-src 是指向视频文件位置的 URL。同 img 一样，这里用 data-src 而不是 src 以达到延迟加载的目的。controls 用于添加视频播放控制的相关控件，data-autoplay 表示自动播放此视频。还可以使用 width 和 height 设定视频框的宽度或高度，一般两者只设置一个即可。

所插入的视频格式应该是浏览器支持能直接播放的，一般使用 MPEG-4 (.mp4) 或 WebM (.webm) 格式。

6.6 插入视频

对于 videos/flower.webm 视频文件，插入方式为：

			<video controls data-autoplay data-src="videos/flower.webm" height="400px"></video>
		

6.6 插入视频

❷ 使用内联框架元素 iframe：

许多视频网站出于版权保护需求，会隐藏视频文件 URL 以防止被下载，但会提供另外的方法在网页中嵌入视频播放页。如哔哩哔哩网站每个视频播放器下方的分享按钮下就提供了各种分享方式，点击其中的嵌入代码就能得到嵌入代码了。如下所示：

上面把从 B 站复制的代码稍作修改：将 src 改为 data-src 以实现延迟加载，又添加了 width 和 height 属性以控制播放器的大小。同时在 data-src 指向的 URL 开头添加了具体的协议名称 https:，否则，由于浏览器的同源策略，当只通过本地文件方式打开演示文稿，而没有将其部署到一个网站服务器时，用 iframe 插入的内容有时是不会显示的。下页为以上视频的显示结果。

6.7 插入其他媒体

除了用 iframe 插入视频，也可以插入其他媒体。如以下代码可以嵌入百度地图的搜索结果：

8.1 分段动画

			
问：Python 语言的发明者是谁？
			
答：Guido van Rossum
			
问：为什么 Python 被称为胶水语言？
			
答：Python 是一种高端动态语言，常像“胶水”一样被用来连接软件组件。
		

8.1 分段动画

当分段动画嵌套出现时，将先执行外层动画，再执行内层动画。

示例：

			
				
					
						淡入 > 红色强调 > 淡出
					
				
			
		

淡入 > 红色强调 > 淡出

8.1 分段动画

可以通过 data-fragment-index 属性为元素指定动画顺序。如果多个元素的索引值相同，这些元素的动画将同时执行。如下所示：

			

				
最后出现
				
第二个出现
				
最先出现
				
第二个出现
			
		

• 最后出现
• 第二个出现
• 最先出现
• 第二个出现

8.4 自动动画

当两个紧邻的幻灯片的 section 标签上都有 data-auto-animate 属性，则将自动为幻灯片中匹配的元素生成过渡动画。自动动画是一项高级功能，更多细节请查看此页。下面代码的显示效果见下页。

			

				
8.4 自动动画
				
这是一个段落。
			
			

				
8.4 自动动画
				
这是一个段落。
			
			

				
8.4 自动动画
				
这是一个段落。
				
这是又一个段落。
			
			

				
8.4 自动动画
				
这是一个段落。
				
这是又一个段落。
				
这是最后一个段落。
			
		

9. 版式

为了满足常见的内容排布需要，我们额外定义了许多幻灯片版式。

9.1 分栏

分栏是将一个幻灯片沿水平方向分为多列。最常见的分栏代码如下：

			

				
第 1 栏
				
第 2 栏
				
第 3 栏
			
		

其显示效果为：

9.1 分栏

上页代码中的 .row 类表示开启一行分栏，而三个 .col 类表示将一行均分为三列。如果有更少或更多的 .col，将仍然进行均分。

如果不想均分，则可以使用 .col-1, .col-2, ..., .col-6 这样的列，分别表示该列占总宽度的 1/6, 2/6, ..., 6/6。并且每行所有列的后缀数字加起来不能大于 6（最好是等于 6，这样才能将一行的空间占满）。

			

				
第 1 栏
				
第 2 栏
				
第 2 栏
			
		

其显示效果为：

9.1 分栏

有时希望栏目的宽度根据其内部内容的宽度进行缩放，这时可使用 .col-auto 这样的列。若各列全部为 .col-auto 时，各列的宽度在本身宽度的基础上缩放。

			

				

					
第 1 栏
				
				

					
第 2 栏
				
			
		

以上两栏的总宽度为 300px，远小于页面宽度，但实际仍占满页宽：

9.1 分栏

另外还可以使用 .col-none，它与 .col-auto 相反，即当空间不足时，各列不会自动增加而占满页宽。

			

				

					
第 1 栏
				
				

					
第 2 栏
				
			
		

最后，还可以组合使用 .col、.col-n、.col-auto 和 .col-none，其情况较复杂，请多尝试。

9.2 浮动

当图文混排时，常使图文框浮动到页面的右侧或左侧。这可以通过为图文框 figure 添加 .push-right 或 .push-left 类来实现。

另外，还应把图文框放在混排文字而最上方，这样在浮动显示后，他们的顶部正好平齐。

右侧图文框的代码如下：

9.2 浮动

当不指定图文框及其内部图片的宽度时，图文框的最大宽度不超过幻灯片宽度的 45%。有时，我们想使图文框更大或更小，这时可以通过分别为 figure 添加 .wide 或 .narrow 类来实现。这两种情况下，图文框宽度分别占幻灯片页面宽度的 2/3 和 1/3。

左侧图文框的代码如下：