網(wǎng)站設(shè)計(jì)與建設(shè)課件_第1頁
網(wǎng)站設(shè)計(jì)與建設(shè)課件_第2頁
網(wǎng)站設(shè)計(jì)與建設(shè)課件_第3頁
網(wǎng)站設(shè)計(jì)與建設(shè)課件_第4頁
網(wǎng)站設(shè)計(jì)與建設(shè)課件_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)站設(shè)計(jì)與建設(shè)

Websitedesignanddevelopments網(wǎng)站設(shè)計(jì)與建設(shè)

Websitedesigna1第10章HTML基礎(chǔ)

第三部分網(wǎng)站設(shè)計(jì)技術(shù)第10章HTML基礎(chǔ)

第三部分網(wǎng)站設(shè)計(jì)技術(shù)210．1HTML簡(jiǎn)介1．什么是HTMLHypertextMrakupLanguage（超文本標(biāo)記語言）用于描述超文本中內(nèi)容的顯示方式。這些內(nèi)容的描述都是通過HTML標(biāo)記來完成的。HTML的一個(gè)重要特點(diǎn)是超級(jí)鏈接（hyperlink一個(gè)HTML文件的后綴名是.html或者是.htmHTML是一個(gè)純文本格式的ASCII文件10．1HTML簡(jiǎn)介1．什么是HTML32．HTML的歷史SGML（standardgeneralizedmarkuplanguage，標(biāo)準(zhǔn)通用標(biāo)記語言）語言，于1986年獲得國際標(biāo)準(zhǔn)化組織的批準(zhǔn)。這種語言是為了在各種網(wǎng)絡(luò)環(huán)境之間、不同文件格式之間進(jìn)行交流而使用的一種語言格式。它的文件格式標(biāo)準(zhǔn)化，并統(tǒng)一使用標(biāo)記符號(hào)（tag）對(duì)文件的內(nèi)容進(jìn)行標(biāo)記。HTML于1991年問世，它是SGML的一個(gè)子集。HTML是一種有前后關(guān)系格式化的語言，因此在HTML中除了包含文本內(nèi)容，還包含通常是成對(duì)出現(xiàn)的標(biāo)記。標(biāo)記是包括在尖括號(hào)中的文本，為HTML的解釋器提供指令。2．HTML的歷史43．HTML的工作方式下載瀏覽器將文檔解釋為網(wǎng)頁并在瀏覽器窗口中顯示出來。標(biāo)準(zhǔn)HTML能在不同瀏覽器上產(chǎn)生同樣的效果HTML并不能精確地定義文檔信息如何顯示和排列，而只是建議瀏覽器應(yīng)該如何顯示和排列這些信息4．HTML的解釋器NetscapeNavigatorMicrosoftInternetExplorer其他3．HTML的工作方式510．4HTML標(biāo)記與屬性<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.<b>Thistextisbold</b></body></html>HTML元素通常用標(biāo)記表示。標(biāo)記分為單標(biāo)記和雙標(biāo)記兩種。<br>，它表示換行標(biāo)記以“<”開始，以“>”結(jié)束。HTML的標(biāo)記不區(qū)分大小寫。<!-->注釋內(nèi)容</!-->10．4HTML標(biāo)記與屬性<html>6標(biāo)記屬性屬性具有擴(kuò)展HTML元素的能力。屬性設(shè)置通常由屬性名和屬性值成對(duì)出現(xiàn)來構(gòu)成，普通形式是name=”value”。<bodybgcolor=“yellow”>引號(hào)不對(duì)，出問題表10.1HTML的常用標(biāo)記P215標(biāo)記屬性710．5HTML中的超鏈接格式：<ahref=”URL”>被鏈接的文本或圖象</a>超鏈接外部鏈接內(nèi)部鏈接跳轉(zhuǎn)到本網(wǎng)站的另一個(gè)網(wǎng)頁也叫做本地鏈接；絕對(duì)路徑，相對(duì)路徑跳轉(zhuǎn)到本網(wǎng)頁的另一個(gè)位置，也叫做頁內(nèi)跳轉(zhuǎn)<aname=”書簽名”>書簽文本或圖象</a><ahref=”#書簽名”>被鏈接的文本或圖象</a>。10．5HTML中的超鏈接格式：<ahref=”URL”810．2HTML標(biāo)準(zhǔn)及版本歷史1．HTML標(biāo)準(zhǔn)WorldWideWebConsortium，W3C，HTML標(biāo)準(zhǔn)定義了構(gòu)成HTML語言的每一個(gè)獨(dú)立元素以及這些元素是指示如何在瀏覽器中顯示HTML文檔中的指令和標(biāo)記符。這一標(biāo)準(zhǔn)確保在不同的瀏覽器和計(jì)算機(jī)平臺(tái)上超文本顯示的一致性。并非強(qiáng)制而只是推薦標(biāo)準(zhǔn)。10．2HTML標(biāo)準(zhǔn)及版本歷史1．HTML標(biāo)準(zhǔn)92．HTML標(biāo)準(zhǔn)的版本歷史①HTML1.0和2.0HTML1.0版本，測(cè)試HTML2.0——1995年11月發(fā)布②HTML3.2表格（Table）圖（Figures）框架（Frames）數(shù)學(xué)等式（MathematicalEquations）改進(jìn)的標(biāo)記符（ImprovedTags）③HTML4.0樣式表（StyleSheet）國際化特征（InternationalizationFeatures）訪問特征（AccessibilityFeatures）增強(qiáng)的表格和表單（EnhancedTablesandForms）腳本和多媒體（ScriptingandMultimedia）Transitonal：使用但不依賴CSSStrict：擺脫結(jié)構(gòu)化標(biāo)注，使用CSS格式化字體、顏色、布局。Frameset：使用框架2．HTML標(biāo)準(zhǔn)的版本歷史10HTML4.011999，支持XHTMLExtensibleHypertextMarkupLanguage是XML與HTML4.01的結(jié)合體分離的結(jié)構(gòu)和表達(dá)：將HTML展示元素放入樣式單中考慮Web的通用可訪問性：在不同平臺(tái)上生成文檔(例如語音，使殘疾人可訪問WWW)幫助用戶代理增強(qiáng)解釋功能：處理和解釋表格。用戶代理是基于語音的閱讀器和聽覺有障礙的助聽器XHTML1.0HTML5.0HTML4.011110．3網(wǎng)頁的可訪問性WAI：WebAccessibilityInitiativeWAI目標(biāo)：確保Web核心技術(shù)對(duì)于身體、視覺、聽覺和認(rèn)知障礙的用戶可以平等地使用/WAI/WAI/wcag-curric/WAI-WEBCONTENT10．3網(wǎng)頁的可訪問性WAI：WebAccessibil1210．6HTML的擴(kuò)展缺陷：⑴文本格式的局限沒有顯式的布局和定位控制CSS。⑵缺乏對(duì)布局控制的能力借助表格來實(shí)現(xiàn)近似的效果，但對(duì)開發(fā)者的要求比較高，而且過程非常繁瑣。CSS⑶無法動(dòng)態(tài)改變頁面內(nèi)容DHTML。⑷交互困難雖然配合腳本語言和CSS，HTML可以提供一定的交互能力，但這種交互能力的功能有限。⑸適應(yīng)性差不能適應(yīng)越來越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機(jī)、PDA、智能家電都不能直接顯示HTML。其他標(biāo)記語言內(nèi)容和結(jié)構(gòu)混合XML10．6HTML的擴(kuò)展缺陷：131．動(dòng)態(tài)HTMLDHTMLHTML融入了CSS，腳本語言等技術(shù)它由三部分組成，DOM（文本對(duì)象模型）DOM為網(wǎng)頁定義了各種元素對(duì)象，使這些元素成為可以控制的對(duì)象，這是實(shí)現(xiàn)動(dòng)態(tài)HTML的物質(zhì)基礎(chǔ)；CSS（層疊樣式表）CSS是對(duì)DOM中所定義的對(duì)象效果的描述，即對(duì)各種對(duì)象不同狀態(tài)的描述，這是實(shí)現(xiàn)動(dòng)態(tài)HTML目標(biāo)的描述；Script（腳本語言，比如VBScript和JavaScript）。Script把各種對(duì)象動(dòng)態(tài)地賦予各種屬性工具，是實(shí)現(xiàn)動(dòng)態(tài)HTML的手段。1．動(dòng)態(tài)HTMLDHTML142．XML“ExtensibleMarkupLanguage”的縮寫，即可擴(kuò)展標(biāo)記語言。XML也是基于SGML的。它是一種元標(biāo)記語言，也就是說，在XML中，開發(fā)者可以根據(jù)自己的需要定義自己的標(biāo)記，只要這種標(biāo)記是滿足XML命名規(guī)則的。換句話說，XML是一種能創(chuàng)造其他語言的語言。XML的更重要的作用在于它可以表示結(jié)構(gòu)化的數(shù)據(jù)，從而有利于數(shù)據(jù)交換。2．XML153．XHTML“eXtensibleHyperTextMarkupLanguage”，即可擴(kuò)展超文本標(biāo)記語言。是一種使用XML語法對(duì)HTML重新闡述的語言。XHTML1.0兼容HTML4.0。優(yōu)勢(shì)⑴XHTML能夠在多種網(wǎng)絡(luò)設(shè)備和智能終端上運(yùn)行，實(shí)現(xiàn)了數(shù)據(jù)與展示的分離。⑵XHTML非常嚴(yán)謹(jǐn)。由于早期的HTML允許各種私有標(biāo)記，所以在使用HTML開發(fā)完網(wǎng)頁后，必須在多種瀏覽器環(huán)境下進(jìn)行測(cè)試。而XHTML的語法是嚴(yán)格定義的，因此避免這種狀況的發(fā)生。⑶XML是Web發(fā)展的趨勢(shì)，但目前支持原始XML數(shù)據(jù)的瀏覽器還不是很多，而XHTML適用于多種瀏覽器。 ⑷XHTML能與其他基于XML的標(biāo)記語言、應(yīng)用程序和協(xié)議進(jìn)行良好的交互工作。⑸XHTML是Web標(biāo)準(zhǔn)的一部分，能很好地運(yùn)行在無線設(shè)備等用戶代理上。⑹XHTML比HTML有更好的一致性，所以很少會(huì)產(chǎn)生功能和顯示的問題3．XHTML164．其他標(biāo)記語言⑴UIML：用戶界面標(biāo)記語言，一種界面描述語言⑵XForm：這種標(biāo)記語言的目的在于將界面元素的展示與內(nèi)容分離，這樣會(huì)帶來諸如軟件復(fù)用性增強(qiáng)、更好的跨平臺(tái)等優(yōu)勢(shì)。⑶XIML：擴(kuò)展界面標(biāo)記語言，它側(cè)重于對(duì)不同應(yīng)用程序間交互數(shù)據(jù)的描述，它比XML描述的數(shù)據(jù)更具體，更有針對(duì)性。⑷XAML：可擴(kuò)展應(yīng)用程序標(biāo)記語言，它主要用于頁面中文本、圖象、控件等元素的布局。4．其他標(biāo)記語言17建議不使用的標(biāo)記,但大多數(shù)瀏覽器對(duì)這些標(biāo)記還是支持的。<ISINDEX><APPLET><CENTER><FONT><BASEFONT><U><DIR><MENU>建議不使用的標(biāo)記,但大多數(shù)瀏覽器對(duì)這些標(biāo)記還是支持的。18HTML5預(yù)覽Html5是繼XHTML之后，由Apple，Opera，Mozilla三大網(wǎng)絡(luò)媒體共同推舉的最新HTML語言標(biāo)準(zhǔn)，用以取代Html4和現(xiàn)在的XHTML

在HTML5中新增了一些標(biāo)簽，如使用header來標(biāo)記頭部?jī)?nèi)容，nav標(biāo)記導(dǎo)航內(nèi)容，article標(biāo)記文檔中的一塊獨(dú)立內(nèi)容，footer標(biāo)記作者和版權(quán)信息，HTML5將使頁面更加結(jié)構(gòu)化。

HTML5預(yù)覽Html5是繼XHTML之后，由Appl19另外還增加了audio、video、embed、time、meter這些語義化的標(biāo)簽，剔除了一些無用的標(biāo)簽和屬性，如font、center，因?yàn)檫@些有關(guān)于表現(xiàn)的標(biāo)簽元素已經(jīng)讓CSS給替代了，表現(xiàn)和結(jié)構(gòu)的分離無論在XHTML2.0還是HTML5中都是趨勢(shì)。另外還增加了audio、video、embed、time、20思考題：10.1什么是HTML？它的特點(diǎn)是什么？10.2常見的HTML解釋器有哪些？10.13為什么在網(wǎng)頁設(shè)計(jì)中應(yīng)該使用的是相對(duì)路徑而不是絕對(duì)路徑？思考題：10.1什么是HTML？它的特點(diǎn)是什么？21網(wǎng)站設(shè)計(jì)與建設(shè)

Websitedesignanddevelopments網(wǎng)站設(shè)計(jì)與建設(shè)

Websitedesigna22第10章HTML基礎(chǔ)

第三部分網(wǎng)站設(shè)計(jì)技術(shù)第10章HTML基礎(chǔ)

第三部分網(wǎng)站設(shè)計(jì)技術(shù)2310．1HTML簡(jiǎn)介1．什么是HTMLHypertextMrakupLanguage（超文本標(biāo)記語言）用于描述超文本中內(nèi)容的顯示方式。這些內(nèi)容的描述都是通過HTML標(biāo)記來完成的。HTML的一個(gè)重要特點(diǎn)是超級(jí)鏈接（hyperlink一個(gè)HTML文件的后綴名是.html或者是.htmHTML是一個(gè)純文本格式的ASCII文件10．1HTML簡(jiǎn)介1．什么是HTML242．HTML的歷史SGML（standardgeneralizedmarkuplanguage，標(biāo)準(zhǔn)通用標(biāo)記語言）語言，于1986年獲得國際標(biāo)準(zhǔn)化組織的批準(zhǔn)。這種語言是為了在各種網(wǎng)絡(luò)環(huán)境之間、不同文件格式之間進(jìn)行交流而使用的一種語言格式。它的文件格式標(biāo)準(zhǔn)化，并統(tǒng)一使用標(biāo)記符號(hào)（tag）對(duì)文件的內(nèi)容進(jìn)行標(biāo)記。HTML于1991年問世，它是SGML的一個(gè)子集。HTML是一種有前后關(guān)系格式化的語言，因此在HTML中除了包含文本內(nèi)容，還包含通常是成對(duì)出現(xiàn)的標(biāo)記。標(biāo)記是包括在尖括號(hào)中的文本，為HTML的解釋器提供指令。2．HTML的歷史253．HTML的工作方式下載瀏覽器將文檔解釋為網(wǎng)頁并在瀏覽器窗口中顯示出來。標(biāo)準(zhǔn)HTML能在不同瀏覽器上產(chǎn)生同樣的效果HTML并不能精確地定義文檔信息如何顯示和排列，而只是建議瀏覽器應(yīng)該如何顯示和排列這些信息4．HTML的解釋器NetscapeNavigatorMicrosoftInternetExplorer其他3．HTML的工作方式2610．4HTML標(biāo)記與屬性<html><head><title>Titleofpage</title></head><body>Thisismyfirsthomepage.<b>Thistextisbold</b></body></html>HTML元素通常用標(biāo)記表示。標(biāo)記分為單標(biāo)記和雙標(biāo)記兩種。<br>，它表示換行標(biāo)記以“<”開始，以“>”結(jié)束。HTML的標(biāo)記不區(qū)分大小寫。<!-->注釋內(nèi)容</!-->10．4HTML標(biāo)記與屬性<html>27標(biāo)記屬性屬性具有擴(kuò)展HTML元素的能力。屬性設(shè)置通常由屬性名和屬性值成對(duì)出現(xiàn)來構(gòu)成，普通形式是name=”value”。<bodybgcolor=“yellow”>引號(hào)不對(duì)，出問題表10.1HTML的常用標(biāo)記P215標(biāo)記屬性2810．5HTML中的超鏈接格式：<ahref=”URL”>被鏈接的文本或圖象</a>超鏈接外部鏈接內(nèi)部鏈接跳轉(zhuǎn)到本網(wǎng)站的另一個(gè)網(wǎng)頁也叫做本地鏈接；絕對(duì)路徑，相對(duì)路徑跳轉(zhuǎn)到本網(wǎng)頁的另一個(gè)位置，也叫做頁內(nèi)跳轉(zhuǎn)<aname=”書簽名”>書簽文本或圖象</a><ahref=”#書簽名”>被鏈接的文本或圖象</a>。10．5HTML中的超鏈接格式：<ahref=”URL”2910．2HTML標(biāo)準(zhǔn)及版本歷史1．HTML標(biāo)準(zhǔn)WorldWideWebConsortium，W3C，HTML標(biāo)準(zhǔn)定義了構(gòu)成HTML語言的每一個(gè)獨(dú)立元素以及這些元素是指示如何在瀏覽器中顯示HTML文檔中的指令和標(biāo)記符。這一標(biāo)準(zhǔn)確保在不同的瀏覽器和計(jì)算機(jī)平臺(tái)上超文本顯示的一致性。并非強(qiáng)制而只是推薦標(biāo)準(zhǔn)。10．2HTML標(biāo)準(zhǔn)及版本歷史1．HTML標(biāo)準(zhǔn)302．HTML標(biāo)準(zhǔn)的版本歷史①HTML1.0和2.0HTML1.0版本，測(cè)試HTML2.0——1995年11月發(fā)布②HTML3.2表格（Table）圖（Figures）框架（Frames）數(shù)學(xué)等式（MathematicalEquations）改進(jìn)的標(biāo)記符（ImprovedTags）③HTML4.0樣式表（StyleSheet）國際化特征（InternationalizationFeatures）訪問特征（AccessibilityFeatures）增強(qiáng)的表格和表單（EnhancedTablesandForms）腳本和多媒體（ScriptingandMultimedia）Transitonal：使用但不依賴CSSStrict：擺脫結(jié)構(gòu)化標(biāo)注，使用CSS格式化字體、顏色、布局。Frameset：使用框架2．HTML標(biāo)準(zhǔn)的版本歷史31HTML4.011999，支持XHTMLExtensibleHypertextMarkupLanguage是XML與HTML4.01的結(jié)合體分離的結(jié)構(gòu)和表達(dá)：將HTML展示元素放入樣式單中考慮Web的通用可訪問性：在不同平臺(tái)上生成文檔(例如語音，使殘疾人可訪問WWW)幫助用戶代理增強(qiáng)解釋功能：處理和解釋表格。用戶代理是基于語音的閱讀器和聽覺有障礙的助聽器XHTML1.0HTML5.0HTML4.013210．3網(wǎng)頁的可訪問性WAI：WebAccessibilityInitiativeWAI目標(biāo)：確保Web核心技術(shù)對(duì)于身體、視覺、聽覺和認(rèn)知障礙的用戶可以平等地使用/WAI/WAI/wcag-curric/WAI-WEBCONTENT10．3網(wǎng)頁的可訪問性WAI：WebAccessibil3310．6HTML的擴(kuò)展缺陷：⑴文本格式的局限沒有顯式的布局和定位控制CSS。⑵缺乏對(duì)布局控制的能力借助表格來實(shí)現(xiàn)近似的效果，但對(duì)開發(fā)者的要求比較高，而且過程非常繁瑣。CSS⑶無法動(dòng)態(tài)改變頁面內(nèi)容DHTML。⑷交互困難雖然配合腳本語言和CSS，HTML可以提供一定的交互能力，但這種交互能力的功能有限。⑸適應(yīng)性差不能適應(yīng)越來越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機(jī)、PDA、智能家電都不能直接顯示HTML。其他標(biāo)記語言內(nèi)容和結(jié)構(gòu)混合XML10．6HTML的擴(kuò)展缺陷：341．動(dòng)態(tài)HTMLDHTMLHTML融入了CSS，腳本語言等技術(shù)它由三部分組成，DOM（文本對(duì)象模型）DOM為網(wǎng)頁定義了各種元素對(duì)象，使這些元素成為可以控制的對(duì)象，這是實(shí)現(xiàn)動(dòng)態(tài)HTML的物質(zhì)基礎(chǔ)；CSS（層疊樣式表）CSS是對(duì)DOM中所定義的對(duì)象效果的描述，即對(duì)各種對(duì)象不同狀態(tài)的描述，這是實(shí)現(xiàn)動(dòng)態(tài)HTML目標(biāo)的描述；Script（腳本語言，比如VBScript和JavaScript）。Script把各種對(duì)象動(dòng)態(tài)地賦予各種屬性工具，是實(shí)現(xiàn)動(dòng)態(tài)HTML的手段。1．動(dòng)態(tài)HTMLDHTML352．XML“ExtensibleMarkupLanguage”的縮寫，即可擴(kuò)展標(biāo)記語言。XML也是基于SGML的。它是一種元標(biāo)記語言，也就是說，在XML中，開發(fā)者可以根據(jù)自己的需要定義自己的標(biāo)記，只要這種標(biāo)記是滿足XML命名規(guī)則的。換句話說，XML是一種能創(chuàng)造其他語言的語言。XML的更重要的作用在于它可以表示結(jié)構(gòu)化的數(shù)據(jù)，從而有利于數(shù)據(jù)交換。2．XML363．XHTML“eXtensibleHyperTextMarkupLanguage”，即可擴(kuò)展超文本標(biāo)記語言。是一種使用XML語法對(duì)HTML重新闡述的語言。XHTML1.0兼容HTML4.0。優(yōu)勢(shì)⑴XHTML能夠在多種網(wǎng)絡(luò)設(shè)備和智能終端上運(yùn)行，實(shí)現(xiàn)了數(shù)據(jù)與展示的分離。⑵XHTML非常嚴(yán)謹(jǐn)。由于早期的HTML允許各種私有標(biāo)記，所以在使用HTML開發(fā)完網(wǎng)頁后，必須在多種瀏覽器環(huán)境下進(jìn)行測(cè)試。而XHTML的語法是嚴(yán)格定義的，因此避免這種狀況的發(fā)生。⑶XML是Web發(fā)展的趨勢(shì)，但目前支持原始XML數(shù)據(jù)的瀏覽器還不是很多，而XHTML適用于多種瀏覽器。 ⑷XHTML能與其他基于XML的標(biāo)記語言、應(yīng)用程序和協(xié)議進(jìn)行良好的交互工作。⑸XHTML是Web標(biāo)準(zhǔn)的一部分，能很好地運(yùn)行在無線設(shè)備等用戶代理上。⑹XHTML比HTML有

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論