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

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

时间:2024-09-19 16:20:10浏览次数:3  
标签:网页 前端 前后 用户 js html 进行 我们 三剑客

第一章 前言

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

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

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

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

        在前端之中,我们又细化成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万元以下罚款

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

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

三、网页设计

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

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

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

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

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

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

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

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

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

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

标签:网页,前端,前后,用户,js,html,进行,我们,三剑客
From: https://blog.csdn.net/qq_33772263/article/details/141095200

相关文章

  • jsp文件使用vue框架(vue2.0)
    jsp里写vue,是不是很刺激,老样子,这里介绍踩过的坑以及填坑要点,jsp跟传统的html很像,无非就是jsp有给java的头,类似于下面的代码:<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>然后开始引入vue以及elementui插件儿,还有axios,我这里都是......
  • js基础之setTimeout与setInterval原理分析
    setTimeout与setInterval概述setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用。前者的主要思想是通过一个定时器,让函数在计时结束后再执行;后者则是每隔一定的时间,就启动一次函数的执行。从原理来看,两者似乎并不复杂。但由于JavaS......
  • js 时间搓计算
    exportfunctioncompareTimestamp(timestamp){constcurrentTime=newDate().getTime();consttimeDiff=currentTime-timestamp;if(timeDiff<60000){return'1分钟内';}elseif(timeDiff<3600000){returnMath.floor(......
  • 基于nodejs+vue华阳大众汽车售卖系统[程序+论文+开题] 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着汽车市场的日益繁荣与消费者需求的多元化,汽车售卖系统已成为连接汽车制造商、经销商与终端用户的关键桥梁。华阳大众汽车作为知名汽车品牌,其市场影响力......
  • 基于nodejs+vue滑雪场管理系统[程序+论文+开题] 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着冬季运动的日益普及,滑雪场作为冰雪运动的重要载体,其管理与运营效率直接关系到游客体验、安全保障及经济效益。然而,传统的人工管理模式在面对大规模游客......
  • 基于nodejs+vue滑雪管理系统[程序+论文+开题] 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着冬季运动的兴起,滑雪作为一项集休闲、健身与竞技于一体的运动,在全球范围内受到了广泛的欢迎与追捧。然而,传统滑雪管理方式往往依赖于人工操作,存在效率低......
  • jsp大学生勤工俭学管理平台9162c
    jsp大学生勤工俭学管理平台9162本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能招聘方,学生,勤工俭学,应聘信息,勤工过程技术要求:   开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用S......
  • jsp大学生勤工助学管理系统7y67s
    jsp大学生勤工助学管理系统7y67本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能用工部门,院系,学生,专业,岗位信息,申请岗位,岗位录用,面试记录,绩效薪酬技术要求:   开发语言:JSP前端使用:HTML......
  • jsp大学生课堂考勤管理系统的设计与实现l78i6
    jsp大学生课堂考勤管理系统的设本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表项目功能学生,教师,课程信息,课程分类,课程考勤,课堂提问,学生选课开题报告内容一、选题背景与意义随着高等教育的普及和大......
  • 基于nodejs+vue化妆品配方及工艺管理系统[程序+论文+开题] 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着化妆品行业的蓬勃发展,市场竞争日益激烈,消费者对产品的个性化、安全性和功能性需求不断提升。化妆品的研发与生产涉及复杂的配方设计与工艺控制,传统的手......