Web项目中总会遇到对错误页面的设计，好的错误页面处理，会让软件体验更佳，可以帮助运维人员了解基本错误信息，更好的维护软件。当然从底层避免错误是更好的软件开发方式，但我们很难避免软件一些非常隐性的Bug。
以下对网页错误页提示码进行汇总，并对最常见的404错误给出示例页面Demo。
2xx-
成功：这类状态提示码代表服务器成功地接受了客户端请求。
200：确定，客户端请求已成功。 201：已创建。 202：已接受。 203：非权威性信息。 204：无内容。 205：重置内容。 206：部分内容。
3xx- 重定向：客户端浏览器必须采取更多操作来实现请求。
301：对象已永久移走，即永久重定向。 302：对象已临时移动。 304：未修改。 307：临时重定向。
4xx-客户端错误：发生错误，客户端请求不存在的页面，客户端未提供有效的身份验证信息。
401：访问被拒绝。
401.1：登录失败。
401.2：服务器配置导致登录失败。
401.3：由于ACL对资源的限制而未获得授权。
401.4：筛选器授权失败。
401.5：ISAPI/CGI应用程序授权失败。
401.7：访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。
403：禁止访问：IIS定义了许多不同的403错误，它们指明更为具体的错误原因：
403.1：执行访问被禁止。
403.2：读访问被禁止。
403.3：写访问被禁止。
403.4：要求SSL。
403.5：要求SSL128。
403.6：IP地址被拒绝。
403.7：要求客户端证书。
403.8：站点访问被拒绝。
403.9：用户数过多。
403.10：配置无效。
403.11：密码更改。
403.12：拒绝访问映射表。
403.13：客户端证书被吊销。
403.14：拒绝目录列表。
403.15：超出客户端访问许可。
403.16：客户端证书不受信任或无效。
403.17：客户端证书已过期或尚未生效。
403.18：在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。
403.19：不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。
403.20：Passport登录失败。这个错误代码为IIS6.0所专用。
404：未找到。
404.0：没有找到文件或目录。
404.1：无法在所请求的端口上访问Web站点。
404.2：Web服务扩展锁定策略阻止本请求。
404.3：MIME映射策略阻止本请求。
405：用来访问本页面的HTTP谓词不被允许（方法不被允许）。
406：客户端浏览器不接受所请求页面的MIME类型。
407：要求进行代理身份验证。
412：前提条件失败。
413：请求实体太大。
414：请求URI太长。
415：不支持的媒体类型。
416：所请求的范围无法满足。
417：执行失败。
423：锁定的错误。
5xx-服务器错误：服务器由于遇到错误而不能完成该请求。
500：内部服务器错误。
500.12：应用程序正忙于在Web服务器上重新启动。
500.13：Web服务器太忙。
500.15：不允许直接请求Global.asa。
500.16：UNC授权凭据不正确。这个错误代码为IIS6.0所专用。
500.18：URL授权存储不能打开。这个错误代码为IIS6.0所专用。
500.100：内部ASP错误。
501：页眉值指定了未实现的配置。
502：Web服务器用作网关或代理服务器时收到了无效响应。
502.1：CGI应用程序超时。
502.2：CGI应用程序出错。
503：服务不可用。这个错误代码为IIS6.0所专用。
504：网关超时。
505：HTTP版本不受支持。
以下以404错误提示码为例，设计的错误页面示例Demo:
示例1：error1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。
pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
<title>抱歉，您访问的页面正在整修中</title>
<!--[if lte IE 8]>
<style type="text/css">
h2 em{color:#e4ebf8;}
</style>
<![endif]-->
<script type="text/javascript">
function returnFirst() {
window.location = "https://www.baidu.com";
}
$(function(){
var timeDom = $("#time");
function timeEve(){
if(timeDom.length==0) return false;
var num = parseInt(timeDom.html());
function countDown(){
if(num<=1){
window.location.href="https://www.baidu.com/";
return false;
}
window.setTimeout(function(){
num--;
timeDom.html(num);
countDown();
},1000);
};
countDown();
}
timeEve();
});
</script>
<style>
body {
MARGIN: 0px auto; WIDTH: 950px; margin:0 auto; FONT: 11px "Lucida Grande",Arial,Verdana,sans-serif; BACKGROUND: url(<%=basePath%>static/image/error/body_bg.jpg) #d4d4d4 repeat-x; padding-top:80px;
}
div.error404_main {
POSITION: relative; MARGIN: 31px 21px 0px; WIDTH: 950px; BACKGROUND: url(<%=basePath%>static/image/error/error404.jpg) no-repeat; HEIGHT: 500px
}
span.main_txt {
POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 200px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 200px; COLOR: #1d1d1d; TOP: 240px; PADDING-TOP: 2px; LEFT: 750px
}
span.main_txt span {
MARGIN: 2px 2px 8px; DISPLAY: block
}
span.main_txt a {
COLOR: #1d1d1d
}
div.error404_guide {
POSITION: relative; BACKGROUND-COLOR: #b4b4b4; MARGIN: 0px 21px; WIDTH: 950px; HEIGHT: 100px
}
</style>
</head>
<body class="page">
<div class="error404_main">
<span class="main_txt">
<div>
<div id="time">10</div> <div>秒后为您跳转到系统 <a href="javascript:void(0);" onclick="returnFirst()" >首页</a></div>
</div>
<span><a href="javascript:history.go(-1);">?返回上一页</a></span>
</span>
</div>
</body>
</html>
示例1效果截图：
示例2：error2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。
pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
<title>抱歉，您访问的页面正在整修中</title>
<style type="text/css">
body{margin:0;padding:0;font:14px/1.6 Arial,Sans-serif;}
a:link,a:visited{color:#007ab7;text-decoration:none;}
h1{
position:relative;
z-index:2;
width:540px;
height:0;
margin:110px auto 15px;
padding:230px 0 0;
overflow:hidden;
xxxxborder:1px solid;
background-image: url(static/image/error/Main.jpg);
background-repeat: no-repeat;
}
h2{
position:absolute;
top:17px;
left:187px;
margin:0;
font-size:0;
text-indent:-999px;
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
cursor:default;
width: 534px;
}
h2 em{display:block;font:italic bold 200px/120px "Times New Roman",Times,Serif;text-indent:0;letter-spacing:-5px;color:rgba(216,226,244,0.3);}
.link a{margin-right:1em;}
.link,.texts{width:540px;margin:0 auto 15px;color:#505050;}
.texts{line-height:2;}
.texts dd{margin:0;padding:0 0 0 15px;}
.texts ul{margin:0;padding:0;}
.portal{color:#505050;text-align:center;white-space:nowrap;word-spacing:0.45em;}
.portal a:link,.portal a:visited{color:#505050;word-spacing:0;}
.portal a:hover,.portal a:active{color:#007ab7;}
.portal span{display:inline-block;height:38px;line-height:35px;}
.portal span span{padding:0 0 0 20px;}
.portal span span span{padding:0 20px 0 0;background-position:100% -80px;}
.STYLE1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 65px;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
h2 em{color:#e4ebf8;}
</style>
<![endif]-->
<script type="text/javascript">
function returnFirst() {
window.location = "<%=basePath%>reloadHome.do";
}
$(function(){
var timeDom = $("#time");
function timeEve(){
if(timeDom.length==0) return false;
var num = parseInt(timeDom.html());
function countDown(){
if(num<=1){
window.location.href="<%=basePath%>reloadHome.do";
return false;
}
window.setTimeout(function(){
num--;
timeDom.html(num);
countDown();
},1000);
};
countDown();
}
timeEve();
});
</script>
</head>
<body>
<h1></h1>
<p class="link">
<a href="javascript:void(0);" onclick="returnFirst()" >?返回首页</a>
<a href="javascript:history.go(-1);">?返回上一页</a>
</p>
<p>
<dl class="texts" >
<dt>抱歉，您访问的页面正在整修中...</dt>
<dt><span id="time" > 10 </span>秒后为您跳转到系统首页 </dt>
</dl>
</p>
</body>
</html>
示例2效果截图：
时间： 2024-08-28 11:12:35