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

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