今天心血來潮，想搞個(gè)本地網(wǎng)站玩玩，記錄一下整個(gè)過程，也算是個(gè)小實(shí)踐。

準(zhǔn)備工作

一開始啥也不懂，就到處瞎搜。得知道大概要干咱這網(wǎng)站是給自己看的，又不是給別人訪問的，所以不用考慮什么服務(wù)器、域名之類的。

然后就是想想網(wǎng)站要放些什么內(nèi)容。我平時(shí)喜歡寫點(diǎn)東西，拍拍照，所以就決定把這些內(nèi)容整理整理，放到網(wǎng)站上。

開始動(dòng)手

啥工具也沒用，直接用電腦自帶的文本編輯器，新建一個(gè)文件，然后就開始敲代碼。這代碼也是最簡(jiǎn)單的 HTML，就寫幾個(gè)字：“我的第一個(gè)本地網(wǎng)站！”。然后把文件保存，后綴名改成 .html。雙擊打開，瀏覽器里就顯示出來！

這第一步算是成功，雖然簡(jiǎn)陋得不行，但好歹是個(gè)網(wǎng)頁。

加點(diǎn)料

光禿禿的幾個(gè)字太難看，得加點(diǎn)內(nèi)容。我把我之前寫的文章，復(fù)制粘貼一些進(jìn)來。又加幾個(gè)標(biāo)簽，比如<p>，用來分段，這樣看起來就舒服多。

然后是圖片。我找?guī)讖堊约号牡恼掌?，想放到網(wǎng)頁上。這可把我難住，不知道咋弄。又是一番搜索，原來要用<img>標(biāo)簽，還得寫上圖片的路徑。折騰半天，終于把圖片顯示出來！

美化一下

內(nèi)容是有，但還是不好看。我又去學(xué)點(diǎn) CSS，就是給網(wǎng)頁加點(diǎn)樣式，比如改改字體顏色、大小，調(diào)整一下布局啥的。這玩意兒比 HTML 難多，不過慢慢試，也弄出點(diǎn)樣子來。

• 把文章標(biāo)題加粗，看著更醒目。
• 給每段文字加點(diǎn)間距，不會(huì)擠在一起。
• 把圖片大小調(diào)整一下，適應(yīng)頁面寬度。

繼續(xù)折騰

現(xiàn)在網(wǎng)站看起來像模像樣，但我還是不滿足。我又去研究下怎么讓網(wǎng)站在手機(jī)上也能看，畢竟現(xiàn)在大家都用手機(jī)。發(fā)現(xiàn)這又是個(gè)大坑，叫做“頁面適應(yīng)”，電腦上的網(wǎng)頁直接在手機(jī)上看，會(huì)變得亂七八糟。

沒辦法，繼續(xù)學(xué)唄。又是一堆新名詞，什么“響應(yīng)式布局”、“媒體查詢”之類的。搞幾天，總算把手機(jī)版也弄得差不多。

最終成果

經(jīng)過一番折騰，我的本地網(wǎng)站終于有點(diǎn)樣子。雖然跟那些專業(yè)的網(wǎng)站沒法比，但好歹是自己一點(diǎn)點(diǎn)做出來的，成就感滿滿！以后有什么新的想法，還可以繼續(xù)往上加內(nèi)容，慢慢完善。

這回實(shí)踐也讓我明白，做網(wǎng)站這事，說簡(jiǎn)單也簡(jiǎn)單，說難也難。關(guān)鍵是要?jiǎng)邮秩プ觯龅絾栴}就去查，去學(xué)，總能解決的。