第6章HTML與PHP基礎(chǔ)課件

第章與基礎(chǔ)《計算機網(wǎng)絡(luò)基于因特網(wǎng)的信息服務(wù)平臺》（第版）第章與基礎(chǔ)《計算機網(wǎng)絡(luò)基于因特網(wǎng)的信息服務(wù)平臺》（第版）1文檔結(jié)構(gòu)網(wǎng)頁制作工具基本元素表格（）表單（）程序基礎(chǔ)學(xué)習(xí)目的文檔結(jié)構(gòu)學(xué)習(xí)目的2為了在世界范圍內(nèi)發(fā)布信息，一種能為所有的計算機作為信息發(fā)布用的母語這就是萬維網(wǎng)使用的超文本標(biāo)記語言（，)。概述為了在世界范圍內(nèi)發(fā)布信息，一種能為所有的計算機作為信息發(fā)布用3網(wǎng)頁圖例網(wǎng)頁圖例4<><><""";"><><>...<>另外還有文檔主體部分的聲明。<()><>首頁的部分源代碼首頁的部分源代碼5一個文檔是普通的文本文件，它包含兩類內(nèi)容：普通的文本、代碼或標(biāo)記。標(biāo)記()是用一對尖括號“<>”括起來的文本串，例如第一行的<>。標(biāo)記通常具有如下結(jié)構(gòu)：<…>在標(biāo)記定義中，“”是標(biāo)記名，定義標(biāo)記的類型而“”為屬性，標(biāo)記的屬性是一種選項，屬性給出了這個元素的附加信息標(biāo)記和屬性一個文檔是普通的文本文件，它包含兩類內(nèi)容：普通的文本、代碼或6在主頁文檔第二行的<>標(biāo)記中，是標(biāo)記名，沒有相關(guān)屬性在文檔主體<>定義中，定義了若干屬性，屬性值為：“()”標(biāo)記和屬性舉例在主頁文檔第二行的<>標(biāo)記中，是標(biāo)記名，沒有相關(guān)屬性標(biāo)記和屬7需要注意，雖然標(biāo)記和屬性名稱與字母大小寫無關(guān)，但是屬性值卻往往對大小寫敏感例如，在超鏈中訪問的文件名，盡管在系統(tǒng)中，和可以指向同一文件，但在系統(tǒng)中，卻是指向不同的文件重要提示：在網(wǎng)頁設(shè)計須統(tǒng)一命名方案標(biāo)記、屬性名和屬性值的大小寫需要注意，雖然標(biāo)記和屬性名稱與字母大小寫無關(guān)，但是屬性值卻往8標(biāo)記和文本結(jié)合起來形成元素()。每個元素代表文檔中的一個對象比如文檔頭、段落或圖片一個元素可具有一個或一對標(biāo)記，通常具有一些相關(guān)的屬性元素有兩種類型：容器（）元素和單個元素（空元素）元素、容器、空元素標(biāo)記和文本結(jié)合起來形成元素()。每個元素代表文檔中的一個對象9容器元素包含文本內(nèi)容表達一個文本段、它由文本主體或其他元素組成文本主體在開頭和結(jié)尾處用一對標(biāo)記來確定邊界（尾標(biāo)記在標(biāo)記名前加“”）例如，<>和<>把這兩個標(biāo)記之間的文本定義成一個文檔標(biāo)題而空元素是不影響任何文本的單個標(biāo)記，在文檔中插入對象來修飾網(wǎng)頁例如<…>在文檔中插入圖像容器和空元素的區(qū)別容器元素包含文本內(nèi)容容器和空元素的區(qū)別10三個元素構(gòu)成文檔的基本結(jié)構(gòu)：<><>

<><>

<><>文檔結(jié)構(gòu)三個元素構(gòu)成文檔的基本結(jié)構(gòu)：文檔結(jié)構(gòu)11<>容器元素中最為常用元素：<><>：這個元素是文檔的抬頭，類似書里的頁眉在瀏覽器中，會在視窗口標(biāo)題欄上抬頭（）在用戶保存網(wǎng)頁時一般都作為文件名，所以命名應(yīng)該注意常用元素：<><>容器元素中最為常用元素：常用元素：<>12<><>：標(biāo)題標(biāo)記，把標(biāo)記中的文本作為標(biāo)題從標(biāo)記<>、<>直到<>，可以有六個層次的標(biāo)題（較小的數(shù)字標(biāo)記較重要的標(biāo)題）標(biāo)題通常用較大的字型編排，并且在該標(biāo)題的上下各有一個空行<>：段落標(biāo)記在兩個段落之間插入空行<“”>：圖像標(biāo)記，把圖像插入到文檔中，圖像可以在屬性中給出的處找到<>中常用元素（一）<><>：標(biāo)題標(biāo)記，把標(biāo)記中的文本作為標(biāo)題<>中常用元素（一13<><><><>：該結(jié)構(gòu)提供了一個無序的條目列表；每個條目以<>標(biāo)記開始。通常在顯示出的各條目項前置一個實心的圓點。<><>：超文本標(biāo)記，也稱為超鏈接。文本用某種特殊方式來顯示（用顏色、下劃線或其它類似方法）；當(dāng)點擊屏幕上的超文本鏈接時，服務(wù)器將檢索“”屬性中的“”給出的文檔，并將結(jié)果返回給用戶瀏覽器。<>：放置一個橫穿瀏覽器窗口的水平線，通常水平線的上下各有一個空行。<>：在文本中強制換行，以便后繼文本都放在下一行。<>中常用元素（二）<><><><>：該結(jié)構(gòu)提供了一個無序的條目列表；每個條目以14第6章HTML與PHP基礎(chǔ)課件15定義水平線、表格邊框、圖像等對象的長、寬、高等一系列屬性長度的表示有兩種方式：絕對長度和相對長度。它們的單位分別為像素（）和百分比（％）像素代表屏幕上的各個顯像點，而相對長度則描述了對象在瀏覽器窗口的所占的比例標(biāo)準(zhǔn)單位長度定義水平線、表格邊框、圖像等對象的長、寬、高等一系列屬性標(biāo)準(zhǔn)16使用絕對長度，網(wǎng)頁中的對象不會隨瀏覽器的視窗變化<""> <絕對長度>而使用相對長度來描述則對象會隨瀏覽器窗口大小變化而變化。<""> <相對長度>標(biāo)準(zhǔn)單位長度應(yīng)用使用絕對長度，網(wǎng)頁中的對象不會隨瀏覽器的視窗變化標(biāo)準(zhǔn)單位長度17定義字體、頁面背景、表格背景、超鏈接相關(guān)的顏色顏色單位有三種表達的方式：十六進制的顏色代碼<><>十進制顏色碼<()><>顏色名碼<""><>標(biāo)準(zhǔn)單位顏色定義字體、頁面背景、表格背景、超鏈接相關(guān)的顏色標(biāo)準(zhǔn)單位顏色18統(tǒng)一資源定位器()是一種因特網(wǎng)資源地址的表示法在中，路徑又分為兩種形式：絕對路徑和相對路徑絕對路徑是將主機地址、資源目錄和資源名稱進行完整的描述<"">標(biāo)準(zhǔn)單位統(tǒng)一資源定位器()是一種因特網(wǎng)資源地址的表示法標(biāo)準(zhǔn)單位19相對路徑則是相對于當(dāng)前的網(wǎng)頁所在目錄或站點根目錄的路徑。如:<""><圖像文件""與當(dāng)前顯示的網(wǎng)頁在同一目錄下；><""> <圖像文件""在與當(dāng)前顯示網(wǎng)頁所在目錄同層次的另一子目錄下；>標(biāo)準(zhǔn)單位–（續(xù)）相對路徑則是相對于當(dāng)前的網(wǎng)頁所在目錄或站點根目錄的路徑。如:20在和下，目錄的分隔符是不同的：:\\\

在訪問中，表達方式相同：：特別提示在和下，目錄的分隔符是不同的：：特別提示21的表單是交互式應(yīng)用的重要因素表單僅做這種交互性工作的一半：一旦用戶填完表單，就把表格提交給一個特殊的程序或腳本這個程序或腳本取出表單提供的信息，并做一些有用的事（如把用戶數(shù)據(jù)傳遞給數(shù)據(jù)庫）可以把表單看成因特網(wǎng)上通用的一種視窗（）對話框，用于接受用戶數(shù)據(jù)表單（）的表單是交互式應(yīng)用的重要因素表單（）22表單元素基本格式<"[]""><><>元素括起整個表單，并給出一些基本定義指定了信息傳遞給服務(wù)器的方法給出與處理提交信息的腳本相關(guān)的（如“”，“”）表單元素表單元素基本格式表單元素23表單<>元素基本格式<""""""><>把不同的字段布署在表單里，讓用戶輸入信息屬性指定該字段在某個表單中的唯一名稱；可選的屬性給出該標(biāo)記的默認(rèn)值屬性標(biāo)記的樣式，“”可以是：（復(fù)選框）。（單選按鈕）（單行的文本輸入欄）。（圖像放在表單里）（提交按鈕）(清除按鈕)（在表單中保留不供顯示的內(nèi)容）表單<>元素表單<>元素基本格式表單<>元素24另外：屬性用于設(shè)置文本字段的窗口大?。ㄒ宰址麛?shù)為計量單位）屬性與和類型一起使用，用于表示按鈕在默認(rèn)狀態(tài)時是否被選中表單<>元素(續(xù))另外：表單<>元素(續(xù))25選項選擇元素（類似中的組合框）<""><""><""><>在選項選擇元素中，所有可選項目由<>元素逐條列出；通常用下拉式菜單顯示跟在每個<>標(biāo)記后面的在下拉框中顯示；表單<>元素選項選擇元素（類似中的組合框）表單<>元素26選項選擇：<“"><“"><“">’<>表單<>元素舉例選項選擇：表單<>元素舉例27多行文本輸入<""><>類似于<“”>標(biāo)記，但允許多行文本輸入屬性與<>的類似，用行和列屬性的數(shù)值定義文本輸入?yún)^(qū)域的大小元素中的值將作為默認(rèn)內(nèi)容顯示在文本區(qū)域中表單<>元素多行文本輸入表單<>元素28很多字符不能直接放入文檔中，如，“<”和“>”字符，以及許多國際字符和印刷字符可以用實體（）把這些字符進行替換實體是一種文本串，它們一起表示單個字符。一般包括一個“”號、一個表示字符的名字及一個分號，基本元素實體很多字符不能直接放入文檔中，如，“<”和“>”字符，以及許多29保留字符是中用于其它目的的普通字符，如果按原樣輸入則會引起混亂實體之一：保留字符實體顯示形式備注;小于號（<）；大于號（>）;與號（）;引號（"）（通常不用）;不換行空格見下頁

保留字符是中用于其它目的的普通字符，如果按原樣輸入則會引起混30在瀏覽器中瀏覽文檔時，瀏覽器根據(jù)單詞之間的空格來自動換行，并且不支持兩個及兩個以上的連續(xù)空格的顯示因此語言提供了不換行空格的標(biāo)記＆；這樣如果需要某兩個單詞（也可能是表單中的<>元素）之間不出現(xiàn)換行的話，用這個標(biāo)記來替代空格，并且也可以利用這個標(biāo)記來建立兩個或兩個以上的空格效果不換行空格的用途在瀏覽器中瀏覽文檔時，瀏覽器根據(jù)單詞之間的空格來自動換行，并31不換行空格的應(yīng)用舉例不換行空格的應(yīng)用舉例32實體之一：國際字符國際字符指多數(shù)除英語外的歐洲語言中使用的字符，其名字參照拉丁字符集實體顯示形式備注;帶重音的大寫（á）;帶升降調(diào)的小寫（?）;連字大寫（?）;帶變音符的小寫（?）實體之一：國際字符國際字符指多數(shù)除英語外的歐洲語言中使用的字33元素表格元素在網(wǎng)頁中以表格形式組織和顯示數(shù)據(jù)使用在網(wǎng)頁布局設(shè)計上。在“”貌似簡單的網(wǎng)頁上，居然也用了三個表格來布局元素表格元素在網(wǎng)頁中以表格形式組織和顯示數(shù)據(jù)34<"?""?""?""?""?""?"><>…<>…<>…<><><>標(biāo)記一般形式<"?""?""?""?""?""?"><>標(biāo)記35在<>標(biāo)記的屬性中： 單元格寬度 單元格高度 單元格水平對齊方式 單元格垂直對齊方式 單元格的行跨度 單元格的列跨度表格中的元素在<>標(biāo)記的屬性中：表格中的元素36客戶端：活動文檔（），例如,等，程序下載到瀏覽器執(zhí)行服務(wù)器：動態(tài)文檔（），程序在服務(wù)器上執(zhí)行，結(jié)果下載到瀏覽器本節(jié)以ＰＨＰ為例，說明動態(tài)文檔的基本概念動態(tài)網(wǎng)頁概述客戶端：活動文檔（），例如,等，程序下載到瀏覽器執(zhí)行37公共網(wǎng)關(guān)接口（）體現(xiàn)了作為網(wǎng)絡(luò)應(yīng)用程序的一種公共的通道在通道的一側(cè)，扮演了內(nèi)容表達的角色，展示網(wǎng)頁，收集信息在另一側(cè)，不同的程序或進程對來自通道的信息進行解讀，做出響應(yīng)在服務(wù)器端，都可以解讀來自瀏覽器的信息，并進行處理、響應(yīng)公共網(wǎng)關(guān)接口（）公共網(wǎng)關(guān)接口（）公共網(wǎng)關(guān)接口（）38一張服務(wù)器狀態(tài)信息的快照一張服務(wù)器狀態(tài)信息的快照39<><><><><><><?",$\";?><><>一個簡單的動態(tài)網(wǎng)頁<>一個簡單的動態(tài)網(wǎng)頁40打開瀏覽器，在地址欄中輸入：本節(jié)所含的實驗或例子假設(shè)在本地主機上的服務(wù)器阿上運行。的網(wǎng)頁發(fā)布目錄在:\\一個簡單的動態(tài)網(wǎng)頁的執(zhí)行結(jié)果打開瀏覽器，在地址欄中輸入：一個簡單的動態(tài)網(wǎng)頁的執(zhí)行結(jié)果41網(wǎng)頁需要經(jīng)過的模塊處理才能顯示;網(wǎng)頁的程序參數(shù)（或變量）至少可以從地址欄輸入；網(wǎng)頁的輸出可以隨程序參數(shù)（或變量）值變化而變化在上例在網(wǎng)址之后附帶了“”。等號“”左邊為“參數(shù)”，“”右側(cè)為參數(shù)值當(dāng)需要輸入的參數(shù)多于一項時，參數(shù)之間要用“”號隔開與“純”網(wǎng)頁的不同網(wǎng)頁需要經(jīng)過的模塊處理才能顯示;與“純”網(wǎng)頁的不同42在瀏覽器的地址欄輸入網(wǎng)頁的名稱和相關(guān)參數(shù)，而這種用戶數(shù)據(jù)的輸入方式顯然是很不方便的。尤其不適合普通瀏覽器用戶的使用在中，一般瀏覽器用戶是通過表單完成網(wǎng)上的數(shù)據(jù)輸入的表單的引入在瀏覽器的地址欄輸入網(wǎng)頁的名稱和相關(guān)參數(shù)，而這種用戶數(shù)據(jù)的輸43一個簡單的表單實例圖一個簡單的表單實例圖44表單數(shù)據(jù)發(fā)送后的實例圖表單數(shù)據(jù)發(fā)送后的實例圖45一個簡單的表單<> <文件名：><><"""">姓名:<""""><>興趣:<""""><><"傳送"><><><>表單源碼一個簡單的表單表單源碼46對簡單表單的程序處理<> <文件名：><><>!<><><""><><><?"$歡迎您,您的興趣愛好是$";?>!<><><><><>表單與處理程序?qū)唵伪韱蔚某绦蛱幚肀韱闻c處理程序47含有表單的文件往往是一個“純”文件，比如上例的表單文檔就是一個有“”后綴的文件表單是一個容器元素，即有開始<>和結(jié)束<>標(biāo)記，在<>中至少包含兩個屬性：“”和“”表單的性質(zhì)含有表單的文件往往是一個“純”文件，比如上例的表單文檔就是一48<>屬性的值表示該表單的處理方法，也就是表單提交后需要執(zhí)行的程序名(包括路徑)由于本節(jié)屬性中填寫的就是對應(yīng)的程序名稱<