404 html代码,不懂代码，如何制作漂亮的404页面【新手简易教程】

404是用户在访问页面时，搜索引擎常返回的状态码，常见的还有200，301，302，500等。搜索引擎通过http状态码识别网页状态，404状态码，常指所访问的页面不存在或已被删除。

404页面，是用户访问不存在内容或者已删除网页时，呈现给用户的界面，又称404错误页面/404-Not Found。

404页面常见误区

①网站没有设置404页面

404错误页面对用户而言：告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开，消除用户的挫败感。

对SEO而言，没有404页面，会增加搜索引擎蜘蛛的丢失率，也会增加网站的跳出率，造成糟糕的用户体验。

②404页面没有返回网站的链接

比如某多多的404页面，只有404 Not Found，没有任何返回网站的链接。

搜索引擎蜘蛛是顺着超级链接爬取的，无论是横向爬取还是纵向爬取，没有返回链接，用户回不去，蜘蛛也回不去。只能进不能出，有来无回，蜘蛛就是这样被坑死的。

对搜索引擎友好的页面，需要有返回网站的链接，可以是首页、栏目页、活动页，也可以网站的导航栏。

③404页面使用了强制跳转

某品会的404页面使用了强制跳转，跳转到首页。实现跳转功能的方式有多种，meta标签、301、js等，但无论你用什么方式实现跳转，都对搜索引擎不友好。

404页面也是一个页面，搜索引擎蜘蛛在爬取页面的过程中，还没有爬完就被强制拽回到其他页面。就像你在吃饭，才吃两口，就被人强行拽走，是不是超级不爽。

综上所述，优秀的404页面应该具备如下条件：

①必须有返回链接；

②不建议使用跳转代码，尤其是强制跳转；

③符合目标群体的趣味性。

王者荣耀网站的404页面设置很暖心，看到后，想重新回归了。

如果比较幸运，有程序员支持，就可以省过调代码的过程。画好404页面的原型后，把404图片和原型效果图交由程序员处理。这里推荐款好用的原型设计软件Mockplus。

如果没有程序员的支持，你是新手小白不懂代码，也没关系，下面【新手简易教程】正式开始，教你如何制作漂亮的404页面。

第一步：选取你喜欢的404页面，右键查看源代码，全选复制。

这里以某个小型博客的404页面为例，地址：http://www.luokuangtui.com/404。你可以任意选取自己喜欢的404页面，步骤都是一样的。

第二步：新建文本文件(txt文件)，命名404.html，扩展名改成.html。然后以记事本方式打开，粘贴刚才复制的代码。

第三步：制作404图片，保存到桌面。

或者把刚选取的404页面的图片，右键图片另存为，保存到桌面；也可以百度搜索404图片，选取一个自己喜欢的，保存到桌面。

第四步：在保存的代码中，Ctrl+F搜索，404页面中出现的汉字，找到需要修改的文本。

更改对应的跳转链接，文字，以及页面的标题，404图片的地址，不需要的也可以删掉。

第五步：修改完以后，文件-另存为，选择弹窗下方的编码方式，选择UTF-8，点击保存，替换原文件。

如果没有更改编码方式，则打开是乱码。网页编码常用的两种方式为：UTF-8国际通用版、GBK中文简体版。一般来讲UTF-8用的最多，出现乱码时，在UTF-8和ANSI总来回切换就行。

第六步：把html和404图片放在一个文件夹中，双击打开html查看效果，不满意的地方继续调整。

我在源代码基础上，调整了图片的尺寸大小，就是h1标签中的内容，如下。在改代码的过程中，零基础的朋友，可以多多百度。比如觉得文字和图片太紧，想加个空行，就可以搜索html加空行。

第七步：效果调整满意后，把html文件和404图片上传到网站的根目录下。

第八步：在主机管理后台-基础环境设置-404页面设置-选择404文件(/404.html)，点击设置404错误页面。

成功后，等待几秒(后台反应时间)，网站的404页面就设置成功了。如果操作过程中有任何疑问，欢迎留言哦。

好文推荐：

【设计神器推荐】设计协作，用摹客！100人以下团队免费使用

摹客，支持Sketch/PS/XD/Axure设计稿交付、自动标注切图、全流程协作。助力设计师和产品团队高效工作！