这是一个简单的HTML代码,用于创建一个自定义的404错误页面。当用户访问网站上不存在的页面时,服务器会返回这个页面。这个页面设计得相对简洁,具有一个标题、一段描述性的文本和一个返回首页的链接。
下面是代码的分段解释:
<!DOCTYPE html>
:声明文档类型,告诉浏览器这是一个HTML5文档。<html>
:HTML文档的根元素。<head>
:包含文档的元数据,如字符集声明、标题和样式表链接。<meta charset="UTF-8">
:设置文档使用的字符编码为UTF-8。<title>404 页面未找到</title>
:设置文档的标题,这将在浏览器的标题栏或标签页上显示。<style>
:包含CSS样式定义,用于设置页面的外观。body
:设置页面的背景颜色、字体、文本对齐方式和内边距。h1
:设置标题的字体大小、颜色和下边距。p
:设置段落的字体大小和颜色。a
:设置链接的样式,包括背景颜色、文字颜色、内边距等。a:hover
:定义鼠标悬停在链接上时的样式。<body>
:包含页面的所有内容,如标题、文本和链接。<h1>404</h1>
:显示404错误的标题。<p>对不起,页面未找到。</p>
:提供一段描述性的文本,告知用户页面未找到。<a href="/">返回首页</a>
:提供一个链接,允许用户点击后返回网站的首页。<script>
:包含JavaScript代码,用于实现页面上的交互功能。setTimeout
函数:设置一个计时器,在5秒(5000毫秒)后将用户重定向到网站的首页。</html>
:HTML文档的结束标签。
这个404页面是静态的,意味着它不包含任何后端逻辑来动态生成内容。它只是一个简单的HTML文件,可以被放置在网站服务器的根目录下或任何其他适当的位置,以便在需要时由服务器返回。当用户访问一个不存在的页面时,服务器将发送一个HTTP 404状态码,并返回这个404.html页面。
以下是代码,可以在网站模板中创建一个404.html的空文件,然后复制粘贴以下代码保存,此代码简单且好用,设置5秒自动返回主页,适用于有些主题模板没有404页面的情况。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404 页面未找到</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
padding-top: 100px;
}
h1 {
font-size: 36px;
color: #333;
margin-bottom: 20px;
}
p {
font-size: 18px;
color: #666;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #337ab7;
color: #fff;
text-decoration: none;
margin-top: 20px;
}
a:hover {
background-color: #23527c;
}
</style>
</head>
<body>
<h1>404</h1>
<p>对不起,页面未找到。</p>
<a href="/">返回首页</a>
<script>
setTimeout(function() {
window.location.href = '/';
}, 5000); // 5秒后跳转
</script>
</body>
</html>
声明:
本文内容博览文库原创,请尊重原创,转载时务必标明出处。