1. 引入 css 文件
引入外部 css 文件代码如下,css文件引入代码应放在 <head></head>中。
<!-- 本地相对路径," ../ "是上翻一个目录级,样例如下:导入本地 index.css 文件 --><!-- 目录级的解释见样例 --><link rel="stylesheet" href="../css/index.css"><!-- url 方式, 样例如下:导入 bootstrap.min.css 文件--><link rel="stylesheet" href="/bootstrap/4.0.0/css/bootstrap.min.css">
2.引入 js 文件
引入外部 js 文件代码如下,js 文件引入代码应放在body的最底部(原因:页面加载更快)。
<!-- 本地相对路径," ../ "是上翻一个目录级,样例如下:导入本地 bootstrap.js 文件 --><script type="text/javascript" src="../js/bootstrap.js" /><!-- url 方式, 样例如下:导入 d3.js 库 --><script type="text/javascript" src="/d3.v5.min.js"></script>
3. 完整的实例
3.1 工程目录
项目目录如图所示:
3.2 目录级的解释
在同一个文件夹中的文件为同一级,例:css文件夹 、fonts文件夹 、img文件夹、fonts文件夹 、index.html、test.html为同一级;index.css,bootstrap.min.css同一级;
index.css是css文件夹的下一级,index.css也是test.html的下一级;
css文件夹是 index.css的上一级,test.html也是index.css的上一级;
test.html引入外部css文件,js文件源代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>LCXXKG</title><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/bootstrap.min.css" ></head><body><script type="text/javascript" src="js/bootstrap.js" /><script src="js/jquery-3.2.1.min.js" /></body> </html>