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

前言

本片博文主要面向于还没接触过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学院上传教程，欢迎支持！