reveal.js

1.1、reveal.js简介

是什么 ?	`:`	`a framework for easily creating beautiful presentations using HTML.`
开发语言	`:`	CSS、JavaScript
官方主页	`:`	http://lab.hakim.se/reveal-js
源码仓库	`:`	https://github.com/hakimel/reveal.js

1.2、通过开源CDN引入reveal.js

jsDelivr⤵︎

<link  href="https://cdn.jsdelivr.net/npm/reveal.js@3.9.2/css/reveal.min.css" rel="stylesheet">
<link  href="https://cdn.jsdelivr.net/npm/reveal.js@3.9.2/css/theme/white.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/reveal.js@3.9.2/js/reveal.min.js" type="text/javascript"></script>

BootCDN⤵︎

<link  href="https://cdn.bootcdn.net/ajax/libs/reveal.js/3.8.0/css/reveal.min.css" rel="stylesheet">
<link  href="https://cdn.bootcdn.net/ajax/libs/reveal.js/3.8.0/css/theme/white.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/reveal.js/3.8.0/js/reveal.min.js" type="text/javascript"></script>

1.3、通过下载到本地引入reveal.js

step1、通过包管理器安装reveal.js

包管理器	安装命令
bower	`bower install reveal.js --save`
npm	`npm install reveal.js --save`
yarn	`yarn add reveal.js`

step2、在HTML代码中引入JavaScript

<link  href="/bower_components/reveal.js/css/reveal.min.css" rel="stylesheet">
<link  href="/bower_components/reveal.js/css/theme/white.min.css" rel="stylesheet">
<script src="/bower_components/reveal.js/js/reveal.min.js" type="text/javascript"></script>

1.4、使用reveal.js

<html>
	<head>
		<link rel="stylesheet" href="/bower_components/reveal.js/css/reveal.min.css">
		<link rel="stylesheet" href="/bower_components/reveal.js/css/theme/white.min.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
		<script src="/bower_components/reveal.js/js/reveal.min.js"></script>
		<script>
			Reveal.initialize();
		</script>
	</body>
</html>