我想我大概是瘋了，居然在這個面向教師和家長群體的公眾號里給大家聊網頁制作！

事情的起因就是前幾天我分享了我制作網上教學頁面的流程：《》，然后就收到了一些留言：

今天稍微有空，還是給大家安排一期吧！我試試用最直白的話給大家講講，看看大家能不能有所收獲。

只希望其他伙伴進到這篇文章后，不要以為進錯了公眾號，我們沒有轉型！

訪問網頁的原理

我們每天都在訪問網頁，其中的原理其實很簡單，我們可以簡單看作是在網絡上有一臺電腦，我們用戶都在訪問這臺電腦上的文件。

當然，這中間還有很多復雜的工作，我們不需要深入了解。

所以，如果我們制作好了自己的網頁，得想辦法把網頁放在一臺別人都能訪問的電腦上，這樣其他用戶才能訪問到我們的網頁。

家用的寬帶，運營商是不允許你做這樣的事情的。所以，你還得有一臺服務器！

專業的服務器需要購買，但我們練手可以用免費的服務器。為了避免廣告，請大家自行在網上搜索“免費空間”，找到免費的服務器來練手。

服務器可以理解為互聯網中的一臺電腦，在網絡中要定位到它，就得靠ip地址，但ip地址太長不好記網站制作，于是就有了“域名”（也就是大家平時用的網址），使用“域名”指向某一臺服務器的ip，我們要想記住和訪問服務器就方便多了。比如：、……

我們訪問服務器上的網頁，通常都是以這樣的格式來訪問：

域名/文件路徑

比如，我之前為大家制作的教師必備導航頁，就這樣訪問：

44886.com/go.htm

這是一個域名，它指向一臺ip地址為82.156.195.xx的服務器，導航頁就是這臺服務器中一個名字為go.htm文件。

同理，我還可以在這臺服務器上放置名字為index.htm、tts.htm、tools-.htm等各種各樣的文件，瀏覽器訪問到這個文件后，就渲染給用戶看。

這就是平時我們上網訪問網頁的簡單原理。當然，這是簡化了中間很多復雜的過程的。現在你明白了嗎？

網頁怎么制作的

接下來，我們就來看看平時我們訪問到的網頁是怎么制作出來的。當然，同樣是簡化了很多很多很多之后的。

我們平時在訪問網頁時，在頁面空白處點擊鼠標右鍵-查看源代碼網站制作，就能看到那個網頁的代碼了。

看到網頁的源代碼：

我們今天只能來看看最基礎的，否則可能用幾十篇文章都寫不完，如果你真的感興趣，也可以系統地看看相關的教程或資料。

網頁最基本的格式

"zh">

????"UTF-8">
????


????
用戶看到的內容
????

把上面的代碼，保存在名字為index.html的文件中，雙擊用瀏覽器打開，就能看到它在瀏覽器中是這樣的：

上面是最簡單的演示，里面奇怪的< >框住的內容就是html標簽，< >里面不同的字母代表這個標簽的不同作用，比如：

這樣的標簽太多太多，就不一一列出來了。

從上面那簡單的代碼中可以看出：標簽分兩種，單個出現的和成對出現的。

成對出現的標簽通常中間包含了內容。在內容結束后需要用一個加/的同名標簽來表示結束，比如：

這是一段文字

，才能表示一個完整的段落，如果沒有后面的

，瀏覽器會認為這個段落還在繼續，最終網頁顯示不正常。

給內容加點花樣兒

為什么我們在網上看到的內容是五顏六色、形狀各異的呢？

因為，我們還能給標簽加一些屬性，讓它變得與眾不同，比如：

"color:#ff0000;">用戶看到的內容

還是開始那個簡單的代碼，給

標簽加上一個style屬性，看英文就能明白大意，style就是風格、樣式的意思，里面可以添加顏色、背景、字號大小、邊距等很多樣式。

從上面例子，你應該知道了：我們可以通過給標簽添加屬性讓標簽變得與眾不同。

我那導航頁頂部彩色的文字，就是用下面這段樣式變成漸變色的：

好了，我得適可而止；畢竟我們公眾號面向的群體是一群教師和家長。

或許，大家覺得代碼里奇奇怪怪的符號和英文看上去讓人摸不著頭腦；但其實只要你從基礎開始，慢慢練習，用不了多久，你就能將這些符號和英文信手拈來。到了后面，真正讓你覺得頭疼或止步不前的，是想法和創意，而不是技術。

如果你真的對這方面感興趣，可以看看下面清華大學這本非?；鸬臅?，手把手教你入門。

好啦，伙伴們。這些都是工具，工具是為我們服務的；如果工具讓我們覺得苦惱，那可以選擇其他的途徑來解決我們的問題。

- end -