1、第1頁第3章HTML 5快速入門本章概述 本章的學習目標主要內容第1頁第3章HTML 5快速入門本章概述 第2頁本章概述為了增強Web的實用性，HTML5引入了許多新技術，對傳統HTML文檔進行了大幅修改，使得文檔結構更加清晰明了、易讀，降低了學習難度，這樣既方便瀏覽者訪問，也提高了Web開發的速度。本章將從認識HTML 5文檔結構開始，詳細介紹HTML 5中新增和廢除的元素，新增和廢除的屬性，以及新增的事件等。重點講述了新增結構元素的用法。第2頁本章概述為了增強Web的實用性，HTML5引入了許多新第3頁本章的學習目標了解HTML5文檔結構掌握HTML 5新增的結構元素的用法掌握HTML 5

2、新增的塊級元素的用法掌握HTML 5新增的行內語義元素的用法了解HTML 5中廢除的元素了解HTML 5中新增和廢除的屬性了解HTML 5中新增的事件第3頁本章的學習目標了解HTML5文檔結構第4頁主要內容3.1 認識HTML5文檔結構3.2 HTML 5元素3.3 新增和廢除的屬性3.4 新增的事件3.5 本章小結3.6 思考和練習第4頁主要內容3.1 認識HTML5文檔結構第5頁3.1 認識HTML 5文檔結構HTML5文檔以開頭，這是文檔類型聲明，并且必須位于HTML5文檔的第一行，用來告訴瀏覽器或任何其他分析程序它們所查看的文檔類型。標簽是HTML5文檔的根標簽，緊跟在之后。html標

3、簽支持HTML5全局屬性和manifest屬性，manifest屬性主要在創建HTML5離線應用的時候用到。標簽是所有頭部元素的容器。位于內部的元素可以包含腳本、樣式表、元信息等。標簽支持HTML5全局屬性。第5頁3.1 認識HTML 5文檔結構HTML5文檔以!第6頁HTML 5文檔結構標簽位于文檔的頭部，不包含任何內容。meta標簽的屬性定義了與文檔相關聯的名稱/值對。該標簽提供頁面的元信息，如針對搜索引擎和更新頻度的描述和關鍵詞。上述代碼中定義了文檔的字符編碼是utf-8。這里，charset是meta標簽的屬性，而utf-8是該屬性的值。標簽位于標簽內，定義了文檔的標題。該標簽定義瀏覽

4、器工具欄中的標題、提供頁面被添加到收藏夾時的標題以及顯示在搜索引擎結果中的頁面標題。標簽支持HTML5全局屬性。標簽定義文檔的主題和所有內容，如文本、超鏈接、圖像、表格和列表等都包含在該標簽中。第6頁HTML 5文檔結構標簽位于文檔的頭部，不第7頁主要內容3.1 認識HTML5文檔結構3.2 HTML 5元素3.3 新增和廢除的屬性3.4 新增的事件3.5 本章小結3.6 思考和練習第7頁主要內容3.1 認識HTML5文檔結構第8頁3.2 HTML5元素HTML5在HTML4的基礎上進行了大量修改，引入了很多新的元素，同時也廢除了很多元素，改由其他屬性或CSS樣式來替代。在HTML5對分組元素

5、進行擴展之前，最常用的HTML元素的組容器就是元素。它代表一個通用的內容塊，用來結合class與id對文檔賦予結構。第8頁3.2 HTML5元素HTML5在HTML4的基礎上進第9頁HTML5元素HTML5通過引入一些新元素改變了這種情況。這些元素可以對內容進行更精確的分組。新增的結構元素解決了這種div漫天飛舞的情況，增強了網頁內容的語義性，這對搜索引擎而言，能夠更好地識別和組織索引內容。合理地使用這些結構元素，將極大地提高搜索結果的準確度。第9頁HTML5元素HTML5通過引入一些新元素改變了這種情第10頁新增結構元素元 素描 述section在Web頁面應用中，section元素也可以用

6、于區域的章節表述header頁面主體的頭部，注意與head元素相區別。head元素不可見，而header往往包含在body中footer頁面的底部，即頁腳。通常用于標出網站的一些相關信息，例如“關于我們”、法律聲明、郵件信息和版權所有等nav專門用于菜單導航、鏈接導航的元素，是navigator的縮寫article用于表示一篇文章的主題內容，一般為文字集中顯示的區域第10頁新增結構元素元 素描 述section在We第11頁Section元素section元素主要用來對網站或應用程序中頁面上的內容進行分塊。section元素表示文檔或應用的一個部分。所謂“部分”，這里是指按照主題分組的內容區域

7、。section元素通常由標題和內容組成。但section元素并不是容器元素，所以不能用CSS來渲染。當一個容器需要直接定義樣式或通過腳本控制行為時，則應使用div元素。第11頁Section元素section元素主要用來對網站或第12頁header元素header元素是一種具有引導和導航作用的結構元素，通常用來放置整個頁面或頁面內的內容區塊的標題，也可以包含其他內容，如數據表格、搜索表單或相關的logo圖片。因此，整個頁面的標題都應該放在頁面的開頭。header元素定義文檔或者文檔的一部分區域的頁眉。在一個文檔中，可以定義多個 header元素。需要注意head與header的不同，head

8、元素是HTML文檔的所有頭部元素的容器，而header元素是body元素中的一個結構元素，也可以在article元素內使用header元素，但是不能在footer、address或者另一個header元素內使用header元素。第12頁header元素header元素是一種具有引導和導航第13頁footer元素footer元素可以作為內容塊的腳注，比如在父級內容塊中添加注釋，或者在網頁中添加版權信息等。腳注信息的形式有作者、相關閱讀鏈接及版權信息等。footer元素與header元素的用法基本相同，二者一個位于區塊的頭部，一個位于區塊的尾部。與header元素一樣，一個網頁中也可以重復使用fo

9、oter元素，還可以為article元素和section元素添加footer元素。第13頁footer元素footer元素可以作為內容塊的腳注第14頁nav元素nav元素是一個可以用來作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。一般情況下，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，其中放著服務條款、首頁和版權聲明等，這時使用nav元素來組織并不適合，使用footer元素最為恰當。一個頁面可以擁有多個nav元素，作為頁面整體或不同部分的導航。一般來說，nav元素適用于以下場景：傳統導航條、側邊欄導航條、頁內導航、翻頁操作。nav元

10、素在以前版本HTML的布局中作為導航條相關常用命名來使用。第14頁nav元素nav元素是一個可以用來作為頁面導航的鏈接第15頁article元素article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是論壇帖子、報紙文章、博客條目、用戶評論或獨立的插件，或是其他任何獨立的內容。除了內容部分，article元素通常有自己的標題(一般為header元素)，有時還有腳注(footer元素)。另外，article元素也可以嵌套使用。在嵌套使用時，內層的內容原則上需要與外層的內容有關系，即聯系比較緊密，嵌套的內外層描述的又都是獨立的事物。第15頁article元素ar

11、ticle元素代表文檔、頁面或塊級元素第16頁元 素描 述aside用來表示注記、貼士、側欄、摘要、插入的引用等，作為補充主體的內容。從簡單頁面的顯示上看，就是側邊欄，可以在左邊，也可以在右邊figure定義媒介內容的分組，是對多個元素進行組合并展示的元素，通常和figcaption元素配合使用hgroup用來對標題元素進行分組dialog用來表示人與人之間的對話。dialog元素還包括dt和dd這兩個組合元素，它們常常同時使用。dt用來表示說話者，dd表示說話內容塊級元素第16頁元 素描 述aside用來表示注記、第17頁Aside元素aside元素表示跟這個頁面的其他內容關聯性不強或者沒有

12、關聯的內容，一般是一些附屬信息。aside元素通常用來在側邊欄顯示一些定義，比如目錄、索引、術語表等；也可以用來顯示相關的廣告宣傳、作者介紹、Web應用、相關鏈接、當前頁內容簡介等。但不要使用aside元素標記括號中的文字，因為這種類型的文本被認為是主內容的一部分。第17頁Aside元素aside元素表示跟這個頁面的其他內容第18頁figure元素figure元素表示一段獨立的流內容，一般表示文檔主題流內容中的一個獨立單元，可以使用figcaption元素為figure元素組添加標題。figure元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。第18頁figure元素figu

13、re元素表示一段獨立的流內容第19頁hgroup元素hgroup 元素是將標題及其子標題進行分組的元素。當標題有多個層級(副標題)時，hgroup元素被用來對一系列 - 元素進行分組，一個內容區塊的標題及其子標題算一組。通常，如果文章只有一個標題，是不需要使用hgroup元素的。第19頁hgroup元素hgroup 元素是將標題及其子標題第20頁dialog元素dialog元素用于定義一個對話框、確認框或窗口，它的open屬性用來規定dialog元素是有效的，用戶可以與它進行交互。通常會在JavaScript腳本中處理對話框的交互。第20頁dialog元素dialog元素用于定義一個對話框、新

14、增的行內語義元素第21頁元 素描 述mark定義有記號的文本meter表示特定范圍內的數值，可用于工資、數量、百分比等time表示時間值progress用來表示進度條，可通過對其max、min、step等屬性進行控制，完成對進度的表示和監視新增的行內語義元素第21頁元 素描 述mark定義有第22頁mark元素mark元素用來標簽一些不是特別需要強調的文本。如果是需要突出顯示文本，則使用上一章學習的或標簽?？梢詾榱藰擞浱囟ㄉ舷挛闹械奈谋径褂眠@個標簽，例如，用來顯示搜索引擎搜索后的關鍵詞。第22頁mark元素mark元素用來標簽一些不是特別需要強調第23頁mark元素meter元素用來定義已知

15、范圍或分數值內的標量測量，也被稱為尺度。支持的屬性如下min：值域的最小邊界值。默認為0，如果設置了具體值，它必須比最大值要小。max：值域的上限邊界值。默認為1。value：當前值。low：定義了低值區間的上限值(如果value介于min和low之間，該元素就會表現出低值的視覺效果，value落在min,low、high,max等不同的區間會使瀏覽器渲染該元素時出不同的視覺效果)。high：定義了高值區間的下限值。optimum：這個屬性用來指示最優/最佳取值。第23頁mark元素meter元素用來定義已知范圍或分數值內第24頁time元素time元素用于定義時間或日期，該元素代表24小時中

16、的某個時刻或某個日期，表示時刻時允許帶時差。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣，用戶就能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。第24頁time元素time元素用于定義時間或日期，該元素代第25頁progress元素progress元素用來顯示一項任務的完成進度，為了使progress元素能夠動態展示下載進度，通常需要JavaScript代碼編寫一個處理程序，根據實際任務進度，動態更新progress的value屬性值。除了全局屬性，該元素還有如下兩個屬性：max：該屬性描述了這個progress元素所表示的任務一共需要完成多少工作。v

17、alue：該屬性用來指定該進度條已完成的工作量。如果沒有設置value屬性，則該進度條的進度為“不確定”，瀏覽器中會看到一個來回滾動的進度條。第25頁progress元素progress元素用來顯示一項新增的其他功能元素除了前面介紹的一些元素，HTML 5還新增了一些功能元素和input元素的類型。新增的input元素的類型將在下一章學習表單時詳細介紹，這里簡單介紹一下新增的功能元素。所謂功能元素，是指可以用在頁面中以完成某種頁面顯示行為的元素。第26頁新增的其他功能元素除了前面介紹的一些元素，HTML 5還新增新增的其他功能元素output表示不同類型的輸出source為媒介元素(如vide

18、o、audio等)定義資源menu菜單列表，使用li元素列舉每一個菜單項ruby ruby注釋rt表示字符的解釋或發音rp在ruby注釋中使用，定義不支持ruby的瀏覽器所顯示的內容wbr軟換行。在瀏覽器窗口或父級元素的寬度足夠時不換行，而寬度不夠時主動換行command命令按鈕，如單選按鈕、復選框或按鈕details表示細節信息，可以和summary元素配合使用datalist表示可選數據列表，和input元素配合使用datagrid表示可選數據列表，以樹型列表的形式顯示keygen表示生成密鑰第27頁新增的其他功能元素output表示不同類型的輸出第27頁廢除的元素除了新增元素以外，HTM

19、L 5還廢除了一些HTML4中的元素，主要包括：能用CSS替代的元素、不再使用frame框架、只有部分瀏覽器支持的元素。HTML 4中的一些表現文本效果的元素，如basefont、big、center、font、s、strike、tt和u這些元素，HTML5將它們放在了CSS樣式表中，因此將這些元素廢除了。其中，font元素允許由“所見即所得”的編輯器插入，s、strike元素可以由del元素替代，tt元素可以由CSS的font-family屬性替代。第28頁廢除的元素除了新增元素以外，HTML 5還廢除了一些HTML廢除的元素由于frame框架對網頁可用性存在負面影響，因此HTML5不再支持

20、frame，只支持iframe。與frame框架相關的frameset、frame、noframes元素被廢除。對于只有部分瀏覽器支持的元素，如applet、bgsound、blink和marquee等元素，由于只被少數瀏覽器支持，因此HTML5將它們廢除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee元素可以由JavaScript編程方式替代。第29頁廢除的元素由于frame框架對網頁可用性存在負面影響，因此H廢除的元素使用ruby元素替代rb元素。使用abbr元素替代acronym元素。使用ul元素替代dir元素。使用

21、form元素與input元素相結合的方式替代isindex元素。使用pre元素替代listing元素。使用code元素替代xmp元素。使用GUIDS替代nextid元素。使用text/plain的MIME類型替代plaintext元素。第30頁廢除的元素使用ruby元素替代rb元素。第30頁第31頁主要內容3.1 認識HTML5文檔結構3.2 HTML 5元素3.3 新增和廢除的屬性3.4 新增的事件3.5 本章小結3.6 思考和練習第31頁主要內容3.1 認識HTML5文檔結構第32頁3.3 新增和廢除的屬性HTML 5除了新增和廢除一些元素標記外，還新增和廢除了HTML4中的一些屬性。HT

22、ML 5新增的屬性主要體現為表單屬性、鏈接屬性以及其他屬性。第32頁3.3 新增和廢除的屬性HTML 5除了新增和廢除新增的表單屬性第33頁屬性名稱描 述autofocusinput、select、textarea和button元素擁有，以指定屬性的方式讓元素在畫面打開時自動獲得焦點placeholderinput(type=text)、textarea元素擁有，提示用戶可以輸入的內容forminput、output、select、textarea、button與fieldset元素擁有，聲明這些控件屬于哪個表單，然后放置在頁面上的任何位置而不是表單之內required指示輸入字段的值是必需的

23、autocomplete、min、max、multiple、pattern、step為input元素新增的屬性。datalist元素和autocomplete屬性配合使用。multiple允許在上傳文件時一次上傳多個文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素擁有，重載form元素的action、enctype、method、novalidate、target屬性novalidate取消提交時進行的有關檢查，表單可以被無條件提交新增的表單屬性第33頁屬性名稱描 述autofocus新增的鏈接屬性第

24、34頁屬性名稱描 述media規定目標URL是為哪種類型的媒介和設備進行優化的，只能在href屬性存在時使用hreflang和 rel為area元素增加的屬性，以保持和a、link元素保持一致sizes為link元素增加的屬性，可以和icon元素結合使用，指定關聯圖標的大小target為base元素增加的屬性，目的是和a元素保持一致新增的鏈接屬性第34頁屬性名稱描 述media規定目標新增的其他屬性第35頁屬性名稱描 述reversed為ol元素增加的屬性，用于指定列表倒序顯示charset為meta元素增加的屬性type 和label為menu元素增加的屬性，label屬性為菜單定義可見的標

25、注，type屬性讓菜單能以上下文菜單、工具條和列表菜單的形式出現scoped為style元素增加的屬性，規定樣式的作用范圍async為script元素增加的屬性，定義腳本是否異步執行manifest為html元素增加的屬性，開發離線Web應用程序時，與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息sandboxseamlesssrcdoc為iframe元素增加的屬性，用來提高頁面安全性，防止不信任的Web頁面執行某些操作新增的其他屬性第35頁屬性名稱描 述reversed為廢除的屬性前面廢除的元素中就有一些用CSS樣式替代的，同樣，對于一些表現頁面效果的屬性，如align、b

26、gcolor、background、border、cellpadding、cellspacing、frame、rules、width、alink、link、text、vlink、char、charoff、height、nowrap、vaign、hspace、vspace、nowrap、compact、type、frameborder、scrolling、marginheight、marginwidth等屬性，都被廢除了，改由CSS樣式實現。第36頁廢除的屬性前面廢除的元素中就有一些用CSS樣式替代的，同樣，其它廢除的屬性第37頁HTML4屬性適應元素HTML5替代方案revlink、arelc

27、harsetlink、a在被鏈接的資源中使用HTTP content-type頭元素shape、coordsa使用area元素代替a元素longdescimg、iframe使用a元素鏈接到較長描述targetlink多余屬性，被省略nohrefarea多余屬性，被省略profilehead多余屬性，被省略versionhtml多余屬性，被省略nameimgidschememeta只為某個表單域使用schemearchive、classid、codebase、codetype、declare、standbyobject使用data與type屬性類調用插件。需要使用這些屬性來設置參數時，使用par

28、am屬性valuetype、typeparam使用name和value屬性，不聲明值的MIME類型axis、abbrtd、th使用以明確、簡潔的文字開頭，后跟詳述文字的形式。可以對更詳細的內容使用title屬性，以使單元格的內容變得簡短scopetd在被鏈接的資源中使用HTTP content-type頭元素其它廢除的屬性第37頁HTML4屬性適應元素HTML5替代方第38頁主要內容3.1 認識HTML5文檔結構3.2 HTML 5元素3.3 新增和廢除的屬性3.4 新增的事件3.5 本章小結3.6 思考和練習第38頁主要內容3.1 認識HTML5文檔結構3.4 新增的事件HTML 5中對頁面

29、、表單、鍵盤元素新增了許多事件第39頁3.4 新增的事件HTML 5中對頁面、表單、鍵盤元素新增新增的事件第40頁元素對象事件觸發時機window對象body對象beforeprint即將開始打印之前觸發afterprint打印結束后觸發resize瀏覽器窗口大小發生改變時觸發error頁面加載出錯時觸發offline頁面變為離線狀態時觸發online頁面變為在線狀態時觸發pageshow頁面加載時觸發，類似于load事件，區別在于load事件在頁面第一次加載時觸發，而pageshow事件在每一次加載時觸發，即從網頁緩存中讀取頁面時只觸發pageshow事件，不觸發load事件beforeunload當前頁面被關閉時觸發，該事件通知瀏覽器顯示一個用于詢問用戶是否確實離開本頁面的確認窗口，可以設置確認窗口中的提示文字hashchange頁面URL地址字符串中的哈希部分發生改變時觸發任何元素mousewheel當鼠標指針懸停在元素上并滾動鼠標滾輪時觸發任何容器元素scroll當元