HTML與CSS網頁設計概述

1.1 認識網頁、網頁相關的名詞、Web標準

1.1.1 認識網頁

一、什么是網頁

為了使初學者更好地認識網頁，我們首先來看一下京東商城官方網站。打開火狐瀏覽器，在地址欄輸入京東商城官方網站的網址，按下回車鍵，這時火狐瀏覽器中顯示的頁面即為京東商城官方網站首頁，如圖1-1所示。

從圖1-1中可以看到，網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。

二、網頁是如何形成的

為了讓初學者快速了解網頁是如何形成的，接下來查看一下網頁的源代碼。

在京東商城官方網站首頁中，單擊鼠標右鍵，在彈出的菜單欄中選擇【查看頁面源代碼】選項，如圖1-2所示。

在彈出的窗口中便會顯示當前網頁的源代碼，具體效果截圖如圖1-3所示。

圖1-3即為京東商城官方網站首頁的源文件，它是一個純文本文件，僅包含一些特殊的符號和文本。而我們瀏覽網頁時看到的圖片、視頻等，其實是這些特殊的符號和文本組成的代碼被瀏覽器渲染之后的結果。

三、網站與網頁

一個網站通常包含多個子頁面，例如京東商城官方網站包含了眾多的子頁面。網站其實就是多個網頁的集合，網頁與網頁之間通過超鏈接互相訪問。輸入網址，第一個打開的頁面就是該網站的首頁。

網站由網頁構成，網頁有靜態網頁和動態網頁之分。現在互聯網上的大部分網站都是由靜態網頁和動態網頁混合組成的，兩者各有千秋，用戶在開發網站時可根據需求酌情采用。

那么，靜態網頁與動態網頁有什么區別呢？

靜態網頁是指用戶無論何時何地訪問，網頁都會顯示固定的信息，除非網頁源代碼被重新修改上傳。

所謂靜態網頁就是指沒有后臺數據庫、不含程序和不可交互的網頁。你編的是什么，它顯示的就是什么，不會有任何改變。靜態網頁更新起來相對比較麻煩，適用于一般更新較少的展示型網站。反之，不符合靜態網頁概念的就屬于動態網頁。

靜態網頁使用語言：HTML。在網站設計中，一般的靜態網頁文件是以.htm、.html、.shtml、.xml等為后綴的。但是，并不是說靜態網頁就沒有動態的效果，有的靜態網頁也會有動態效果，如.GIF格式的動畫、Flash、滾動字母等。

運行于客戶端的程序、網頁、插件、組件，屬于靜態網頁，例如，html頁、Flash、JavaScript、VBScript等，它們是永遠不變的。

動態網頁顯示的內容則會隨著用戶操作和時間的不同而變化。動態網頁使用語言為 HTML+ASP 或HTML+PHP或HTML+JSP等。

在服務器端運行的程序、網頁、組件，屬于動態網頁，它們會隨不同客戶、不同時間，返回不同的網頁，例如ASP、PHP、JSP、ASP.net、CGI等。

區別靜態網頁與動態網頁最重要的一點——程序是否在服務器端運行，這是最重要的標志。

1.1.2 網頁相關的名詞

一、Internet網絡

所謂Internet網絡就是我們通常所說的互聯網，是由一些使用公用語言互相通信的計算機連接而成的網絡。

二、WWW

WWW（英文World Wide Web的縮寫）中文譯為“萬維網”。但WWW不是網絡，也不代表Internet，它只是Internet提供的一種服務——即網頁瀏覽服務，我們上網時通過瀏覽器閱讀網頁信息就是在使用WWW服務。

三、URL

URL（英文Uniform Resource Locator的縮寫）中文譯為“統一資源定位符”。URL其實就是Web地址，俗稱“網址”。

四、DNS

DNS（英文Domain Name System的縮寫）是域名解析系統。在Internet上域名與IP地址之間是一一對應的，域名（例如人民郵電出版社的域名為www.ptpress.com.cn）雖然便于人們記憶，但計算機只認識IP地址，將好記的域名轉換成IP的過程被稱為域名解析。

五、HTTP

HTTP（英文Hypertext transfer protocol的縮寫）中文譯為超文本傳輸協議。它是一種詳細規定了瀏覽器和萬維網服務器之間互相通信的規則。

六、Web

Web本意是蜘蛛網和網的意思。對于網站設計、制作者來說，它是一系列技術的復合總稱（包括網站的前臺布局、后臺程序、美工、數據庫開發等），我們稱它為網頁。

七、W3C組織

W3C（英文World Wide Web Consortium的縮寫）中文譯為“萬維網聯盟”。萬維網聯盟是國際最著名的標準化組織。W3C最重要的工作是發展Web規范，如：超文本標記語言（HTML）、可擴展標記語言（XML）等。這些規范有效地促進了Web技術的兼容，對互聯網的發展和應用起到了基礎性和根本性的支撐作用。

1.1.3 Web標準

一、什么是Web標準

Web標準并不是某一個標準，而是一系列標準的集合，主要包括結構（Structure）、表現（Presentation）和行為（Behavior）3個方面。

1.結構

結構用于對網頁元素進行整理和分類，主要包括XML和XHTML兩個部分。XHTML是基于XML的標識語言，是在HTML4.0的基礎上，用XML的規則對其進行擴展建立起來的，它實現了HTML向XML的過渡。

2.表現

表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

3.行為

行為是指網頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分。其中，DOM（英文Document Object Model的縮寫）是文檔對象模型；ECMAScript是ECMA（英文European Computer Manufacturers Association的縮寫）以JavaScript為基礎制定的標準腳本語言。

二、為什么需要Web標準

由于不同的瀏覽器解析出來的效果可能不一致，開發者往往需要為多版本的開發而艱苦工作。使用Web標準，可以使不同的瀏覽器展示統一的內容。

三、采用Web標準有什么好處

（1）讓Web的發展前景更廣闊。

（2）內容能被更多的設備訪問。

（3）更容易被搜索引擎搜索。

（4）降低網站流量費用。

（5）使網站更易于維護。

（6）提高頁面瀏覽速度。

四、結構、表現、行為之間的關系

以一個人為例，就可以清晰地說明三者之間的關系：人的骨骼就相當于結構，結構可以使內容更清晰、更有邏輯性；衣服、帽子、鞋子就相當于表現，表現用于修飾內容的樣式；行走、跳躍、奔跑就是行為，行為就是內容的交互及操作效果。