共计 5025 个字符，预计需要花费 13 分钟才能阅读完成。
前言
本片博文主要面向于还没接触过 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 学院上传教程，欢迎支持！
