HTML與CSS網(wǎng)頁設計概述

1.1 認識網(wǎng)頁、網(wǎng)頁相關的名詞、Web標準

1.1.1 認識網(wǎng)頁

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

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

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

二、網(wǎng)頁是如何形成的

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

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

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

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

三、網(wǎng)站與網(wǎng)頁

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

網(wǎng)站由網(wǎng)頁構成，網(wǎng)頁有靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁之分。現(xiàn)在互聯(lián)網(wǎng)上的大部分網(wǎng)站都是由靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁混合組成的，兩者各有千秋，用戶在開發(fā)網(wǎng)站時可根據(jù)需求酌情采用。

那么，靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁有什么區(qū)別呢？

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

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

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

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

動態(tài)網(wǎng)頁顯示的內(nèi)容則會隨著用戶操作和時間的不同而變化。動態(tài)網(wǎng)頁使用語言為 HTML+ASP 或HTML+PHP或HTML+JSP等。

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

區(qū)別靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁最重要的一點——程序是否在服務器端運行，這是最重要的標志。

1.1.2 網(wǎng)頁相關的名詞

一、Internet網(wǎng)絡

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

二、WWW

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

三、URL

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

四、DNS

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

五、HTTP

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

六、Web

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

七、W3C組織

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

1.1.3 Web標準

一、什么是Web標準

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

1.結構

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

2.表現(xiàn)

表現(xiàn)用于設置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

3.行為

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

二、為什么需要Web標準

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

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

（1）讓Web的發(fā)展前景更廣闊。

（2）內(nèi)容能被更多的設備訪問。

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

（4）降低網(wǎng)站流量費用。

（5）使網(wǎng)站更易于維護。

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

四、結構、表現(xiàn)、行為之間的關系

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