html 中引入外部 css 、js 文件

最新推荐文章于 2024-07-17 22:52:51 发布

syrdbt

最新推荐文章于 2024-07-17 22:52:51 发布

阅读量1.2w

点赞数 8

分类专栏：五、前端开发

本文链接：https://blog.csdn.net/qq_38737992/article/details/86748357

版权

五、前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 引入 css 文件

引入外部 css 文件代码如下，css文件引入代码应放在 <head></head> 中。

<!-- 本地相对路径，" ../ "是上翻一个目录级，样例如下：导入本地 index.css 文件  -->
<!-- 目录级的解释见样例 -->
<link rel="stylesheet" href="../css/index.css">
<!-- url 方式, 样例如下：导入 bootstrap.min.css 文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/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="https://d3js.org/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>