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

1、第1頁第1章 Web開發(fā)新時(shí)代本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述 2010年HTML5推出以來，受到了各大瀏覽器廠商的支持和廣大開發(fā)人員的喜愛。2010年，微軟IE9預(yù)覽版在MIX10大會(huì)首次公開亮相，工程師在介紹時(shí)，從前端結(jié)束將Web發(fā)展氛圍三個(gè)階段：第一個(gè)階段為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標(biāo)準(zhǔn)規(guī)范終于最終制定完成并公開發(fā)布。這宣告了Web

2、發(fā)展正式進(jìn)入第三個(gè)階段。第3頁本章的學(xué)習(xí)目標(biāo)了解什么是HTML5，HTML5和之前版本的HTML有哪些區(qū)別；了解世界各大知名瀏覽器目前的發(fā)展策略，為什么它們都不約而同地把支持HTML5當(dāng)成目前的工作重點(diǎn)；了解為什么開發(fā)者今后可以大膽地使用HTML5進(jìn)行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è)計(jì)原理 1.3 編寫第一個(gè)HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第5頁1.1 HTML5概述1.1.1 HTML5的目標(biāo)1.1.2 HT

3、ML5新特性1.1.3 HTML5深受歡迎的理由1.1.4 HTML5構(gòu)成第6頁1.1.1 HTML5的目標(biāo) HTML5的目標(biāo)是為了創(chuàng)建更簡單的Web程序，書寫出更簡潔的HTML代碼。例如，為了使Web應(yīng)用程序的開發(fā)變得更容易，提供了很多API；為了使HTML變得更簡潔，開發(fā)出了新的屬性，新的元素，等等。第7頁1.1.2 HTML5新特性兼容性合理性效率安全性分離簡化通用型無插件第8頁1.1.3 HTML5深受歡迎的理由世界知名瀏覽器廠商對HTML5的支持時(shí)代的要求第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è)計(jì)原理 1.3 編寫第一個(gè)HTML5頁面 1.4 HTML5頁面的特征 1.5 本章小結(jié)第11頁1.2 HTML5設(shè)計(jì)原理 1.2.1 HTML變遷1.2.2

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

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

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

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ù)不受任何影響。例如，對于表對象來說，在表中增加一個(gè)新列、刪除一個(gè)列等操作都屬于對表結(jié)構(gòu)的更改。在圖3-4所示的示例中，使用ALTER語句在ContactDetail表中增加一個(gè)productName列，該列用于存儲(chǔ)合同明細(xì)中的產(chǎn)品名稱。然后，使用SELECT語句查看ContactDetail表更改后的結(jié)果，這時(shí)

9、ContactDetail表有6個(gè)列組成。第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表，這時(shí)該表依然存在；然后使用DROP語句刪除該表，當(dāng)再次使用SELECT語句查看該表時(shí)，發(fā)現(xiàn)該表已經(jīng)不存在了，出現(xiàn)了

10、208號(hào)對象名無效的錯(cuò)誤消息。 第19頁主要內(nèi)容1.1 HTML5概述 1.2 HTML5設(shè)計(jì)原理 1.3 編寫第一個(gè)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)，如果使用一些帶有語義性的標(biāo)記，可以加快瀏覽器解釋頁面中元素的速度，如早期的、元素；HTML5繼承了這些元素，并根據(jù)用戶使用最為頻繁的類名稱和ID 號(hào)不斷開發(fā)新的標(biāo)記，因?yàn)檫@些標(biāo)記能真正體現(xiàn)開發(fā)者真實(shí)意圖所在。下面通過實(shí)例說明HTML5是

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

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

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

14、L5與以往版本的不同，以及HTML5和HTML4之間的區(qū)別。第27頁本章的學(xué)習(xí)目標(biāo)了解H TML語言的作用、結(jié)構(gòu)和語法了解XHTML和XML的關(guān)系，及XHTML的語法特點(diǎn)掌握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的縮寫，中文翻譯為超文本標(biāo)識(shí)語言。使用HTML標(biāo)簽編寫的文檔稱為HTML文檔，目前最新版本為HTML 5.0，這是目前使用得最廣泛的版本。HTML 4.01已逐步淘汰。第31頁2.1.2 HTML結(jié)構(gòu) HTML文檔一般都應(yīng)包含兩個(gè)部分：頭部區(qū)域和主體區(qū)域。HTML文檔基本結(jié)構(gòu)由3個(gè)標(biāo)簽負(fù)責(zé)組織：、和。其中標(biāo)簽標(biāo)識(shí)HTML文檔,標(biāo)簽標(biāo)識(shí)頭部區(qū)域，而標(biāo)簽標(biāo)識(shí)主題區(qū)域。第32頁2.1.3 HTML語法所有標(biāo)簽都包含在“”起止標(biāo)識(shí)符中，構(gòu)成一個(gè)標(biāo)簽如、和等。絕大多數(shù)元素都有起始標(biāo)簽和結(jié)束標(biāo)簽。起始標(biāo)簽包含元素的名稱以及可選屬性。元素的

16、屬性包含屬性名稱和屬性值兩部分，中間通過等號(hào)進(jìn)行連接，多個(gè)屬性之間通過空格進(jìn)行分隔。少數(shù)元素的屬性也可能不包含屬性值，僅包含一個(gè)屬性名稱。一般屬性值應(yīng)該包含在引號(hào)內(nèi)。屬性是可選的。標(biāo)簽可以相互嵌套。HTML文檔所有信息必須包含在標(biāo)簽中，所有元素的元信息應(yīng)包含在子標(biāo)簽中，而HTML傳遞信息和網(wǎng)頁顯示內(nèi)容應(yīng)包含在子標(biāo)簽中。第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自動(dòng)生成的一個(gè)標(biāo)準(zhǔn)XHTML頁面模板文件，包含以下代碼：第36頁2.2.2 XHTML語法在文檔的開頭必須定義文檔類型。在根元素中應(yīng)聲明命名空間，即設(shè)置xmlns屬性。所有標(biāo)簽都必須是閉合的。所有元素和屬性都必須小寫。所有的屬性必須用引號(hào)括起來。所有標(biāo)簽都必須合理嵌套。所有屬性都必須被賦值，沒有值的屬性就用自身來賦值。XHTML規(guī)范廢除了name屬性，而使用id屬性作為統(tǒng)一的名稱。第37頁2.2.3 XHTML類型XHTML文檔類型有3種：STRICT（嚴(yán)格類型）、TRANSITIONAL（過渡類型）、FR

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

19、空間，可以避免自己定義的標(biāo)簽和別人定義的標(biāo)簽發(fā)生沖突。比如，如果兩個(gè)人定義了一個(gè)一模一樣的文檔，若文件頭部沒有xmlns命名空間的區(qū)分，就會(huì)發(fā)生沖突，如果在文檔頭部加上了不同的命名空間，則文檔不會(huì)沖突。通俗地講，命名空間就是給文檔做一個(gè)標(biāo)簽，標(biāo)明該文檔是屬于哪個(gè)網(wǎng)站的。對于HTML文檔來說，由于它的元素是固定的，不允許用戶進(jìn)行定義，所以指定的命名空間永遠(yuǎn)是/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的文件擴(kuò)展名仍然是.html或者.htm，內(nèi)容類型仍然為text/html。HTML5的文檔類型聲明為：。在HTML5中，使用charset屬性來指定字符編碼，例如：。HTML5力圖兼容舊版本的語法。省略引號(hào)。第43頁2.3.2 HTML5元素HTML5中引入了新標(biāo)記元素被分成七大類，如表所示。標(biāo)記類型說明內(nèi)嵌在文檔中添加其他類型的內(nèi)容，如audio、video、canvas和iframe等流在文檔和應(yīng)用的body中使用的元素，如form、h1和small等標(biāo)題段落標(biāo)題，如h1、h2和hgroup等交互與用戶交互的內(nèi)容，如音頻和視

21、頻的控件、button和textarea等元數(shù)據(jù)通常出現(xiàn)在頁面的head中，設(shè)置頁面其他部分的表現(xiàn)和行為，如script、style和title等短語文本和文本標(biāo)記元素，如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元素?fù)碛?，以指定屬性的方式讓元素在畫面打開時(shí)自動(dòng)獲得焦點(diǎn)placeholderinput、textarea元素?fù)碛?，提示用戶可以輸入的?nèi)容forminput、output、select、textarea、button與fieldset擁有，聲明這些控件屬于哪個(gè)表單，然后放置在頁面上的任何位置，而不是表單之內(nèi)required表示必填項(xiàng)autocomplete、min、max、multiple、pattern、step為input元素新增的屬性。datalist元素和autocomplete屬性配合使用。multiple允許在上傳文件時(shí)

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

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

25、L，在這個(gè)URL上描述文檔的緩存信息sandboxseamlesssrcdoc為iframe元素增加的屬性，用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作第50頁2.4.2 廢除的屬性HTML5廢除了HTML4中過時(shí)的屬性，而采用其他屬性或其他方案進(jìn)行替代（詳見課文）第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是一個(gè)布爾值屬性，可以被指定為true或false。此外，該屬性還有個(gè)隱藏的inherit狀態(tài)，屬性值為true時(shí)，元素被指定為允許編輯；屬性值為false時(shí)，元素被指定為不可編輯；未指定true和false時(shí)，則由inherit狀態(tài)來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。第54頁2.5.2 designMode屬性 designMode屬性用來指定整個(gè)頁面是否可編輯，當(dāng)頁面可編輯時(shí)

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

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

29、面中的所有控件進(jìn)行遍歷的時(shí)候，每一個(gè)控件的tabindex表示該控件是第幾個(gè)被訪問到的。第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進(jìn)行了深入介紹，方便讀者對H

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

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

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

33、ide,figure,code,dialog。行內(nèi)語義性元素：meter,time,progress,video,audio。交互性元素：details,datagrid,menu,command。第69頁主要內(nèi)容3.1 認(rèn)識(shí)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 標(biāo)識(shí)文章：article元素3.3.2 給內(nèi)容分段：section元素3.3.3 設(shè)計(jì)導(dǎo)航信息：nav元素3.3.4 設(shè)計(jì)輔助信息：aside元素3.3.5 設(shè)計(jì)微格式：time元素3.3.6 添加發(fā)布日期：pubdate屬性第7

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

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

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

37、中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。第75頁3.3.5 設(shè)計(jì)微格式：time元素微格式是一種利用HTML的class屬性來對網(wǎng)頁添加附加信息的方法。附加信息如新聞事件的發(fā)生日期和時(shí)間、個(gè)人電話號(hào)碼、企業(yè)郵箱等。第76頁3.3.6 添加發(fā)布日期：pubdate屬性pubdate屬性是可選的、布爾值的屬性。它可以用到time元素上，表示文章或整個(gè)網(wǎng)頁的發(fā)布日期。比如：2017年05月11日需要注意的是，time元素不能直接代表發(fā)布日期，只有增加了pubdate屬性才代表發(fā)布的日期。第77頁主要內(nèi)容3.1 認(rèn)識(shí)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 添加標(biāo)題塊：header元素3.4.2 給標(biāo)題分組：hgroup元素3.4.3 添加腳注塊：footer元素3.4.4 添加聯(lián)系信息：address元素第79頁3.4.1 添加標(biāo)題塊：header元素header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個(gè)頁面或頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片，因此整個(gè)頁面的標(biāo)題應(yīng)該放在頁面的開頭。例如：頁面標(biāo)題第80頁3.4.2 給標(biāo)題分組：hgroup元素hgroup元素可以為標(biāo)題或者子標(biāo)題進(jìn)行分組，通常與h1h6元

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

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

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

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

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

44、92頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗(yàn)證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元素用于為輸入框提供一個(gè)可選的列表，用戶可以直接選擇列表中的某一項(xiàng)預(yù)設(shè)的項(xiàng)，從而免去了輸入的麻煩。該列表由datalist中的option元素創(chuàng)建。如果用戶不希望從列表中選擇某項(xiàng)，也可以自行輸入其他內(nèi)容。在實(shí)際使用中，如果要把datalist提供的列表綁定到某輸入

45、框，則需要使用輸入框的list屬性來引用datalist元素的id。第95頁4.2.2 keygen元素keygen元素是密鑰對生成器，主要用于驗(yàn)證。用戶提交表單時(shí)會(huì)生成兩個(gè)鍵，一個(gè)私鑰，一個(gè)公鑰。其中，私鑰存儲(chǔ)在客戶端，公鑰被發(fā)送到服務(wù)器。公鑰可用于驗(yàn)證用戶的客戶端證書。第96頁4.2.3 output元素output元素主要用于顯示計(jì)算結(jié)果或腳本輸出。第97頁主要內(nèi)容4.1 新增的form屬性4.2 新增的form元素 4.3 新增的input類型4.4 新增的input屬性4.5 表單驗(yàn)證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地址的文本輸入框，在提交表單的時(shí)候，會(huì)自動(dòng)驗(yàn)證email輸入框的值。如果不是一個(gè)有效的E-mail地址，則該輸入框不允許提交該表單。第100頁4.3.2 url類型url類型的input元素提供用于輸入url地址這類特殊文本的文本框。當(dāng)提交表單時(shí)，如果所輸入的內(nèi)容是url地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器，如果不是url地址格式的文本，則不允許提交。第101頁4.3.3

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

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

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 表單驗(yàn)證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)的元素嵌入標(biāo)簽中，不得放到這標(biāo)簽之外的其他地

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

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

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

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

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

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

57、ction屬性。當(dāng)用戶在這兩個(gè)元素中庸鼠標(biāo)選取部分文字時(shí)，可以使用該屬性來獲取選取方向。當(dāng)正向選取文字時(shí)，該屬性值為forward，當(dāng)反方向選取文字時(shí)，屬性值為backward。當(dāng)沒有選取任何文字時(shí)，屬性默認(rèn)為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新增了兩個(gè)屬

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

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

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