第1章緒論主講人：XX老師目錄1.1Web原理基礎(chǔ)1.2Web前端技術(shù)基礎(chǔ)1.3Web前端新技術(shù)1.4Web開發(fā)工具1.5Web技術(shù)的前景與展望1.1Web原理基礎(chǔ)1.1.1Internet與萬(wàn)維網(wǎng)1.1.2Web架構(gòu)1.1.3Web應(yīng)用1.1.1Internet與萬(wàn)維網(wǎng)1Internet2萬(wàn)維網(wǎng)1.1.1Internet與萬(wàn)維網(wǎng)Internet中文名稱叫做“因特網(wǎng)”，也被人們稱為“國(guó)際互聯(lián)網(wǎng)”。它是由成千上萬(wàn)臺(tái)計(jì)算機(jī)設(shè)備互相連接，基于TCP/IP協(xié)議進(jìn)行通信從而形成的全球網(wǎng)絡(luò)。Internet最早是在1969年由美國(guó)國(guó)防部建立的ARPANET網(wǎng)絡(luò)的基礎(chǔ)上演變而來(lái)的。目前，Internet已正式連接86個(gè)國(guó)家和地區(qū)，接入了6萬(wàn)多個(gè)網(wǎng)絡(luò)。1.1.1Internet與萬(wàn)維網(wǎng)通過Internet，用戶可以獲得以下服務(wù)：WWW瀏覽服務(wù)電子郵件服務(wù)（E-mail）文件傳輸服務(wù)（FTP）遠(yuǎn)程登陸服務(wù)（Telnet）1.1.1Internet與萬(wàn)維網(wǎng)萬(wàn)維網(wǎng)（WWW，WorldWideWeb）是Internet上最重要的服務(wù)之一，也常被簡(jiǎn)稱為“W3”或“Web”。萬(wàn)維網(wǎng)主要使用超文本傳輸協(xié)議（HTTP，HypertextTransferProtocol）將互聯(lián)網(wǎng)上的資源結(jié)合在了一起，并在瀏覽器中以Web頁(yè)面的方式呈現(xiàn)給用戶。每一個(gè)網(wǎng)絡(luò)資源都有一個(gè)唯一的統(tǒng)一資源標(biāo)識(shí)符（URI，UniformResourceIdentifier），因此在Web頁(yè)面中可以以超文本鏈接的形式相互引用，從而把不同的頁(yè)面關(guān)聯(lián)在一起。在使用PC、手機(jī)等設(shè)備上網(wǎng)瀏覽的網(wǎng)站都屬于WWW提供的服務(wù)。它與Internet并不是同一個(gè)概念，Internet上除了萬(wàn)維網(wǎng)還有其他服務(wù)，比如電子郵件服務(wù)、文件傳輸服務(wù)等。1.1.2Web架構(gòu)Web服務(wù)器Web瀏覽器Web應(yīng)用1.1.2Web架構(gòu)Web架構(gòu)是由Web服務(wù)器與Web瀏覽器兩部分組成的，也可以稱為是瀏覽器/服務(wù)器（B/S，Browser/Server）架構(gòu)，如圖所示。1.1.2Web架構(gòu)Web服務(wù)器Web服務(wù)器是在實(shí)體機(jī)或虛擬機(jī)服務(wù)器設(shè)備中安裝的服務(wù)器軟件，在聯(lián)網(wǎng)環(huán)境中可以接收用戶在Web瀏覽器中輸入的URL（UniformResourceLocator，統(tǒng)一資源定位符）地址，然后將該地址對(duì)應(yīng)的文本、圖片等內(nèi)容發(fā)送給用戶并顯示在用戶使用的Web瀏覽器中。Web服務(wù)器通常用于放置網(wǎng)頁(yè)文件和數(shù)據(jù)供用戶訪問和下載。常用的Web服務(wù)器有Apache、IIS、Nginx等。1.1.2Web架構(gòu)Web瀏覽器Web瀏覽器是安裝在客戶端（PC端或移動(dòng)設(shè)備）的軟件，用于訪問和顯示W(wǎng)eb資源。用戶打開Web瀏覽器后輸入正確的URL地址就可以訪問網(wǎng)絡(luò)上的資源，Web資源一般會(huì)以HTML文件（后綴名為.html或.htm的文件）的形式發(fā)送給瀏覽器。瀏覽器可以解析和運(yùn)行接收到的HTML文件，使其在瀏覽器中呈現(xiàn)帶有文字、圖像、超鏈接等豐富內(nèi)容并且具有排版布局效果的畫面，即Web頁(yè)面。1.1.2Web架構(gòu)Web瀏覽器目前常用的瀏覽器有Edge、Chrome、Firefox、Safari、Opera等，其圖標(biāo)樣式如圖所示。1.1.2Web架構(gòu)Web應(yīng)用Web應(yīng)用不需要安裝，其程序資源都部署在Web服務(wù)器中。用戶通過在Web瀏覽器中輸入不同的URL地址就可以遠(yuǎn)程訪問Web應(yīng)用。所有的Web應(yīng)用都可以理解為存放在Web服務(wù)器端，并且可以在瀏覽器中呈現(xiàn)的軟件。這些軟件在瀏覽器中以Web頁(yè)面的形式存在，包括文字、圖片、音頻、視頻等內(nèi)容，這些圖形用戶界面（GraphicUserInterface，GUI）也稱為Web前端。Web應(yīng)用需要調(diào)整更新時(shí)，只需要更新服務(wù)器端存放的相關(guān)內(nèi)容即可，用戶通過瀏覽器可以直接訪問到最新的內(nèi)容，免去了客戶端與服務(wù)器端同時(shí)需要更新的麻煩。1.2Web前端技術(shù)基礎(chǔ)1.2.1HTML技術(shù)1.2.2CSS技術(shù)1.2.3JavaScript技術(shù)1.2.1HTML技術(shù)1HTML簡(jiǎn)介2HTML起源3HTML特點(diǎn)1.2.1HTML技術(shù)HTML簡(jiǎn)介HTML來(lái)源于HypertextMarkupLanguage（超文本標(biāo)記語(yǔ)言）的首字母縮寫，是用于架構(gòu)和呈現(xiàn)網(wǎng)頁(yè)的一種標(biāo)記語(yǔ)言，也是萬(wàn)維網(wǎng)（WorldWideWeb）上應(yīng)用最廣泛的核心語(yǔ)言。它使用標(biāo)簽的形式將網(wǎng)頁(yè)內(nèi)容劃分結(jié)構(gòu)層次。HTML還使用超文本鏈接（簡(jiǎn)稱“超鏈接”）將網(wǎng)絡(luò)上不同的Web資源進(jìn)行關(guān)聯(lián)，任何頁(yè)面上的文字或圖片都可以被指定為超鏈接，點(diǎn)擊后可以跳轉(zhuǎn)到相關(guān)聯(lián)的其他Web資源頁(yè)面。目前HTML標(biāo)準(zhǔn)由W3C組織（注：其全稱為WorldWideWebConsortium，是萬(wàn)維網(wǎng)最居權(quán)威和影響力的國(guó)際技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)）進(jìn)行維護(hù)。1.2.1HTML技術(shù)HTML起源（一）HTML最早是在1991年由TimBerners-Lee以“HTML標(biāo)簽集”的形式公開發(fā)布的，包含了18個(gè)最早的元素標(biāo)簽。1993年由國(guó)際互聯(lián)網(wǎng)工程任務(wù)組（IETF，TheInternetEngineeringTaskForce）正式發(fā)布了第一份HTML規(guī)范標(biāo)準(zhǔn)草案——“HypertextMarkupLanguage（HTML）InternetDraft”。由于當(dāng)時(shí)HTML有很多不同的標(biāo)準(zhǔn)規(guī)范，因此HTML并沒有正式的第一版。1.2.1HTML技術(shù)HTML起源（二）在1994年，IETF設(shè)立了HTML工作組來(lái)專門負(fù)責(zé)HTML技術(shù)的標(biāo)準(zhǔn)制定工作。1995年，第一個(gè)關(guān)于HTML的正式規(guī)范標(biāo)準(zhǔn)HTML2.0被提出，這也是未來(lái)所有HTML技術(shù)的基礎(chǔ)。從1996年開始，HTML標(biāo)準(zhǔn)正式由W3C組織進(jìn)行維護(hù)，同年IETF關(guān)閉了HTML工作組。1.2.1HTML技術(shù)HTML起源（三）1997年初HTML3.2版作為W3C推薦標(biāo)準(zhǔn)正式發(fā)布，這也是由W3C組織正式發(fā)布的第一版HTML標(biāo)準(zhǔn)規(guī)范，同年7月已經(jīng)正式發(fā)布HTML4.0版。1999年12月W3C組織發(fā)布了HTML4.01版，對(duì)之前的HTML4.0版進(jìn)行了一些修正，這也是目前使用年限最長(zhǎng)的一個(gè)版本。在2000年，HTML基于4.01版的嚴(yán)謹(jǐn)語(yǔ)法規(guī)則成為了國(guó)際標(biāo)準(zhǔn)（ISO/IEC15445:2000）。1.2.1HTML技術(shù)HTML的特點(diǎn)簡(jiǎn)易性通用性平臺(tái)無(wú)關(guān)性1.2.2CSS技術(shù)1CSS簡(jiǎn)介2CSS起源3CSS特點(diǎn)1.2.2CSS技術(shù)CSS簡(jiǎn)介CSS全稱為CascadingStyleSheets（層疊樣式表），用于為網(wǎng)頁(yè)文檔中的元素添加各類樣式，如字體大小、背景顏色、對(duì)齊方式等，起到了網(wǎng)頁(yè)文檔美化作用。層疊樣式表的工作原理是將樣式規(guī)則存放在樣式表中，網(wǎng)頁(yè)文檔通過對(duì)樣式表的引用可為目標(biāo)區(qū)域的元素添加樣式。目前所有主流瀏覽器均支持層疊樣式表。目前CSS標(biāo)準(zhǔn)由W3C組織進(jìn)行維護(hù)。1.2.2CSS技術(shù)CSS起源（一）最早的CSS1（CascadingStyleSheets,level1）規(guī)范是在1996年12月由W3C組織正式推出，HakonWiumLie與BertBos為聯(lián)合創(chuàng)始人。該版本主要包含了字體樣式，顏色與背景樣式，元素對(duì)齊方式，邊框、內(nèi)外邊距和位置樣式等屬性設(shè)置。1.2.2CSS技術(shù)CSS起源（二）CSS2（CascadingStyleSheets,level2）規(guī)范在1998年5月正式發(fā)布。在CSS1的基礎(chǔ)上，CSS2新增了元素的定位屬性、新的字體屬性例如陰影效果等。這一版本隨后經(jīng)歷了漫長(zhǎng)的修改過程，直至2011年6月才正式發(fā)布了CSS2.1版。目前CSS技術(shù)所保留的大部分功能都是基于CSS2發(fā)展而來(lái)的。1.2.2CSS技術(shù)CSS的特點(diǎn)內(nèi)容與表現(xiàn)分離易于應(yīng)用與維護(hù)提高瀏覽器加載速度1.2.3JavaScript技術(shù)JavaScript簡(jiǎn)介JavaScript是一種輕量級(jí)的直譯式編程語(yǔ)言，基于ECMAScript標(biāo)準(zhǔn)（注:一種由ECMA國(guó)際組織通過ECMA-262標(biāo)準(zhǔn)化的腳本程序語(yǔ)言）。通常在HTML網(wǎng)頁(yè)中使用JavaScript為頁(yè)面增加動(dòng)態(tài)效果和功能。JavaScript和HTML、CSS一起被稱為是Web開發(fā)的三大核心技術(shù)，目前JavaScript已經(jīng)廣泛應(yīng)用于Web開發(fā)，市面上絕大多數(shù)網(wǎng)頁(yè)都使用了JavaScript代碼?？梢哉f(shuō)當(dāng)今所有瀏覽器都支持JavaScript，無(wú)需額外安裝第三方插件。1.2.3JavaScript技術(shù)JavaScript起源JavaScript最早是在1995年的時(shí)候由網(wǎng)景（Netscape）公司的BrendanEich用了十天時(shí)間開發(fā)出來(lái)的，用于當(dāng)時(shí)的網(wǎng)景導(dǎo)航者（NetscapeNavigator）瀏覽器2.0版。最初這種腳本語(yǔ)言的官方名稱為L(zhǎng)iveScript，后來(lái)應(yīng)用于網(wǎng)景導(dǎo)航者瀏覽器2.0B3版的時(shí)候正式更名為JavaScript。1.2.3JavaScript技術(shù)JavaScriptvsJava因?yàn)槊Q的相近，JavaScript常被誤以為和Java有關(guān)，但事實(shí)上它們是無(wú)論從概念還是設(shè)計(jì)上都毫無(wú)關(guān)聯(lián)的兩種語(yǔ)言。JavaScript是Netscape公司的BrendanEich發(fā)明的一種輕量級(jí)語(yǔ)言，主要應(yīng)用于網(wǎng)頁(yè)開發(fā)，無(wú)需事先編譯；而Java是由Sun公司的JamesGosling發(fā)明的一種面向?qū)ο蟪绦蛘Z(yǔ)言，根據(jù)應(yīng)用方向又可分為J2SE（Java2標(biāo)準(zhǔn)版）、J2ME（Java2微型版）和J2EE（Java2企業(yè)版）三個(gè)版本，需要先編譯再執(zhí)行。JavaScript的主旨是為非程序開發(fā)者快速上手使用的，而Java是更高級(jí)更復(fù)雜的一種面向?qū)I(yè)程序開發(fā)者的語(yǔ)言，比JavaScript難度大、應(yīng)用范圍更廣。1.2.3JavaScript技術(shù)JavaScript的特點(diǎn)腳本語(yǔ)言簡(jiǎn)單性弱類型跨平臺(tái)大小寫敏感1.3Web前端新技術(shù)1.3.1HTML5技術(shù)1.3.2CSS3技術(shù)1.3.3jQuery技術(shù)1.3.1HTML5技術(shù)HTML5簡(jiǎn)介HTML5發(fā)展史HTML5特點(diǎn)1.3.1HTML5技術(shù)HTML5簡(jiǎn)介HTML5指的是HTML語(yǔ)言的第五次修改版，也是目前HTML語(yǔ)言的最新版。HTML5標(biāo)準(zhǔn)規(guī)范是2014年10月由W3C組織正式發(fā)布，該標(biāo)準(zhǔn)規(guī)范中新增了對(duì)于多媒體技術(shù)的支持，為PC端和移動(dòng)平臺(tái)帶來(lái)無(wú)縫銜接的豐富內(nèi)容。1.3.1HTML5技術(shù)HTML5簡(jiǎn)介HTML5的正式logo是在2011年4月被最終確定的，如圖1-3所示。在對(duì)該logo進(jìn)行定義的過程中，W3C組織稱HTML5是“現(xiàn)代Web應(yīng)用的奠基石”。1.3.1HTML5技術(shù)2.HTML5發(fā)展史HTML5經(jīng)歷了相當(dāng)曲折的發(fā)展歷史。最初在2004年6月，Mozilla和Opera公司向W3C組織呈遞了一份提案，要求致力于提高當(dāng)今主流瀏覽器的兼容性并制定新的Web標(biāo)準(zhǔn)。由于當(dāng)時(shí)的最終結(jié)果為反對(duì)意見，因此該提案沒有被列入議程。不久之后支持者另行成立了網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作組（WHATWG，WebHypertextApplicationTechnologyWorkingGroup），基于之前的提案草稿發(fā)布了WebApplication1.0標(biāo)準(zhǔn)規(guī)范。這兩份標(biāo)準(zhǔn)規(guī)范后來(lái)合并形成了HTML5，并于2007年由W3C組織下新成立的HTML工作組接納。1.3.1HTML5技術(shù)2.HTML5發(fā)展史2008年1月，WHATWG組織正式發(fā)布了該標(biāo)準(zhǔn)的第一份草案，當(dāng)時(shí)大部分主流瀏覽器已經(jīng)開始逐步對(duì)HTML5某些功能實(shí)現(xiàn)了支持。到2012年6月，WHATWG與W3C組織正式達(dá)成協(xié)議不再繼續(xù)合作。W3C組織將繼續(xù)完善HTML5標(biāo)準(zhǔn)規(guī)范，而WHATWG組織將取消HTML的版本號(hào)，將HTML5作為一個(gè)動(dòng)態(tài)標(biāo)準(zhǔn)不斷添加新的內(nèi)容，沒有最終版這一概念。2014年10月28日，經(jīng)歷了數(shù)百次修改的HTML5終于形成了W3C標(biāo)準(zhǔn)版。1.3.1HTML5技術(shù)2.HTML5發(fā)展史2008年1月，WHATWG組織正式發(fā)布了該標(biāo)準(zhǔn)的第一份草案，當(dāng)時(shí)大部分主流瀏覽器已經(jīng)開始逐步對(duì)HTML5某些功能實(shí)現(xiàn)了支持。到2012年6月，WHATWG與W3C組織正式達(dá)成協(xié)議不再繼續(xù)合作。W3C組織將繼續(xù)完善HTML5標(biāo)準(zhǔn)規(guī)范，而WHATWG組織將取消HTML的版本號(hào)，將HTML5作為一個(gè)動(dòng)態(tài)標(biāo)準(zhǔn)不斷添加新的內(nèi)容，沒有最終版這一概念。2014年10月28日，經(jīng)歷了數(shù)百次修改的HTML5終于形成了W3C標(biāo)準(zhǔn)版。1.3.1HTML5技術(shù)3.HTML5的特點(diǎn)元素標(biāo)簽的改進(jìn)新增API錯(cuò)誤處理機(jī)制1.3.2CSS3技術(shù)CSS3簡(jiǎn)介CSS3發(fā)展史CSS3特點(diǎn)1.3.2CSS3技術(shù)CSS3簡(jiǎn)介CSS3（CascadingStyleSheets,level3）是CSS的第三版，也是目前CSS的最新標(biāo)準(zhǔn)。CSS3語(yǔ)言的特點(diǎn)是模塊化，其中各個(gè)模塊都新增了新的功能，或者在CSS2的基礎(chǔ)上對(duì)功能進(jìn)行了擴(kuò)展。其中新增了對(duì)于網(wǎng)頁(yè)上各類元素邊框、背景、文本和字體等內(nèi)容的特效。CSS3還新增了動(dòng)畫技術(shù)，無(wú)需使用腳本代碼即可實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)畫效果。1.3.2CSS3技術(shù)2.CSS3發(fā)展史最早的CSS3草案是在1999年6月公開發(fā)布的，這意味著CSS3標(biāo)準(zhǔn)規(guī)范的定制工作在上一個(gè)版本CSS2正式發(fā)布之前就已列入考慮范圍。由于CSS3具有模塊化的特征，不同的模塊也處于各自的定制進(jìn)度中。2012年6月，CSS工作組公布了CSS3草案中的50多個(gè)模塊內(nèi)容，其中有4個(gè)模塊的規(guī)范標(biāo)準(zhǔn)已經(jīng)作為正式版發(fā)布。1.3.2CSS3技術(shù)3.CSS3的特點(diǎn)完全向后兼容模塊化的新增功能變形與動(dòng)畫效果1.4Web開發(fā)工具1.4.1AdobeDreamweaver1.4.2SublimeText1.4.3NodePad++1.4.4EditPlus1.4.1AdobeDreamweaverAdobeDreamweaver是一款所見即所得的網(wǎng)頁(yè)編輯器，中文名稱為“夢(mèng)想編織者”或“織夢(mèng)”。該軟件最初的1.0版是1997年由美國(guó)Macromedia公司發(fā)布的，后來(lái)該公司于2005年被Adobe公司收購(gòu)。Dreamweaver也是當(dāng)時(shí)第一套針對(duì)專業(yè)Web前端工程師所設(shè)計(jì)的可視化網(wǎng)頁(yè)開發(fā)工具，整合了網(wǎng)頁(yè)開發(fā)與網(wǎng)站管理的功能。1.4.1AdobeDreamweaver1.4.2SublimeTextSublimeText的界面布局非常有特色，它支持文件夾導(dǎo)航圖和代碼縮略圖效果。該軟件支持多種編程語(yǔ)言的語(yǔ)法高亮，也具有代碼自動(dòng)完成提示功能。該軟件還具有自動(dòng)恢復(fù)功能，如果在編程過程中意外退出，在下次啟動(dòng)該軟件時(shí)文件會(huì)自動(dòng)恢復(fù)關(guān)閉之前的編輯狀態(tài)。1.4.2SublimeText1.4.3NodePad++NodePad++的名稱來(lái)源于Windows系列操作系統(tǒng)自帶的記事本NotePad，在此基礎(chǔ)上多了兩個(gè)加號(hào)，立刻帶了質(zhì)的飛越。這是一款免費(fèi)開源的純文本編輯器具有完整中文化接口并支持UTF-8技術(shù)。由于它具有語(yǔ)法高亮顯示、代碼折疊等功能，因此也非常適合作為計(jì)算機(jī)程序的編輯器。1.4.3NodePad++1.4.4 VisualStudioCodeVisualStudioCode常被簡(jiǎn)稱為VSCode，是微軟公司出品的一款免費(fèi)開源的開發(fā)工具，支持Windows、MacOS以及Linux操作系統(tǒng)。該軟件具有語(yǔ)法高亮、代碼自動(dòng)補(bǔ)全、查看定義等功能，也內(nèi)置了Git版本控制系統(tǒng)和命令行工具。1.4.4 VisualStudioCode該軟件安裝后可以在其內(nèi)置的擴(kuò)展程序商店安裝擴(kuò)展包來(lái)拓展軟件功能，例如Chinese漢化包插件、Beautify代碼格式化插件、AutoRenameTag自動(dòng)補(bǔ)全HTML/XML頭尾標(biāo)簽插件等，適合喜歡自己DIY配置工具的開發(fā)者。該軟件支持多種編程語(yǔ)言，例如JavaScript、TypeScript、HTML、CSS，也可以通過下載擴(kuò)展包來(lái)支持Java、Python、Go等其他編程語(yǔ)言。1.4.4VisualStudioCode1.4.5WebStormWebStorm是JetBrains公司旗下的一款JavaScript開發(fā)工具，適合進(jìn)行Web前端開發(fā)以及與JavaScript相關(guān)的程序編寫。該軟件直接支持代碼高亮、代碼折疊、代碼補(bǔ)全以及格式化等功能，無(wú)需安裝額外的插件。正常版本是付費(fèi)軟件，但是該軟件對(duì)于教育教學(xué)行業(yè)非常友好，學(xué)生和教師均可使用學(xué)校郵箱去申請(qǐng)免費(fèi)教育版許可證，該許可證有效期為每次1年，到期時(shí)如果用戶還在學(xué)校仍可免費(fèi)續(xù)約。1.4.5WebStorm1.5Web技術(shù)的前景與展望1.5.1Flash的興衰1.5.2HTML5的前景1.5.3未來(lái)展望1.5.1Flash的興衰在不斷變化、推陳出新的IT領(lǐng)域，F(xiàn)lash能夠崛起并保持20年不敗之地實(shí)屬不易。直至蘋果公司的前任CEO喬布斯的一篇發(fā)文，為Flash帶來(lái)了巨大的創(chuàng)傷。文中聲明蘋果的iOS和MacOS系統(tǒng)都將不再支持FlashPlayer，這幾乎預(yù)示著Flash將在移動(dòng)市場(chǎng)失去大量用戶群體。這一聲明之后又發(fā)生了一系列后續(xù)事件，這些事件如同多米諾骨牌般的紛涌而至，推動(dòng)Flash進(jìn)入產(chǎn)品生命周期的末端。1.5.2HTML5的前景由于具有高度跨平臺(tái)自適應(yīng)的特性，HTML5以移動(dòng)市場(chǎng)作為主戰(zhàn)場(chǎng)開始逐步回歸技術(shù)前沿。如今HTML5這個(gè)詞已經(jīng)不僅僅是它本身的意思了，還代表著以它為首的CSS3、jQuery等一系列新技術(shù)的合集。1.5.3未來(lái)展望HTML5正在不斷崛起，為用戶帶來(lái)了一體化的網(wǎng)絡(luò)。在此基礎(chǔ)上新的技術(shù)將不斷涌現(xiàn)，Web技術(shù)潮流也許將迎來(lái)一個(gè)全新的時(shí)代格局。本章小結(jié)本章小結(jié)本章在Web原理基礎(chǔ)部分解釋了Internet與萬(wàn)維網(wǎng)的概念，并且介紹了Web架構(gòu)是由Web服務(wù)器與Web瀏覽器組成。HTML、CSS和JavaScript被稱為是Web開發(fā)的三大核心技術(shù)，在此基礎(chǔ)上的HTML5和CSS3可以看作是HTML和CSS的升級(jí)優(yōu)化版，也是本書主要介紹的內(nèi)容。HTML5劃分清晰的網(wǎng)頁(yè)文檔層次結(jié)構(gòu)，CSS3對(duì)內(nèi)容進(jìn)行樣式美化，配合JavaScript進(jìn)行元素操作和事件處理，能實(shí)現(xiàn)更加豐富的網(wǎng)頁(yè)效果。Thankyou！第2章HTML5基礎(chǔ)主講人：XX老師本章學(xué)習(xí)目標(biāo)理解HTML5文檔的基本結(jié)構(gòu)；理解HTML5中元素標(biāo)簽的作用；掌握HTML5文檔注釋的用法；掌握HTML5保留的常用標(biāo)簽的用法；掌握HTML5新增的文檔結(jié)構(gòu)標(biāo)簽的用法；掌握HTML5新增的格式標(biāo)簽的用法。目錄2.1HTML5基本結(jié)構(gòu)2.2HTML5保留的常用標(biāo)簽2.3HTML5新增的常用標(biāo)簽2.4HTML5新增API

2.1HTML5基本結(jié)構(gòu)2.1.1文檔類型聲明<!DOCTYPE>2.1.2根標(biāo)簽<html>2.1.3首部標(biāo)簽<head>2.1.4主體標(biāo)簽<body>2.1.5HTML5文檔注釋2.1.6HTML5文檔規(guī)范2.1.7HTML4.01轉(zhuǎn)換為HTML52.1HTML5基本結(jié)構(gòu)HTML5實(shí)際上不算是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言。HTML5文件是由一系列成對(duì)出現(xiàn)的元素標(biāo)簽嵌套組合而成，這些標(biāo)簽以<元素名>的形式出現(xiàn)，用于標(biāo)記文本內(nèi)容的含義。瀏覽器通過元素標(biāo)簽解析文本內(nèi)容并將結(jié)果顯示在網(wǎng)頁(yè)上，而元素標(biāo)簽本身并不會(huì)被瀏覽器顯示出來(lái)。2.1HTML5基本結(jié)構(gòu)HTML5文檔的基本結(jié)構(gòu)如下：<!DOCTYPEhtml><html><head><title>網(wǎng)頁(yè)標(biāo)題</title></head><body>

主體內(nèi)容</body></html>2.1HTML5基本結(jié)構(gòu)HTML5元素的內(nèi)容一般以起始標(biāo)簽<元素名>開始，以結(jié)束標(biāo)簽</元素名>終止。例如首部標(biāo)簽<head>中的<title>標(biāo)簽用于標(biāo)記網(wǎng)頁(yè)標(biāo)題，該標(biāo)簽之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。主體標(biāo)簽<body>中的內(nèi)容顯示到網(wǎng)頁(yè)上。2.1HTML5基本結(jié)構(gòu)修改HTML5文檔基本結(jié)構(gòu)中的文字內(nèi)容，即可快速生成一個(gè)簡(jiǎn)單的HTML5頁(yè)面。【例2-1】第一個(gè)HTML5頁(yè)面2.1.1文檔類型聲明<!DOCTYPE>DOCTYPE是DocumentType的簡(jiǎn)寫，含義為文檔類型。HTML5文檔基礎(chǔ)結(jié)構(gòu)中第一行<!DOCTYPEhtml>就是HTML5的DOCTYPE聲明。2.1.1文檔類型聲明<!DOCTYPE>網(wǎng)頁(yè)實(shí)際上有多種瀏覽模式，例如兼容模式，標(biāo)準(zhǔn)模式等。HTML5用<!DOCTYPE>標(biāo)簽定義文檔該基于何種標(biāo)準(zhǔn)在網(wǎng)頁(yè)中呈現(xiàn)。<!DOCTYPEhtml>意味著該網(wǎng)頁(yè)的呈現(xiàn)標(biāo)準(zhǔn)是基于HTML5。當(dāng)使用該DOCTYPE聲明方式時(shí)，瀏覽器會(huì)將此頁(yè)面定義為標(biāo)準(zhǔn)兼容模式。2.1.1文檔類型聲明<!DOCTYPE>HTML4.01的文檔類型聲明較為復(fù)雜，常見如下：在HTML5中，該聲明被大幅度化簡(jiǎn)：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtml>2.1.1文檔類型聲明<!DOCTYPE>在瀏覽器打開的網(wǎng)頁(yè)頁(yè)面任意位置右鍵點(diǎn)擊，選擇“查看網(wǎng)頁(yè)源代碼”，在頁(yè)面頂端第一句就是DOCTYPE聲明。HTML5引入了新的特性和元素，同時(shí)也取消了對(duì)部分過期元素的支持，因此如果在HTML5的DOCTYPE聲明下使用了HTML的過期元素，網(wǎng)頁(yè)可能無(wú)法正常顯示預(yù)期的效果。2.1.2根標(biāo)簽<html><html>是HTML5文檔的根元素標(biāo)簽，除頂部<!DOCTYPEhtml>文檔類型聲明以外，所有的HTML5文檔都是以<html>標(biāo)簽開始，以</html>標(biāo)簽結(jié)束。在<html>和</html>標(biāo)簽內(nèi)包含了兩個(gè)重要的元素標(biāo)簽：<head>首部標(biāo)簽和<body>主體標(biāo)簽，分別用于標(biāo)記文檔的首部和主體部分。2.1.3首部標(biāo)簽<head>HTML5文檔的首部以<head>標(biāo)簽開始，以</head>標(biāo)簽結(jié)束。<head>標(biāo)簽中的內(nèi)容不會(huì)顯示在網(wǎng)頁(yè)的頁(yè)面中。<head>標(biāo)簽中可包含<title>和<meta>等標(biāo)簽，用于聲明頁(yè)面標(biāo)題、字符集和關(guān)鍵詞等。2.1.3首部標(biāo)簽<head>1.網(wǎng)頁(yè)標(biāo)題標(biāo)簽<title>HTML5文檔使用<title>和</title>標(biāo)簽標(biāo)記網(wǎng)頁(yè)標(biāo)題，該標(biāo)題會(huì)顯示在瀏覽器窗口的標(biāo)題欄中，若省略<title>標(biāo)簽則網(wǎng)頁(yè)標(biāo)題會(huì)顯示為“無(wú)標(biāo)題文檔”。建議在網(wǎng)頁(yè)代碼中保留該標(biāo)簽，因?yàn)?lt;title>標(biāo)簽還能用于當(dāng)網(wǎng)頁(yè)被添加到收藏夾時(shí)顯示標(biāo)題，以及作為頁(yè)面標(biāo)題顯示在搜索引擎結(jié)果中。2.1.3首部標(biāo)簽<head>2.基礎(chǔ)地址標(biāo)簽<base>

<base>標(biāo)簽用于為頁(yè)面上所有的鏈接設(shè)置默認(rèn)URL地址或目標(biāo)target。當(dāng)HTML5文檔中使用了相對(duì)路徑時(shí)，瀏覽器會(huì)用<base>標(biāo)簽指定的URL進(jìn)行補(bǔ)全。例如：<head><basehref="http://localhost/images/"/></head>

<body><imgsrc="sunflower.jpg"/></body>此時(shí)在第一個(gè)圖像標(biāo)簽<img>中src屬性填寫的是一個(gè)相對(duì)路徑，由于<base>標(biāo)簽的作用，該路徑會(huì)被瀏覽器自動(dòng)補(bǔ)全為：<imgsrc="http://localhost/images/sunflower.jpg"/>。如果沒有使用<base>標(biāo)簽來(lái)指定URL地址，則瀏覽器會(huì)用當(dāng)前HTML5文檔的URL對(duì)圖片地址進(jìn)行補(bǔ)全。2.1.3首部標(biāo)簽<head>2.基礎(chǔ)地址標(biāo)簽<base>

<base>標(biāo)簽也可以為該網(wǎng)頁(yè)上所有超鏈接統(tǒng)一設(shè)置打開方式，例如：<head><basetarget="_blank"/></head>

<body><ahref="">百度</a><ahref="">網(wǎng)易</a></body>在<base>標(biāo)簽中的屬性target="_blank"指的是該網(wǎng)頁(yè)文檔中所有未指定打開方式的超鏈接將在新窗口打開。2.1.3首部標(biāo)簽<head>3.元數(shù)據(jù)標(biāo)簽<meta>

<meta>標(biāo)簽用于提供當(dāng)前HTML文檔的元數(shù)據(jù)，這些數(shù)據(jù)不會(huì)直接顯示在網(wǎng)頁(yè)上，但是對(duì)于機(jī)器是可讀的，適用于搜索引擎索引。通常<meta>標(biāo)簽可用于定義網(wǎng)頁(yè)的字符集、關(guān)鍵詞、描述、作者等信息。2.1.3首部標(biāo)簽<head>3.元數(shù)據(jù)標(biāo)簽<meta>

(1)字符集聲明Charset是CharacterSet的簡(jiǎn)寫，含義為字符集設(shè)置。瀏覽器統(tǒng)一默認(rèn)的字符集是ISO-8859-1西文字符集，如果使用了其他字符集，瀏覽器需知道使用何種字符集才能正確地顯示HTML頁(yè)面。HTML5文檔使用<meta>標(biāo)簽進(jìn)行字符集聲明。萬(wàn)維網(wǎng)初期使用的是ACSII字符集，該字符集支持?jǐn)?shù)字0-9、英文字母大寫A-Z和小寫a-z，以及部分特殊字符。由于很多國(guó)家使用的字符不被ACSII支持，因此瀏覽器統(tǒng)一默認(rèn)的字符集是ISO-8859-1西文字符集。2.1.3首部標(biāo)簽<head>3.元數(shù)據(jù)標(biāo)簽<meta>

(1)字符集聲明以UTF-8字符集為例，HTML4.01的字符集聲明如下：在HTML5中，同樣的內(nèi)容聲明方式會(huì)更為簡(jiǎn)潔，寫法如下：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metacharset="utf-8">這行語(yǔ)句表示當(dāng)前HTML文檔使用的字符集是UTF-8編碼格式。2.1.3首部標(biāo)簽<head>3.元數(shù)據(jù)標(biāo)簽<meta>

(2)關(guān)鍵詞聲明使用<meta>標(biāo)簽定義網(wǎng)頁(yè)關(guān)鍵詞（keywords）的用法如下：<metaname="keywords"content="HTML5,CSS3,jQuery"/>2.1.3首部標(biāo)簽<head>3.元數(shù)據(jù)標(biāo)簽<meta>

(3)頁(yè)面描述聲明使用<meta>標(biāo)簽定義頁(yè)面描述（description）的用法如下：：<metaname="description"content="ThisisatutorialaboutHTML5,CSS3,jQuery"/>搜索引擎會(huì)根據(jù)<meta>標(biāo)簽中的name和content屬性來(lái)索引網(wǎng)頁(yè)。2.1.3首部標(biāo)簽<head>4.樣式標(biāo)簽<style>樣式標(biāo)簽<style>可用于定義文檔中指定區(qū)域的字體風(fēng)格、背景顏色、對(duì)齊方式等各類樣式信息。例如：<head><style>p{color:red}</style></head><body><p>這是一個(gè)段落。</p></body>這段代碼可以將HTML5文檔中所有未指定字體顏色的段落顯示為紅色。2.1.3首部標(biāo)簽<head>5.鏈接標(biāo)簽<link><link>標(biāo)簽用于連接外部資源和當(dāng)前HTML5文檔，它只出現(xiàn)在首部標(biāo)簽<head>和</head>中，通常用于連接外部樣式表。例如：<head><linkrel="stylesheet"href="my.css"/></head>這表示將CSS樣式文件my.css指定的樣式效果應(yīng)用于當(dāng)前網(wǎng)頁(yè)中。2.1.3首部標(biāo)簽<head>5.鏈接標(biāo)簽<link>如果需要同時(shí)引用多個(gè)外部樣式表文件，則需要為每一個(gè)CSS樣式文件單獨(dú)使用一次<link>標(biāo)簽。例如：<head><linkrel="stylesheet"href="my1.css"/><linkrel="stylesheet"href="my2.css"/><linkrel="stylesheet"href="my3.css"/></head>這里對(duì)于CSS樣式文件的引用使用了相對(duì)路徑，也可以根據(jù)實(shí)際需要填寫URL地址2.1.3首部標(biāo)簽<head>6.腳本標(biāo)簽<script>

<script>標(biāo)簽為可選，取決于當(dāng)前頁(yè)面是否需要使用腳本內(nèi)容，比如JavaScript。該標(biāo)簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在<script>和</script>標(biāo)簽中。例如：<head><scriptsrc="test.js"></script></head>這里對(duì)于CSS樣式文件的引用使用了相對(duì)路徑，也可以根據(jù)實(shí)際需要填寫URL地址2.1.3首部標(biāo)簽<head>6.腳本標(biāo)簽<script>和引用外部CSS文件類似，如果需要同時(shí)引用多個(gè)JavaScript文件，則需要為每一個(gè)JavaScript文件單獨(dú)使用一次<script>標(biāo)簽。例如：<head><scriptsrc="test1.js"></script><scriptsrc="test2.js"></script><scriptsrc="test3.js"></script></head>2.1.4主體標(biāo)簽<body>HTML5文檔的主體部分以<body>標(biāo)簽開始，以</body>標(biāo)簽結(jié)束。<body>標(biāo)簽中的內(nèi)容將全部顯示在網(wǎng)頁(yè)的頁(yè)面中。<body>標(biāo)簽中可直接添加文本內(nèi)容，也可繼續(xù)嵌套其他元素標(biāo)簽，形成多樣化的顯示效果。2.1.5HTML5文檔注釋為增加HTML5文檔的可讀性，可為其添加注釋部分。注釋是文檔中的說(shuō)明文字，不會(huì)被瀏覽器執(zhí)行。HTML5使用<!--...-->標(biāo)簽為文檔進(jìn)行注釋，注釋標(biāo)簽以“<!--”開頭，以“-->”結(jié)束，中間的“...”替換為注釋文字內(nèi)容即可。<!--...-->標(biāo)簽支持單行和多行注釋。2.1.5HTML5文檔注釋【例2-2】注釋標(biāo)簽的應(yīng)用

2.1.6HTML5文檔規(guī)范1.文件類型2.元素標(biāo)簽格式3.字符實(shí)體的使用4.圖像文件的使用2.1.6HTML5文檔規(guī)范1.文件類型一般來(lái)說(shuō)，純HTML5開發(fā)推薦使用.html格式。和HTML4.01一樣，HTML5支持的常用文件后綴名為.html。在早期的DOS操作系統(tǒng)中，文件擴(kuò)展名限制為最多3個(gè)字符，無(wú)法識(shí)別4位文件名，因此.htm被用于兼容此類操作系統(tǒng)。目前這兩種擴(kuò)展名方式均被各類瀏覽器廣泛支持，互換后綴名不會(huì)引起打開錯(cuò)誤，但是通過URL地址訪問時(shí)需要正確的擴(kuò)展名。2.1.6HTML5文檔規(guī)范2.元素標(biāo)簽格式元素標(biāo)簽一般情況下是成對(duì)出現(xiàn)的，首尾標(biāo)簽的元素名稱保持一致，并且尾標(biāo)簽中需要加上斜杠符號(hào)。早期的HTML規(guī)范中，標(biāo)簽的大小寫是不敏感的，因此老版本的網(wǎng)頁(yè)中可能會(huì)存在如下寫法：<HTML><HEAD><TITLE>早期存在的大寫標(biāo)簽頁(yè)面</TITLE></HEAD><BODY>……</BODY></HTML>萬(wàn)維網(wǎng)聯(lián)盟（W3C）明確規(guī)定了在新版本HTML5中必須使用小寫格式，包括元素標(biāo)簽本身和其中可能出現(xiàn)的屬性均需要遵守此規(guī)范。2.1.6HTML5文檔規(guī)范2.元素標(biāo)簽格式在HTML5中，也存在部分標(biāo)簽是獨(dú)立使用，沒有首尾標(biāo)簽成對(duì)出現(xiàn)。例如，換行標(biāo)簽<br>和水平線標(biāo)簽<hr>等。由于此類標(biāo)簽單個(gè)就已經(jīng)可以表達(dá)足夠明確的含義，并且不包含其他文本內(nèi)容需要放置在其首尾標(biāo)簽之間，因此結(jié)束標(biāo)簽沒有存在的必要性。2.1.6HTML5文檔規(guī)范2.元素標(biāo)簽格式目前這種無(wú)結(jié)束標(biāo)簽的元素標(biāo)簽有不同的寫法存在，例如水平線標(biāo)簽可以寫成<hr>或<hr/>。HTML4.01以前版本可以直接寫成<hr>，但在XML規(guī)范中，所有的標(biāo)簽都必須有結(jié)束標(biāo)簽，因此必須加上斜杠符號(hào)表示完結(jié)。雖然目前這兩種寫法均能被瀏覽器正確顯示，但是從長(zhǎng)遠(yuǎn)來(lái)看，加上結(jié)束標(biāo)志即斜杠符號(hào)的寫法更為標(biāo)準(zhǔn)。2.1.6HTML5文檔規(guī)范3.字符實(shí)體的使用在HTML5文檔中存在一些特殊字符無(wú)法直接使用。例如小于符號(hào)（<）和大于符號(hào)（>）是無(wú)法直接輸出的，因?yàn)樗鼈儠?huì)被誤認(rèn)為是元素標(biāo)簽的組成部分；而連續(xù)空格也無(wú)法正確顯示，會(huì)被瀏覽器縮減為單個(gè)空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實(shí)體（CharacterEntities）。2.1.6HTML5文檔規(guī)范3.字符實(shí)體的使用字符實(shí)體可借助其對(duì)應(yīng)的字符名稱或數(shù)字代碼進(jìn)行輸出，其格式如下：&實(shí)體名稱;&#實(shí)體數(shù)字;實(shí)體名稱和實(shí)體數(shù)字的寫法都是以&符號(hào)開頭，以;符號(hào)結(jié)尾，其中實(shí)體數(shù)字前面還加有#符號(hào)以示區(qū)分。例如大于符號(hào)（>）可以使用>或>表示。2.1.6HTML5文檔規(guī)范3.字符實(shí)體的使用常用的字符實(shí)體及其對(duì)應(yīng)的表示方式如表2-1所示。2.1.6HTML5文檔規(guī)范3.字符實(shí)體的使用實(shí)體名稱的出現(xiàn)是為了方便記憶，但是部分實(shí)體名稱不能完全被所有瀏覽器支持，在這種情況下可以使用實(shí)體數(shù)字代替。更多關(guān)于字符符號(hào)的用法見第10章。2.1.6HTML5文檔規(guī)范4.圖像文件的使用網(wǎng)頁(yè)文件常見的圖像格式有：JPEG格式GIF格式PNG格式2.1.6HTML5文檔規(guī)范4.圖像文件的使用(1)JPEG格式JPEG格式指的是聯(lián)合圖像專家組（JointPhotographicExpertsGroup，JPEG）格式，是第一個(gè)國(guó)際圖像壓縮標(biāo)準(zhǔn)。該格式的圖像文件后綴名是.jpg或.JPG兩種形式。JPEG格式圖像文件有以下特點(diǎn)：支持高級(jí)壓縮彈性壓縮比廣泛支持互聯(lián)網(wǎng)標(biāo)準(zhǔn)2.1.6HTML5文檔規(guī)范4.圖像文件的使用(2)GIF格式GIF格式指的是圖像交換格式（GraphicsInterchangeFormat，GIF），該格式的圖像文件后綴名是.gif或.GIF兩種形式。GIF格式圖像文件有以下特點(diǎn)：無(wú)損性256種顏色隔行掃描動(dòng)畫效果2.1.6HTML5文檔規(guī)范4.圖像文件的使用(3)PNG格式PNG格式指的是圖像交換格式（PortableNetworkGraphicFormat，PNG），該格式的圖像文件后綴名是.png或.PNG兩種形式。PNG格式圖像文件有以下特點(diǎn)：文件體積小支持透明顯示色彩索引模式2.1.7HTML4.01轉(zhuǎn)換為HTML5基于HTML4.01開發(fā)的網(wǎng)頁(yè)可以分成三個(gè)步驟轉(zhuǎn)換為HTML5網(wǎng)頁(yè)。2.1.7HTML4.01轉(zhuǎn)換為HTML5示例代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>HTML4.01網(wǎng)頁(yè)轉(zhuǎn)換HTML5</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><scripttype="text/javascript"src="test.js"></script><linktype="text/css"rel="stylesheet"href="test.css"></head><body>

再見，HTML4.01！

你好，HTML5！</body></html>2.1.7HTML4.01轉(zhuǎn)換為HTML5基于HTML4.01開發(fā)的網(wǎng)頁(yè)可以分成三個(gè)步驟轉(zhuǎn)換為HTML5網(wǎng)頁(yè)。步驟一：化簡(jiǎn)DOCTYPE聲明方式。步驟二：化簡(jiǎn)charset字符集描述方式。步驟三（可選，取決于需要轉(zhuǎn)換的文件是否包含該內(nèi)容）：若存在外部css文件或js文件的引用，可以直接省略其中的type描述。2.1.7HTML4.01轉(zhuǎn)換為HTML5修改后的代碼如下：<!DOCTYPEhtml><html><head><title>HTML4.01網(wǎng)頁(yè)轉(zhuǎn)換HTML5</title><metacharset="utf-8"><scriptsrc=”test.js”></script><linkrel=”stylesheet”href=”test.css”></head><body>

再見，HTML4.01！

你好，HTML5！</body></html>2.2HTML5保留的常用標(biāo)簽2.2.1基礎(chǔ)標(biāo)簽2.2.2文本格式標(biāo)簽2.2.3列表標(biāo)簽2.2.4圖像標(biāo)簽2.2.5超鏈接標(biāo)簽2.2.6表格標(biāo)簽2.2.7框架標(biāo)簽2.2.8容器標(biāo)簽2.2.1基礎(chǔ)標(biāo)簽1.段落標(biāo)簽<p>2.標(biāo)題標(biāo)簽<h1>-<h6>3.水平線標(biāo)簽<hr>4.換行標(biāo)簽<br>2.2.1基礎(chǔ)標(biāo)簽1.段落標(biāo)簽<p>段落標(biāo)簽<p>和</p>用于形成一個(gè)新的段落，段落與段落之間默認(rèn)為空一行進(jìn)行分割。【例2-3】段落標(biāo)簽<p>的簡(jiǎn)單應(yīng)用

2.2.1基礎(chǔ)標(biāo)簽2.標(biāo)題標(biāo)簽<h1>-<h6>HTML5使用<hn>和</hn>來(lái)標(biāo)記文本中的標(biāo)題，其中n需要替換為數(shù)字，從1至6共有6級(jí)。<h1>標(biāo)簽所標(biāo)記的字體最大，標(biāo)簽使用的數(shù)字越大則字體越小，直至<h6>標(biāo)簽所標(biāo)記的字體最小。標(biāo)題標(biāo)簽的默認(rèn)狀態(tài)為左對(duì)齊顯示的黑體字。標(biāo)題標(biāo)簽中的字母h來(lái)源于英文單詞heading（標(biāo)題）的首字母?！纠?-4】標(biāo)題標(biāo)簽<h1>-<h6>的簡(jiǎn)單應(yīng)用

2.2.1基礎(chǔ)標(biāo)簽3.水平線標(biāo)簽<hr>水平線標(biāo)簽<hr>用于在網(wǎng)頁(yè)上畫一條水平線，從而在視覺上將文本分段。<hr>標(biāo)簽沒有結(jié)束標(biāo)簽，可以單獨(dú)使用，默認(rèn)情況下是一條寬度為1像素的黑色水平線。標(biāo)簽中的元素名稱hr來(lái)源于英文單詞horizontalrule（水平線）的首字母簡(jiǎn)寫。【例2-5】水平線標(biāo)簽<hr>的簡(jiǎn)單應(yīng)用

2.2.1基礎(chǔ)標(biāo)簽4.換行標(biāo)簽<br>換行標(biāo)簽<br>用于在當(dāng)前位置產(chǎn)生一個(gè)換行，相當(dāng)于一次回車鍵所產(chǎn)生的效果。該標(biāo)簽單獨(dú)使用，無(wú)結(jié)束標(biāo)簽。建議使用該標(biāo)簽代替回車鍵，因?yàn)榛剀囨I所產(chǎn)生的多個(gè)連續(xù)換行會(huì)被瀏覽器自動(dòng)省略。<br>標(biāo)簽每次只能換一行，如需多次換行，必須寫多個(gè)<br>標(biāo)簽?！纠?-6】換行標(biāo)簽<br>的簡(jiǎn)單應(yīng)用

2.2.2文本格式標(biāo)簽1.斜體字標(biāo)簽<i>2.粗體字標(biāo)簽<b>和<strong>3.上標(biāo)標(biāo)簽<sup>和下標(biāo)標(biāo)簽<sub>4.修訂標(biāo)簽<del>和<ins>5.預(yù)格式化標(biāo)簽<pre>2.2.2文本格式標(biāo)簽1.斜體字標(biāo)簽<i>斜體字標(biāo)簽<i>用于將其首尾標(biāo)簽之間的文本內(nèi)容顯示為斜體字型效果?！纠?-7】斜體字標(biāo)簽<i>的簡(jiǎn)單應(yīng)用

2.2.2文本格式標(biāo)簽2.粗體字標(biāo)簽<b>和<strong>粗體字標(biāo)簽<b>和<strong>均可以將其首尾標(biāo)簽之間的文本內(nèi)容顯示為粗體字型效果。區(qū)別在于使用<strong>標(biāo)簽的文本內(nèi)容被認(rèn)為是重要的內(nèi)容?！纠?-8】粗體字標(biāo)簽<b>和<strong>的簡(jiǎn)單應(yīng)用

2.2.2文本格式標(biāo)簽3.上標(biāo)標(biāo)簽<sup>和下標(biāo)標(biāo)簽<sub>標(biāo)簽^和標(biāo)記的文本內(nèi)容將顯示為上標(biāo)的樣式，例如數(shù)字上X的平方可以寫成X2；標(biāo)簽_和標(biāo)記的文本內(nèi)容將顯示為下標(biāo)的樣式，例如二氧化碳的化學(xué)方程式可以寫成CO2?！纠?-9】上標(biāo)標(biāo)簽<sup>與下標(biāo)標(biāo)簽<sub>的簡(jiǎn)單應(yīng)用

2.2.2文本格式標(biāo)簽4.修訂標(biāo)簽<del>和<ins>修訂標(biāo)簽有<del>和<ins>兩種，分別用于為文本內(nèi)容添加刪除線和下劃線。刪除線標(biāo)簽<del>可將其首尾標(biāo)簽之間的文字上顯示一條水平貫穿線，該標(biāo)簽一般用于定義被刪除的文本內(nèi)容，標(biāo)簽中的元素名稱del來(lái)源于英文單詞delete（刪除）。下劃線標(biāo)簽<ins>用于將其首尾標(biāo)簽之間的文字加上下劃線效果，標(biāo)簽中的元素名稱來(lái)源于英文單詞（）。由于<ins>標(biāo)簽的下劃線效果容易和網(wǎng)頁(yè)上的超鏈接效果混淆，往往需要和<del>標(biāo)簽配合使用。2.2.2文本格式標(biāo)簽4.修訂標(biāo)簽<del>和<ins>HTML4.01版本中另有刪除線標(biāo)簽<strike>和下劃線標(biāo)簽<u>顯示同樣的效果，在HTML5中均已不再被支持，建議使用<del>和<ins>代替舊版標(biāo)簽用于表示修訂文本?！纠?-10】修訂標(biāo)簽<del>和<ins>的簡(jiǎn)單應(yīng)用

2.2.2文本格式標(biāo)簽5.預(yù)格式化標(biāo)簽<pre>預(yù)格式化標(biāo)簽<pre>和</pre>可以將所標(biāo)記的文本內(nèi)容在顯示時(shí)保留換行與空格的排版效果。在沒有使用該標(biāo)簽的普通情況下，瀏覽器將把多次回車鍵形成的換行默認(rèn)為一次換行，并且把多次空格鍵形成的連續(xù)空格默認(rèn)為單個(gè)空格，在段落開頭的連續(xù)空格甚至?xí)缓雎浴．?dāng)需要多次使用<br>和nbsp;符號(hào)分別進(jìn)行換行和空格時(shí)，可以考慮使用此標(biāo)簽提高效率?！纠?-11】預(yù)格式化標(biāo)簽<pre>的簡(jiǎn)單應(yīng)用

2.2.3列表標(biāo)簽1.有序列表標(biāo)簽<ol>2.無(wú)序列表標(biāo)簽<ul>3.定義列表標(biāo)簽<dl>2.2.3列表標(biāo)簽1.有序列表標(biāo)簽<ol>有序列表標(biāo)簽<ol>和</ol>用于定義帶有編號(hào)的有序列表，需要和列表項(xiàng)目標(biāo)簽<li>配合使用。列表項(xiàng)目標(biāo)簽<li>需標(biāo)記在每個(gè)表項(xiàng)的開頭，默認(rèn)為縮進(jìn)顯示效果。標(biāo)簽中的元素名稱ol來(lái)源于英文單詞orderedlist（有序列表）的首字母簡(jiǎn)寫。2.2.3列表標(biāo)簽1.有序列表標(biāo)簽<ol>有序列表的基本格式如下：<ol><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li></ol>有序列表標(biāo)簽<ol>默認(rèn)的起始數(shù)值為1，可使用start屬性重新定義編號(hào)起始值，格式為：<olstart=”n”>。其中n需要替換成指定的編號(hào)數(shù)值，例如需要從3開始編號(hào)，則寫成：<olstart=”3”>。2.2.3列表標(biāo)簽1.有序列表標(biāo)簽<ol>有序列表標(biāo)簽<ol>默認(rèn)的編號(hào)樣式為標(biāo)準(zhǔn)阿拉伯?dāng)?shù)字（1，2，3，4，...），如需使用其他編號(hào)樣式，可使用type屬性進(jìn)行聲明，格式為<oltype=”類型值”>。2.2.3列表標(biāo)簽1.有序列表標(biāo)簽<ol>【例2-12】有序列表標(biāo)簽的應(yīng)用2.2.3列表標(biāo)簽2.無(wú)序列表標(biāo)簽<ul>無(wú)序列表標(biāo)簽<ul>和</ul>用于定義不帶編號(hào)的無(wú)序列表，標(biāo)簽中的元素名稱ul來(lái)源于英文單詞unorderedlist（無(wú)序列表）的首字母簡(jiǎn)寫。該標(biāo)簽也需要和列表項(xiàng)目標(biāo)簽<li>配合使用。列表項(xiàng)目標(biāo)簽<li>需標(biāo)記在每個(gè)表項(xiàng)的開頭，默認(rèn)為縮進(jìn)顯示效果。2.2.3列表標(biāo)簽2.無(wú)序列表標(biāo)簽<ul>無(wú)序列表標(biāo)簽<ul>和</ul>用于定義不帶編號(hào)的無(wú)序列表，標(biāo)簽中的元素名稱ul來(lái)源于英文單詞unorderedlist（無(wú)序列表）的首字母簡(jiǎn)寫。該標(biāo)簽也需要和列表項(xiàng)目標(biāo)簽<li>配合使用。列表項(xiàng)目標(biāo)簽<li>需標(biāo)記在每個(gè)表項(xiàng)的開頭，默認(rèn)為縮進(jìn)顯示效果。2.2.3列表標(biāo)簽2.無(wú)序列表標(biāo)簽<ul>無(wú)序列表的基本格式如下：<ul><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li></ul>無(wú)序列表標(biāo)簽<ul>默認(rèn)的編號(hào)樣式為實(shí)心圓形，嵌套在其他列表中的二級(jí)列表編號(hào)樣式默認(rèn)為空心圓形。2.2.3列表標(biāo)簽2.無(wú)序列表標(biāo)簽<ul>如需自定義編號(hào)樣式，可使用type屬性進(jìn)行聲明，格式為<ultype=”類型值”>。2.2.3列表標(biāo)簽2.無(wú)序列表標(biāo)簽<ul>【例2-13】無(wú)序列表標(biāo)簽的應(yīng)用2.2.3列表標(biāo)簽3.定義列表標(biāo)簽<dl>定義列表標(biāo)簽<dl>和</dl>是用于進(jìn)行詞條定義的特殊列表，每條表項(xiàng)需要結(jié)合詞條標(biāo)簽<dt>和定義標(biāo)簽<dd>一起使用。詞條標(biāo)簽<dt>需要標(biāo)記在每個(gè)詞條的開頭。定義標(biāo)簽<dd>則需要標(biāo)記在每個(gè)定義部分的開頭，默認(rèn)為全文縮進(jìn)顯示。標(biāo)簽中的元素名稱dl來(lái)源于英文單詞definitionlist（定義列表）的首字母簡(jiǎn)寫。2.2.3列表標(biāo)簽3.定義列表標(biāo)簽<dl>定義列表的基本格式如下：<dl><dt>第一個(gè)詞條<dd>第一個(gè)詞條的定義<dt>第二個(gè)詞條<dd>第二個(gè)詞條的定義</dl>2.2.3列表標(biāo)簽3.定義列表標(biāo)簽<dl>【例2-14】定義列表標(biāo)簽的應(yīng)用

2.2.4圖像標(biāo)簽圖像標(biāo)簽<img>用于在網(wǎng)頁(yè)中嵌入圖片，該標(biāo)簽無(wú)需結(jié)束標(biāo)簽，可單獨(dú)使用。標(biāo)簽中的元素名稱img來(lái)源于英文單詞image（圖像）。2.2.4圖像標(biāo)簽<img>標(biāo)簽有兩個(gè)常用屬性：src屬性和alt屬性。src屬性是英文單詞source（來(lái)源）的簡(jiǎn)寫，用于指明圖像的存儲(chǔ)路徑，通常是URL形式。alt屬性是英文單詞alternative（替代的、備選的）的簡(jiǎn)寫，用于無(wú)法找到圖像時(shí)顯示替代文本，該屬性可省略不寫。其基本格式如下：<imgsrc="圖像文件URL"/>2.2.4圖像標(biāo)簽其中圖像文件URL替換為圖片存儲(chǔ)的路徑，例如圖片文件為starrynight.jpg，并存放于本地的images文件夾中，則可以寫成：如果圖片和該網(wǎng)頁(yè)文件在同一個(gè)目錄中，則可以直接寫圖片名稱即可。<imgsrc="http://localhost/images/starrynight.jpg"/><imgsrc="starrynight.jpg"/>2.2.4圖像標(biāo)簽【例2-15】圖像標(biāo)簽<img>的應(yīng)用

2.2.5超鏈接標(biāo)簽1.外部鏈接2.內(nèi)部鏈接2.2.5超鏈接標(biāo)簽超鏈接標(biāo)簽<a>用于在網(wǎng)頁(yè)中標(biāo)記文本或圖像從而形成超鏈接，用戶點(diǎn)擊后將跳轉(zhuǎn)另一個(gè)指定的頁(yè)面，從而實(shí)現(xiàn)瀏覽空間的跨越。標(biāo)簽中的元素名稱a來(lái)源于英文單詞anchor（錨）的首字母簡(jiǎn)寫，因此超鏈接按照標(biāo)準(zhǔn)叫法又稱為錨鏈接。2.2.5超鏈接標(biāo)簽超鏈接可以用于指向其他任何位置，包括Internet上的其他網(wǎng)頁(yè)、本地其他文檔甚至當(dāng)前頁(yè)面中其他位置。適用于制作網(wǎng)頁(yè)的導(dǎo)航菜單或列表，也可以用于發(fā)送郵件或下載文件等。默認(rèn)狀態(tài)下，未被訪問的鏈接文本顯示為帶有下劃線的藍(lán)色字體，鼠標(biāo)懸浮在上面會(huì)變成手形，點(diǎn)擊訪問后鏈接文本會(huì)變成帶有下劃線的紫色字體。2.2.5超鏈接標(biāo)簽超鏈接標(biāo)簽有如下兩個(gè)重要屬性：href：目標(biāo)內(nèi)容的URL地址。target：目標(biāo)內(nèi)容的打開方式，其屬性值如表2-4所示。2.2.5超鏈接標(biāo)簽1.外部鏈接其基本格式如下：外部鏈接可包含文本內(nèi)容或者圖片內(nèi)容。例如：<ahref=”URL地址”>鏈接文本或圖片</a>文本示例：<ahref=””>百度</a>

圖片示例：<ahref=””><imgsrc=”logo.png”/></a>2.2.5超鏈接標(biāo)簽1.外部鏈接【例2-16】外部超鏈接的應(yīng)用

2.2.5超鏈接標(biāo)簽2.內(nèi)部鏈接超鏈接標(biāo)簽也可以通過點(diǎn)擊跳轉(zhuǎn)同一頁(yè)面的指定區(qū)域，其語(yǔ)法格式如下：這里的“指定區(qū)域名”可以自定義，但是同時(shí)目標(biāo)區(qū)域也必須標(biāo)記出對(duì)應(yīng)的名稱，其格式如下：<ahref="#指定區(qū)域名">鏈接文本或圖像</a><aname="區(qū)域名">目標(biāo)內(nèi)容</a>2.2.5超鏈接標(biāo)簽2.內(nèi)部鏈接【例2-17】?jī)?nèi)部超鏈接的應(yīng)用

2.2.6表格標(biāo)簽1.表格標(biāo)簽<table>2.表格行標(biāo)簽<tr>3.單元格標(biāo)簽<td>4.表頭標(biāo)簽<th>5.表格標(biāo)題標(biāo)簽<caption>2.2.6表格標(biāo)簽表格標(biāo)簽由<table>和</table>定義，每個(gè)表格中包含若干行（由單元行標(biāo)簽<tr>和</tr>表示），每一行又被分為若干單元格（由單元格標(biāo)簽<td>和</td>表示）。2.2.6表格標(biāo)簽1.表格標(biāo)簽<table>

表格標(biāo)簽<table>和</table>用于中定義一個(gè)完整的表格。2.表格行標(biāo)簽<tr>

表格行標(biāo)簽<tr>和</tr>用于定義表格中的一行。2.2.6表格標(biāo)簽3.單元格標(biāo)簽<td>

單元格標(biāo)簽<td>和</td>用于定義表格行中的一個(gè)數(shù)據(jù)單元格，其中字母td為tabledata（表格數(shù)據(jù)）的簡(jiǎn)寫。數(shù)據(jù)單元格中可以包含表單、文本、水平線、圖片、列表、段落甚至新的表格等內(nèi)容。默認(rèn)狀態(tài)下，單元格的內(nèi)容為左對(duì)齊。2.2.6表格標(biāo)簽4.表頭標(biāo)簽<th>

表頭標(biāo)簽<th>和</th>用于定義表格的第一行表頭，默認(rèn)為粗體字、居中對(duì)齊。5.表格標(biāo)題標(biāo)簽<caption>

表格標(biāo)題標(biāo)簽<caption>和</caption>可用于為表格添加標(biāo)題，該標(biāo)題默認(rèn)為居中對(duì)齊并顯示在表格的頂部。2.2.6表格標(biāo)簽【例2-18】表格標(biāo)簽的綜合應(yīng)用

2.2.7框架標(biāo)簽框架標(biāo)簽用于在網(wǎng)頁(yè)的框架內(nèi)定義子窗口。由于框架標(biāo)簽對(duì)于網(wǎng)頁(yè)的可用性有負(fù)面影響，在HTML5中不再支持HTML4.01中原有的框架標(biāo)簽<frame>和<frameset>。只保留了內(nèi)聯(lián)框架標(biāo)簽<iframe>。

2.2.7框架標(biāo)簽該標(biāo)簽在HTML5中僅支持src屬性，用于指定框架內(nèi)部的網(wǎng)頁(yè)來(lái)源。例如：【例2-19】框架標(biāo)簽<iframe>的簡(jiǎn)單應(yīng)用<iframesrc="news.html"></iframe>2.2.8容器標(biāo)簽1.<div>標(biāo)簽2.<span>標(biāo)簽2.2.8容器標(biāo)簽1.<div>標(biāo)簽標(biāo)簽<div>可將網(wǎng)頁(yè)頁(yè)面分割成不同的獨(dú)立部分，通常用于定義文檔中的區(qū)域或節(jié)。標(biāo)簽中的元素名div來(lái)源于英文單詞division（區(qū)域）的簡(jiǎn)寫。該標(biāo)簽是一個(gè)塊級(jí)元素（blocklevelelement），瀏覽器會(huì)自動(dòng)在<div>和</div>所標(biāo)記的區(qū)域前后自動(dòng)放置一個(gè)換行符。每個(gè)標(biāo)簽可有一個(gè)獨(dú)立的id號(hào)。同樣屬于塊級(jí)元素的還有段落標(biāo)簽<p>、表格標(biāo)簽<table>、標(biāo)題標(biāo)簽<h1>-<h6>等。2.2.8容器標(biāo)簽1.<div>標(biāo)簽【例2-20】<div>標(biāo)簽的簡(jiǎn)單應(yīng)用2.2.8容器標(biāo)簽2.<span>標(biāo)簽標(biāo)簽<span>通常作為文本的容器，它沒有特定的含義和樣式，只有與CSS同時(shí)使用才可以為指定文本設(shè)置樣式屬性。該標(biāo)簽是一個(gè)內(nèi)聯(lián)元素（inlineelement），與塊級(jí)元素相反，內(nèi)聯(lián)元素不會(huì)自動(dòng)在前后自動(dòng)放置換行符，因此內(nèi)聯(lián)元素會(huì)默認(rèn)在同一行顯示。2.2.8容器標(biāo)簽2.<span>標(biāo)簽【例2-21】<span>標(biāo)簽的簡(jiǎn)單應(yīng)用

2.3HTML5新增的常用標(biāo)簽2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽2.3.2HTML5新增格式標(biāo)簽2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽1.頁(yè)眉標(biāo)簽<header>2.導(dǎo)航標(biāo)簽<nav>3.節(jié)標(biāo)簽<section>4.文章標(biāo)簽<article>5.側(cè)欄標(biāo)簽<aside>6.頁(yè)腳標(biāo)簽<footer>2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽在HTML5版本之前通常直接使用<div>標(biāo)簽進(jìn)行網(wǎng)頁(yè)整體布局，常見布局包括頁(yè)眉、頁(yè)腳、導(dǎo)航菜單和正文部分。為了區(qū)分文檔結(jié)構(gòu)中不同的<div>內(nèi)容，一般會(huì)為其配上不同的id名稱。例如：<divid="header">這是網(wǎng)頁(yè)的頁(yè)眉部分</div><divid="content">這是網(wǎng)頁(yè)的正文部分</div><divid="footer">這是網(wǎng)頁(yè)的頁(yè)腳部分</div>由于id名稱是自定義的，如果HTML文檔作者沒有提供明確含義的id名稱，也會(huì)導(dǎo)致含義不明確。例如將上述代碼中的<divid="header">替換成<divid="abc">不影響網(wǎng)頁(yè)的頁(yè)面顯示效果，但是查看網(wǎng)頁(yè)代碼時(shí)會(huì)比較難以理解其含義。2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽因此HTML5為了代碼更好的語(yǔ)義化，新增了一系列專用文檔結(jié)構(gòu)標(biāo)簽代替原先用<div>加上id名稱的做法。新增文檔結(jié)構(gòu)標(biāo)簽如表2-5所示。2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽1.頁(yè)眉標(biāo)簽<header>頁(yè)眉標(biāo)簽<header>和</header>用于定義網(wǎng)頁(yè)文檔或節(jié)的頁(yè)眉，通常為網(wǎng)站名稱。2.導(dǎo)航標(biāo)簽<nav>導(dǎo)航標(biāo)簽<nav>和</nav>用于定義網(wǎng)頁(yè)文檔的導(dǎo)航菜單，可通過超鏈接跳轉(zhuǎn)其他頁(yè)面。其中nav來(lái)源于navigation（導(dǎo)航）的簡(jiǎn)寫。2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽3.節(jié)標(biāo)簽<section>節(jié)標(biāo)簽<section>和</section>用于定義獨(dú)立的專題區(qū)域，里面可包含一篇或多篇文章。4.文章標(biāo)簽<article>文章標(biāo)簽<article>和</article>用于定義獨(dú)立的文章區(qū)域，里面根據(jù)文章內(nèi)容的長(zhǎng)短也可以包含一個(gè)或多個(gè)段落元素<p>。2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽5.側(cè)欄標(biāo)簽<aside>側(cè)欄標(biāo)簽<aside>和</aside>用于定義正文兩側(cè)的相關(guān)內(nèi)容，常用作文章的側(cè)欄。6.頁(yè)腳標(biāo)簽<footer>頁(yè)腳標(biāo)簽<footer>和</footer>用于定義整個(gè)網(wǎng)頁(yè)文檔或節(jié)的頁(yè)腳，通常包含文檔的作者、版權(quán)、聯(lián)系方式等信息。2.3.1HTML5新增文檔結(jié)構(gòu)標(biāo)簽【例2-22】HTML5新增文檔結(jié)構(gòu)標(biāo)簽的綜合應(yīng)用2.3.2HTML5新增格式標(biāo)簽1.記號(hào)標(biāo)簽<mark>2.進(jìn)度標(biāo)簽<progress>3.度量標(biāo)簽<meter>2.3.2HTML5新增格式標(biāo)簽1.記號(hào)標(biāo)簽<mark>記號(hào)標(biāo)簽<mark>用于突出顯示指定區(qū)域的文本內(nèi)容，通常在指定的文本前后分別加上<mark>和</mark>標(biāo)簽標(biāo)記，可以為文字添加黃色底色。支持該標(biāo)簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari。2.3.2HTML5新增格式標(biāo)簽1.記號(hào)標(biāo)簽<mark>【例2-23】記號(hào)標(biāo)簽<mark>的簡(jiǎn)單應(yīng)用

2.3.2HTML5新增格式標(biāo)簽2.進(jìn)度標(biāo)簽<progress>進(jìn)度標(biāo)簽<progress>用于顯示任務(wù)的進(jìn)度狀態(tài)，可配合JavaScript使用以顯示任務(wù)進(jìn)度的動(dòng)態(tài)進(jìn)行效果。支持該標(biāo)簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari6。該標(biāo)簽可以加上屬性value和max分別用于定義任務(wù)進(jìn)度的當(dāng)前值和最大值。例如，表示目前任務(wù)進(jìn)度已經(jīng)進(jìn)行了80%的代碼如下：<progressvalue="80"max="100"></progress>2.3.2HTML5新增格式標(biāo)簽2.進(jìn)度標(biāo)簽<progress>【例2-24】進(jìn)度標(biāo)簽<progress>的簡(jiǎn)單應(yīng)用

2.3.2HTML5新增格式標(biāo)簽3.度量標(biāo)簽<meter>度量標(biāo)簽<meter>用于顯示標(biāo)量測(cè)量結(jié)果，通常用于顯示磁盤使用量、投票數(shù)據(jù)統(tǒng)計(jì)等。該標(biāo)簽通常應(yīng)用于已知范圍內(nèi)的恒定數(shù)值標(biāo)記，不用于任務(wù)進(jìn)度指示。支持該標(biāo)簽的瀏覽器有Edge，F(xiàn)irefox，Opera，Chrome和Safari6。2.3.2HTML5新增格式標(biāo)簽3.度量標(biāo)簽<meter>度量標(biāo)簽<meter>有一系列屬性用于輔助顯示效果，這些屬性的相關(guān)說(shuō)明如表2-6所示。2.3.2HTML5新增格式標(biāo)簽3.度量標(biāo)簽<meter>【例2-25】度量標(biāo)簽<meter>的簡(jiǎn)單應(yīng)用

2.4HTML5新增API除去新增的文檔結(jié)構(gòu)標(biāo)簽和文本格式標(biāo)簽外，HTML5還有一系列新增的API。2.4HTML5新增API常用的功能性API列舉如下：拖放：實(shí)現(xiàn)元素的拖放；畫布：實(shí)現(xiàn)2D和3D繪圖效果；音頻和視頻：實(shí)現(xiàn)自帶控件播放音頻和視頻；表單：新增一系列輸入類型，例如電話號(hào)碼、數(shù)字范圍、email地址等；地理定位：使用瀏覽器進(jìn)行地理位置經(jīng)緯度的定位；Web存儲(chǔ)：實(shí)現(xiàn)本地持久化存儲(chǔ)大量數(shù)據(jù)；這些API及其相關(guān)標(biāo)簽，會(huì)在后續(xù)章節(jié)陸續(xù)介紹。2.5實(shí)驗(yàn)案例——第一個(gè)Web頁(yè)面嘗試使用本章所學(xué)網(wǎng)頁(yè)文檔結(jié)構(gòu)基礎(chǔ)知識(shí)開發(fā)第一個(gè)Web頁(yè)面，開發(fā)工具可以任選。2.5實(shí)驗(yàn)案例——第一個(gè)Web頁(yè)面除此之外，學(xué)有余力的開發(fā)者還可以嘗試搭建本章例2-22的內(nèi)容，使用HTML5新增文檔結(jié)構(gòu)標(biāo)簽制作一個(gè)帶有頁(yè)眉、導(dǎo)航欄、側(cè)欄、文章、頁(yè)腳等內(nèi)容的Web頁(yè)面。本章小結(jié)本章小結(jié)HTML5文件的基本結(jié)構(gòu)是由根元素<html>及其所包含首部標(biāo)簽<head>和主體標(biāo)簽<body>組成的。其中首部標(biāo)簽<head>所包含的內(nèi)容為網(wǎng)頁(yè)的信息，而主體標(biāo)簽<body>所包含的內(nèi)容會(huì)直接顯示在網(wǎng)頁(yè)上。HTML5保留了HTML4.01中一些常用標(biāo)簽，包括基礎(chǔ)標(biāo)簽、文本格式標(biāo)簽、列表標(biāo)簽、圖像標(biāo)簽、超鏈接標(biāo)簽、表格標(biāo)簽、框架標(biāo)簽、容器標(biāo)簽等。同時(shí)HTML5也新增了具有明確語(yǔ)義的文檔結(jié)構(gòu)標(biāo)簽和格式標(biāo)簽。HTML5還新增了一系列API用于實(shí)現(xiàn)更多的效果，如畫布、音頻視頻、表單、地理定位、Web存儲(chǔ)等。Thankyou！第3章CSS基礎(chǔ)主講人：XX老師本章學(xué)習(xí)目標(biāo)了解CSS的基本語(yǔ)法規(guī)則；了解CSS的常見取值與單位；熟悉CSS樣式表的層疊優(yōu)先級(jí)；掌握CSS樣式表的三種使用方式；掌握CSS常用選擇器的使用；掌握CSS常用樣式的使用；掌握CSS的四種定位方法。目錄3.1CSS樣式表3.2CSS選擇器3.3語(yǔ)法規(guī)則3.4CSS取值與單位3.5CSS常用樣式3.6CSS定位 3.1CSS樣式表3.1.1內(nèi)聯(lián)樣式表3.1.2內(nèi)部樣式表3.1.3外部樣式表3.1.4樣式表層疊優(yōu)先級(jí)3.1.1內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表又稱為行內(nèi)樣式表，通過使用style屬性為各種HTML元素標(biāo)簽添加樣式，其作用范圍只在指定的HTML元素內(nèi)部。3.1.1內(nèi)聯(lián)樣式表基本語(yǔ)法格式如下：如果有多個(gè)屬性需要同時(shí)添加，可用分號(hào)隔開，顯示如下：例如，為某個(gè)標(biāo)題標(biāo)簽<h1>設(shè)置樣式：<元素名style="屬性名稱:屬性值"><元素名style="屬性名稱1:屬性值1;屬性名稱2:屬性值2;...屬性名稱N:屬性值N"><h1style=”color:blue;background-color:yellow”>標(biāo)題一</h1>該聲明表示設(shè)置當(dāng)前<h1>和</h1>標(biāo)簽之間的文本字體顏色為藍(lán)色，背景色為黃色。3.1.1內(nèi)聯(lián)樣式表為方便理解本節(jié)例題，表3-1列出了部分常用CSS屬性和參考值。3.1.1內(nèi)聯(lián)樣式表【例3-1】?jī)?nèi)聯(lián)樣式表的用法示例

3.1.2內(nèi)部樣式表內(nèi)部樣式表通常位于<head>和</head>標(biāo)簽內(nèi)部，通過使用<style>和</style>標(biāo)