1、开头最好指定下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
防止乱码
2、当然公共的html标签,如meta等,可以单独放一文件里
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="common/site-logo.ico" rel="shortcut icon"/>
basePath来指定路径,防止后期路径的更改
3、公共库的引用也可另外用一个文件装着
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js" ></script>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
4、对于头部,菜单等复用的,可以单独建jsp来引pageHead
<div class="header">
<ul class="topNav">
<li >
首页
</li>
<li>
详情
</li>
</div>
5、正式用的时候操作如下
<html>
<head>
<jsp:include page="/htmlHead.jsp"/>
</head>
<body>
<div class="pageHeader">
<jsp:include page="/pageHeader.jsp"></jsp:include>
</div>
</body>
来引入刚创建的html头文件和要复用的菜单头文件
补充一下,经常会用到ajax请求页面的方式,a页面切换到b页面
可以这么来写
a页面内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
main{
padding:0 20px;
}
.content{
background-color: green;
height: 500px;
}
.other{
background-color: red;
height: 800px;
}
</style>
</head>
<body>
<header>
头部
</header>
<main id="main">
<div class="content">
</div>
</main>
<input type="button" value="切换" onclick="loadPage('b.html')">
</body>
</html>
<script src="jquery.min.js"></script>
<script>
function loadPage(url,callback){
return $.get(url,function(res){
$('#main').html(res);
callback&&callback(res);
})
}
</script>
要切换的b页面内容
<div class="other">
byemina
</div>
<input type="button" value="切换" onclick="loadPage('a.html')">
结果如下
启动服务,显示a页面内容
然后点击切换,看b页面内容
就简单说这么多了,由于在上班,写的比较抽象,但应该好懂
:-)