2.1-計(jì)算機(jī)網(wǎng)絡(luò)與應(yīng)用ppt課件

1、計(jì)算機(jī)網(wǎng)絡(luò)與應(yīng)用中國(guó)醫(yī)科大學(xué)信息管理與信息系統(tǒng)系 田大軍HTML語(yǔ)言基礎(chǔ)初期的網(wǎng)站都是由靜態(tài)網(wǎng)頁(yè)組成的，網(wǎng)頁(yè)中只有文字、圖形、圖像等，用戶只能被動(dòng)地接受這些信息。那時(shí)的Web頁(yè)面的核心是HTML(一種標(biāo)記語(yǔ)言)，它編寫(xiě)很方便，不要求有特定的語(yǔ)言環(huán)境，可以用任何一種編輯器寫(xiě)好，便可以放到瀏覽器觀看結(jié)果。現(xiàn)在HTML已經(jīng)有許多專門的編輯軟件，如FrontPage、Hotdog、Dreamweaver等。最初的Web是完全的靜態(tài)，僅僅提供大量的信息服務(wù)，沒(méi)有服務(wù)器端客戶端的概念?！办o態(tài)指的就是網(wǎng)站的網(wǎng)頁(yè)內(nèi)容“固定不變”。當(dāng)用戶瀏覽器通過(guò)互聯(lián)網(wǎng)的HTTP (Hyper text Transfer Pr

2、otocol)協(xié)議向Web服務(wù)器請(qǐng)求提供網(wǎng)頁(yè)內(nèi)容時(shí)，服務(wù)器僅僅是將原已設(shè)計(jì)好的靜態(tài)HTML文檔傳送給用戶瀏覽器。其頁(yè)面的內(nèi)容使用的是標(biāo)準(zhǔn)HTML代碼，再加上GIF格式的動(dòng)態(tài)圖片。靜態(tài)網(wǎng)頁(yè)制作：1、網(wǎng)頁(yè)素材搜集與制作圖像處理與動(dòng)畫(huà)制作）2、網(wǎng)頁(yè)版式設(shè)計(jì)3、文本編寫(xiě)自己的網(wǎng)頁(yè)中需要大量的文字材料，這就要在網(wǎng)頁(yè)編輯器中用HTML語(yǔ)言中的標(biāo)簽編寫(xiě)。也可以利用網(wǎng)頁(yè)編輯工具的“所見(jiàn)即所得功能，直接寫(xiě)入文字。4、處理網(wǎng)頁(yè)之間的關(guān)聯(lián)這主要是建立合理、高效的網(wǎng)頁(yè)導(dǎo)航系統(tǒng)。 5、網(wǎng)頁(yè)發(fā)布主要是將建設(shè)好的網(wǎng)頁(yè)上傳到服務(wù)器中供用戶瀏覽。靜態(tài)網(wǎng)頁(yè)的制作工具1、圖像處理與動(dòng)畫(huà)制作工具：Photoshop、Flash等。2

3、、網(wǎng)頁(yè)編輯工具：1純文本編輯工具，如Notepad等；2轉(zhuǎn)換工具，如word等；3專用工具，如FrontPage、Dreamweaver等。3、網(wǎng)頁(yè)上傳工具：1)FTP工具，如WS-FTP，CuteFTP等；2)專用網(wǎng)頁(yè)編輯軟件的文件傳輸功能。4、網(wǎng)頁(yè)優(yōu)化工具：網(wǎng)頁(yè)減肥茶、網(wǎng)頁(yè)優(yōu)化大師等。HTML簡(jiǎn)介HTML是Hypertext Markup Language(超文本標(biāo)志語(yǔ)言)的縮寫(xiě)，它是構(gòu)成Web頁(yè)面(Page)的主要工具，是用來(lái)表示網(wǎng)上信息的符號(hào)標(biāo)志語(yǔ)言。在網(wǎng)上，如果要向全球范圍內(nèi)出版和發(fā)布信息，需要有一種能夠被廣泛理解的語(yǔ)言，即所有的計(jì)算機(jī)都能夠理解的一種用于出版的母語(yǔ)。WWW(Worl

4、d Wide Web)所使用的出版語(yǔ)言就是HTML語(yǔ)言。通過(guò)HTML，將所需要表達(dá)的信息按某種規(guī)則寫(xiě)成HTML文件，通過(guò)專用的瀏覽器來(lái)識(shí)別，并將這些HTML翻譯成可以識(shí)別的信息，就是現(xiàn)在所見(jiàn)到的網(wǎng)頁(yè)。HTML的功能1)出版在線的文檔，其中包含了標(biāo)題、文本、表格、列表以及照片等內(nèi)容。2)通過(guò)超鏈接檢索在線的信息。3)為獲取遠(yuǎn)程服務(wù)而設(shè)計(jì)表單，可用于提交數(shù)據(jù)、檢索信息、定購(gòu)產(chǎn)品等。4)在文檔中直接包含表格數(shù)據(jù)、視頻剪輯、聲音剪輯以及其他的一些應(yīng)用。HTML文件的實(shí)質(zhì)是以.htm或.html為擴(kuò)展名的純文本文件。是供瀏覽器解釋的格式。可以使用記事本、寫(xiě)字板等編輯工具來(lái)編寫(xiě)HTML文件。HTML語(yǔ)言使

5、用標(biāo)志(標(biāo)簽)的方法來(lái)編寫(xiě)文件。它通常使用來(lái)表示標(biāo)志的開(kāi)始和結(jié)束(例如標(biāo)志) 。 HTML文件的組成頭部和主體標(biāo)簽和普通文本 html文件的格式查看網(wǎng)頁(yè)源文件，可見(jiàn)html文件的格式如下：網(wǎng)頁(yè)的標(biāo)題其中省略號(hào)部份是網(wǎng)頁(yè)的內(nèi)容,其實(shí)每個(gè)標(biāo)記都是一一對(duì)應(yīng)的。每個(gè)網(wǎng)頁(yè)文件都是以開(kāi)始和以完畢。與之間的內(nèi)容是網(wǎng)頁(yè)的標(biāo)題。會(huì)顯示在瀏覽器的標(biāo)題欄上。與之間放的是網(wǎng)頁(yè)內(nèi)容。標(biāo)志tag的結(jié)構(gòu)特點(diǎn) 1、用包圍。2、多數(shù)成對(duì)出現(xiàn)。3、結(jié)束標(biāo)記用/。4、標(biāo)簽是嵌入式的。5、標(biāo)簽可有多種屬性和屬性值。 6、標(biāo)簽用半角字符，對(duì)大小寫(xiě)不敏感。文檔標(biāo)題文檔標(biāo)題為。使用過(guò)瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊的藍(lán)色部分顯示的

6、文本信息，那些信息一般是網(wǎng)頁(yè)的主題。要將網(wǎng)頁(yè)的主題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn)單，只要在標(biāo)志對(duì)之間加入要顯示的文本即可。例： 中國(guó)醫(yī)科大學(xué)顏色表示方法HTML用#RRGGBB字符串代表色彩，成為RGB值。RGB值中的RR、GG和BB分別代表紅綠藍(lán)三原色的兩位十六進(jìn)制整數(shù)值。每種原色的取值范圍在00和FF即十進(jìn)制的0和255之間，即一個(gè)字節(jié)存儲(chǔ)一種原色。每種原色都有256種由淺至深的色彩變化，網(wǎng)頁(yè)中呈現(xiàn)的色彩都是由這三種原色調(diào)配出來(lái)的。rgb值可以表示出256*256*256種顏色。黑色黑色白色白色綠色綠色黃色黃色紅色紅色藍(lán)色藍(lán)色#000000#000000#FFFFFF#FFFFFF#00FF0

7、0#00FF00#FFFF00#FFFF00#FF0000#FF0000#0000FF#0000FF頁(yè)面格式標(biāo)簽在網(wǎng)頁(yè)設(shè)置中，會(huì)用到HTML頁(yè)面設(shè)置、列表設(shè)置等格式標(biāo)簽。段落標(biāo)簽預(yù)處理文本換行標(biāo)簽標(biāo)題格式標(biāo)簽HTML語(yǔ)言提供了一系列對(duì)文本中的標(biāo)題進(jìn)行操作的標(biāo)志對(duì)：，即一共有6對(duì)標(biāo)題的標(biāo)志對(duì)。是最大的標(biāo)題，而則是最小的標(biāo)題，也即是標(biāo)志中h后面的數(shù)字越大標(biāo)題文本就越小。如果HTML文檔中需要輸出標(biāo)題文本，就可以使用這6對(duì)標(biāo)題標(biāo)志對(duì)中的任何一對(duì)。一號(hào)標(biāo)題六號(hào)標(biāo)題文本標(biāo)志用來(lái)使文本以黑體字的形式輸出。用來(lái)使文本以斜體字的形式輸出。用來(lái)使文本以下加一劃線的形式輸出。下標(biāo)上標(biāo)用來(lái)輸出打字機(jī)風(fēng)格字體的文本。

8、用來(lái)輸出引用方式的字體，通常是斜體。用來(lái)輸出需要強(qiáng)調(diào)的文本(通常是斜體加黑體)。則用來(lái)輸出加重文本(通常也是斜體加黑體)。設(shè)定文本的字體大小、顏色、字體名等，通過(guò)屬性size、color、face的控制來(lái)實(shí)現(xiàn)。size屬性：改變字體的大小，它可以取值：-N、N和+N；color屬性：改變文本的顏色；face屬性：字體名。值為系統(tǒng)中現(xiàn)有的字體，如“楷體_GB2312”。為保證在客戶端瀏覽器中顯示正確字體的網(wǎng)頁(yè)，不要使用非系統(tǒng)自帶的特殊字體，如“華文彩云繁等。例：宋體紅色2號(hào)字特殊字符 copycopy； &reg&reg； 153;153;plusmn;plusmn;空格空格nb

9、sp;nbsp; yen;yen;網(wǎng)頁(yè)圖像格式：JPEG、GIF、PNG格式?？山粨Q圖像文件格式 (GIF)由于幾乎所有的 Web 瀏覽器都支持 GIF 格式文件擴(kuò)展名為 .gif），因而該格式是萬(wàn)維網(wǎng)上最常用的兩個(gè)圖像文件格式之一。由于此格式最多僅可以顯示 256 種顏色，因而最適于黑白線條圖形、彩色剪輯圖片和具有大塊實(shí)心顏色的圖片。GIF89a 格式也同時(shí)支持透明和動(dòng)畫(huà)。GIF 文件用于：包含透明區(qū)域的圖像。 有限的彩色，例如 256 色或更少。 離散區(qū)域中的彩色。 黑白圖像。 小尺寸圖像，例如站點(diǎn)上的按鈕。 清晰度和邊緣清晰度很重要的圖形，例如線條圖形或卡通。 包含文本的圖像。 動(dòng)畫(huà)。聯(lián)

10、合攝影專家組 (JPEG)JPEG 格式文件擴(kuò)展名為 .jpg 或 .jpeg是 Web 上的另一個(gè)最常用的圖像文件格式。它不局限于 256 色，因此您可以使用它來(lái)顯示高質(zhì)量的照片或包含上百萬(wàn)種顏色的圖片。由于它被設(shè)計(jì)為圖像存儲(chǔ)格式，因而可以有效地將高質(zhì)量的大照片壓縮為非常緊密的文件，這在您用電子郵件發(fā)送大圖像時(shí)很有用。然而，您將圖像文件的大小壓縮的越多或修改并重新保存圖像），圖像信息的丟失也越多并且質(zhì)量也會(huì)下降。此外，該格式不支持透明和動(dòng)畫(huà)。JPEG 文件用于：照片。 自然視覺(jué)效果圖像。 大數(shù)量的顏色，例如上百萬(wàn)。 需要大量細(xì)節(jié)的圖像。 大尺寸的圖像。可移植網(wǎng)絡(luò)圖形 (PNG)PNG 格式文

11、件擴(kuò)展名為 .png可以顯示上百萬(wàn)種顏色。然而，由于它是一種新的格式，當(dāng)前只有很少的瀏覽器可以支持盡管它正快速獲得支持）。以這種格式保存的圖像，即便將文件壓縮，其質(zhì)量也不會(huì)降低。它支持透明，但不支持動(dòng)畫(huà)因?yàn)樗荒馨鄠€(gè)圖像）。圖像標(biāo)志標(biāo)志來(lái)處理圖像的輸出。標(biāo)志并非真正地將圖像融入到HTML文檔中，而是標(biāo)明圖像文件的存放位置。src屬性必須賦值，其值是圖形文件的存放位置和文件名。align是圖像的對(duì)齊方式。border屬性是圖像的邊框，可以取大于或者等于的整數(shù)，默認(rèn)單位是像素。width和height屬性是圖像的寬和高，默認(rèn)單位也是像素。alt屬性是當(dāng)鼠標(biāo)移動(dòng)到圖像上時(shí)顯示的文本。圖像實(shí)例水平

12、線標(biāo)志標(biāo)志是在HTML文檔中加入一條水平線，具有size、color、width和noshade屬性：size是設(shè)置水平線的厚度。width是設(shè)定水平線的寬度，默認(rèn)單位是像素。noshade屬性不用賦值，而是直接加入標(biāo)志即可使用，它是用來(lái)加入一條沒(méi)有陰影的水平線(不加入此屬性，水平線將有陰影)。表格【重點(diǎn)】表格標(biāo)志對(duì)于制作網(wǎng)頁(yè)是很重要的，現(xiàn)在很多網(wǎng)頁(yè)都是使用多重表格，主要是因?yàn)楸砀癫坏梢怨潭ㄎ谋净驁D像的輸出，而且還可以任意地進(jìn)行背景和前景顏色的設(shè)置?？梢?jiàn)表格在網(wǎng)頁(yè)排版中的作用。？想想表格在網(wǎng)頁(yè)中有哪些作用。屬性用處bgcolor 設(shè)置表格的背景色border設(shè)置邊框的寬度，若不設(shè)置此屬性，則

13、邊框?qū)挾饶J(rèn)為0bordercolor設(shè)置邊框的顏色bordercolorlight設(shè)置邊框明亮部分的顏色(當(dāng)border的值大于等于1時(shí)才有用)bordercolordark設(shè)置邊框昏暗部分的顏色(當(dāng)border的值大于等于1時(shí)才有用)cellspacing設(shè)置表格的單元格之間的空間大小cellpadding設(shè)置表格的單元格邊框與其內(nèi)部?jī)?nèi)容之間的空間大小width設(shè)置表格的寬度，單位用絕對(duì)像素值或總寬度的百分比align表格在網(wǎng)頁(yè)中的位置標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)表格表格的定義順序是先定義行，再定義該行中的單元格。標(biāo)志對(duì)用來(lái)創(chuàng)建表格中的每一行。此標(biāo)志對(duì)只能放在標(biāo)志對(duì)之間使用，而在此標(biāo)志對(duì)之間加入文本

14、將是無(wú)用的，因?yàn)樵谥g只能緊跟標(biāo)志對(duì)才是有效的語(yǔ)法。標(biāo)志對(duì)用來(lái)創(chuàng)建單元格，此標(biāo)志對(duì)只有放在標(biāo)志對(duì)之間才是有效的，輸入的文本也只有放在標(biāo)志對(duì)中才有效(即才能夠顯示出來(lái))。具有width、colspan、rowspan和nowrap屬性：width是單元格的寬度，單位用絕對(duì)像素值或總寬度的百分比。colspan設(shè)置一個(gè)表格單元格跨占的列數(shù)(缺省值為1)。rowspan設(shè)置一個(gè)表格單元格跨占的行數(shù)(缺省值為1)。表格實(shí)例： 1單元格跨越多行23 45 67單元格跨越多列單元格跨越多行單元格跨越多列根目錄 /目錄1目錄2目錄3目錄4目錄5目錄5目錄6文件1文件2文件3文件4目錄7目錄8文件5目錄9文件

15、6相對(duì)路徑：相對(duì)于當(dāng)前文檔 ./的用法 站內(nèi)絕對(duì)路徑：相對(duì)于網(wǎng)站根 /的用法絕對(duì)路徑：資源在網(wǎng)上完整的存放地址，網(wǎng)址。超鏈接重點(diǎn)網(wǎng)頁(yè)內(nèi)部鏈接 點(diǎn)擊鏈接熱點(diǎn)，網(wǎng)頁(yè)跳轉(zhuǎn)到資源片段：定義鏈接熱點(diǎn)到資源片段 定義資源片段資源片段網(wǎng)頁(yè)間鏈接鏈接文字例：中文主頁(yè) 網(wǎng)站間鏈接網(wǎng)站間的鏈接，必須使用目標(biāo)資源的絕對(duì)路徑，從協(xié)議開(kāi)始。例：新浪網(wǎng)鏈接到電子郵件地址給我寫(xiě)信，打開(kāi)客戶瀏覽器設(shè)定的默認(rèn)電子郵件程序，收件人為mailto后的地址。將圖像作為超級(jí)鏈接的錨點(diǎn)語(yǔ)法：網(wǎng)頁(yè)內(nèi)嵌窗口 說(shuō)明：src屬性為窗口載入的初始網(wǎng)頁(yè)；name屬性指明窗口的名稱，它和標(biāo)簽的target屬性相對(duì)應(yīng)。網(wǎng)頁(yè)表單重點(diǎn)表單是網(wǎng)頁(yè)上的一組特殊

16、對(duì)象標(biāo)簽，是接受用戶輸入數(shù)據(jù)的窗口，是用戶與服務(wù)器之間信息數(shù)據(jù)交互的橋梁?？梢越邮苡脩糨斎氲男畔?shù)據(jù)，并提交給服務(wù)器端預(yù)定的程序等來(lái)接收并處理數(shù)據(jù)。 表單技術(shù)的應(yīng)用，使得基于網(wǎng)頁(yè)的編程得以實(shí)現(xiàn)。 含有表單的網(wǎng)頁(yè)稱作表單網(wǎng)頁(yè)，表單對(duì)象中包含有若干表單域，每一個(gè)表單域也稱表單控件，是表單的基本元素，用戶可以在表單域中輸入信息或作出選擇。表單標(biāo)簽：設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址?；菊Z(yǔ)法結(jié)構(gòu)：表單元素action：用于設(shè)定處理表單數(shù)據(jù)程序url的地址。method：指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，當(dāng)method=get時(shí)，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù)器；當(dāng)method=post時(shí)則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送到服務(wù)器。name：用于設(shè)定表單的名稱。onreset和onsubmit是主要針對(duì)“reset按鈕和“submit按鈕來(lái)說(shuō)的，分別設(shè)定了在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。表單輸入域控件）此標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。其語(yǔ)法如下：多行文本輸入標(biāo)簽參數(shù)：name：文本框名稱；clos：寬度；rows：高度行數(shù)）；wrap：換行控制，off：不自動(dòng)換行