【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文

前言

本片博文主要面向于还没接触过web开发的萌新,以及想知道整体流程并且完成建站的萌新;如果你是个大佬,就没必要看下去了。

本篇博文没有难啃的骨头,请各位萌新放心食用。
本篇博文采用通俗易懂的方式讲解,轻松并且比较接地气!
本篇博文涉及的专业名词将会讲解说明。
在这里插入图片描述

浏览一个网页的基本流程方式 萌新可理解

在学习一门技术的时候,往往是了解整体体系架构才能更好的学习,不然在学习的过程中会出现不知道为什么这样做,做出这一部分是该整体部分的哪个区域,只会跟着做,但是并不了解这是在干啥。可能一些萌新体会颇深,就照着打,老师教怎么写,我就怎么写,反正做出来了。

本篇博文,就来用最接地气的方式对基本的web开发做一个整体的讲解,带各个萌新过一遍web开发的流程,好让各位萌新知道学习的时候学习了什么知识点,这个知识点能够干哈。

最开始,我们就以个人浏览网站的方式给大家说一下这一个过程是如何运作的。
在这里插入图片描述

我们访问网站,一般先打开浏览器(不要杠),输入一个网址,随后浏览器打开一个网页。在你在请求这一个网址数据的时候,已经发生了一系列的操作。

啥是IP地址

假设你输入的是“csdn.net”,浏览器想要去访问你这个网站,首先需要的是获得你这个网站的IP地址。可能就有萌新问了**“什么是IP地址?”。IP地址就是“指互联网协议地址,或者说网际协议地址”。又有萌新说了“你这么说我怎么懂?”**,好了现在容我慢慢道来。

IP地址就是在网络中,定位你这台电脑,或者说是设备的一个标记,这个标记是人们指定好的标准协议而产生的(协议就是你和我说好了一件事,拉钩了,以后要这样做)。就像你家的门牌号例如叫做“CSDN市,CSDN区,CSDN街道的CSDN小区第CSDN栋的第CSDN号”…这是由有关机构制定的一套规范名称,不允许随意更改;我们换个例子,例如你家是“深圳市南山区深南大道某某小区第八栋808”,你写快递的收件地址肯定是写这个,难道你写“宇宙第一星球第一市第一栋第一号”?地址是由专门组织规范且制定的一套定位规范,遵循这个规范可以使遵循该规范的设备或者人之间相互通信,这个通信指可以传达交互,能够定位、找到。综上所述,IP地址就不要纠结为什么要这样写,只要知道这个IP地址是你要用的就行。

DNS

现在IP地址知道是什么了,那么怎么获得IP地址?这个时候就需要用到DNS了,啥是DNS??!!
在这里插入图片描述

DNS的英文全称是 Domain Name System,翻译过来就是域名系统。好了,这个时候问题又来了。

域名

啥是域名?域名就是用来标识IP地址的一个标记,或者说是昵称。“为什么不直接用IP地址?”这个问题问得好,如果我们人不用名称,就用身份证号,我叫你的时候就会叫“450333333333333333…”。。。我觉得这样不是很好。。。当人们觉得使用IP地址不方便记忆后,就产生了域名地址,就像CSDN,我们就知道是CSDN就好了,难道还要去记她的IP地址吗?例如CSDN的地址是192.168.1.1,难不难受…以后可能你记网站名称就在记数字了,又不方便又崩溃。好了,回归正题,我们输入了网址后,按下Enter键后,浏览器将会去DNS请求这个域名对应的IP是什么,如果找到了,就返回一个IP地址。可能又有萌新问了,“浏览器会自动去找DNS?”,会是会,但是我们也会给它一个目标,在我们的网络连接里面,本地连接右键属性,里面有个IPV4,双击进去就可以查看自己配置的DNS了,一般别乱改,不然很难过的,有时候浏览器打不开网址,就是这个原因。
在这里插入图片描述
记住,网络IP冲突可能会导致上不了网,这种情况在学校的机房里很常见,只要改成自动获取IP就ok了,会自动分配闲置的IP地址。

数据请求

在这里插入图片描述

当找到了IP地址,这个时候就会向该IP地址的设备去请求数据,请求数据的意思就是,这个设备或者说服务器就像一个大型的分发机构,就是送情报的一个部门,一共有65535个窗口,每个窗口送不同的情报;例如我们需要请求网站之类的数据,就通过第80个窗口请求,这个时候浏览器派来的小弟来到这个80号窗口,可能会排一下队,拿到数据后,回到浏览器,浏览器把拿到的数据显示给你看。

“ 渲染”

在这里插入图片描述

其实在这个时候,浏览器显示的数据会根据一些标记,进行排版,这些标记就称是HTML,HTML是 Hyper Text Markup Language 的缩写,中文名是超级文本标记语言,其实说那么深奥还不方便理解;简单来说就是通过特定的标签,把一段文本信息标记起来,表示这段文本信息要怎么样去进行显示,或者是这个文本信息是啥东西;例如 <title>CSDN-专业IT技术社区</title>是CSDN官网首页的标题,用了title这个标签把文本信息标记,标记好后,浏览器就知道这个文本要显示在哪里,要怎么进行显示,最终浏览器把这一段信息显示在了浏览器标题头位置:
在这里插入图片描述
我们再看看另外的一个例子:
在这里插入图片描述
这一段HTML语言所标记了一个博客的文本,整个标记的情况为了清晰的看清楚,我在这里列出:<a href="//blog.csdn.net/" class="toolbar_to_feed" title="博客">博客</a>,标记语言HTML那一些标记并不会进行显示,只显示了博客这个这个文本在网页上:
在这里插入图片描述
那是因为浏览器是通过标记语言的内容去进行显示,标记语言的作用就是告诉浏览器这里你要怎么显示这个内容,或者说这个内容有什么功能。这里是博客的一个跳转,使用的是a标签,a标签是什么?a标签就是<a>这里是要显示的文本</a>,在a标签里面可以添加一些固定的操作,例如a标签的作用是跳转到指定的页面,那么这个页面肯定是有一个链接的,那么这个链接需要什么来指定呢?

答案就很简单了,使用href来指定,这个href呢就需要把要跳转到的页面的地址给加上,在我们查看到的HTML代码中是href="//blog.csdn.net/",这就表示会跳转到blog.csdn.net这个地址,有人点击就会跳转到博客了。

class="toolbar_to_feed" 是什么东西?在这里我们可以把它当做给定了一个样式,给定了一个style,要怎么样显示,你要显示的样子是什么?可能红色的底,绿色的字,俗话说,红配绿。。。这个样式的名称就叫做 toolbar_to_feed 。在这里并不会深入的讲解这个样式要让博客这个文本显示成啥样,大家只要通过例子知道这个html是用来告诉浏览器怎么样显示这个文本,或者这个文本有什么用就ok了。其实还有些动态的数据,但是在这里并不会讲解,基本的理解这样就没问题了。专业点的说法就是构件编排用户界面。

前端

在这里插入图片描述

通过以上描述就很清楚的知道,如果我们做web开发的话,做html相关的就是给页面制作布局,怎么样好看,甚至可以做特效,让页面显示多姿多彩;一般我们称做HTML这种,是为了数据的显示的排版工作,或者说是为了包装数据工作的这类职位叫做前端;不过前端是个相对概念,在web上可以这样理解是没问题的,不过现在的前端,如果不去大厂,基本上要做的不止是包装数据的排版那么简单,可能还会做得更多。如果我们去做前端工作的话,还要掌握跟服务器交互的一些操作,打个比方,用户点击了一个按钮,这个按钮的功能是获取到你们的用户人数,这个时候你需要编写一个逻辑,去服务器获取到这个用户想要的数据。不过这点只是作为一个提醒,当真正接触前端的话会了解的。

后端

在这里插入图片描述

有很多小问号的朋友可能会记得刚刚说的,前端可能要向服务器请求数据,那么这个数据,是不是就是传说中的后端做的?(听没听过后端某问题,反正就是后端)

后端可以理解为一些业务逻辑的代码编写实现,就是需要后端,什么是业务逻辑?简单的举个例子,就像你淘宝买东西,你点了这个物品,下单了,我要在代码上怎么实现这个下单这个背后的操作;因为下单后你还需要交易,交易要收钱,收钱你还要把这个记录记载到你存放数据的地方,我们可以叫做数据库,存进去后,用户查看自己的下单记录,你还需要把这个记录取出来,用代码实现这个取出来这个过程给用户看到,不然没有记录那就很尴尬了,只收钱不卖货!流批!所以一般是指的是数据库(因为要存储数据,例如你网站的用户数据,肯定要用东西来存储,这个东西就是数据库)进行交互以处理相应的业务逻辑。虽然后端要考虑很多东西,但是一般来说这样举例子就比较方便理解,就不过多的谈论其它东西了。

现在整个逻辑基本上就通了,简单的理解,后端就是实现一些数据操作,业务逻辑的实现(其实可能会运维),前端呢就是负责用户的页面数据的展示排版;嗯,大体这样理解问题不大。

建站

在这里插入图片描述

既然理解通了,我们就来说说一个网站搭建的流程是什么吧!
首先我们需要租一个服务器,嗯…这个萌新不理解,那我们降一个档次,那就是我们在我们自己的本地电脑进行试验,这样就问题不大了,方便快捷。

搭建一个简单企业门户网站其实贼简单,不吹不黑,几年前的时候,做这个还是挺得钱的,接接外包,舒舒服服,现在就不行了,毕竟技术在更新,过时的技术也变得更加廉价了,但是依旧是基本。

以下我使用一个静态网站作为例子演示一个网站的搭建;“啥是静态网站?”。静态网站就是没有后端,好吧,简单来说就是这样,由于后端需要一些其它语言,本篇博文针对于普遍人群,为了方便理解就不用后端了,直接静态网站作为演示,列出html的代码,到时候萌新们可以直接复制代码拿去自己试验,舒舒服服,美滋滋。

集成环境

在这里插入图片描述

首先我们下载一个集成环境。“啥是集成环境?”

集成环境打个比方,就像你做菜、需要火源、锅、锅铲,这种就是环境;我做网站也要一个环境,这个环境有人给你做好了,你直接拿过来用就好,就不需要自己搭建,有些初学者就喜欢自己搭建,然后发现一堆问题,搞着搞着发现太难就不学了,简直嘤嘤嘤!初学者我个人建议先别增加自己的难度,先学,不然没搞懂就上会一脸懵圈的。现在我们下载一个叫做phpstudy的软件,下载点这里
去官网。然后进行傻瓜式安装。
在这里插入图片描述
安装完后打开服务:
在这里插入图片描述
Apache可能会有人问是什么,Apache是服务器软件,它就是你做菜需要的必要工具之一,开启了就对了,可能你只开启Apache只能做汤,那也没事,毕竟我现在演示的是静态网站。

首先我们把我们的资源文件带到网站根目录下:
在这里插入图片描述
根目录不会找?没关系,我们打开网站,点击管理找到根目录就ok:
在这里插入图片描述
找到后把资源文件放到根目录下,删除以前的根目录下的内容即可。
然后在浏览器输入:http://127.0.0.1/ 或者输入 http://localhost/ 就可以访问我们本地电脑上的网站了!
在这里插入图片描述
这个模版资源是我从网上下载的,网上很多资源各位都可以看一下。本博文使用的资源文件审核中,将会及时更新。
资源已更新,地址在csdn下载,不需要积分:点这里

这样你的个人网站就完成了,如果有服务器的小伙伴就直接可以下载精美的例子完成你的个人网站,美滋滋!

建议

在这里插入图片描述

一下分享几个简单搭建网站的技巧:

  • 前端模板,也就是HTML怎么样才好看,感觉自己做不了那么好看!网上有很多模板,搜索即可,直接套用下来满足你的精美欲望!无限可能!

我后端学了,但是感觉自己写好难!

  • 没关系,使用开发框架,什么是开发框架?问题不大,这个东西是帮你开发的,我在刚毕业的时候教了同级一位同学,我们专业当时不学这个,我就直接教他每天2小时,然后学了半个月就就业去了,至今五年多了还在做这一行。所以开发框架很简单的,就是方便你开发,舒舒服服。

感觉自己的网站不安全?动不动就被了!**

  • 个人推荐使用框架,开启全局过滤,然后服务器尽量用大厂的,例如阿里云,直接开启白名单,这是最简单的防护方式了。

我是前端,怎么做后端?

  • 可以直接学习后端语言,想开发效率快当然是“天下第一语言PHP“,哈哈哈,不要喷我!PHP的开发效率是不错的,如果你是前端,你也可以学学nodejs,也可以的,当然还有其它都可以。

最最萌新的话如果要租服务器,建议租用Windows的服务器,操作比较方便,不然命令行操作你可能吃不消。

其它建议

  • 如果单纯想联系数据库,没必要单独装一个,直接使用集成环境,例如phpstudy,它集成了mysql,直接安装就可以用了,舒舒服服,躺着下载安装几分钟,自己单独装,死磕还不一定弄好。

如有错误欢迎指出,有问题可以私信我哟,可以关注收藏一键三连!完美!
有问题都可以问我,包括是否想学php、python、c/c++等,这段时间在筹划在CSDN学院上传教程,欢迎支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/288134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

剑指offer之剪绳子问题

1 问题 给你一根长度为n的绳子&#xff0c;请把绳子剪成m段 (m和n都是整数&#xff0c;n>1并且m>1)每段绳子的长度记为k[0],k[1],…,k[m]. 请问k[0] * k[1] …k[m]可能的最大乘积是多少&#xff1f; 例如&#xff0c;当绳子的长度为8时&#xff0c;我们把它剪成长度分别…

计算机打字比赛活动策划书怎么写,打字比赛策划书范文.docx

打字比赛策划书范文第 PAGE \* Arabic \* MERGEFORMAT 7 页打字比赛策划书范文打字比赛策划书(一)一、比赛简介&#xff1a;为了丰富大学生的课余生活&#xff0c;提高学生动手能力和综合素质&#xff0c;本协会面对全体协会成员开展此项打字比赛活动。此项活动为我协会电脑培训…

okhttp上传图片和其他参数_Android中Okhttp3实现上传多张图片同时传递参数_放手_前端开发者...

之前上传图片都是直接将图片转化为io流传给服务器&#xff0c;没有用框架传图片。最近做项目&#xff0c;打算换个方法上传图片。Android发展到现在&#xff0c;Okhttp显得越来越重要&#xff0c;所以&#xff0c;这次我选择用Okhttp上传图片。Okhttp目前已经更新到Okhttp3版本…

MicroStation V8i简体中文版中文字体乱码解决办法

Bentley (奔特力)是一家软件研发公司,其核心业务是满足负责建造和管理全球基础设施,包括公路、桥梁、机场、摩天大楼、工业厂房和电厂以及公用事业网络等领域专业人士的需求。Bentley 在基础设施资产的整个生命周期内针对不同的职业,包括工程师、建筑师、规划师、承包商、…

剑指offer之斐波那契数列

1 问题 写一个函数&#xff0c;输入n,求斐波那契数列的第n项。斐波那契数列定义如下。 f(n) 0; (n 0)f(n) 1; (n 1)f(n) f(n - 1) f(n - 2); (n > 2); 2 分析 1) 直接用递归 2) 我们用两个变量保持每次需要计算下一个值得前面2个数&#xff0c;从最前面开始迭代。…

网页特殊符号HTML代码大全

网页特殊符号HTML代码大全 HTML特殊字符编码大全&#xff1a;往网页中输入特殊字符&#xff0c;需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 &acute;©©>>&micro;&reg;&&amp…

惠普ProDesk行业专用台式机U盘不识别解决办法

惠普ProDesk行业专用台式机在使用的过程当中&#xff0c;老出现插入U盘不识别的问题&#xff0c;总是需要在重启的过程中插入U盘才能使用U盘&#xff0c;解决办法是&#xff1a;&#xff08;1&#xff09;打开设备管理器&#xff0c;如下图所示&#xff1a;&#xff08;2&#…

【一】Windows API 零门槛编程指南——MessageBox 基本使用及基础讲解

本篇作为Windows API 系列文章的第一篇&#xff0c;将简要的讲解一下什么是Windows API&#xff0c;Windows API能做些什么&#xff0c;并且尽可能讲解一些新出现的专有名词&#xff1b;本系列博文几乎没有难啃的“专业术语”&#xff0c;尽量让读者能够看明白文章所述内容&…

计算机辅助翻译的启示,翻译单位研究对计算机辅助翻译启示.PDF

2009 年第 6 期 外语研究 2009 , №6总第 118 期 Foreign L anguages Research Serial №118翻译单位研究对计算机辅助翻译的启示苏明阳 丁  山( 国际关系学院 ,江苏 南京 2 10039)摘  要 : 本文是将翻译理论研究成果引入并指导计算机辅助翻译系统发展的一个尝试 。作者首先…

中国人工智能学会通讯——基于视频的行为识别技术 1.1 什么是行为

今天跟大家分享的主题是基于视频的 行为识别领域研究&#xff0c;主要介绍一下早期 的非深度学习传统方法和近期深度学习 方法取得的结果。深度学习方法带来了 非常大的变革&#xff0c;提升了识别系统的性能&#xff0c; 但这并不意味着我们把传统的东西都要 抛弃&#xff0c;…

querybuilder 排序_elasticsearch的匹配与排序问题

后台搜索使用的java apipublic List searchQueryTeam(String term, int limit, int offset, int isHighlight, long seed) throws Exception {final List list new ArrayList();SearchRequestBuilder srbTeam client.prepareSearch(INDEX_NAME).setTypes("Team").s…

剑指offer之青蛙跳台阶问题

1 问题 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶&#xff0c;求该青蛙跳上一个n级的台阶总共有多少种跳法&#xff1f; 2 分析 我们可以定位函数f(n),n为n级别的台阶&#xff0c;f(n)的值是青蛙有多少种跳法&#xff0c;我们知道当n为1的时候&#xff0c;f…

惠普ProDesk行业专用台式机U盘重装系统时显示器不显示的解决办法

该配置的机子是独立显卡&#xff0c;也就是说主机后面有两个显示器接口&#xff0c;换一个试试吧&#xff0c;超级管用。

Windows 11 22H2 22610 重磅发布!删除水印,多彩任务管理器,文件资源管理器深度优化...

面向 Dev 和 Beta 频道的 Windows 预览体验成员&#xff0c;微软现已发布 Windows 11 22H2 预览版 Build 22610。主要变化1.微软现已更新 Windows 11 任务管理器的进程页面&#xff0c;将随着 Windows 主题颜色而变化。2.微软现已更新锁屏上的电池图标&#xff0c;适配 Windows…

oracle job 定时执行参数

oracle job 常见的执行时间1、每分钟执行trunc(sysdate,mi)1/(24*60)2、每天定时执行如&#xff1a;每天凌晨0点执行trunc(sysdate1)每天凌晨1点执行trunc(sysdate1)1/24每天早上8点30分执行trunc(sysdate1)(8*6030)/(24*60)3、每周定时执行每周一凌晨2点执行trunc(next_day(sy…

一篇文教你使用python Turtle库画出“精美碎花小清新风格树”快来拿代码!

Turtle库手册可以查询查询 python图形绘制库turtle中文开发文档及示例大全&#xff0c;手册中现有示例&#xff0c;不需要自己动手就可以查看演示。 文章修改记录 修改记录 1&#xff1a;2020年5月17日 12:06:51 由于某些童鞋回复说自己会卡死&#xff0c;请把代码&#xff…

QQ,MSN,Skype在线客服代码

QQ,MSN,Skype在线客服代码 在网站建设时&#xff0c;为了更好的实施网站的营销型&#xff0c;会用到QQ&#xff0c;MSN等在线交流&#xff0c;以便客户能够快捷方便的联系我们。在这里&#xff0c;提供QQ&#xff0c;MSN的在线客服代码给大家分享&#xff1a; 1.QQ在线咨询代码…

阿里云500服务器内部错误,腾讯云服务器网站不能打开 提示内部错误http 500

满意答案2010qqww2015.11.14采纳率&#xff1a;55% 等级&#xff1a;9已帮助&#xff1a;13114人实服务器内部500错误大概可分为两种&#xff0c;一种是服务器本身权限问题&#xff0c;另一种是程序上不规范或者错误造成。所以要解决此问题需要先弄清楚其到底是哪种原因&…

物联网智能硬件设备常见攻击方法

以太网接入型设备&#xff0c;一般分为网线或WiFi两种。不管是WiFi还是网线&#xff0c;可以通过局域网抓包、笔记本WiFi桥接抓包等等手段。最著名的抓包软件 Wireshark如何抓取硬件设备的网络数据包&#xff0c;考量的是网络知识基本功&#xff0c;需要大家自行度娘&#xff0…

Hadoop(四)C#操作Hbase

HbaseHbase是一种NoSql模式的数据库&#xff0c;采用了列式存储。而采用了列存储天然具备以下优势&#xff1a;可只查涉及的列&#xff0c;且列可作为索引&#xff0c;相对高效针对某一列的聚合及其方便同一列的数据类型一致&#xff0c;方便压缩同时由于列式存储将不同列分开存…