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

404 html代码,不懂代码,如何制作漂亮的404页面【新手简易教程】404是用户在访问页面时,搜索引擎常返回的状态码,常见的还有200,301,302,500等。搜索引擎通过http状态码识别网页状态,404状态码,常指所访问的页面不存在或已被删除。404页面,是用户访问不存在内容或者已删除网页时,呈现给用户的界面,又称404错误页面/404-NotFound。404页面常见误区①网站没有设置404页面404错误页面对用户而言:告诉浏览者其所请求的页面不存在或链…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

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

1038

1038

ce68d57ceabc61a6b95280c61adc57c4.png

404页面常见误区

①网站没有设置404页面

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

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

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

6f83b00999fe2fd3ed210ac11e920598.png

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

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

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

③404页面使用了强制跳转

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

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

9ef0be1462b9d9af67720bb8b2f0a561.png

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

①必须有返回链接;

②不建议使用跳转代码,尤其是强制跳转;

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

473ac6f5750a3201bd5d4248129efe81.png

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

1038

55a5846d10c8d204b6174d88b89ed71e.png

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

ce55d8818c0d9157de8f63c1222de912.png

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

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

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

9881b3f423cfc97dc9927b772cd3f752.png

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

c2e65d998540d88439aaddbd2e7e52c4.png

第三步:制作404图片,保存到桌面。

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

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

2136c1c981257915db0e987c0ed65feb.png

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

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

8b55db94c0b60875d95cf626dc3f3a60.png

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

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

37eaebd19dbe3e9470f1bd0d694c980c.png

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

f2da64b3c593e107726f7801a8648363.png

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

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

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

好文推荐:

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164553.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月27日 上午8:36
下一篇 2022年7月27日 上午8:46


相关推荐

  • NFS固定端口配置

    NFS固定端口配置NFS固定端口的配置一、环境介绍二、配置步骤1、安装nfs工具2、创建共享目录3、修改nfs配置文件,指定固定的端口4、重启相关服务并检查相应端口是否存在一、环境介绍1、内网环境,使用NFS作为存储;2、需开通工作节点服务器访问存储服务器的NFS的网络策略,所以需要将端口固定;二、配置步骤1、安装nfs工具yuminstall-yrpcbindnfs-utils2、创建共享目录mkdir/data/hoschmod777/data/hos/编辑/etc/exports

    2022年6月27日
    74
  • pycharm简单案例代码_python简单代码编写

    pycharm简单案例代码_python简单代码编写由于纠结良久,因为不知道从什么地方开始说起。想了想,还是实用主义,主要是教大家用软件编程,所以pycharm的一些功能介绍什么的,大家后续可以自己摸索。毕竟如果专门讲解pycharm的功能,那这篇帖子就完全将pycharm了,没必要。我们的目标是,先学会基本的语言与python编程。好的,不说废话,进入正题!######################首先,我们使用pycharm编程,就需要先创建…

    2022年8月28日
    4
  • Pytest(16)随机执行测试用例pytest-random-order[通俗易懂]

    Pytest(16)随机执行测试用例pytest-random-order[通俗易懂]前言通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

    2022年7月30日
    6
  • 数据库课程设计—超市零售信息管理系统(Python实现)

    数据库课程设计—超市零售信息管理系统(Python实现)数据库课程设计超市零售信息管理系统 Python 实现 SQLServer 文章目录数据库课程设计前言 一 设计目的 二 设计内容一 需求分析 一 设计概念 二 功能说明 1 进货管理 2 销售管理 3 库存管理 4 人员管理 三 功能模块图二 概念结构设计三 逻辑结构设计四 代码实现 一 实现 Python 连接 SQLSevere 数据库 二 创建数据库表 三 插入数据 四 创建界面按钮 并实现数据库的 增删改查 五 总结前言 一 设计目的学生根据所学的数据库系统原理与程序设计的知识 能够针对一个

    2025年10月20日
    4
  • DELPHI程序员招聘_招聘java程序员

    DELPHI程序员招聘_招聘java程序员北京地区招聘Delphi程序员,要求工作经验2年以上,熟悉Delphi7+SQL有PB开发经验优先可全职或外派工作地点:西城区六铺炕联系QQ:408390946

    2022年8月1日
    9
  • div滚动条联动「建议收藏」

    div滚动条联动「建议收藏」应用场景:一般是表头和表体,或者是需要联动的div,滚动一个div的滚动条,让另一个div的滚动条也随之滚动到一样的位置//表头<divid=”sc-table-head-div”class=”sc-table-head-div”style=”position:absolute;”> <tableid=”conitor_head”style=”…

    2022年7月12日
    29

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号