前言

本片博文主要面向于還沒接觸過web開發(fā)的萌新，以及想知道整體流程并且完成建站的萌新；如果你是個大佬，就沒必要看下去了。

本篇博文沒有難啃的骨頭，請各位萌新放心食用。
本篇博文采用通俗易懂的方式講解，輕松并且比較接地氣！
本篇博文涉及的專業(yè)名詞將會講解說明。

瀏覽一個網頁的基本流程方式 萌新可理解

在學習一門技術的時候，往往是了解整體體系架構才能更好的學習，不然在學習的過程中會出現(xiàn)不知道為什么這樣做，做出這一部分是該整體部分的哪個區(qū)域，只會跟著做，但是并不了解這是在干啥。可能一些萌新體會頗深，就照著打，老師教怎么寫，我就怎么寫，反正做出來了。

本篇博文，就來用最接地氣的方式對基本的web開發(fā)做一個整體的講解，帶各個萌新過一遍web開發(fā)的流程，好讓各位萌新知道學習的時候學習了什么知識點，這個知識點能夠干哈。

最開始，我們就以個人瀏覽網站的方式給大家說一下這一個過程是如何運作的。

我們訪問網站，一般先打開瀏覽器（不要杠），輸入一個網址，隨后瀏覽器打開一個網頁。在你在請求這一個網址數(shù)據(jù)的時候，已經發(fā)生了一系列的操作。

啥是IP地址

假設你輸入的是“csdn.net”，瀏覽器想要去訪問你這個網站，首先需要的是獲得你這個網站的IP地址。可能就有萌新問了**“什么是IP地址？”。IP地址就是“指互聯(lián)網協(xié)議地址，或者說網際協(xié)議地址”。又有萌新說了“你這么說我怎么懂？”**，好了現(xiàn)在容我慢慢道來。

IP地址就是在網絡中，定位你這臺電腦，或者說是設備的一個標記，這個標記是人們指定好的標準協(xié)議而產生的（協(xié)議就是你和我說好了一件事，拉鉤了，以后要這樣做）。就像你家的門牌號例如叫做“CSDN市，CSDN區(qū)，CSDN街道的CSDN小區(qū)第CSDN棟的第CSDN號”…這是由有關機構制定的一套規(guī)范名稱，不允許隨意更改；我們換個例子，例如你家是“深圳市南山區(qū)深南大道某某小區(qū)第八棟808”，你寫快遞的收件地址肯定是寫這個，難道你寫“宇宙第一星球第一市第一棟第一號”？地址是由專門組織規(guī)范且制定的一套定位規(guī)范，遵循這個規(guī)范可以使遵循該規(guī)范的設備或者人之間相互通信，這個通信指可以傳達交互，能夠定位、找到。綜上所述，IP地址就不要糾結為什么要這樣寫，只要知道這個IP地址是你要用的就行。

DNS

現(xiàn)在IP地址知道是什么了，那么怎么獲得IP地址？這個時候就需要用到DNS了，啥是DNS？？！！

DNS的英文全稱是 Domain Name System，翻譯過來就是域名系統(tǒng)。好了，這個時候問題又來了。

域名

啥是域名？域名就是用來標識IP地址的一個標記，或者說是昵稱。“為什么不直接用IP地址？”這個問題問得好，如果我們人不用名稱，就用身份證號，我叫你的時候就會叫“450333333333333333…”。。。我覺得這樣不是很好。。。當人們覺得使用IP地址不方便記憶后，就產生了域名地址，就像CSDN，我們就知道是CSDN就好了，難道還要去記她的IP地址嗎？例如CSDN的地址是192.168.1.1，難不難受…以后可能你記網站名稱就在記數(shù)字了，又不方便又崩潰。好了，回歸正題，我們輸入了網址后，按下Enter鍵后，瀏覽器將會去DNS請求這個域名對應的IP是什么，如果找到了，就返回一個IP地址。可能又有萌新問了，“瀏覽器會自動去找DNS？”，會是會，但是我們也會給它一個目標，在我們的網絡連接里面，本地連接右鍵屬性，里面有個IPV4，雙擊進去就可以查看自己配置的DNS了，一般別亂改，不然很難過的，有時候瀏覽器打不開網址，就是這個原因。

記住，網絡IP沖突可能會導致上不了網，這種情況在學校的機房里很常見，只要改成自動獲取IP就ok了，會自動分配閑置的IP地址。

數(shù)據(jù)請求

當找到了IP地址，這個時候就會向該IP地址的設備去請求數(shù)據(jù)，請求數(shù)據(jù)的意思就是，這個設備或者說服務器就像一個大型的分發(fā)機構，就是送情報的一個部門，一共有65535個窗口，每個窗口送不同的情報；例如我們需要請求網站之類的數(shù)據(jù)，就通過第80個窗口請求，這個時候瀏覽器派來的小弟來到這個80號窗口，可能會排一下隊，拿到數(shù)據(jù)后，回到瀏覽器，瀏覽器把拿到的數(shù)據(jù)顯示給你看。

“ 渲染”

其實在這個時候，瀏覽器顯示的數(shù)據(jù)會根據(jù)一些標記，進行排版，這些標記就稱是HTML，HTML是 Hyper Text Markup Language 的縮寫，中文名是超級文本標記語言，其實說那么深奧還不方便理解；簡單來說就是通過特定的標簽，把一段文本信息標記起來，表示這段文本信息要怎么樣去進行顯示，或者是這個文本信息是啥東西；例如 <title>CSDN-專業(yè)IT技術社區(qū)</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了。其實還有些動態(tài)的數(shù)據(jù)，但是在這里并不會講解，基本的理解這樣就沒問題了。專業(yè)點的說法就是構件編排用戶界面。

前端

通過以上描述就很清楚的知道，如果我們做web開發(fā)的話，做html相關的就是給頁面制作布局，怎么樣好看，甚至可以做特效，讓頁面顯示多姿多彩；一般我們稱做HTML這種，是為了數(shù)據(jù)的顯示的排版工作，或者說是為了包裝數(shù)據(jù)工作的這類職位叫做前端；不過前端是個相對概念，在web上可以這樣理解是沒問題的，不過現(xiàn)在的前端，如果不去大廠，基本上要做的不止是包裝數(shù)據(jù)的排版那么簡單，可能還會做得更多。如果我們去做前端工作的話，還要掌握跟服務器交互的一些操作，打個比方，用戶點擊了一個按鈕，這個按鈕的功能是獲取到你們的用戶人數(shù)，這個時候你需要編寫一個邏輯，去服務器獲取到這個用戶想要的數(shù)據(jù)。不過這點只是作為一個提醒，當真正接觸前端的話會了解的。

后端

有很多小問號的朋友可能會記得剛剛說的，前端可能要向服務器請求數(shù)據(jù)，那么這個數(shù)據(jù)，是不是就是傳說中的后端做的？（聽沒聽過后端某問題，反正就是后端）

后端可以理解為一些業(yè)務邏輯的代碼編寫實現(xiàn)，就是需要后端，什么是業(yè)務邏輯？簡單的舉個例子，就像你淘寶買東西，你點了這個物品，下單了，我要在代碼上怎么實現(xiàn)這個下單這個背后的操作；因為下單后你還需要交易，交易要收錢，收錢你還要把這個記錄記載到你存放數(shù)據(jù)的地方，我們可以叫做數(shù)據(jù)庫，存進去后，用戶查看自己的下單記錄，你還需要把這個記錄取出來，用代碼實現(xiàn)這個取出來這個過程給用戶看到，不然沒有記錄那就很尷尬了，只收錢不賣貨！流批！所以一般是指的是數(shù)據(jù)庫（因為要存儲數(shù)據(jù)，例如你網站的用戶數(shù)據(jù)，肯定要用東西來存儲，這個東西就是數(shù)據(jù)庫）進行交互以處理相應的業(yè)務邏輯。雖然后端要考慮很多東西，但是一般來說這樣舉例子就比較方便理解，就不過多的談論其它東西了。

現(xiàn)在整個邏輯基本上就通了，簡單的理解，后端就是實現(xiàn)一些數(shù)據(jù)操作，業(yè)務邏輯的實現(xiàn)（其實可能會運維），前端呢就是負責用戶的頁面數(shù)據(jù)的展示排版；嗯，大體這樣理解問題不大。

建站

既然理解通了，我們就來說說一個網站搭建的流程是什么吧！
首先我們需要租一個服務器，嗯…這個萌新不理解，那我們降一個檔次，那就是我們在我們自己的本地電腦進行試驗，這樣就問題不大了，方便快捷。

搭建一個簡單企業(yè)門戶網站其實賊簡單，不吹不黑，幾年前的時候，做這個還是挺得錢的，接接外包，舒舒服服，現(xiàn)在就不行了，畢竟技術在更新，過時的技術也變得更加廉價了，但是依舊是基本。

以下我使用一個靜態(tài)網站作為例子演示一個網站的搭建；“啥是靜態(tài)網站？”。靜態(tài)網站就是沒有后端，好吧，簡單來說就是這樣，由于后端需要一些其它語言，本篇博文針對于普遍人群，為了方便理解就不用后端了，直接靜態(tài)網站作為演示，列出html的代碼，到時候萌新們可以直接復制代碼拿去自己試驗，舒舒服服，美滋滋。

集成環(huán)境

首先我們下載一個集成環(huán)境。“啥是集成環(huán)境？”。

集成環(huán)境打個比方，就像你做菜、需要火源、鍋、鍋鏟，這種就是環(huán)境；我做網站也要一個環(huán)境，這個環(huán)境有人給你做好了，你直接拿過來用就好，就不需要自己搭建，有些初學者就喜歡自己搭建，然后發(fā)現(xiàn)一堆問題，搞著搞著發(fā)現(xiàn)太難就不學了，簡直嚶嚶嚶！初學者我個人建議先別增加自己的難度，先學，不然沒搞懂就上會一臉懵圈的。現(xiàn)在我們下載一個叫做phpstudy的軟件，下載點這里
去官網。然后進行傻瓜式安裝。

安裝完后打開服務：

Apache可能會有人問是什么，Apache是服務器軟件，它就是你做菜需要的必要工具之一，開啟了就對了，可能你只開啟Apache只能做湯，那也沒事，畢竟我現(xiàn)在演示的是靜態(tài)網站。

首先我們把我們的資源文件帶到網站根目錄下：

根目錄不會找？沒關系，我們打開網站，點擊管理找到根目錄就ok：

找到后把資源文件放到根目錄下，刪除以前的根目錄下的內容即可。
然后在瀏覽器輸入：http://127.0.0.1/ 或者輸入 http://localhost/ 就可以訪問我們本地電腦上的網站了！

這個模版資源是我從網上下載的，網上很多資源各位都可以看一下。本博文使用的資源文件審核中，將會及時更新。
資源已更新，地址在csdn下載，不需要積分：點這里

這樣你的個人網站就完成了，如果有服務器的小伙伴就直接可以下載精美的例子完成你的個人網站，美滋滋！

建議

一下分享幾個簡單搭建網站的技巧：

• 前端模板，也就是HTML怎么樣才好看，感覺自己做不了那么好看！網上有很多模板，搜索即可，直接套用下來滿足你的精美欲望！無限可能！

我后端學了，但是感覺自己寫好難！

• 沒關系，使用開發(fā)框架，什么是開發(fā)框架？問題不大，這個東西是幫你開發(fā)的，我在剛畢業(yè)的時候教了同級一位同學，我們專業(yè)當時不學這個，我就直接教他每天2小時，然后學了半個月就就業(yè)去了，至今五年多了還在做這一行。所以開發(fā)框架很簡單的，就是方便你開發(fā)，舒舒服服。

感覺自己的網站不安全？動不動就被了！**

• 個人推薦使用框架，開啟全局過濾，然后服務器盡量用大廠的，例如阿里云，直接開啟白名單，這是最簡單的防護方式了。

我是前端，怎么做后端？

• 可以直接學習后端語言，想開發(fā)效率快當然是“天下第一語言PHP“，哈哈哈，不要噴我！PHP的開發(fā)效率是不錯的，如果你是前端，你也可以學學nodejs，也可以的，當然還有其它都可以。

最最萌新的話如果要租服務器，建議租用Windows的服務器，操作比較方便，不然命令行操作你可能吃不消。

其它建議

• 如果單純想聯(lián)系數(shù)據(jù)庫，沒必要單獨裝一個，直接使用集成環(huán)境，例如phpstudy，它集成了mysql，直接安裝就可以用了，舒舒服服，躺著下載安裝幾分鐘，自己單獨裝，死磕還不一定弄好。

如有錯誤歡迎指出，有問題可以私信我喲，可以關注收藏一鍵三連！完美！
有問題都可以問我，包括是否想學php、python、c/c++等，這段時間在籌劃在CSDN學院上傳教程，歡迎支持！

總結

以上是生活随笔為你收集整理的【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式，这篇博文很有可能是你的启蒙文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。