什么是網(wǎng)頁(yè)？

112576 閱讀 0 評(píng)論 1 點(diǎn)贊

一、什么是網(wǎng)頁(yè)？

網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML等制作的用于展示特定的內(nèi)容相關(guān)的網(wǎng)頁(yè)集合。

網(wǎng)頁(yè)是網(wǎng)站中的一“頁(yè)”。通常是HTML 格式的文件，它要通過(guò)瀏覽器來(lái)閱讀。

網(wǎng)頁(yè)其實(shí)就是放在服務(wù)器上的一個(gè)文件，當(dāng)我們?yōu)g覽網(wǎng)頁(yè)時(shí)，這個(gè)文件會(huì)被下載到我們本地的電腦，然后再由瀏覽器解析，渲染出各種漂亮的界面，比如表格、圖片、標(biāo)題、列表等。

網(wǎng)頁(yè)文件的后綴有很多種，比如.html、.php、.jsp、.asp等，相信讀者在瀏覽器的地址欄里也都見(jiàn)到過(guò)，如下圖所示：

后綴.php

后綴.html

可以在瀏覽器地址欄中查看 URL

但不管網(wǎng)頁(yè)的后綴是什么，它的本質(zhì)都是一樣的，就是由 HTML 代碼構(gòu)成的純文本文件。

我們可以使用記事本、Notepad++、Sublime Text、Vim 等文本編輯器打開(kāi)網(wǎng)頁(yè)文件，看到它的所有內(nèi)容，就像下面這樣：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>這個(gè)位置是網(wǎng)頁(yè)的標(biāo)題</title>
</head>
<body>
    <p>這個(gè)位置是網(wǎng)頁(yè)的內(nèi)容文本</p>

    <a href="http://dotcpp.com/">這個(gè)位置是一個(gè)超鏈接</a>

    <ul>
        <li>項(xiàng)目1</li>
        <li>項(xiàng)目2</li>
        <li>項(xiàng)目3</li>
    </ul>
</body>
</html>

這就是 HTML 代碼！我們可以看到很多由<>包圍的特殊標(biāo)記，這叫做 HTML 標(biāo)簽（Tag），瀏覽器通過(guò)識(shí)別這些 HTML 標(biāo)簽來(lái)渲染出各種界面和效果。

將上面的代碼保存到index.html，拖到瀏覽器中運(yùn)行（或者雙擊文件），可以看到如下的效果：

HTML網(wǎng)頁(yè)展示

這是一個(gè)很簡(jiǎn)單很基礎(chǔ)的網(wǎng)頁(yè)，僅作為例子來(lái)演示，真實(shí)網(wǎng)頁(yè)的 HTML 代碼遠(yuǎn)比這復(fù)雜，你可以在網(wǎng)頁(yè)上單擊鼠標(biāo)右鍵，然后在彈出菜單中選擇“查看網(wǎng)頁(yè)源代碼”，就可以查看當(dāng)前網(wǎng)頁(yè)的 HTML 代碼。

二、網(wǎng)頁(yè)是怎么運(yùn)行的？

網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與訪問(wèn)，當(dāng)我們?cè)诰W(wǎng)頁(yè)瀏覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件會(huì)被傳送到用戶家的計(jì)算機(jī)，然后再通過(guò) 瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示給用戶。

1、網(wǎng)頁(yè)：簡(jiǎn)單的從一個(gè)用戶來(lái)說(shuō)就是你看到的thing，淘寶網(wǎng)，C語(yǔ)言網(wǎng)之類的。

2、文件：我們都知道文件都是存在于計(jì)算機(jī)中的，下面的圖片可以帶大家看一下這些文件都在哪里，當(dāng)然也僅僅只是一個(gè)范例。

webapps文件夾

● 在服務(wù)器端

這是一個(gè)Windows下的tomcat服務(wù)器，你所瀏覽的網(wǎng)頁(yè)被保存在webapps文件夾內(nèi)。

● 在瀏覽器端

瀏覽器實(shí)際就是一個(gè)解析器，主要解析從服務(wù)器發(fā)來(lái)的HTTP文件，CSS文件與JS文件。

其實(shí)很簡(jiǎn)單，網(wǎng)頁(yè)就是一些文件。

3、計(jì)算機(jī)：計(jì)算機(jī)顧名思義在服務(wù)端就是服務(wù)器，服務(wù)器長(zhǎng)什么樣子？下面的圖片就是服務(wù)器，大家可以看看。

服務(wù)器

4、網(wǎng)址（URL）：

網(wǎng)址

5、復(fù)雜而又快速的程序：當(dāng)網(wǎng)頁(yè)文件發(fā)送過(guò)來(lái)后，會(huì)由這些程序來(lái)處理。

6、瀏覽器：瀏覽器將接收到的三種文件經(jīng)過(guò)瀏覽器中的內(nèi)核解釋，渲染成我們所見(jiàn)到的網(wǎng)頁(yè)，然后展示給用戶。

7、總結(jié)成一張圖就是：

網(wǎng)頁(yè)運(yùn)行流程圖

三、那么網(wǎng)頁(yè)的結(jié)構(gòu)是什么樣的？

如果要了解網(wǎng)頁(yè)的結(jié)構(gòu)，就必須先了解一下W3C組織。

萬(wàn)維網(wǎng)聯(lián)盟（World Wide Web Consortium，縮寫(xiě)W3C），又稱W3C理事會(huì)。1994年10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。建立者是互聯(lián)網(wǎng)的發(fā)明者蒂姆·伯納斯-李。

由關(guān)于網(wǎng)頁(yè)的幾乎所有標(biāo)準(zhǔn)都是由這個(gè)聯(lián)盟做的。根據(jù)其標(biāo)準(zhǔn)網(wǎng)頁(yè)的標(biāo)準(zhǔn)是HTML為基本，CSS文件負(fù)責(zé)美化，JS負(fù)責(zé)交互與動(dòng)作。

網(wǎng)頁(yè)的結(jié)構(gòu)

這就是一個(gè)簡(jiǎn)單的DOM樹(shù)，我們的網(wǎng)絡(luò)資源可以看成樹(shù)上的每一個(gè)蘋(píng)果，這樣組織資源會(huì)大大的提高瀏覽器的解析速度。日常生活中我們的家族關(guān)系，就可以通過(guò)這樣一張圖清晰的展現(xiàn)出來(lái)。

點(diǎn)贊(1)