jsp页面引入外部js、CSS的方法

最新推荐文章于 2025-07-01 10:37:12 发布

qq_40572277

最新推荐文章于 2025-07-01 10:37:12 发布

阅读量5.9k

点赞数 4

分类专栏： jsp

jsp 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在JSP文件中如何正确引用位于不同目录层级下的CSS样式表和JavaScript文件，包括同一目录、父目录及多级目录的情况，并提供了使用相对路径和绝对路径的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）NewFile.jsp与d.css、s.js在同一目录下

在这里插入图片描述

<script type="text/javascript" src="s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="d.css"  />

（2）NewFile.jsp当前目录与d.css、s.js的父目录相同
在这里插入图片描述
./:表示获取当前目录。

<script type="text/javascript" src="./static/s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="./static/d.css"  />

或者

<script type="text/javascript" src="${pageContext.request.contextPath }/static/s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/d.css"  />

或者

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath %>/static/s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="<%=basePath %>/static/d.css"  />
</head>

（3）NewFile.jsp与d.css、s.js的父目录相同
在这里插入图片描述

<script type="text/javascript" src="../static/s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="../static/d.css"  />

…/:表示获取父目录。
在这里插入图片描述
（4）NewFile.jsp在多重目录下

<script type="text/javascript" src="../../static/s.js"></script>
<link id="css" rel="stylesheet" type="text/css" href="../../static/d.css"  />

在这里插入图片描述