配套課件-HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程

1、第1頁第1章 Web開發(fā)新時代本章概述 本章的學習目標主要內(nèi)容第2頁本章概述 2010年HTML5推出以來，受到了各大瀏覽器廠商的支持和廣大開發(fā)人員的喜愛。2010年，微軟IE9預(yù)覽版在MIX10大會首次公開亮相，工程師在介紹時，從前端結(jié)束將Web發(fā)展氛圍三個階段：第一個階段為Web1.0，主流技術(shù)是HTML和CSS；第二階段為Web2.0，主流技術(shù)為Ajax應(yīng)用，如JavaScript/DOM/異步數(shù)據(jù)請求；而第三階段應(yīng)該是即將到來的HTML5+CSS3階段。2014年10月29日，萬維網(wǎng)聯(lián)盟淚流滿面地宣布，經(jīng)過幾乎8年的艱辛努力，HTML5標準規(guī)范終于最終制定完成并公開發(fā)布。這宣告了Web

2、發(fā)展正式進入第三個階段。第3頁本章的學習目標了解什么是HTML5，HTML5和之前版本的HTML有哪些區(qū)別；了解世界各大知名瀏覽器目前的發(fā)展策略，為什么它們都不約而同地把支持HTML5當成目前的工作重點；了解為什么開發(fā)者今后可以大膽地使用HTML5進行Web網(wǎng)站與Web應(yīng)用程序的開發(fā)，HTML5被正式推廣以后之前的Web網(wǎng)站與Web應(yīng)用程序怎么辦；HTML5到底可以解決哪些問題。第4頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計原理 1.3 編寫第一個HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第5頁1.1 HTML5概述1.1.1 HTML5的目標1.1.2 HT

3、ML5新特性1.1.3 HTML5深受歡迎的理由1.1.4 HTML5構(gòu)成第6頁1.1.1 HTML5的目標 HTML5的目標是為了創(chuàng)建更簡單的Web程序，書寫出更簡潔的HTML代碼。例如，為了使Web應(yīng)用程序的開發(fā)變得更容易，提供了很多API；為了使HTML變得更簡潔，開發(fā)出了新的屬性，新的元素，等等。第7頁1.1.2 HTML5新特性兼容性合理性效率安全性分離簡化通用型無插件第8頁1.1.3 HTML5深受歡迎的理由世界知名瀏覽器廠商對HTML5的支持時代的要求第9頁1.1.4 HTML5構(gòu)成 HTML5主要包括下面這些功能：Canvas（2D和3D）、Channel消息傳遞、Cross-

4、document消息傳送、Geolocation、MathML、Microdata、Server-Send Events、Scalable Vector Graphics（SVG）、WebSocket API及協(xié)議、Web Origin Concept、Web Storage、Web SQL database、Web Workers、XMLHttpRequest Level 2。第10頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計原理 1.3 編寫第一個HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第11頁1.2 HTML5設(shè)計原理 1.2.1 HTML變遷1.2.2

5、 HTML5開發(fā)動力第12頁1.2.1 HTML變遷HTML最早從2.0版開始的，實際上并沒有HTML1.0版官方規(guī)范。20世紀90年代，HTML有過幾次快速的發(fā)展。從1997年到1999年，HTML的版本從3.2到4.0，再到4.01，經(jīng)歷了非常快的發(fā)展。在HTML4.01之后，W3C提出了XHTML1.0的概念。到了2000年，Web標準項目的活動開展得如火如荼，開發(fā)人員對瀏覽器里包含的那些亂七八糟的專有特性已經(jīng)忍無可忍了。XHTML1.0之后是XHTML1.1，而在使用XHTML1.0的時候，還可以把文檔標記為HTML。XHTML1和XHTML2都使用XML錯誤處理模型，但這個錯誤處理模

6、型太苛刻了，它不符合“接收時開放”這個法則。第13頁1.2.2 HTML5開發(fā)動力 在2004年W3C成員內(nèi)部的一次研討會上，Opera公司的代表伊恩?？松?Ian Hickson）提出了一個擴展和改進HTML的建議。他建議新任務(wù)組可以跟XHTML2并行，但是在已有HTML的基礎(chǔ)上開展工作，目標是對HTML進行擴展。但是W3C投票表示反對，因為他們覺得XHTML2才是未來的方向。然后，Opera、Apple等瀏覽器廠商以及其他一些成員脫離了W3C，成了了WHATWG（Web Hypertext Applications Technology Working Group，Web超文本應(yīng)用技術(shù)工作

7、組），在HTML的基礎(chǔ)上開展工作，向其中添加新東西。 這就是我們今天看到的局面：一種格式，兩個版本。第14頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計原理 1.3 編寫第一個HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第15頁1.3 編寫第一個HTML5頁面 1.3.1 搭建上機練習環(huán)境1.3.2 檢測瀏覽器是否支持1.3.3 使用HTML5編寫簡單的Web頁面第16頁1.3.1 搭建上機練習環(huán)境 目前，Microsoft的IE（IE9+）瀏覽器，以及Mozlilla的Firefox與Google的Chrome瀏覽器等都可以很好地支持HTML5。本書的示例主要運行

8、在Chrome瀏覽器上，因此，安裝Chrome瀏覽器即可，也可以安裝IE、火狐等最新版本的瀏覽器。 第17頁1.3.2 檢測瀏覽器是否支持ALTER語句用于更改數(shù)據(jù)庫以及數(shù)據(jù)庫對象的結(jié)構(gòu)。也就是說，ALTER語句的對象必須已經(jīng)存在。ALTER語句僅僅是更改其對象的結(jié)構(gòu)，其對象中已有的數(shù)據(jù)不受任何影響。例如，對于表對象來說，在表中增加一個新列、刪除一個列等操作都屬于對表結(jié)構(gòu)的更改。在圖3-4所示的示例中，使用ALTER語句在ContactDetail表中增加一個productName列，該列用于存儲合同明細中的產(chǎn)品名稱。然后，使用SELECT語句查看ContactDetail表更改后的結(jié)果，這時

9、ContactDetail表有6個列組成。第18頁1.3.3 使用HTML5編寫簡單的Web頁面如果數(shù)據(jù)庫或數(shù)據(jù)庫對象不再需要了，那么可以把其刪除。刪除數(shù)據(jù)庫或數(shù)據(jù)庫對象的結(jié)構(gòu)可以通過使用DROP語句來完成。需要注意的是，刪除對象結(jié)構(gòu)包括刪除該對象中的所有內(nèi)容和對象本身。例如，如果刪除ContactDetail表，那么不僅僅ContactDetail表結(jié)構(gòu)不再存在了，該表中的所有數(shù)據(jù)也都自然不存在了。在圖3-5所示的示例中，首先使用SELECT語句查看ContactDetail表，這時該表依然存在；然后使用DROP語句刪除該表，當再次使用SELECT語句查看該表時，發(fā)現(xiàn)該表已經(jīng)不存在了，出現(xiàn)了

10、208號對象名無效的錯誤消息。 第19頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計原理 1.3 編寫第一個HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第20頁1.4 HTML5頁面的特征 1.4.1 使用HTML5結(jié)構(gòu)化元素1.4.2 使用CSS美化HTML5文檔第21頁1.4.1 使用HTML5結(jié)構(gòu)化元素 通過研究Web頁面發(fā)現(xiàn)，如果使用一些帶有語義性的標記，可以加快瀏覽器解釋頁面中元素的速度，如早期的、元素；HTML5繼承了這些元素，并根據(jù)用戶使用最為頻繁的類名稱和ID 號不斷開發(fā)新的標記，因為這些標記能真正體現(xiàn)開發(fā)者真實意圖所在。下面通過實例說明HTML5是

11、如何使用這些全新的HTML5特征來結(jié)構(gòu)化元素的。第22頁1.4.2 使用CSS美化HTML5文檔 在支持HTML5新元素的瀏覽器中，樣式化各新增元素變得十分簡單，可以對任意一個元素應(yīng)用CSS，包括直接設(shè)置或引入CSS文件。需要說明的是，在默認情況下，CSS會默認元素的display屬性值為inline，因此，為了正確地顯示設(shè)置的頁面效果，需要將元素的display屬性設(shè)置為block。下面通過一個簡單示例說明這一點。 【例1-4】在頁面中設(shè)置相關(guān)樣式，顯示一段文章的內(nèi)容。（詳見課文）第23頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計原理 1.3 編寫第一個HTML5頁面 1.4 H

12、TML5頁面的特征 1.5 本章小結(jié)第24頁1.5 本章小結(jié) 本章是HTML5的概述，從總體上向讀者介紹HTML5的一個全局面貌。從總體上來說，HTML5的出現(xiàn)與興起并非偶然，這是業(yè)界專家與工程師們直面過去互聯(lián)網(wǎng)技術(shù)的許多復(fù)雜問題，總結(jié)許多開發(fā)者們在實際項目實踐中的經(jīng)常遇到的問題、習慣性操作、解決方案等的基礎(chǔ)上，并根據(jù)當前技術(shù)發(fā)展的需要、設(shè)計原理等，基于HTML語言基礎(chǔ)之上，制定出來的HTML5標準。本章首先對HTML5進行了概要敘述，簡單介紹了HTML5的目標、新特性、受歡迎的原因，以及HTML5文檔的構(gòu)成；其次，簡單陳述了HTML5設(shè)計原理；接著介紹如何搭建一個編寫和運行HTML5的環(huán)境，

13、如何編寫一個HTML5文檔；最后介紹HTML5頁面的特征。希望通過本章的學習，讀者能夠?qū)TML5有一個總體的認識。第25頁第2章 HTML、XHTML、HTML5本章概述 本章的學習目標主要內(nèi)容第26頁本章概述 1993年，HTML首次以草案的形式發(fā)布，20世紀90年代是HTML發(fā)展速度最快的時期，直到1999年的4.01版。在這個過程中，W3C主要負責HTML規(guī)范的制定。HTML4.01發(fā)布之后，業(yè)界普遍認為HTML已經(jīng)到了窮途末路，對Web標準的焦點也開始移到了XML和XHTML上，HTML被放在了次要的位置。HTML以HTML為基礎(chǔ)，對HTML進行了大量的修改。本章將從總體上介紹HTM

14、L5與以往版本的不同，以及HTML5和HTML4之間的區(qū)別。第27頁本章的學習目標了解H TML語言的作用、結(jié)構(gòu)和語法了解XHTML和XML的關(guān)系，及XHTML的語法特點掌握HTML5的語法和元素掌握HTML5中新增的以及廢除的元素掌握HTML5中新增的和廢除的屬性掌握HTML5新增的全局屬性掌握HTML5新增的事件第28頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第29頁2.1 HTML基礎(chǔ)2.1.1 HTML簡介2.1.2 HTML結(jié)構(gòu)2.1.3 HTML語法第30頁2.1.1 HTM

15、L簡介 HTML是Hypertext Markup Language的縮寫，中文翻譯為超文本標識語言。使用HTML標簽編寫的文檔稱為HTML文檔，目前最新版本為HTML 5.0，這是目前使用得最廣泛的版本。HTML 4.01已逐步淘汰。第31頁2.1.2 HTML結(jié)構(gòu) HTML文檔一般都應(yīng)包含兩個部分：頭部區(qū)域和主體區(qū)域。HTML文檔基本結(jié)構(gòu)由3個標簽負責組織：、和。其中標簽標識HTML文檔,標簽標識頭部區(qū)域，而標簽標識主題區(qū)域。第32頁2.1.3 HTML語法所有標簽都包含在“”起止標識符中，構(gòu)成一個標簽如、和等。絕大多數(shù)元素都有起始標簽和結(jié)束標簽。起始標簽包含元素的名稱以及可選屬性。元素的

16、屬性包含屬性名稱和屬性值兩部分，中間通過等號進行連接，多個屬性之間通過空格進行分隔。少數(shù)元素的屬性也可能不包含屬性值，僅包含一個屬性名稱。一般屬性值應(yīng)該包含在引號內(nèi)。屬性是可選的。標簽可以相互嵌套。HTML文檔所有信息必須包含在標簽中，所有元素的元信息應(yīng)包含在子標簽中，而HTML傳遞信息和網(wǎng)頁顯示內(nèi)容應(yīng)包含在子標簽中。第33頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第34頁2.2 XHTML基礎(chǔ)2.2.1 XHTML結(jié)構(gòu)2.2.2 XHTML語法2.2.3 XHTML類型2.2.4 DT

17、D解析2.2.5 命名空間第35頁2.2.1 XHTML結(jié)構(gòu)下面是Dreamweaver自動生成的一個標準XHTML頁面模板文件，包含以下代碼：第36頁2.2.2 XHTML語法在文檔的開頭必須定義文檔類型。在根元素中應(yīng)聲明命名空間，即設(shè)置xmlns屬性。所有標簽都必須是閉合的。所有元素和屬性都必須小寫。所有的屬性必須用引號括起來。所有標簽都必須合理嵌套。所有屬性都必須被賦值，沒有值的屬性就用自身來賦值。XHTML規(guī)范廢除了name屬性，而使用id屬性作為統(tǒng)一的名稱。第37頁2.2.3 XHTML類型XHTML文檔類型有3種：STRICT（嚴格類型）、TRANSITIONAL（過渡類型）、FR

18、AMESET（框架類型）。第38頁2.2.4 DTD解析DTD是一套關(guān)于標簽的語法規(guī)則。DTD文件是一個ASCII的文本文件，后綴名為.dtd。利用DOCTYPE聲明中的URL可以訪問指定類型的DTD詳細信息。例如，在XHTML1.0過渡型DTD的URL為/TR/XHTML1/DTD/xhtml1-transitional.dtd第39頁2.2.5 命名空間 在XHTML文檔中，還有一句常見的代碼： xmlns，即XHTML Namespace的縮寫，即命名空間。該屬性聲明了html頂級元素的命名空間，用來定義該頂級元素以及其包含的各級子元素的唯一性。由于XML語言允許用戶自定義標簽，使用命名

19、空間，可以避免自己定義的標簽和別人定義的標簽發(fā)生沖突。比如，如果兩個人定義了一個一模一樣的文檔，若文件頭部沒有xmlns命名空間的區(qū)分，就會發(fā)生沖突，如果在文檔頭部加上了不同的命名空間，則文檔不會沖突。通俗地講，命名空間就是給文檔做一個標簽，標明該文檔是屬于哪個網(wǎng)站的。對于HTML文檔來說，由于它的元素是固定的，不允許用戶進行定義，所以指定的命名空間永遠是/1999/xhtml。第40頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第41頁2.3 HTML5基礎(chǔ)2.3.1 HTML5語法2.3

20、.2 HTML5元素第42頁2.3.1 HTML5語法HTML5的文件擴展名仍然是.html或者.htm，內(nèi)容類型仍然為text/html。HTML5的文檔類型聲明為：。在HTML5中，使用charset屬性來指定字符編碼，例如：。HTML5力圖兼容舊版本的語法。省略引號。第43頁2.3.2 HTML5元素HTML5中引入了新標記元素被分成七大類，如表所示。標記類型說明內(nèi)嵌在文檔中添加其他類型的內(nèi)容，如audio、video、canvas和iframe等流在文檔和應(yīng)用的body中使用的元素，如form、h1和small等標題段落標題，如h1、h2和hgroup等交互與用戶交互的內(nèi)容，如音頻和視

21、頻的控件、button和textarea等元數(shù)據(jù)通常出現(xiàn)在頁面的head中，設(shè)置頁面其他部分的表現(xiàn)和行為，如script、style和title等短語文本和文本標記元素，如mark、kbd、sub和sup等第44頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第45頁2.4 新增和廢除的屬性2.4.1 新增的屬性2.4.2 廢除的屬性第46頁2.4.1 新增的屬性HTML5中新增的屬性主要體現(xiàn)在表單屬性、鏈接屬性以及其他屬性。第47頁2.4.1 新增的屬性增加的表單屬性屬性名稱說明autofo

22、cusinput、select、textarea和button元素擁有，以指定屬性的方式讓元素在畫面打開時自動獲得焦點placeholderinput、textarea元素擁有，提示用戶可以輸入的內(nèi)容forminput、output、select、textarea、button與fieldset擁有，聲明這些控件屬于哪個表單，然后放置在頁面上的任何位置，而不是表單之內(nèi)required表示必填項autocomplete、min、max、multiple、pattern、step為input元素新增的屬性。datalist元素和autocomplete屬性配合使用。multiple允許在上傳文件時

23、一次上傳多個文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素擁有，重載form元素的action、enctype、method、novalidate、target屬性novalidate取消提交時進行的有關(guān)檢查，表單可以被無條件提交第48頁2.4.1 新增的屬性增加的鏈接屬性屬性名稱說明media規(guī)定目標URL是為哪種類型的媒介和設(shè)備進行優(yōu)化的，只能在href屬性存在時使用hreflangrel為area元素增加的屬性，以保持和a、link元素保持一致sizes為link元素增加的屬性，可以和icon

24、元素結(jié)合使用，指定關(guān)聯(lián)圖標的大小target為base元素增加的屬性，目的是保持和a元素一致第49頁2.4.1 新增的屬性增加的其他屬性屬性名稱說明reversed為ol元素增加的屬性，用于指定列表倒序顯示charset為meta元素增加的屬性typelabel為menu元素新增的屬性，label屬性為菜單定義一個可見的標注，type屬性讓菜單可以以上下文菜單、工具條和列表菜單形式出現(xiàn)scoped為style元素增加的屬性，規(guī)定樣式的作用范圍async為script元素增加的屬性，定義腳本是否異步執(zhí)行manifest為html增加的屬性，開發(fā)離線Web應(yīng)用程序時，與API結(jié)合使用，定義一個UR

25、L，在這個URL上描述文檔的緩存信息sandboxseamlesssrcdoc為iframe元素增加的屬性，用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作第50頁2.4.2 廢除的屬性HTML5廢除了HTML4中過時的屬性，而采用其他屬性或其他方案進行替代（詳見課文）第51頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第52頁2.5 全局屬性2.5.1 contentEditable屬性2.5.2 designMode屬性2.5.3 hidden屬性2.5.4 spellcheck屬

26、性2.5.5 tabindex屬性第53頁2.5.1 contentEditable屬性 contentEditable屬性的主要功能是允許用戶在線編輯元素中的內(nèi)容。contentEditable是一個布爾值屬性，可以被指定為true或false。此外，該屬性還有個隱藏的inherit狀態(tài)，屬性值為true時，元素被指定為允許編輯；屬性值為false時，元素被指定為不可編輯；未指定true和false時，則由inherit狀態(tài)來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。第54頁2.5.2 designMode屬性 designMode屬性用來指定整個頁面是否可編輯，當頁面可編輯時

27、，頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性只能在JavaScript腳本里被編輯修改。該屬性值有兩個值：on和off。屬性被指定為on時，頁面可編輯；被指定為off時，頁面不可編輯。第55頁2.5.3 hidden屬性 在HTML5中，所有的元素都允許使用一個hidden屬性。該屬性類似于input元素中的hidden元素，功能是通知瀏覽器是否渲染該元素。但是元素中的內(nèi)容還是瀏覽器創(chuàng)建的。也就是說，頁面裝載后，允許使用JavaScript腳本把該屬性取消，取消后該元素變?yōu)榭梢姞顟B(tài)，同時元素中的內(nèi)容也即時顯示出來。hidden屬

28、性是一個布爾值的屬性，當設(shè)為true時，元素處于不可見狀態(tài)；當設(shè)為false時，元素處于可見狀態(tài)。第56頁2.5.4 spellcheck屬性spellcheck屬性是HTML5針對input（type=text）和textarea元素提供的一個拼寫和語法檢查屬性。該屬性取值布爾值，true或者false，書寫時需注意，必須明確聲明屬性值為true或者false。需要注意的是，如果元素的readOnly屬性或disabled屬性設(shè)為true，則不執(zhí)行拼寫檢查。第57頁2.5.5 tabindex屬性tabindex是開發(fā)中的一個基本概念，當不斷按Tab鍵讓窗口或頁面中的控件獲得焦點，對窗口或頁

29、面中的所有控件進行遍歷的時候，每一個控件的tabindex表示該控件是第幾個被訪問到的。第58頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第59頁2.6 新增的事件 HTML5中對頁面、表單、鍵盤元素新增了許多事件，見課文的表2-9所示。第60頁主要內(nèi)容2.1 HTML基礎(chǔ)2.2 XHTML基礎(chǔ)2.3 HTML5基礎(chǔ)2.4 新增和廢除的屬性2.5 全局屬性2.6 新增的事件 2.7 本章小結(jié)第61頁2.7 本章小結(jié) 本章從語法上對HTML、XHTML、HTML5進行了深入介紹，方便讀者對H

30、TML語言體系的語法有一個深入的了解。首先介紹了HTML語言的基礎(chǔ)，分別從HTML語言本身、其結(jié)構(gòu)和語法，進行介紹；然后介紹了HTML和XML發(fā)生碰撞結(jié)合的產(chǎn)物XHTML的結(jié)構(gòu)、語法、類型、DTD和命名空間等內(nèi)容；最后詳細介紹了HTML5語法，HTML5新增和廢除的屬性，HTML5新增的全局屬性和事件等內(nèi)容。通過本章的學習，希望讀者能熟悉HTML語言的語法結(jié)構(gòu)，能夠熟練寫出一份完整的HTML5文檔。第62頁第3章 創(chuàng)建HTML5文檔本章概述 本章的學習目標主要內(nèi)容第63頁本章概述 為了增強Web的實用性，HTML5引入了許多新技術(shù)，對傳統(tǒng)HTML文檔進行了大幅度的修改，使得文檔結(jié)構(gòu)更加清晰明了

31、、易讀，降低了學習難度，這樣既方便了瀏覽者的訪問，也提高了Web的開發(fā)速度。本章講詳細介紹HTML5中新增的主體元素、語義元素，并通過這兩大類元素設(shè)計一個綜合性強的網(wǎng)頁。第64頁本章的學習目標HTML5文檔結(jié)構(gòu) HTML5新增的主體標記HTML5新增的語義標記第65頁主要內(nèi)容3.1 認識HTML5文檔結(jié)構(gòu)3.2 HTML5元素分類 3.3 構(gòu)建主體內(nèi)容3.4 添加語義模塊3.5 本章小結(jié) 第66頁3.1 認識HTML5文檔結(jié)構(gòu)文檔標題HTML5文檔的頭部區(qū)域HTML5文檔的導航區(qū)域HTML5文檔的主要內(nèi)容區(qū)域HTML5文檔的主要內(nèi)容區(qū)域的側(cè)邊導航或菜單區(qū)HTML5文檔的主要內(nèi)容區(qū)域的內(nèi)容區(qū)以下

32、是一個section和article嵌套HTML5文檔的嵌套區(qū)域，可以對某個article區(qū)域進行頭部和腳部的定義，這樣做，可以有非常清晰和嚴謹?shù)奈臋n目錄結(jié)構(gòu)關(guān)系HTML5文檔的腳部區(qū)域第67頁主要內(nèi)容3.1 認識HTML5文檔結(jié)構(gòu)3.2 HTML5元素分類 3.3 構(gòu)建主體內(nèi)容3.4 添加語義模塊3.5 本章小結(jié) 第68頁3.2 HTML5元素分類 HTML5新增了27個元素，廢棄了16個元素，根據(jù)現(xiàn)有的標準規(guī)范，下面把HTML5的元素分為結(jié)構(gòu)性元素、級塊性元素、行內(nèi)語義性元素和交互性元素4大類。結(jié)構(gòu)性元素：section,header,footer,nav,article。級塊性元素：as

33、ide,figure,code,dialog。行內(nèi)語義性元素：meter,time,progress,video,audio。交互性元素：details,datagrid,menu,command。第69頁主要內(nèi)容3.1 認識HTML5文檔結(jié)構(gòu)3.2 HTML5元素分類 3.3 構(gòu)建主體內(nèi)容3.4 添加語義模塊3.5 本章小結(jié) 第70頁3.3 構(gòu)建主體內(nèi)容3.3.1 標識文章：article元素3.3.2 給內(nèi)容分段：section元素3.3.3 設(shè)計導航信息：nav元素3.3.4 設(shè)計輔助信息：aside元素3.3.5 設(shè)計微格式：time元素3.3.6 添加發(fā)布日期：pubdate屬性第7

34、1頁3.3.1 標識文章：article元素 標簽是HTML5新增的元素。article元素代表文檔、頁面或應(yīng)用程序中獨立的、完整的、可以獨自被外部引用的內(nèi)容。它可以是論壇帖子、報紙文章、博客條目、用戶評論或者一個獨立的插件，或者其他任何獨立的內(nèi)容。除了內(nèi)容部分，一個article元素通常有自己的標題（一般放在一個header元素里面），有時還有腳注。下面以一篇博客文章為例來看article元素的使用。第72頁3.3.2 給內(nèi)容分段：section元素section元素主要用來對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進行分塊。section元素通常由標題和內(nèi)容組成。但section元素并不是容器元素，所

35、以不能用CSS來渲染。當一個容器需要直接定義樣式或通過腳本控制行為時，一般使用div元素。第73頁3.3.3 設(shè)計導航信息：nav元素nav元素是一個可以用來作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。一般情況下，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，其中放著服務(wù)條款、首頁和版權(quán)聲明等，這時使用nav元素來組織并不適合，而使用footer最恰當。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。一般地說，nav元素適用于以下場景：傳統(tǒng)導航條、側(cè)邊欄導航條、頁內(nèi)導航、翻頁操作。第74頁3.3.4 設(shè)計輔助信息：a

36、side元素aside元素表示跟這個頁面的其他內(nèi)容關(guān)聯(lián)性不強或者沒有關(guān)聯(lián)的內(nèi)容，一般是一些附屬信息。aside元素通常用來在側(cè)邊欄顯示一些定義，比如目錄、索引、術(shù)語表等；也可以用來顯示相關(guān)的廣告宣傳、作者的介紹、Web應(yīng)用、相關(guān)鏈接、當前頁內(nèi)容簡介等。但不要使用元素標記括號中的文字，因為這種類型的文本被認為是主內(nèi)容的一部分。aside元素有以下兩種使用情景：aside元素作為內(nèi)容的附屬信息部分呈現(xiàn)，這種情況下，aside元素放在article元素中，內(nèi)容是和當前文章有關(guān)的參考資料和名詞解釋等。aside元素作為頁面或站點全局的附屬信息部分，在article元素之外使用。最典型的形式是側(cè)邊欄，其

37、中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。第75頁3.3.5 設(shè)計微格式：time元素微格式是一種利用HTML的class屬性來對網(wǎng)頁添加附加信息的方法。附加信息如新聞事件的發(fā)生日期和時間、個人電話號碼、企業(yè)郵箱等。第76頁3.3.6 添加發(fā)布日期：pubdate屬性pubdate屬性是可選的、布爾值的屬性。它可以用到time元素上，表示文章或整個網(wǎng)頁的發(fā)布日期。比如：2017年05月11日需要注意的是，time元素不能直接代表發(fā)布日期，只有增加了pubdate屬性才代表發(fā)布的日期。第77頁主要內(nèi)容3.1 認識HTML5文檔結(jié)構(gòu)3.2 HTML5元素分類 3.3 構(gòu)建主體內(nèi)容3.

38、4 添加語義模塊3.5 本章小結(jié) 第78頁3.4 添加語義模塊3.4.1 添加標題塊：header元素3.4.2 給標題分組：hgroup元素3.4.3 添加腳注塊：footer元素3.4.4 添加聯(lián)系信息：address元素第79頁3.4.1 添加標題塊：header元素header元素是一種具有引導和導航作用的結(jié)構(gòu)元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片，因此整個頁面的標題應(yīng)該放在頁面的開頭。例如：頁面標題第80頁3.4.2 給標題分組：hgroup元素hgroup元素可以為標題或者子標題進行分組，通常與h1h6元

39、素組合使用，一個內(nèi)容塊中的標題及子標題可以通過hgroup元素組成一組。但是，如果文章只有一個主標題，則不需要hgroup元素。第81頁3.4.3 添加腳注塊：footer元素footer元素可以作為內(nèi)容塊的腳注，如在父級內(nèi)容塊中添加注釋，或者在網(wǎng)頁中添加版權(quán)信息等。腳注信息的形式有作者、相關(guān)閱讀鏈接及版權(quán)信息等。第82頁3.4.4 添加聯(lián)系信息：address元素address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護者的名字、文檔作者或者文檔維護者的網(wǎng)站鏈接、電子郵箱、真實地址、電話號碼等。address應(yīng)該不只是用來呈現(xiàn)電子郵箱或真實地址，還可以用來展示跟文檔相關(guān)的聯(lián)系人的所有

40、聯(lián)系信息。譬如，以下實例展示了一些博客中某篇文章評論者的名字及在博客中的網(wǎng)址鏈接。第83頁主要內(nèi)容3.1 認識HTML5文檔結(jié)構(gòu)3.2 HTML5元素分類 3.3 構(gòu)建主體內(nèi)容3.4 添加語義模塊3.5 本章小結(jié) 第84頁3.5 本章小結(jié) 為了增強Web的實用性，HTML5引入了許多新技術(shù)，對傳統(tǒng)HTML文檔進行了大幅度的修改，使得文檔結(jié)構(gòu)更加清晰明了、易讀，降低了學習難度，這樣既方便了瀏覽者的訪問，也提高了Web的開發(fā)速度。本章詳細介紹了HTML5中元素的分類，以及新增的主體元素、語義元素，并通過這兩大類元素設(shè)計一個綜合性強的網(wǎng)頁。第85頁第4章 HTML5表單本章概述 本章的學習目標主要內(nèi)

41、容第86頁本章概述表單在網(wǎng)頁設(shè)計中起到了數(shù)據(jù)采集的功能，即用戶輸入的信息主要通過表單來接收，然后提交到服務(wù)器。通過使用表單，可以采集訪問者的信息，如姓名、性別、年齡、職業(yè)、聯(lián)系方式等，也可以用作調(diào)查表、留言板等，從而從瀏覽器端獲取需要的信息。訪問者和后臺的交互主要通過單擊按鈕來實現(xiàn)，而與前臺的交互則通過輸入數(shù)據(jù)或選擇選項來實現(xiàn)。HTML5在表單方面增加了許多功能，如增加input輸入類型、表單元素、form屬性和input屬性等。這些屬性主要是在總結(jié)以往表單常用操作的基礎(chǔ)上提煉而來，以使前端設(shè)計人員的工作更加高效。第87頁本章的學習目標了解HTML5表單及新增的form屬性掌握新增的form元

42、素掌握新增的input類型掌握新增的input屬性熟悉表單驗證操作第88頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗證4.6 本章小結(jié)第89頁4.1 新增的form屬性4.1.1 autocomplete屬性4.1.2 novalidate屬性第90頁4.1.1 autocomplete屬性autocomplete屬性，可以指定on、off和空值（不指定）這3種值。在不進行指定時，使用瀏覽器的默認值。設(shè)置為on值時，可以顯式指定候補輸入的數(shù)據(jù)列表。使用datalist元素與list屬性提供候補輸入的數(shù)據(jù)列

43、表，在執(zhí)行自動完成時，可以將該datalist元素與list屬性提供候補輸入的數(shù)據(jù)列表（datalist元素將在后面介紹）。使用datalist元素與list屬性提供候補輸入的數(shù)據(jù)列表，在執(zhí)行自動完成時，可以將該datalist元素中的數(shù)據(jù)作為候補輸入的數(shù)據(jù)在文本框中自動顯示。autocomplete屬性的使用方法如下：第91頁4.1.2 novalidate屬性form元素的novalidate屬性用于在提交表單時取消整個表單的驗證，即關(guān)閉對表單內(nèi)所有元素的有效性檢查。如果要只取消表單中較少部分內(nèi)容的驗證而不妨礙提交大部分內(nèi)容，則可以將novalidate屬性單獨用于form中的這些元素。第

44、92頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗證4.6 本章小結(jié)第93頁4.2 新增的form元素 4.2.1 datalist元素4.2.2 keygen元素4.2.3 output元素第94頁4.2.1 datalist元素datalist元素用于為輸入框提供一個可選的列表，用戶可以直接選擇列表中的某一項預(yù)設(shè)的項，從而免去了輸入的麻煩。該列表由datalist中的option元素創(chuàng)建。如果用戶不希望從列表中選擇某項，也可以自行輸入其他內(nèi)容。在實際使用中，如果要把datalist提供的列表綁定到某輸入

45、框，則需要使用輸入框的list屬性來引用datalist元素的id。第95頁4.2.2 keygen元素keygen元素是密鑰對生成器，主要用于驗證。用戶提交表單時會生成兩個鍵，一個私鑰，一個公鑰。其中，私鑰存儲在客戶端，公鑰被發(fā)送到服務(wù)器。公鑰可用于驗證用戶的客戶端證書。第96頁4.2.3 output元素output元素主要用于顯示計算結(jié)果或腳本輸出。第97頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗證4.6 本章小結(jié)第98頁4.3 新增的input類型4.3.1 email類型4.3.2 url類型

46、4.3.3 number類型4.3.4 日期檢出器類型4.3.5 search類型4.3.6 tel類型4.3.7 color類型第99頁4.3.1 email類型email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，在提交表單的時候，會自動驗證email輸入框的值。如果不是一個有效的E-mail地址，則該輸入框不允許提交該表單。第100頁4.3.2 url類型url類型的input元素提供用于輸入url地址這類特殊文本的文本框。當提交表單時，如果所輸入的內(nèi)容是url地址格式的文本，則會提交數(shù)據(jù)到服務(wù)器，如果不是url地址格式的文本，則不允許提交。第101頁4.3.3

47、number類型number類型的input元素提供用于輸入數(shù)值的文本框。實際使用中，可以設(shè)定對所接受的數(shù)字進行限制，例如，規(guī)定允許的最大值和最小值、合法的數(shù)字間隔或默認值等。如果所輸入的數(shù)字不符合限制要求，則會出現(xiàn)錯誤提示。第102頁4.3.4 日期檢出器類型日期檢出器(Date Pickers)是網(wǎng)頁中經(jīng)常要用到的一種控件。HTML5提供了多個可用于選取日期和時間的輸入類型，即6種日期檢出器控件，分別用于選擇以下日期格式：日期、月、星期、時間、日期+時間和日期+時間+時區(qū)。輸入類型HTML代碼功能說明date選取日、月、年month選取月、年week選取周和年time選取時間，包括小時和分

48、鐘datetime選取時間、日、月、年（UTC時間）datetime-local選取時間、日、月、年（本地時間）第103頁4.3.5 search類型search類型是HTML5中專門用于搜索的。search類型的input元素提供用于輸入搜索關(guān)鍵詞的文本框。從外觀上看，search類型的input元素和普通的text元素只是稍微有區(qū)別。search類型提供的搜索框不只是Google或百度的搜索框，而是任意網(wǎng)頁中的任意一個搜索框。第104頁4.3.6 tel類型tel類型的input元素提供專門用于輸入電話號碼的文本框，它并不限定只輸入數(shù)字，因為很多的電話號碼還包括其他字符，如“+”、“-”、

49、“（）”、“）”等，比如086第105頁4.3.7 color類型color類型的input元素提供專門用于設(shè)置顏色的文本框。通過單擊文本框，可以快速打開調(diào)色器面板，方便用戶可視化選擇一種顏色。第106頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗證4.6 本章小結(jié)第107頁4.4 新增的input屬性4.4.41 form屬性4.4.2 formaction屬性4.4.3 formmethod屬性4.4.4 formenctype屬性4.4.5 formtarget屬性4.4.

50、6 autofocus屬性4.4.7 required屬性4.4.8 labels屬性4.4.9 control屬性第108頁4.4 新增的input屬性4.4.10 placeholder屬性4.4.11 list屬性4.4.12 文本框的pattern屬性4.4.13 selectionDirection屬性4.4.14 復(fù)選框的indeterminate屬性4.4.15 height屬性與width屬性4.4.16 maxlength屬性和wrap屬性第109頁4.4.1 form屬性HTML4中，表單內(nèi)的元素一定要放在表單之中，也就是把表單內(nèi)的元素嵌入標簽中，不得放到這標簽之外的其他地

51、方。HTML5打破了這個規(guī)定，從屬于表單的元素可以放在頁面的任何地方，只要在該元素內(nèi)指定form屬性的值為表單的名稱即可。第110頁4.4.2 formaction屬性在HTML4中，一個表單內(nèi)的所有元素只能通過表單的action屬性統(tǒng)一提交到另一個頁面，HTML5中可以為諸如、 、等的提交按鈕增加不同的formaction屬性，使得在單擊不同的按鈕時可以將表單提交到不同的頁面。第111頁4.4.3 formmethod屬性在HTML4中，一個表單內(nèi)只有一個action屬性，用來對表單內(nèi)所有元素統(tǒng)一指定提交頁面，所以每個表單內(nèi)也只有一個method屬性來統(tǒng)一指定提交方法。在HTML5中，可以使

52、用formmethod屬性來對每個表單元素分別指定不同的提交方法。第112頁4.4.4 formenctype屬性HTML4中，表單具有一個enctype屬性，用于指定表單發(fā)送到服務(wù)器之前應(yīng)該如何對表單內(nèi)容進行編碼。屬性值說明application/x-www-form-urlencoded在發(fā)送前編碼所有字符，當表單元素的action屬性值為get時，瀏覽器用x-www-form-urlencoded的編碼方式把表單數(shù)據(jù)轉(zhuǎn)換成一個字符串，形如?name=value1&name2=value2.然后把這個字符串添加到提交的目標URL地址之后，使其成為新目標URL的地址該屬性值為表單元素的enc

53、type屬性的默認屬性值multipart/form-data不對字符編碼。在使用包含文件上傳控件的元素使，表單的編碼方式必須是這個text/plain表單數(shù)據(jù)中的空格被轉(zhuǎn)換為加號，但不對表單數(shù)據(jù)中的特殊字符進行編碼第113頁4.4.5 formtarget屬性在HTML5中，可以對多個提交按鈕分別使用formtarget屬性來指定提交后在何處打開需要加載的頁面。例如： 提交到a1 提交到a2第114頁4.4.6 autofocus屬性為文本框、選擇框或按鈕控件加上autofocus屬性，當畫面打開時，該空間自動獲得光標焦點。目前要做到這一點要使用JavaScript，譬如control.fo

54、cus()。autofocus屬性的使用方法如下： 一個頁面上只能有一個控件具有autofocus屬性。第115頁4.4.7 required屬性HTML5中新增的required屬性可以應(yīng)用在大多數(shù)輸入用元素上。在提交時，如果元素中內(nèi)容為空白，則不允許提交，同時在瀏覽器中顯示信息提示文字，提示用戶必須輸入內(nèi)容。第116頁4.4.8 labels屬性在HTML5中，為所有可使用標簽的表單元素，包括非隱藏的input元素、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素，定義一個labels屬性，屬性值為一個No

55、deList對象，代碼該元素所綁定的標簽元素所構(gòu)成的集合。第117頁4.4.9 control屬性在HTML5中，可以在標簽內(nèi)部放置一個表單元素，并且通過該標簽的control屬性來訪問該表單元素。第118頁4.4.10 placeholder屬性placeholder是指當文本框處于未輸入狀態(tài)時顯示的輸入提示。使用方法如下：第119頁4.4.11 list屬性在HTML5中，為單行文本框增加了一個list屬性，該屬性的值來源于某個datalist元素。datalist元素在前面已經(jīng)介紹，這個元素類似于選擇框select元素，但是當用戶想要設(shè)置的值不在列表內(nèi)時，允許用戶自行輸入。datalis

56、t元素本身并不顯示，而是當文本框獲得焦點時以提示輸入的方式顯示。為了避免在沒有支持該元素的瀏覽器上出現(xiàn)顯示錯誤，可以用CSS將其設(shè)置為不顯示。第120頁4.4.12 文本框的pattern屬性在HTML5中，對input元素使用pattern屬性，并且將屬性值設(shè)置為某個格式的正則表達式時，在提交時會對這些進行檢查，檢查其內(nèi)容是否符合給定格式。當輸入的內(nèi)容不符合給定格式時，則不允許提交，同時在瀏覽器中顯示信息提示文字，提示輸入的內(nèi)容必須符合給定格式。第121頁4.4.13 selectionDirection屬性針對input元素與textarea元素，HTML5增加了selectionDire

57、ction屬性。當用戶在這兩個元素中庸鼠標選取部分文字時，可以使用該屬性來獲取選取方向。當正向選取文字時，該屬性值為forward，當反方向選取文字時，屬性值為backward。當沒有選取任何文字時，屬性默認為forward。第122頁4.4.14 復(fù)選框的indeterminate屬性對復(fù)選框checkbox來說，過去只有選中和未選中兩種狀態(tài)。在HTML5中，可以在JavaScript代碼中對該元素使用indeterminate屬性，以說明復(fù)選框處于“尚未明確是否選取”的狀態(tài)。第123頁4.4.15 height屬性與width屬性針對類型為image的input元素，HTML5新增了兩個屬

58、性：height和width。height用于指定圖片按鈕中圖片的高度；width用于指定圖片按鈕中圖片的寬度。第124頁4.4.16 maxlength屬性和wrap屬性HTML5為textarea元素新增了maxlength屬性和wrap屬性。maxlength屬性：使用整型數(shù)值進行設(shè)置，用于限定textarea元素中可以輸入的文字的個數(shù)。wrap屬性：可指定屬性值為soft和hard。當屬性值為hard時，如果向textarea元素中輸入的文字個數(shù)超出使用textarea元素的cols屬性所限定的每行中可現(xiàn)實文字個數(shù)而導致文字換行時，提交表單時會在換行處加入一個換行標志。當屬性值為sof

59、t時不加換行標志。當設(shè)定wrap屬性值為hard時，必須指定cols屬性值。第125頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗證4.6 本章小結(jié)第126頁4.5 表單驗證4.5.1 自動驗證4.5.2 取消驗證4.5.3 顯式驗證第127頁4.5.1 自動驗證在HTML5中，通過對元素使用屬性的方法，可以實現(xiàn)在表單提交時執(zhí)行的自動驗證功能。例如以下的例子，在表單提交時自動驗證輸入的內(nèi)容是否為數(shù)字，如果不是數(shù)字，就會顯示錯誤提示。第128頁4.5.2 取消驗證有兩種方法可以取消表單驗證：第一種方法是利用f

60、orm元素的novalidate屬性來關(guān)閉整個表單驗證。第二種方法是，利用input元素或submit元素的formnovalidate屬性，利用input元素的formnovalidate屬性可以讓表單驗證對單個input元素失效。第129頁4.5.3 顯式驗證除了對input元素添加屬性進行元素內(nèi)容有效性的自動驗證外，在HTML5中，form元素和input元素都具有一個checkValidity方法。調(diào)用該方法，可以顯式地對表單內(nèi)所有元素內(nèi)容或單個元素內(nèi)容進行有效性驗證。checkValidity方法將驗證結(jié)果用boolean的形式返回。第130頁主要內(nèi)容4.1 新增的form屬性4.2