帶你了解網頁是怎樣做出來的

2020 年 3 月 11 日
筆記

隨便打開一個網頁，這裡用某首頁舉例外觀如下：

鼠標右鍵，可以查看它的源代碼：

對的，你沒有看錯，就是上面這些密密麻麻的字符拼湊在一起就構成了這樣的一個百度首頁，淘寶網站的一個個商品網頁，視頻網站等也是同樣的原理組成的。網頁組合在一起就構成了網站，許許多多的網站互相連接在一起就構成了互聯網，當然背後還有很多的技術暫時就省略掉了。

因為有了互聯網，我們的生活學習工作才能夠如此的便利，那剛才哪些密密麻麻的的字符都是什麼意思呢？為什麼它們拼湊在一起就會出現排版好的各種文字，圖片視頻等。

什麼是HTML語言

定義：

HTML是HyperText Markup Language三個英語單詞的縮寫，簡稱：HTML。中文名：超文本標記語言。是一種用於創建網頁的標準標記語言。

之前文章講過，標記語言的百科解釋，具體詳細內容可以點擊這裡。標記語言，是一種將文本以及文本相關的其他信息結合起來，展現出關於文檔結構和數據處理細節的電腦文字編碼。與文本相關的其他信息（包括文本的結構和表示信息等）與原來的文本結合在一起，但是使用標記進行標識。標記語言不僅僅是一種語言，就像許多語言一樣，它需要一個運行時環境，使其有用。提供運行時環境的元素稱為用戶代理。

怎樣使用HTML標記語言

上面的文字概念看上去很難理解，下面就通過具體的標記符號來認知HTML這門標記語言。

常用HTML標籤

網頁上通常我們可以看見有大小不一，顏色也不一樣的字體；還有圖片，鏈接，表格等，這些外觀之所以會表現的不一樣，那是因為它們用了不同的符號標記-標籤。

HTML 標題

標題（Heading）標籤，通過h1-h6標籤來定義6級不同大小的標題，通常前面三種就可以了。

HTML 段落

段落(Paragraph)標籤，通過標籤 p 來定義的，表示這是一個段落。

HTML 鏈接

HTML 鏈接是通過標籤 a 來定義的。href後面填寫網頁地址，點擊後可以跳轉到百度的網站去。

HTML 圖像

HTML 圖像是通過標籤 img 來定義的。src是填寫圖片的地址的。

上面只是簡單的介紹了常用的一些標籤，更多詳細的內容可以看官方文檔，這裡推薦菜鳥教程https://www.runoob.com/html/html-tutorial.html，個人覺的還是很不錯的，查閱基礎，簡單入門還是很方便的。

最簡單的一個網頁模板

在你的桌面上創建一個名字叫做 template.html的文件。

裏面填上下面的內容，就變成一個最簡單的網頁模板文件了，雙擊打開在瀏覽器就可以看見了，裏面的內容可以更具自己的需要去改變。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>網頁標題</title></head><body>    <!-- 網頁內容開始-->    <h1>標題</h1>    <p>這是網頁內容，我想要做一個屬於自己的網站</p>    <img src="yezi.jpg" width="200" height="200"/>      <!-- 網頁內容結束--></body></html>

運行效果：

你沒看錯，網頁就是這樣實現的，網頁其實就是一個利用HTML標記語言編寫的一個文件，只要按照它的格式要求就可以，而瀏覽器就是運行HTML標記語言的環境（瀏覽器看到html結尾的文件就知道是HTML比較語言，就會解析到對應的格式外觀），在其它地方可能就看不到網頁這種效果了。

網頁訪問原理

其實訪問網站就是訪問某個文件，我這裡訪問的是本地文件內容，所以圖片的地址欄顯示的就是我的網頁來源地址，所以只要你只到某個電腦的文件地址，然後有權利獲取，那麼你就可以訪問到對應的文件了。

能理解了，但是為什麼訪問http://www.baidu.com也可以獲取到文件了，實際上原理也是一樣的

實際上原理也是一樣的)，baidu.com就是一個存放網頁的地址。下面我查看了一個百度的IP地址是220.181.38.148，通過這個也是可以訪問到百度的首頁的，和前面的baidu.com是等效的。每一個IP地址全世界都是獨一無二的，代表某個位置；但是如果要記住IP地址數字去訪問網頁比較難，所以出現域名了，比如baidu.com就是域名，我的yeching.info也是域名。它們都是一一對應到一個IP地址的，同理域名也是獨一無二的。它兩中間還存在一個DNS解析器，當地輸入baidu.com，實際上通過DNS解析器就獲取到對應的IP地址，也就到達對應的電腦（也叫服務器），獲取到對應的文件了。