当前位置:首页 » 《资源分享》 » 正文

从零开始搭建自己的个人博客——前端篇之前端“三剑客”(html、css和js)的介绍

7 人参与  2024年09月28日 12:02  分类 : 《资源分享》  评论

点击全文阅读


第一章 前言

        我们总听大佬们常说编程有前端和后端之分,但是关于前端和后端我们总是一知半解,而我们想要搭建自己的个人博客,那么必然避免不了对前端网页的接触。本篇文章就是对前端进行介绍,你可以了解到什么是前端“三剑客”,它们都有什么作用。

        不过,关于前端“三剑客”的介绍相信大家在网络之中进行搜索会有很多文章和视频进行介绍和讲解,而本篇文章主要针对的是关于咱们如何进行个人博客的搭建。所以,在文章之中关于前端“三剑客”的介绍并不全面,而只是针对咱们的博客网站所使用的部分进行介绍和后续更新。相信大家可以通过本系列的文章进行实战练习可以更深入的理解相应的内容。

第二章 什么是前端、后端?

        前端、后端从字面意思来看就是能在你面前能看到的是前端,而你看不到在电脑后面自动运行的程序就是后端。所以,我们能够正常看到的网页就是前端,而对文章、用户数据进行存储读取等操作均为后端。

        在前端之中,我们又细化成html、css、JavaScript它们分工明确,各自有着不同的作用让我们可以在浏览器上面实现我们想要的功能。关于它们具体的作用分别是:

HTML:html作为网页的核心,我们网页的排版,功能的实现,例如:按钮,输入框,点击的超链接等都是由html来实现。

css:css的作用是用来美化html的页面而诞生的,例如:在html页面我需要个文本框,而文本框的长宽大小,是否有无框线等。

JavaScript:JavaScript则是作为用户和后台服务器交互的桥梁,将前端用户的数据提交给服务器,同时也可以将后台服务器的数据读取给用户。 因此,关于前端和后端的交互大致可以分为前后端融合和前后端分离两大类。

第三章 前后端融合和前后端分离

一、开发和前后端分离之间的关系是什么?

前后端融合:将所有html的代码、用户交互的内容在每次传递数据的时候都进行完整的拼接,一次性发送给客户端的浏览器进行执行。

前后端分离:只传递需要的数据给客户端的浏览器。

       开发和前后端分离是一种开发模式,它将前端和后端的开发工作进行了分离,并通过API接口进行通信。在传统的开发模式中,前端和后端的开发是紧密耦合的,需要在同一个项目中进行。而在前后端分离的模式下,前端和后端是独立的项目,它们通过API接口进行通信。

        前后端分离的好处是可以使前端和后端的开发团队并行工作,提高开发效率。同时,前后端的技术栈也可以选择不同的技术,使得团队成员可以根据自己的专长进行开发。前后端分离模式也能够提供更好的可扩展性和可维护性。前端和后端的项目可以独立部署和升级,不会相互影响。同时,后端提供的API接口也可以被其他应用程序调用,实现系统的集成和扩展。

        然而,前后端分离也带来了一些挑战。前后端之间的API设计和协调需要更加严格的规范和沟通。同时,前端需要处理更多的业务逻辑,对前端开发人员的要求也更高。

        总而言之,开发和前后端分离是一种提高开发效率、可扩展性和可维护性的开发模式,它能够使前端和后端的开发团队并行工作,提供更好的灵活性和可重用性。

二、我们该如何选择开发模式?

        通过简述,我们并不能很好的区分和使用那种方案来作为我们个人博客系统的使用选择。我们想要知道怎么选择首先就要知道前端和后端的核心内容是什么?

前端注重:页面展现、访问浏览速度及流畅度、对不同设备的兼容性、用户体验等。

后端注重:高并发、高可用、高性能、设备和系统安全、安全冗余存储等。

        综上,为了增加我们个人博客系统的后期可拓展性以及降低服务器的负载压力,所以我们选择前后端分离作为我们个人博客系统的开发模式。

第四章 网页的注意事项和设计原则

        本文之中,关于基础知识点的介绍就到此为止,至于我为什么不做详细的语法编写讲解,是因为有关web网站前端的编写讲解目前有太多的课程和帖子可以进行学习。本系列文章之注重实际运用,在下会把所写的代码放出来供大家学习和使用。

        当然,在代码之中,在下在编写代码的时候都会进行注释,让大家都能够相对容易的进行理解。至于,在代码之中存在什么问题,或者可以怎样进行优化大家也可以给我进行留言或者私信,在下会和大家一同讨论和进步。

一、前言

        关于编写网页,我们没有必要使用专门的编译去进行编写。因为,网页文件本质上就是个存储代码的文本文件,实际上运行需要的程序环境,自从我们安装浏览器之后就已经自动在我们电脑上面配置好了,所以,我们想要实现页面的预览,完全可以直接打开浏览器去访问我们本地的html文件即可。因此,使用我们往期文章《从零开始搭建自己的个人博客——编程环境搭建篇之Python》里面安装的Pycharm即可进行web网页文件的编写。

二、网页备案

        参考目前经常接触的网站页面、个人博客等,我们可以发现,每个网站的首页(国内网站),都会在页面的最下方注明一行小字是关于ICP、IP和域名的备案号。因此,在使用国内服务器部署网站的话,我们就需要进行域名备案才能正常发布网页。如果说,我们不具备备案条件的话,其实我们可以通过中国境外的服务器来发布我们的网页。

        关于备案这件事,我们在国内自己制作的网站一定要进行备案,不然真的可能会有蜀黍找上门的。这里我放个法条出来,毕竟这个真不是我在这里无中生有:

绿电 1.根据《非经营性互联网信息服务备案管理办法》第十三条规定:非经营性互联网信息服务提供者应当在其网站开通时在主页底部的中央位置标明其备案编号,并在备案编号下方按要求链接信息产业部备案管理系统网址,供公众查询核对。

   2.根据《非经营性互联网信息服务备案管理办法》第二十五条规定:违反本办法第十三条的规定的,由住所所在地省通信管理局责令改正,并处5千元以上1万元以下罚款

绿证服务中心的组成及其业务范围绿电绿证服务中心的组成及其业务范围

        同时,大家也不要抱有侥幸心理,想着说我就是发布一个小网站,也没有多少人来访问,就可以无视法律法规。因为咱们国家的网监真的会顺着网线找到我们的唔!!!(这里再次进行提示)

三、网页设计

        网页设计指的是对网页的布局、颜色、字体等元素进行设计,使其具有良好的视觉效果和用户体验。一个好的网页设计应该符合以下几个原则:

简洁明了:网页设计应该简洁明了,内容清晰,不要过分复杂和拥挤,让用户能够迅速找到所需信息。

色彩搭配:选择合适的配色方案,使网页看起来美观舒适。同时,颜色搭配也应该与网页的主题和目标受众相匹配。

一致性:保持网页的整体一致性,包括字体、颜色、按钮样式等。这样可以增加用户的熟悉感,提升用户体验。

导航设计:设计清晰明了的导航条,让用户能够轻松地浏览网页各个部分。导航应该简洁明了,不要设计过多的层级,以免让用户感到困惑。

响应式设计:随着移动设备的普及,网页设计需要具有良好的响应式布局,能够自适应不同的屏幕尺寸和设备。

速度优化:优化网页的加载速度,减少页面的加载时间,提高用户的访问体验。

可访问性:确保网页设计对于视力、听力、运动和认知能力受限的用户也能够易于使用和访问。

        虽然,一个好的网页设计应该注重用户体验,能够吸引用户的注意力,并提供清晰的信息和简便的操作。但是,我们自己制作的个人博客系统的网页完全是服务我们自己,至于页面内容我们想要设计成什么样子都可以(前提是不能做违法的事情!)

        至此,关于网页的简单介绍已经结束,从下章开始将进行网页设计和前后端的实战编程,请大家不要走开,后续我会继续更新。


点击全文阅读


本文链接:http://zhangshiyu.com/post/165727.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1