财神方位

書名：網頁制作基礎
作者名：溫凱峰李毓麗主編
本章字數： 5280字
更新時間： 2018-12-29 02:33:47

1.1 網頁與HTML的基礎知識

1.1.1 網頁的基本概念

1.什么是Internet

Internet，中文譯名為“因特網”或“國際互聯網”，是利用通信線路和通信設備，把世界各地的計算機網絡、主機和個人計算機互相連接起來，在網絡協議控制下所構成的互聯網系統。世界上任何一個計算機系統和網絡，只要遵守共同的網絡通信協議TCP/IP，都可以連接到Internet上。Internet擁有數億個用戶，而且用戶數還在以驚人的速度增長。Internet實現全球信息資源共享，如信息查詢、文件傳輸、遠程登錄、電子郵件等，成為推動社會信息化的主要工具，對人類社會產生了深刻的影響。

2.WWW

WWW是環球信息網（World Wide Web）的縮寫，也可以簡稱為Web，中文名字為“萬維網”，是一個以Internet為基礎的計算機網絡，允許用戶在一臺計算機上通過Internet獲取其他計算機的資源。從技術角度上說，環球信息網是Internet上那些支持WWW協議和超文本傳輸協議HTTP（HyperText Transport Protocol）的客戶機與服務器的集合，通過它可以存取世界各地的超媒體文件，內容包括文字、圖形、聲音、動畫、資料庫及各式各樣的軟件。

環球信息網由歐洲核物理研究中心（CERN）研制的主從結構分布式超媒體系統，其第一套軟件于1990年年底正式投入使用。由于用戶使用Web瀏覽器訪問信息資源的過程中不用關心技術問題，并且它的界面非常友好，因此在Internet上得到了迅速的推廣和發展。目前，WWW服務器已經遍布全世界的各個角落，包含所有的Web站點、Gopher信息站、FTP檔案庫、Telnet公共存取賬號、News新聞討論區和Wais資料庫。所以，環球信息網可以說是當今全世界最大的電子資料世界，已經可以把World Wide Web當成是Internet的同義詞了。事實上，一般我們日常所說的“上網”，實質指的就是連上World Wide Web。

在Web之前，Internet上只有文本形式的信息，沒有圖形、聲音等。Web提供將圖形、音頻、視頻信息集合于一體的特性，而且，Web是非常易于導航的，因為它使用了超文本鏈接技術，只需要從一個鏈接跳到另一個鏈接，就可以在各頁各站點之間進行瀏覽了。這些特性使得Web迅速發展和流行起來，同時Web具有平臺無關性，無論你的系統平臺是什么，你都可以通過一種叫做瀏覽器（browser）的軟件實現在Internet訪問WWW。Web是動態的、交互的、自由的，這是因為Web所包含的信息是雙向的，信息提供者對網站上的信息進行及時更新，保證了信息的時間性，瀏覽者通過瀏覽網頁來獲取自己所需要的信息，同時，瀏覽者也可以通過動態交互的Web程序和其他瀏覽者或網站管理人員進行交流和溝通。

3.HTTP和URL

HTTP是Web的核心，Web瀏覽器與服務器之間的通信使用的協議就是HTTP，從協議的角度來看，Web是“站”在TCP/IP之上的，是TCP/IP的一個應用。從TCP/IP來看，Web（HTTP）和TELNET、FTP、GOPHER、WAIS等是沒有什么區別的。HTTP按照客戶-服務器的模式工作，支持客戶（一般是瀏覽器）與服務器間的通信，相互傳輸數據。我們先來分析瀏覽器與服務器的工作過程——從一次“Click”到一張WebPage。

<1>瀏覽器用URL查詢DNS，DNS返回IP地址。

<2>瀏覽器用這個IP地址建立一次TCP/IP連接。

<3>瀏覽器通過該連接向服務器發出一次HTTP請求。

<4>基于該請求的內容，服務器找到相應的文件，并根據文件的擴展名，形成一個MIME類型的HTTP回答消息，發送驗證信息給瀏覽器，服務器關閉本次連接。

<5>根據消息頭，瀏覽器按某種方式顯示該文件內容，如果本文有<… SRC =URL>之類，瀏覽器將隨時發出新的請求（可能對不同的服務器），以獲得有關內容。

在這個工作過程中，步驟<2>～<4>是HTTP的一次操作，有時也稱為HTTP的一次事務（transaction）。

隨著Internet特別是Web的迅速發展，其信息資源也急劇膨脹。如何在浩如煙海的信息海洋里定位一個資源，這個資源應包括服務器及其上面存在的信息，已顯得尤為重要。統一資源定位符（URL）便是其中的一種解決方案。URL通過定義資源位置的抽象標志來定位網絡資源。資源被定位后，便可對其進行各種操作，如訪問、更新、替換、查找屬性。總體來說，URL的格式為：<scheme>:<scheme-specific-part>。其中，<scheme>指所用的URL方案名；<scheme-specific-part>意義的解釋與所用方案有關。方案名由字符組成，可包括字母（a～z）、數字（0～9）、加號（+）、句點（.）和連詞符（-），字母大小寫是不分的。對于Internet，<scheme>指的是Internet協議名，主要包括：HTTP、FTP、GOPHER、MAILTO、NEW、NNTP、TELNET、WAIS和FILE等，以后還會不斷擴充。HTTP URL方案用于表示可通過HTTP進行訪問的Internet資源。HTTP URL的格式如下：

        http://<host>:<port>/<path>?<searchpart>

其中，<host>和<port>按標準格式；“:<port>”如果省略，默認端口值為80；<path>為HTTP選擇器，而<searchpart>為查詢字符串，它們都是可選的，如果這兩項不存在，則主機或端口后的斜杠也應該省略。

4.網站和網頁

所謂網站（Website），就是指在因特網上，根據一定的規則，使用HTML等工具制作的、用于展示特定內容的相關網頁的集合。簡單地說，網站是一種通信工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的信息，或者利用網站來提供相關的網絡服務。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的信息或者享受網絡服務。

網頁是構成網站的基本元素，是網站中的一個頁面，是WWW的基本文檔。網頁實際是一個文件，通常是HTML格式（文件擴展名為“.html”、“.htm”、“.asp”、“.aspx”、“.php”和“.jsp”等），它存放在世界某個角落的的某一臺計算機中，而這臺計算機必須與互聯網相連。網頁由網址（URL）來識別與存取，當我們在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁文件會被傳送到你的計算機，然后通過瀏覽器解釋網頁的內容，再展示到你的眼前。

文字與圖片是構成網頁的兩個最基本的元素，你可以簡單地理解為：文字，就是網頁的內容；圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等，這些元素通過鏈接實現與其他網頁或網站的關聯和跳轉。

網站由眾多內容不同的網頁組成，網頁的內容體現了網站的功能。我們通常把進入網站首先看到的網頁稱為首頁或主頁（homepage）。

1.1.2 HTML的基本概念和基本結構

HTML（HyperText Markup Language）即超文本標記語言，是目前網絡上應用最廣泛的語言，也是設計制作網頁文件的主要語言。“超文本”指無論網頁頁面的位置在哪里，都可以從一個頁面跳轉到另一個頁面；“標記語言”指網頁實際上是一個被注釋過的文本文件。HTML用寫字板、記事本等文本編輯工具就可以編寫，通過標記和屬性對文字、圖形、動畫、聲音、表格、鏈接等進行全面描述，它是一種描述性標記語言，用來創建與系統平臺無關的文檔，其文件格式是能被瀏覽器解釋顯示的HTML或HTM文件。

1.HTML發展歷史

HTML作為定義萬維網的基本規則之一，最初由蒂姆·本尼斯李（Tim Berners-Lee）等人于1989年在CERN（Conseil Europeen pour la Recherche Nucleaire）研制。HTML的設計者是這樣考慮的：HTML格式將允許科學家們透明地共享網絡上的信息，即使這些科學家使用的計算機差別很大。因此，這種格式必須具備如下幾個特點：獨立于平臺、超文本、精確的結構化文檔。本尼斯李選擇使用標準通用標記語言SGML（Standard Generalized Markup Language）作為HTML的開發模版，確保了HTML的跨平臺無關性，同時其文檔類型定義（DTD）可以使擴展HTML變得很容易。

自1989年以來，HTML及萬維網的使用和發展有了巨大的變化。NCSA（National Center for Supercomputing Applications，國家超級計算機應用中心）在1993年年初首次構建Mosaic瀏覽器時，NCSA的科學家們把自己需要的特性添加到HTML中，包括直接插入圖形。允許人們把位圖、照片和圖表放入到文檔中以后，萬維網的規模和使用出現了爆炸性的增長，第二年，HTML的發展很快。HTML的新標記不時地被一個又一個的瀏覽器引入，有一些新標記流行起來，而有一些消失了。有些增加部分設計得很糟，很多甚至不遵從SGML規范。

到了1994年年中，HTML幾乎以失控的狀態發展。在IETF（Internet Engineering Task Force）主持下，1995年11月在瑞士日內瓦舉行的第一次WWW會議上成立了HTML工作小組。它的主要任務是把HTML形式化成為一種SGML DTD，稱之為HTML Level 2（HTML 2.0，最初由本尼斯李設計的HTML被定義為Level 1）。標準化之后，HTML就可以被安全地擴展到將來的各個級別的版本，從而利用了SGML的實質性能和格式化結構。

盡管有關各方從來沒有取得完全的共識，但萬維網聯盟HTML工作組（World Wide Web Consortium's HTML Working Group）還是集中了1996年的萬維網發展的成果，產生了HTML 3.2版本，加入了很多特定的瀏覽器，如Netscape和Mosaic的元素和屬性。

1997年12月18日推出的HTML 4.0將HTML推向了一個全新的高度，它繼承了以往版本的所有特點，并提出了兩個全新的理念：將文本結構和顯示樣式分離，更廣泛的穩定兼容性。由于同期CSS層疊樣式的配套推出，使得HTML和CSS對于網頁制作的能力達到了前所未有的高度。

1999年12月24日，W3C（萬維網聯盟）推出了改進版的HTML 4.0.1，對HTML 4.0的一些功能做了進一步的完善，并一直沿用到現在。

2.HTML的基本概念

了解HTML文檔的代碼結構是學習網頁制作的基礎，在學習HTML以前，我們先看一個簡單的網頁實例。

【例1.1】利用HTML制作一個簡單的網頁，顯示效果如圖1-1所示。

圖1-1 HTML網頁制作實例

<1>打開Windows下的記事本。

<2>輸入下面代碼：

            <html>
            <head>
            <title>HTML網頁制作實例</title>
            </head>
            <body>你好！歡迎瀏覽HTML語言制作的簡單網頁實例！</body>
            </html>

<3>以純文本格式保存為1-1.html文件。

<4>啟動瀏覽器，打開該文件或在地址欄中直接輸入存放該文件的地址，如“D:\網頁制作\1-1.html”，就能看到如圖1-1所示的界面。

每個HTML網頁文件都以<html>開始，以</html>結束。瀏覽器遇到<html>標記時，會按照HTML的標準來解釋后續的文本，直到遇到</html>才停止解釋。<head>和</head>之間的內容是網頁的頭部，一般不顯示在瀏覽器中，主要用來說明文件的有關信息。<title>和</title>是網頁標題標記，它們之間的內容出現在瀏覽器中的標題欄。<body>和</body>之間是文件的主體部分，網頁正文中的所有內容包括文字、圖像、聲音等都包含在這對標記對之間。

在本例中，我們看到的html、head、body等，在HTML中統一稱為“標記”，是用于描述功能的符號，用來控制文字、圖像等的顯示方式，在使用的時候一定要用“< >”把它們括起來。標記分為單標記和雙標記兩種。單標記指的是單獨使用就可以控制網頁效果的標記，其語法結構是：<標記名>。例如，“ ”就是單標記，表示換行的意思。雙標記由“始標記”和“尾標記”兩部分構成，必須成對使用，始標記告訴Web瀏覽器從此處開始執行該標記所表示的功能，而尾標記告訴Web瀏覽器在這里結束該功能。始標記前加一個“/”即成為尾標記。這類標記的語法如下：

            <標記>內容</標記>

其中，“內容”部分就是要被這對標記施加作用的部分。例如，你想突出某些文本的顯示，就將此段文字放在一對 標記中就可以了：

            <EM> 重點突出</EM>

在許多單標記和雙標記的始標記內，緊跟著標記名后面有很多的語句，這些語句稱為“標記屬性”，其語法如下：

            <標記名  屬性1  屬性2  屬性3  …>

各屬性之間無先后次序，屬性也可省略（即取默認值）。例如，單標記<HR>表示在文檔當前位置畫一條水平線（horizontal line），一般是從窗口中當前行的最左端一直畫到最右端，此標記允許帶一些屬性。例如：

            <HR SIZE=3 ALIGN=LEFT WIDTH="75%">

其中，SIZE屬性定義線的粗細，屬性值取整數，默認為1；ALIGN屬性表示對齊方式，可取LEFT（左對齊，默認值）、CENTER（居中）、RIGHT（右對齊）；WIDTH屬性定義線的長度，可取相對值（由一對" "號括起來的百分數，表示相對于充滿整個窗口的百分比），也可取絕對值（用整數表示的屏幕像素點的個數，如WIDTH=300），默認值是“100%”。

3.HTML的基本結構

HTML的基本結構主要分成兩部分：文件頭和文件體。其中，文件頭用于說明文件的有關信息和進行一些必要的定義。文件體包括網頁正文中所有的文字、圖像、聲音等內容，是網頁的主要部分。HTML的基本結構如下：

            <html>
                <head>
                    文件頭
                </head>
                <body>
                    文件體
                </body>
            </html>

<html>標簽是文檔標志符，是成對出現的，首標簽<html>和尾標簽</html>分別位于文檔的最前面和最后面，明確地表示文檔是以HTML編寫的。該標簽不帶有任何的屬性。事實上，我們現在所用的瀏覽器是自動識別HTML文檔的，并不要求有<html>標簽的出現，也不對它進行任何操作。但是，為了提高文檔的適用性，還是應該養成用這個標簽的習慣。

<head>和</head>之間是文檔的頭部信息，整個文檔的相關信息如文檔總標題、描述、作者、編寫時間等均存放在這里，若不需頭部信息，則可省略此標記，嵌套在<head>標簽中使用的子標簽主要有<title>和<isindex>。<title>標簽是成對的，用來規定HTML文檔的標題。在<title>和</title>之間的內容將顯示在Web瀏覽器窗口的標題欄中。<isindex>標簽是一個單獨的標簽，用來規定文檔的屬性，說明該文檔是可以按關鍵字索引的。

<body>和</body>之間是文件的主體部分，網頁正文中的所有內容，包括文字、圖像、聲音、表格、動畫等，都包含在它們之間。在<body>標簽中可以規定整個文檔的一些基本屬性：

bgcolor：指定HTML文檔的背景色，默認為白色。

text：指定HTML文檔中正文文字的顏色，默認為黑色。

link：指定HTML文檔中待連接超鏈接對象的顏色，默認為藍色。

alink：指定HTML文檔中被鼠標點中時超鏈接對象的顏色，默認為藍色。

vlink：指定HTML文檔中已被單擊（訪問）過的超鏈接對象的顏色，默認為紫色。

background：指定HTML文檔的背景圖像。

4.HTML的語法規則

HTML應遵循以下語法規則。

[1] HTML文件以純文本形式存放，擴展名為.htm或.html。若系統為UNIX系統，擴展名為.html。

[2] HTML標記不區分大小寫，如<HTML>和<html>是一樣的。

[3]多數HTML標記可以嵌套，但不可以交叉。例如，“網頁制作基礎”將不能正確顯示。

[4] HTML文件一行可以寫多個標記，一個標記也可以分多行書寫，不用任何續行符號。例如：

            <P><FONT COLOR="#000000" FACE="楷體-GB2312">
                網頁制作基礎
            </FONT></P>

和

            <P><FONT COLOR="#000000"
            FACE="楷體-GB2312">
                網頁制作基礎
            </FONT></P>

都是正確的，并且顯示的效果完全一樣。但是HTML標記中的一個單詞不能分兩行書寫，如：

            <FO
                NT COLOR="#000000"FACE="楷體-GB2312">
                  網頁制作基礎
            </FONT>

是不正確的。

[5] HTML源文件中的換行、空格和回車符在顯示效果中是無效的。若想在顯示內容中換行必須用 標記，換段用標記，表示段落開始，表示段落結束；一個半角空格用一個“ ”表示，多個空格只需要使用多個“ ”就可以表示。例如：

            <FONT FACE="楷體-GB2312">
                網頁制作基礎
            </FONT>

與

            <FONT FACE="楷體-GB2312">
                網頁
                制作基礎
            </FONT>

在瀏覽器中都顯示為：

            網頁制作基礎
        又如：
            <FONT FACE="楷體-GB2312">
                網頁<p>制作基礎
            </FONT>

與

            <FONT FACE="楷體-GB2312">
                網頁<p>

                制作基礎
            </FONT>

在瀏覽器中都顯示為：

            網頁
            制作基礎

與空格的表示方法一樣，一些特殊符號也是由前綴“&”加上字符對應的名稱，再加上后綴“;”組成，如“"”的符號碼為“"”。

[6]網頁中所有的顯示內容都應該受限于一個或多個標記，不應有游離于標記之外的文字或圖像等，以免產生錯誤。

官术网_书友最值得收藏!

網頁制作基礎

1.1 網頁與HTML的基礎知識

1.1.1 網頁的基本概念

1.1.2 HTML的基本概念和基本結構