1. 程式人生 > >HTML第一課:B/S結構&C/S結構、HTML、六種常用標籤

HTML第一課:B/S結構&C/S結構、HTML、六種常用標籤

一、B/S和C/S結構

1.C/S(client/server)結構流程

    客戶端將使用者請求通過網路,傳送給目標伺服器,伺服器接收到請求後作出響應,再通過網路將請求傳遞給使用者。

2.B/S(browser/server)結構流程

    使用者使用瀏覽器將請求通過網路傳送給目標伺服器,伺服器接收到請求後作出響應,再通過網路傳遞給使用者瀏覽器進行展示。

3.兩者主要差異對比:

①硬體環境不同:     C/S 一般建立在專用的網路上, 小範圍裡的網路環境, 區域網之間再通過專門伺服器提供連線和資料交換服務.  B/S 建立在廣域網之上的, 不必是專門的網路硬體環境,例與電話上網, 租用裝置. 資訊自己管理. 有比C/S更強的適應範圍, 一般只要有作業系統和瀏覽器就行
②對安全要求不同:     C/S 一般面向相對固定的使用者群,對資訊保安的控制能力很強,一般高度機密的資訊系統採用C/S 結構適宜。可以通過B/S釋出部分可公開資訊,B/S 建立在廣域網之上, 對安全的控制能力相對弱, 面向是不可知的使用者群。 ③系統維護不同 :     C/S 程式由於整體性, 必須整體考察, 處理出現的問題以及系統升級. 升級難. 可能是再做一個全新的系統B/S 構件組成,方面構件個別的更換,實現系統的無縫升級. 系統維護開銷減到最小.使用者從網上自己下載安裝就可以實現升級.  鄭重強調:目前絕大多數網際網路公司均採用B/S結構

二、靜態網頁和動態網頁

 1.靜態網頁定義:純粹採用html編寫的網頁,相對於動態網頁而言,沒有後臺數據庫支援,不包含程式,資料基本為固定資料

 2.動態網頁定義:採用ASP、JSP、PHP、CGI等程式動態生成的頁面,這種頁面只有在接收到使用者請求後才會進行動態生成,根據後臺所傳遞過來的資料不同,而展現給使用者的效果也會不同。

二者的對比:

——————————————————————————————————————————————                       靜態網頁                      動態網頁   內容:              網頁內容固定                 網頁內容動態生成   綴:              .html、.htm                 .asp、.jsp、.php等   
優點:              不需要系統實時生成           日常維護簡單、更改結構方便、極強的互動性    缺點:              互動效能差、維護繁瑣         需要大量系統資源合成網頁    資料庫:            不支援                       支援 ——————————————————————————————————————————————     在實際生活中,我們不可以僅僅根據檔案的字尾來判斷一個網頁究竟是動態的網頁還是靜態的網頁,例如  index.html重新命名為index.jsp,儘管這個檔案的字尾是符合動態網頁所擁有的字尾,但其本質依舊是一個靜態網頁。

三、接下來我們來明確兩件事情

    1、html:是一種描述語言,用於開發生活中的頁面,全稱HyperText Mark-up Language,我們平時所看見的網頁上擁有的任何一內容,均是用這門語言進行編寫的。      2、每一個頁面,其本質其實都是一個用html這門語言所編寫的html文件。使用者電腦上的瀏覽器對我們的html文件進行解析,將解析後的內容再展現給使用者。             而每一個html文件,都是由三大部分組成:HTML元素、HEAD元素和BODY元素,並且每一個元素中又包含格子獨有的其他標記(標籤)。            html元素是最外層元素,裡面包含著head元素和body元素,head元素中包含的是文件的基本資訊,body元素中包含的是我們平時能在網頁上看到的具體內容。             一言概之,關於網頁自身的資訊放在head元素中,我們想給使用者看到的東西放在body中。而無論是什麼內容,其實都是對應著html中的某一種標籤,並且大多數html的標籤均是成對出現的。        第一課要求大家掌握的標籤共有六大種:標題、文字、影象、背景、列表和超連結。        取圖片標籤的一個不容易被大家理解的屬性來進行一下簡單講解,屬性名為usermap。     這個屬性的作用是:可以將一張圖片劃分成不同區域,每一塊區域都對映著一個不同的url,當用戶單擊其中某一個區域時,將被連結到不同的文件中。             例如如下這張圖片,將五個電影放在同一張圖片中,使用者點選不同電影所在的區域,會跳轉到區域所對應的具體電影播放介面。     usemap屬性提供了一種“客戶端”的影象對映機制,有效地消除了伺服器端對滑鼠座標的處理,以及由此帶來的網路延遲問題。通過特殊的 <map> 和 <area> 標籤,HTML 創作者可以提供一個描述 usemap 影象中超連結敏感區域座標的對映,這個對映同時包含相應的超連結 URL。usemap 屬性的值是一個 URL,它指向特殊的 <map> 區域。使用者計算機上的瀏覽器將把滑鼠在影象上單擊時的座標轉換成特定的行為,包括載入和顯示另外一個文件。             我們舉例說明一下,下面這段原始碼將一個 100x100 畫素的影象 map.gif 對映為 4 個區域,當用戶單擊其中某一個區域時,將被連結到不同的文件中。
    1. <ahref="/example/map">
    2.   <imgsrc="/i/map.gif"usemap="#map"/>
    3. </a>
    4. <mapname="map">
    5.   <areacoords="0,0,49,49"href="link1.html">
    6.   <areacoords="50,0,99,49"href="link2.html">
    7.   <areacoords="0,50,49,99"href="link3.html">
    8.   <areacoords="50,50,99,99"href="link4.html">
    9. </map>
    早期的視訊網站和地圖會採用此種方式,但隨著IT技術的不斷進步,已經出現了更多更簡便的解決方式,因此大家對於usemap這個屬性進行一個瞭解即可。     其他五種標籤就不進行逐一累述了,html的標籤學習起來並沒有什麼難度,重點在於勤加練習!