《《XHTML基礎(chǔ)教程》PPT課件.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《XHTML基礎(chǔ)教程》PPT課件.ppt（55頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì),,4.1XHTML簡(jiǎn)介4.2XHTML文檔的基本結(jié)構(gòu)4.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程4.4段落標(biāo)記4.5文字標(biāo)記4.6超鏈接4.7圖像4.8表格4.9框架（多窗口頁(yè)面）4.10表單,,第4章XHTML基礎(chǔ),4.1.1XHTML的產(chǎn)生HTML語(yǔ)言依然有缺陷和不足，人們?nèi)栽诓粩嗟母倪M(jìn)它，使它更加便于控制和有彈性，以適應(yīng)網(wǎng)絡(luò)上的應(yīng)用需求。2000年，W3C組織公布發(fā)行了XHTML1.0版本。XHTML1.0是一種在HTML4.0基礎(chǔ)上優(yōu)化和改進(jìn)的新語(yǔ)言，目的是基于XML應(yīng)用。XHTML是一種增強(qiáng)了的HTML，它的可擴(kuò)展性和靈活性將適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求。,,4.1XHTML簡(jiǎn)介,4.1.2XHTML的優(yōu)點(diǎn)XHTML內(nèi)容既符合XML，并且如果依照一些簡(jiǎn)單的指導(dǎo)方針，也能被HTML4.0用戶代理程序識(shí)別。1．XHTML文檔遵從XML標(biāo)準(zhǔn)用標(biāo)準(zhǔn)的XML工具很容易查看、編輯和檢驗(yàn)它們.在現(xiàn)有的HTML4.0代理用戶程序中使用，也可以在新的XHTML用戶代理程序中使用，在后者中使用可以達(dá)到與前者同樣或更好的效果。2．在XHTML文檔中可使用更多的應(yīng)用程序XHTML文檔中使用的應(yīng)用程序（如Script和Applet）可以是HTML的文檔對(duì)象模型DOM，也可以是XML的DOM。,,4.1XHTML簡(jiǎn)介,4.1.3XHTML代碼規(guī)范1．所有的標(biāo)記都必須有一個(gè)相應(yīng)的結(jié)束標(biāo)記單獨(dú)不成對(duì)的標(biāo)簽，則在標(biāo)簽最后加一個(gè)“/”來(lái)關(guān)閉它一定寫(xiě)對(duì)應(yīng)的2．所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě)XHTML對(duì)大小寫(xiě)是敏感的。XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫(xiě)字母。,,4.1XHTML簡(jiǎn)介,4.1.3XHTML代碼規(guī)范3．所有的標(biāo)記都必須合理嵌套錯(cuò)誤按照XHTML要求必須修改為：/p>4．所有的屬性必須用引號(hào)括起來(lái)在HTML中可寫(xiě)為：而按照XHTML要求必須修改為：,,4.1XHTML簡(jiǎn)介,4.1.3XHTML代碼規(guī)范5．特殊符號(hào)“”和“&”用編碼表示?小于（）號(hào)，不是標(biāo)簽一部分的，必須被編碼為>；?（&）號(hào)，不是實(shí)體的一部分的，必須被編碼為&。6．每個(gè)屬性必須賦值XHTML規(guī)定所有屬性都必須有一個(gè)值，沒(méi)有值的就重復(fù)本身。例如：按照XHTML要求必須修改為：7．不要在注釋內(nèi)容中使用“--”“--”只能出現(xiàn)在XHTML注釋的開(kāi)頭和結(jié)束位置。,,4.1XHTML簡(jiǎn)介,1.標(biāo)記XHTML文檔由標(biāo)記和被標(biāo)記的內(nèi)容組成。格式為：受標(biāo)記影響的內(nèi)容我的第一個(gè)網(wǎng)頁(yè)需要注意:①每個(gè)標(biāo)記都要用“”（大于號(hào)）括起來(lái)，如，，以表示這是XHTML代碼而非普通文本?！啊迸c標(biāo)記名之間不能留有空格或其他字符。②在標(biāo)記名前加上符號(hào)“/”便是其結(jié)束標(biāo)記，表示該標(biāo)記內(nèi)容的結(jié)束，如。標(biāo)記也有不用結(jié)尾的，稱之為單標(biāo)記。,,4.2XHTML文檔的基本結(jié)構(gòu)4.2.1標(biāo)記及其屬性,2.標(biāo)記的屬性標(biāo)記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標(biāo)記后面加上相關(guān)的屬性來(lái)表示，每個(gè)標(biāo)記有一系列的屬性。格式為：受影響的內(nèi)容歡迎！,4.2XHTML文檔的基本結(jié)構(gòu)4.2.1標(biāo)記及其屬性,,XHTML文檔是一種純文本格式的文件，XHTML文檔的基本結(jié)構(gòu)為：網(wǎng)頁(yè)的標(biāo)題網(wǎng)頁(yè)的內(nèi)容【例4-1】,4.2XHTML文檔的基本結(jié)構(gòu)4.2.2XHTML的基本結(jié)構(gòu),,,【說(shuō)明】①DOCTYPE必須為大寫(xiě)。DTD叫做文檔類型定義，里面包含了文檔的規(guī)則。瀏覽器根據(jù)定義的DTD來(lái)解釋頁(yè)面的標(biāo)記，并顯示出來(lái)。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，DOCTYPE聲明是必不可少的關(guān)鍵組成部分。DOCTYPE聲明必須放在每一個(gè)XHTML文檔的最頂部，在所有代碼和標(biāo)記之前。,4.2XHTML文檔的基本結(jié)構(gòu)4.2.2XHTML的基本結(jié)構(gòu),,,【說(shuō)明】②“xmlns”是XHTMLnamespace的縮寫(xiě)，稱為“名字空間”。由于XHTML是HTML向XML過(guò)渡的標(biāo)記語(yǔ)言，它需要符合XML文檔規(guī)則，因此也需要定義名字空間。又因?yàn)閄HTML1.0不能自定義標(biāo)記，所以它的名字空間都相同，就是http://www.w3.org/1999/xhtml。③第5行定義語(yǔ)言編碼。為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言。一般使用gb2312（簡(jiǎn)體中文）。,4.2XHTML文檔的基本結(jié)構(gòu)4.2.2XHTML的基本結(jié)構(gòu),,,用最簡(jiǎn)單的“記事本”來(lái)編輯網(wǎng)頁(yè)。①打開(kāi)記事本。單擊Windows的“開(kāi)始”按鈕，在“程序”菜單中的“附件”子菜單中單擊“記事本”。②創(chuàng)建新文件，并按HTML語(yǔ)言規(guī)則編輯。在“記事本”窗口中輸入HTML語(yǔ)言，輸入的內(nèi)容。③保存網(wǎng)頁(yè)。打開(kāi)“記事本”的“文件”菜單，選擇“保存”。此時(shí)將出現(xiàn)“另存為”對(duì)話框，在“保存在”下拉列表框中選擇文件要存放的路徑；在“文件名”文本框輸入以.html或.htm為后綴的文件名，如welcome.html；在“保存類型”下拉列表框中選擇“文本文檔”。最后單擊“保存”按鈕，將記事本中的內(nèi)容保存在磁盤(pán)中。如果希望這一頁(yè)是網(wǎng)站的首頁(yè)（主頁(yè)），想讓瀏覽者輸入網(wǎng)址后，就顯示這一頁(yè)的內(nèi)容，可以把這個(gè)文件設(shè)為默認(rèn)文檔，文件名為index.html或index.htm。,4.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程4.3.1編輯和保存網(wǎng)頁(yè),,,1.用瀏覽器打開(kāi)2.在“Windows資源管理器”或“我的電腦”中打開(kāi)在“Windows資源管理器”或“我的電腦”中雙擊要打開(kāi)的.html文件，這時(shí)將直接在默認(rèn)的瀏覽器中打開(kāi)該.html文件。,4.3網(wǎng)頁(yè)文件的創(chuàng)建過(guò)程4.3.2預(yù)覽網(wǎng)頁(yè),,,2強(qiáng)制換行和不換行標(biāo)記、...放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會(huì)在行與行之間留下空行，即強(qiáng)制文本換行。強(qiáng)制換行標(biāo)記的格式為：文字不換行標(biāo)記可令文字不能因太長(zhǎng)使瀏覽器無(wú)法顯示而換行，它對(duì)住址、數(shù)學(xué)公式、一行數(shù)字等尤其有用。其格式為：文字,4.4段落標(biāo)記1注釋標(biāo)記,,,段落標(biāo)記放在一個(gè)段落的頭尾，用于定義一個(gè)段落。...標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間多一空行。段落標(biāo)記的格式為：文字一個(gè)段落標(biāo)記可以看作是兩個(gè)標(biāo)記，即。,4.4段落標(biāo)記3段落標(biāo)記...,,設(shè)定文字、圖像、表格的擺放位置。當(dāng)在許多段落中設(shè)置對(duì)齊方式時(shí)，常使用…標(biāo)記。定位標(biāo)記的格式為：文本、圖像或表格缺省時(shí)默認(rèn)為left。,4.4段落標(biāo)記4定位標(biāo)記…,,當(dāng)瀏覽器解釋到HTML文檔中的標(biāo)記時(shí)，會(huì)在此處換行，并加入一條水平線段。水平線標(biāo)記的格式為：size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。width設(shè)定線段長(zhǎng)度，可以是絕對(duì)值（以像素為單位）或相對(duì)值（相對(duì)于當(dāng)前窗口的百分比）。color設(shè)定線條色彩，默認(rèn)為黑色?？梢圆捎蒙实拿Q。色彩可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示。,4.4段落標(biāo)記5水平線標(biāo)記,,【例4-2】本例文件ex4-2.htm在瀏覽器中的顯示效果如圖4-4所示。,4.4段落標(biāo)記6．段落標(biāo)記綜合實(shí)例,圖4-4段落標(biāo)記綜合實(shí)例,【例4-2】,,標(biāo)題文字#用來(lái)指定標(biāo)題文字的大小，#取1～6的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小。屬性align設(shè)置標(biāo)題在頁(yè)面中的對(duì)齊方式：left、center或right。缺省時(shí)默認(rèn)為left?！瓨?biāo)記缺省顯示宋體，在一個(gè)標(biāo)題行中無(wú)法使用不同大小的字體。與用…定義的網(wǎng)頁(yè)標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。,4.5文字標(biāo)記1標(biāo)題文字標(biāo)記…,,【例4-3】設(shè)置文字的標(biāo)題。本例文件ex4-3.htm在瀏覽器中的顯示效果如圖4-5所示。,4.5文字標(biāo)記2．文字標(biāo)記實(shí)例,圖4-5文字標(biāo)記綜合實(shí)例,【例4-3】,,超鏈接從當(dāng)前網(wǎng)頁(yè)定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁(yè)的某個(gè)位置、Internet或本地硬盤(pán)或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。通過(guò)超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢、電子郵件、遠(yuǎn)程訪問(wèn)等。當(dāng)網(wǎng)頁(yè)包含超鏈接時(shí)，網(wǎng)頁(yè)中的外觀形式為彩色（一般為藍(lán)色）且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。超文本鏈接使用錨點(diǎn)標(biāo)記來(lái)定義。,4.6超鏈接,,錨點(diǎn)（anchor）標(biāo)記由定義，它在網(wǎng)頁(yè)上建立超文本鏈接。通過(guò)單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源（目標(biāo)資源），這個(gè)目標(biāo)資源有惟一的URL。具有以上特點(diǎn)的詞、句或圖片就稱為熱點(diǎn)。標(biāo)記的格式為：熱點(diǎn)href屬性為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。如果要?jiǎng)?chuàng)建一個(gè)不鏈接到其他位置的空超鏈接，可用“#”代替URL，即熱點(diǎn)。,4.6超鏈接1錨點(diǎn)標(biāo)記...,target屬性,target設(shè)定鏈接被單擊后結(jié)果所要開(kāi)始窗口的方式?？蛇x值為：_blank，_parent，_self，_top。_blank:空白視窗，保留原來(lái)的窗口，新開(kāi)啟一個(gè)窗口瀏覽所鏈接的文件內(nèi)容；_parent:上一層頁(yè)框視窗，若網(wǎng)頁(yè)使用框架，則所鏈接的網(wǎng)頁(yè)回到上一層的框架所在窗口；_self:本身視窗，默認(rèn)鏈接顯示方式，所鏈接的內(nèi)容取代原來(lái)窗口的內(nèi)容；_top:全視窗，以全窗口的方式出現(xiàn)所鏈接的網(wǎng)頁(yè)，取代所有窗口內(nèi)容。,,(1)鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件的格式為：熱點(diǎn)文本(2)鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到下一級(jí)目錄中網(wǎng)頁(yè)文件的格式為：熱點(diǎn)文本(3)鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到上一級(jí)目錄中網(wǎng)頁(yè)文件的格式為：熱點(diǎn)文本其中“../表示退到上一級(jí)目錄中。(4)鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件鏈接到同級(jí)目錄中網(wǎng)頁(yè)文件的格式為：熱點(diǎn)文本,4.6超鏈接2指向其他頁(yè)面的鏈接,,要在當(dāng)前頁(yè)面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書(shū)簽標(biāo)記。超鏈接標(biāo)記的格式為：熱點(diǎn)文本書(shū)簽就是用標(biāo)記對(duì)該文本作一個(gè)記號(hào)。格式為：目標(biāo)文本附近的字符串,4.6超鏈接3指向本頁(yè)中的鏈接,建立指向其他頁(yè)面某處的文本,格式為：熱點(diǎn)文本要在跳轉(zhuǎn)到的位置處加上鏈接標(biāo)記：文字串如果鏈接指向其他文件的某一部分，格式為：熱點(diǎn)文本,,如果鏈接到的文件不是HTML文件，則該文件將作為下載文件，其格式為：熱點(diǎn)文本5指向電子郵件的鏈接單擊指向電子郵件的鏈接，將打開(kāi)缺省的電子郵件程序，如FoxMail、OutlookExpress，并自動(dòng)填寫(xiě)郵件地址。指向電子郵件鏈接的格式為：熱點(diǎn)文本,4.6超鏈接4指向下載文件的鏈接,,【例4-4】超鏈接綜合實(shí)例。在瀏覽器中的顯示效果如圖4-6所示。,4.6超鏈接6．超鏈接綜合實(shí)例,圖4-6超鏈接綜合實(shí)例,【例4-4】,,（1）設(shè)置背景色“色彩值”可以為色彩的英文名或相應(yīng)十六進(jìn)制值。（2）用圖片作為背景background取值為一個(gè)圖片文件名，并且要指出文件存放的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。圖片文件可為GIF格式或JPEG格式的文件。在瀏覽器中，作為背景的圖片將按原來(lái)的大小復(fù)制，重復(fù)鋪滿整個(gè)網(wǎng)頁(yè)。,4.7圖像1網(wǎng)頁(yè)的背景,,如果不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示。可使用標(biāo)記的width和height屬性來(lái)設(shè)置圖片的大小。width和height屬性的屬性值可取像素?cái)?shù)，也可取百分?jǐn)?shù)。,4.7圖片2圖片標(biāo)記,,圖片也可作為熱點(diǎn)，單擊圖片則跳轉(zhuǎn)到被鏈接的文本或其他文件。格式為：例如，下面代碼：,4.7圖片用圖片作為熱點(diǎn),,【例4-5】圖像應(yīng)用綜合實(shí)例。本例文件ex4-5.htm在瀏覽器中的顯示效果如圖4-7所示。,4.7圖片4．圖像應(yīng)用綜合實(shí)例,圖4-7圖像應(yīng)用綜合實(shí)例,【例4-5】,,表格的標(biāo)記為，行的標(biāo)記為，表項(xiàng)的標(biāo)記為。格式為：表頭1表頭2…表頭n表項(xiàng)1表項(xiàng)2…表項(xiàng)n…表項(xiàng)1表項(xiàng)2…表項(xiàng)n,4.8表格1簡(jiǎn)單表格,,在缺省下，表項(xiàng)居于單元格的左端。(1)水平對(duì)齊表項(xiàng)數(shù)據(jù)的水平對(duì)齊用標(biāo)記、和的align屬性。align的屬性值分別為：center（表項(xiàng)數(shù)據(jù)的居中）、left（左對(duì)齊）、right（右對(duì)齊）或justify（左右調(diào)整）。(2)垂直對(duì)齊valign的屬性值分別為：top（靠單元格頂）、bottom（靠單元格底）、middle（靠單元格中）或baseline（同行單元數(shù)據(jù)項(xiàng)位置一致）。,4.8表格2表格內(nèi)文字的對(duì)齊方式,,表格在瀏覽器窗口中的位置有三種：居左、居中和居右。使用標(biāo)記的align屬性。格式為：當(dāng)表格位于頁(yè)面的左側(cè)或右側(cè)時(shí)，文本填充在另一側(cè)。當(dāng)表格居中時(shí)，表格兩邊沒(méi)有文本。當(dāng)align屬性缺省時(shí)，文本在表格的下面。,4.8表格3表格在頁(yè)面中的對(duì)齊方式,,在、、、標(biāo)記中，屬性可以改變表格的背景和邊框的色彩、添加背景圖片，也可以為行和單元格改變色彩、添加背景圖片。bgcolor=""色彩或色彩值"設(shè)置背景色彩background="圖片文件名“設(shè)置背景圖片bordercolor="色彩"設(shè)置表格邊框的色彩bordercolorlight="色彩"設(shè)置表格邊框亮部的色彩rules="row,cols或none"設(shè)置表內(nèi)線的顯示方法，none為無(wú)內(nèi)線,4.8表格4表格的色彩和圖片背景,,【例4-6】表格應(yīng)用綜合實(shí)例。本例文件ex4-6.htm在瀏覽器中的顯示效果如圖4-8所示。,4.8表格5．表格應(yīng)用綜合實(shí)例,圖4-8表格應(yīng)用綜合實(shí)例,【例4-6】,,框架（Frames）也稱多窗口頁(yè)面或幀，是在同一瀏覽器窗口中顯示多個(gè)相互隔離的XHTML頁(yè)的結(jié)構(gòu)，每個(gè)區(qū)域顯示一個(gè)XHTML文件。1建立框架框架的建立使用、兩個(gè)標(biāo)記。用來(lái)劃分窗格，標(biāo)記用來(lái)聲明其中框架頁(yè)面的內(nèi)容。框架的基本結(jié)構(gòu)為：...…,4.9框架（多窗口頁(yè)面）,,(1)標(biāo)記標(biāo)記用來(lái)定義一個(gè)框架組的屬性，格式為：…其中屬性：row設(shè)定橫向分割的框架數(shù)目cols設(shè)定縱向分割的框架數(shù)目border設(shè)定邊框的寬度bordercolor設(shè)定邊框的色彩frameborder設(shè)定有∕無(wú)邊框framespacing設(shè)置各窗格間的空白,4.9框架（多窗口頁(yè)面）,,框架有橫向和縱向之分。對(duì)一個(gè)框架來(lái)說(shuō)，其大小是很重要的。的rows和cols屬性用于設(shè)定橫向分割和縱向分割的框架數(shù)目。例如，要建立有三個(gè)橫向框架的頁(yè)面，可寫(xiě)為：,4.9框架（多窗口頁(yè)面）,,(2)標(biāo)記標(biāo)記用于給各個(gè)框架指定頁(yè)面的內(nèi)容，也就是，它將各個(gè)框架和包含其內(nèi)容的那個(gè)文件聯(lián)系在一起。是一個(gè)單標(biāo)記，格式為：標(biāo)記的個(gè)數(shù)應(yīng)等于在標(biāo)記中所定義的框架數(shù)，并按在文件中出現(xiàn)的次序按先行后列對(duì)框架進(jìn)行初始化。如果標(biāo)記數(shù)目少于中定義的框架數(shù)量，則多余的框架為空。,4.9框架（多窗口頁(yè)面）,,【例4-7】縱向排列多個(gè)窗格。本例中用到的其他HTM文件是在前面例題中建立的文件。本例文件ex4-7.htm在瀏覽器中顯示的效果如圖4-9所示?？蚣艿那短?4.9框架（多窗口頁(yè)面）,圖4-9縱向排列多個(gè)窗格,【例4-7】,,在一個(gè)框架中顯示一個(gè)所有網(wǎng)頁(yè)內(nèi)容的目錄，而通過(guò)單擊其中的某項(xiàng)，在另一個(gè)框架中顯示相應(yīng)內(nèi)容。這些目錄是熱點(diǎn)文本，需要在框架之間建立超鏈接，并指明顯示的目標(biāo)文件的框架。使用的target屬性就可以控制目標(biāo)文件在那個(gè)框架內(nèi)顯示。當(dāng)單擊熱點(diǎn)文本時(shí)，目標(biāo)文件就會(huì)出現(xiàn)在有target指定的框架內(nèi)。target屬性的值可以為框架名，使用格式為：熱點(diǎn)文本,4.9框架（多窗口頁(yè)面）2框架間的鏈接,,另外，“框架名”有4個(gè)特殊的值，分別實(shí)現(xiàn)4類特殊的操作：target="_blank"：鏈接的目標(biāo)文件被顯示在一個(gè)新的沒(méi)有名字的瀏覽器窗口中。target="_self"：鏈接的目標(biāo)文件被顯示在當(dāng)前框架窗口中，代替正在顯示的熱點(diǎn)文本所在的那個(gè)文件，是省略target屬性的默認(rèn)值。target="_top"：鏈接的目標(biāo)文件被顯示在整個(gè)瀏覽器窗口（取消了框架）。target=“_parent”：當(dāng)框架嵌套時(shí)，鏈接的目標(biāo)文件被顯示在父框架中；否則，被顯示在整個(gè)瀏覽器窗口中。,4.9框架（多窗口頁(yè)面）2框架間的鏈接,,,4.9框架（多窗口頁(yè)面）3．框架應(yīng)用綜合實(shí)例,【例4-9】,【例4-9】制作一個(gè)框架集，包含上、下框架，下框架又分為左、右兩部分，并實(shí)現(xiàn)框架間的鏈接。本例文件ex4-9.htm在瀏覽器中顯示的效果如圖4-11所示。,圖4-11框架應(yīng)用綜合實(shí)例,,網(wǎng)頁(yè)上具有可輸入表項(xiàng)及項(xiàng)目選擇等控制所組成的欄目稱為表單。在網(wǎng)頁(yè)中，通過(guò)表單交流和反饋信息。格式為：…name屬性:表單的名字，在一個(gè)網(wǎng)頁(yè)中用于惟一識(shí)別一個(gè)表單action屬性:表單處理的方式，往往是E-mail地址或網(wǎng)址method屬性:表單數(shù)據(jù)的傳送方向，是獲得（GET）表單還是送出（POST）表單,4.10表單1表單的標(biāo)記...,,type屬性值為text，則輸入的文本以標(biāo)準(zhǔn)的字符顯示；type屬性值為password，則輸入的文本顯示為“*”。在表項(xiàng)前應(yīng)加入表項(xiàng)的名稱，如“您的姓名”等，以告訴瀏覽者在隨后的表項(xiàng)中輸入的內(nèi)容。,4.10表單2文字和密碼的輸入,,如果瀏覽者想清除輸入到表單中的全部?jī)?nèi)容，可以使用標(biāo)記中的type屬性所設(shè)的重置（reset）按鈕，當(dāng)瀏覽者完成表單的填寫(xiě)，想要發(fā)送時(shí)，可使用標(biāo)記的屬性type所設(shè)的提交（submit）按鈕，將表單內(nèi)容送給action中的網(wǎng)址或函件信箱。格式為：當(dāng)缺省value的設(shè)置值時(shí)，重置和提交的按鈕分別顯示為“重置”和“提交查詢內(nèi)容”。,4.10表單3重置和提交,,選擇鈕可以是復(fù)選框（checkbox）或單選鈕（radio）。用標(biāo)記的type屬性可設(shè)置選擇鈕的類型屬性value可設(shè)置該選擇鈕的控制初值，用以告訴表單制作者選擇結(jié)果。用checked表示是否為缺省選中項(xiàng)。name屬性是控制名，同一組的選擇鈕的控制名是一樣的。,4.10表單4復(fù)選框和單選鈕,,當(dāng)瀏覽者選擇的項(xiàng)目較多時(shí)，如果用選擇鈕來(lái)選擇，占頁(yè)面的區(qū)域就會(huì)較多?？梢杂脴?biāo)記和標(biāo)記來(lái)設(shè)置選擇欄。選擇欄可分為兩種，即彈出式和字段式。標(biāo)記的格式為：…,4.10表單5選擇欄,,其中：size:取數(shù)字，表示在帶滾動(dòng)條的選擇欄中一次可見(jiàn)的列表項(xiàng)數(shù)name:控制操作名multiple:不帶值，加上本項(xiàng)表示可選多個(gè)選項(xiàng)，否則只能單選標(biāo)記的格式為：其中：select不帶值，加上本項(xiàng)表示該項(xiàng)是預(yù)置的value指定控制操作的初始值，缺省時(shí)初值為option中的內(nèi)容表示選項(xiàng)值,4.10表單5選擇欄,,標(biāo)記可以設(shè)置允許成段文字的輸入。格式為：多行文本其中的行數(shù)和列數(shù)是指不用滾動(dòng)條就可看到的部分。,4.10表單6多行文字的輸入textarea>...,,【例4-10】制作一個(gè)“職員調(diào)查表”，收集職員的個(gè)人資料。為了顯得整潔，在表單中使用了無(wú)邊框表格。本例文件ex4-10.htm在瀏覽器中顯示的效果如圖4-12所示。,4.10表單7．表單應(yīng)用綜合實(shí)例,圖4-12表單應(yīng)用綜合實(shí)例,【例4-10】,,1．制作如圖4-13所示的網(wǎng)頁(yè)，要求章標(biāo)題的級(jí)別為標(biāo)題h2，居中，黑體，紅色；節(jié)標(biāo)題的級(jí)別為標(biāo)題h3，居左，楷體，綠色；正文為宋體，藍(lán)色。整個(gè)網(wǎng)頁(yè)背景色為乳白色。2．制作如圖4-14所示的網(wǎng)頁(yè)，單擊軟件名稱，則下載該軟件。3．分別制作如圖4-15（a）、（b）所示的網(wǎng)頁(yè)，單擊小圖像，將顯示放大的圖像。4．練習(xí)表格在頁(yè)面中的應(yīng)用，分別制作如圖4-16（a）、（b）所示的網(wǎng)頁(yè)。在圖4-16（a）中單擊“詳細(xì)”超文本則打開(kāi)新的瀏覽器窗口，顯示詳細(xì)內(nèi)容，如圖4-16（b）所示。5．制作一個(gè)“網(wǎng)友推薦”表單，如圖4-17所示。6．制作如圖4-18所示的框架網(wǎng)頁(yè)。在左框架中單擊項(xiàng)目，在右框架中顯示相應(yīng)的內(nèi)容。,習(xí)題4,