1、本章要求本章要求：第第2 2章章 HTML5HTML5的元素與屬性的元素與屬性uHTML5與HTML4的語法區(qū)別；uHTML5中的新增元素uHTML5中廢除的HTML4元素uHTML5中替代HTML4的元素uHTML5中的新增屬性uHTML5中廢除的HTML4屬性uHTML5的全局屬性主要內(nèi)容主要內(nèi)容1.HTML5的語法變化2.新增的元素和廢除的元素3.新增的屬性和廢除的屬性4.全局屬性5.綜合實例檢查單詞的拼寫情況第第2 2章章 HTML5HTML5的元素與屬性的元素與屬性2.1.1 HTML5中的標(biāo)記方法2.1.2 HTML5與之前版本的不同2.1 HTML52.1 HTML5的語法變化的

2、語法變化首先，看一下在HTML5中的標(biāo)記方法。p內(nèi)容類型（ContentType）HTML5文件的擴(kuò)展名和內(nèi)容類型（ContentType）沒有發(fā)生變化。即擴(kuò)展名為“.html”或“.htm”，內(nèi)容類型（ContentType）為“.text/html”。pDOCTYPE聲明DOCTYPE聲明的HTML文件中不可缺少的。不區(qū)分大小寫。Web瀏覽器通過判斷文件開頭有沒有這個聲明，讓解析器和渲染類型切換成對應(yīng)HTML5的模式。 另外，當(dāng)使用工具時，也可以在DOCTYPE聲明方式中加入SYSTEM標(biāo)識。（不區(qū)分大小寫。此外還可將雙引號換為單引號來使用），聲明方法如下面的代碼： p字符編碼的設(shè)置字符編

3、碼的設(shè)置方法也有些新的變化。以前，設(shè)置HTML文件的字符編碼時，要用到如下元素，如下所示： 在HTML5中，可以使用元素的新屬性charset來設(shè)置字符編碼。 以上兩種方法都有效。因此也可以繼續(xù)使用前者的方法（通過content元素的屬性來設(shè)置）。但要注意不能同時使用。如下所示：注意：從HTML5開始，文件的字符編碼推薦使用UTF-8。2.1.1 HTML52.1.1 HTML5中的標(biāo)記方法中的標(biāo)記方法 HTML5的語法與之前HTML語法在某種程度上達(dá)到了一定的兼容性。例如，有時可以看見“沒有結(jié)束標(biāo)簽”等HTML現(xiàn)象。HTML5不將這些視為錯誤，而是“允許這些現(xiàn)象存在，并明確記錄在規(guī)范中”的方

4、法。那么下面就來看看具體的HTML5語法。p可以省略標(biāo)簽的元素在HTML5中，元素可以省略標(biāo)簽。具體來講有3種情況，具體如下：不允許寫結(jié)束標(biāo)記的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 不允許寫結(jié)束標(biāo)記的元素是指不允許使用開始標(biāo)記與結(jié)束標(biāo)記將元素括起來的的形式，只允許使用“”的形式進(jìn)行書寫。例如： “”的寫法是錯誤的。正確寫法為“”。當(dāng)然，在HTML5以前版本中“”這種寫法也是允許的。l可以省略結(jié)束標(biāo)簽 li、dt、dd、p、rt、rp、optgroup、opt

5、ion、colgroup、thead、tbody、tfoot、tr、td、thl可以省略整個標(biāo)簽（即連開始標(biāo)簽都不用寫明） html、head、body、colgroup、tbody需要注意的是，雖然這些元素可以省略，但實際上卻是隱式存在的。例如： “”標(biāo)簽可以省略，但在DOM樹上它是存在的，可以永恒訪問到“document.body”。上述列表中也包括了HTML5的新元素。有關(guān)這些新元素的用法，將在后面的章節(jié)中詳細(xì)講解。2.1.2 HTML52.1.2 HTML5與之前版本的不同與之前版本的不同p擁有boolean值的屬性 擁有布爾值（Boolean）的屬性，例如disabled和reado

6、nly等，通過省略屬性的值來表達(dá)值為“true”。如果要表達(dá)值為“false”，則直接省略屬性本身即可。此外，當(dāng)寫明屬性值來表達(dá)值為“true”時，可以將屬性名設(shè)定為屬性值，也可以將屬性值設(shè)為空字符串。如下列所示： p省略屬性的引用符設(shè)置屬性值時，可以使用雙引號或單引號來引用。HTML5將進(jìn)一步進(jìn)行改進(jìn)，只要屬性值不包含空字符串、單引號、雙引號、“”、“”、“”、“”、“=”等字符，都可以省略屬性的引用符。如下例所示。 2.2 2.2 新增的元素和廢除的元素新增的元素和廢除的元素2.2.1 新增的結(jié)構(gòu)元素2.2.2 新增的行內(nèi)（inline）語義元素2.2.3 新增的塊級（block）語義元素

7、2.2.4 新增的input元素的類型2.2.5 新增的多媒體元素與交互性元素2.2.6 廢除的元素在HTML5中，新增了以下與結(jié)構(gòu)相關(guān)的元素：psection元素section元素頁面或應(yīng)用程序中的一個區(qū)塊,比如章節(jié)、頁眉、頁腳或文檔中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合起來使用，標(biāo)示文檔結(jié)構(gòu)。HTML5中代碼示例：HTML4中代碼示例：particle元素article元素表示頁面中的一塊獨立的內(nèi)容，如博客中的一篇文章或報紙中的一篇文章。HTML5中代碼示例：HTML4中代碼示例：pheader元素header元素表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題。HTML

8、5中代碼示例：HTML4中代碼示例：2.2.1 2.2.1 新增的結(jié)構(gòu)元素新增的結(jié)構(gòu)元素pnav元素nav元素表示導(dǎo)航鏈接的部分。HTML5中代碼示例： HTML4中代碼示例：pfooter元素footer元素表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。一般來說，它會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)建者聯(lián)系信息。HTML5中代碼示例：HTML4中代碼示例：pnav元素nav元素表示頁面中導(dǎo)航條鏈接的一部分。HTML5中代碼示例：HTML4中代碼示例：在HTML5中，新增了以下與行內(nèi)的語義相關(guān)的元素：pmark元素mark元素主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素的

9、一個比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。HTML5中代碼示例：HTML4中代碼示例：ptime元素time元素表示日期或時間，也可以同時表示兩者。HTML5中代碼示例: HTML4中代碼示例:pmeter元素meter元素表示度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。HTML5中代碼示例：pprogress元素progress元素表示運(yùn)行中的進(jìn)程?？梢允褂?progress元素來顯示 JavaScript 中耗費(fèi)時間的函數(shù)的進(jìn)程。HTML5中代碼示例：2.2.2 2.2.2 新增的行內(nèi)（新增的行內(nèi)（

10、inlineinline）語義元素）語義元素在HTML5中，新增了以下與塊級的語義相關(guān)的元素：paside元素aside元素表示article元素的內(nèi)容之外的與article元素的內(nèi)容相關(guān)的有關(guān)內(nèi)容。 HTML5中代碼示例：HTML4中代碼示例：pfigure元素figure元素表示一段獨立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個獨立單元。使用 元素為figure元素組添加標(biāo)題。HTML5中代碼示例：fruitThe person have an apple.HTML4中代碼示例： fruit The person have an apple.pdialog元素dialog標(biāo)簽定義對話，比如交

11、談。注意：對話中的每個句子都必須屬于 標(biāo)簽所定義的部分。2.2.3 2.2.3 新增的塊級（新增的塊級（blockblock）語義元素）語義元素HTML5中，新增了許多input元素的類型，列舉如下：pemailemail類型需要輸入E-mail 地址的輸入框。purlurl 類型需要輸入 URL 地址的輸入框。pnumbernumber 類型表示需要輸入數(shù)值的輸入框。prangerange 類型表示需要輸入一定范圍內(nèi)數(shù)字值的輸入框。pDate Pickers（數(shù)據(jù)檢出器）HTML5擁有多個可供選擇日期與時間的新型輸入框：date - 選取日、月、年month - 選取月、年week - 選取

12、周和年time - 選取時間（小時和分鐘）datetime - 選取時間、日、月、年（UTC 時間）datetime-local - 選取時間、日、月、年（本地時間）psearchsearch 類型用于搜索域，比如站點搜索或 Google 搜索。search 域顯示為常規(guī)的文本域。2.2.4 2.2.4 新增的新增的inputinput元素的類型元素的類型 新增video和audio元素，顧名思義，分別是用來插入視頻和聲音的。值得注意的是可以在開始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣舊瀏覽器就可以顯示出不支持該標(biāo)簽的信息。例如下面代碼：您的瀏覽器不支持 video 標(biāo)簽。HTML 5同時也叫W

13、eb Applications 1.0，因此也進(jìn)一步發(fā)展交互能力，這些標(biāo)簽就是為提高頁面的交互體驗而生。pdetails元素 details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見的，用戶點擊標(biāo)題時，會顯示出details。summary元素應(yīng)該是details元素的第一個子元素。HTML5中代碼示例：HTML 5How to learn about HTML 5.?pdatagrid元素datagrid元素表示可選數(shù)據(jù)的列表。datagrid 作為樹形列表來顯示。HTML5中代碼示例：pmenu元素menu元

14、素表示菜單列表。當(dāng)希望列出表單控件時使用該標(biāo)簽。HTML5中代碼示例： black green2.2.5 2.2.5 新增的多媒體元素與交互性元素新增的多媒體元素與交互性元素由于各種原因，在HTML5中廢除了很多元素，下面簡單介紹一下被廢除的元素。1可以使用css代替的元素 對于basefont、big、center、font、s、strike、tt、u這些元素，由于它們的功能都是純粹為畫面展示服務(wù)的，而在HTML5中提倡把畫面展示性功能放在css樣式表中統(tǒng)一編輯，所以將這些元素廢除，并使用編輯css樣式表的方式進(jìn)行替代。2不可以使用frame框架 對于frameset元素、frame元素與n

15、ofranes元素，由于frame框架對頁面可以性存在負(fù)面影響，在html5中已不再支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的復(fù)合頁面的形式，同時將以上三個元素廢除。3只有部分瀏覽器支持的元素 對于applet、bgsound、blink、marguee等元素，由于只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer支持，所以在HTML5中被廢除。其中applet元素可由embed元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript編程的方式所替代。2.2

16、.6 2.2.6 廢除的元素廢除的元素2.3 2.3 新增的屬性和廢除的屬性新增的屬性和廢除的屬性2.3.1 新增的屬性2.3.2 廢除的屬性1表單相關(guān)的屬性新增的與表單相關(guān)的元素如下：pautocomplete 屬性autocomplete屬性規(guī)定form或input域應(yīng)該擁有自動完成功能。注釋autocomplete 適用于 標(biāo)簽，以及以下類型的 標(biāo)簽：text, search, url, telephone, email, password, datepickers, range 以及 color。pautofocus 屬性autofocus 屬性規(guī)定在頁面加載時，域自動地獲得焦點。注釋

17、autofocus 屬性適用于所有 標(biāo)簽的類型。pform 屬性form 屬性規(guī)定輸入域所屬的一個或多個表單。注釋form 屬性適用于所有 標(biāo)簽的類型。2.3.1 2.3.1 新增的屬性新增的屬性p表單重寫屬性表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設(shè)定。表單重寫屬性有：lformaction - 重寫表單的 action 屬性 lformenctype - 重寫表單的 enctype 屬性 lformmethod - 重寫表單的 method 屬性 lformnovalidate - 重寫表單的 novalidate 屬性 lfor

18、mtarget - 重寫表單的 target 屬性 注釋表單重寫屬性適用于以下類型的 標(biāo)簽：submit 和 image。pheight 和 width 屬性height 和 width 屬性規(guī)定用于 image 類型的 input 標(biāo)簽的圖像高度和寬度。注釋height 和 width 屬性只適用于 image 類型的 標(biāo)簽。plist 屬性list 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表。注釋list 屬性適用于以下類型的 標(biāo)簽：text, search, url, telephone, email, date pickers, number, range

19、 以及 color。pmin、max 和 step 屬性min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）。max 屬性規(guī)定輸入域所允許的最大值。min 屬性規(guī)定輸入域所允許的最小值。step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step=3，則合法的數(shù)是 -3,0,3,6 等）。注釋min、max 和 step 屬性適用于以下類型的 標(biāo)簽：date pickers、number 以及 range。pmultiple 屬性multiple 屬性規(guī)定輸入域中可選擇多個值。注釋multiple 屬性適用于以下類型的 標(biāo)簽：email 和 filepnova

20、lidate 屬性novalidate 屬性規(guī)定在提交表單時不應(yīng)該驗證 form 或 input 域。注釋novalidate 屬性適用于 以及以下類型的 標(biāo)簽：text, search, url, telephone, email, password, date pickers, range 以及 color.ppattern 屬性pattern 屬性規(guī)定用于驗證 input 域的模式（pattern）。模式（pattern） 是正則表達(dá)式。您可以在我們的 JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達(dá)式的內(nèi)容。注釋pattern 屬性適用于以下類型的 標(biāo)簽：text, search, ur

21、l, telephone, email 以及 password。pplaceholder 屬性placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。注釋placeholder 屬性適用于以下類型的 標(biāo)簽：text, search, url, telephone, email 以及 password。prequired 屬性required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。注釋required 屬性適用于以下類型的 標(biāo)簽：text, search, url, telephone, email, password, date pickers, number, c

22、heckbox, radio 以及 file。2鏈接相關(guān)屬性新增的與鏈接相關(guān)的屬性如下：pmedia屬性為a與area元素增加了media屬性，該屬性規(guī)定目標(biāo)URL是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的。只能在 href 屬性存在時使用。phreflang屬性與rel屬性為area元素增加了hreflang屬性與rel屬性，以保持與a元素，link元素的一致。pSizes屬性為link元素增加了新屬性sizes。該屬性可以與icon元素結(jié)合使用（通過rel屬性），該屬性指定關(guān)聯(lián)圖標(biāo)（icon元素）的大小。ptarget屬性為base元素增加了target屬性，主要目的是保持與a元素的一致性，同時t

23、arget元素由于在Web應(yīng)用程序中，尤其是在與iframe結(jié)合使用時，是非常有用的，所以不再是不贊成使用的元素了。3其他屬性除了上面介紹的與表單和鏈接相關(guān)的屬性外，HTML5還增加了下面的屬性：preversed屬性為ol元素增加屬性reversed，它指定列表倒序顯示。li元素的value屬性與ol元素的start屬性因為它不是被顯示在界面上的，所以不再是不贊成使用的了。 pcharset屬性為meta元素增加charset屬性，因為這個屬性已經(jīng)被廣泛支持了，而且為文檔的字符編碼的指定提供了一種比較良好的方式。 ptype屬性與label屬性為menu元素增加了兩個新的屬性type與lab

24、el。label屬性為菜單定義一個可見的標(biāo)注，type屬性讓菜單可以以上下文菜單，工具條，與列表菜單三種形式出現(xiàn)。 pscoped屬性為style元素增加scoped屬性，用來規(guī)定樣式的作用范圍，譬如只對頁面上某個樹起作用。pmanifest屬性為html元素增加屬性manifest，開發(fā)離線Web應(yīng)用程序時他與API結(jié)合使用，定義一個 URL，在這個 URL 上描述文檔的緩存信息。 為iframe元素增加三個屬性sandbox,seamless與srcdoc,用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作。 HTML4中的一些屬性在HTML5中不再被使用，而是采用其他屬性或其他方案進(jìn)

25、行替換，具體如表所示。表2.1 在HTML5中被廢除了的屬性2.3.2 2.3.2 廢除的屬性廢除的屬性在HTML4中使用的屬性使用該屬性的元素在HTML5中的替代方案revlink、arelcharsetlink、a在被鏈接的資源的中使用HTTP Content-type頭元素shape、coordsa使用area元素代替a元素longdescimg、iframe使用a元素鏈接到較長描述targetlink多余屬性，被省略nohrefarea多余屬性，被省略profilehead多余屬性，被省略versionhtml多余屬性，被省略nameimgidschememeta只為某個表單域使用sc

26、hemearchive、classid、codebase、codetype、declare、standbyobject使用data與type屬性類調(diào)用插件。需要使用這些屬性來設(shè)置參數(shù)時，使用param屬性valuetype、typeparam使用name與value屬性，不聲明值的mime類型axis、abbrtd、th使用以明確簡潔的文字開頭、后跟詳述文字的形式?？梢詫Ω敿?xì)內(nèi)容使用title屬性，來使單元格的內(nèi)容變得簡短scopetd在被鏈接的資源的中使用HTTP content-type頭元素aligncaption、input、legend、div、h1、h2、h3、h4、h5、h6、

27、p使用CSS樣式表替代alink、link、text、vlink、background、bgcolorbody使用CSS樣式表替代align、bgcolor、border、c e l l p a d d i n g 、cellspacing、frame、rules、widthtable使用CSS樣式表替代align、char、charoff、height、nowrap、valigntbody、thead、tfoot使用CSS樣式表替代align、bgcolor、char、charoff、height、nowrap、valign、widthtd、th使用CSS樣式表替代align、bgcolor

28、、char、charoff、valigntr使用CSS樣式表替代align、char、charoff、valign、widthcol、colgroup使用CSS樣式表替代align、border、hspace、vspaceobject使用CSS樣式表替代clearbr使用CSS樣式表替代compact、typeol、ul、li使用CSS樣式表替代compactdl使用CSS樣式表替代compactmenu使用CSS樣式表替代widthpre使用CSS樣式表替代align、hspace、vspaceimg使用CSS樣式表替代align、noshade、size、widthhr使用CSS樣式表替代

29、align、frameborder、s c r o l l i n g 、marginwidthiframe使用CSS樣式表替代autosubmitmenu2.4 2.4 全局屬性全局屬性2.4.1 designMode屬性2.4.2 hidden屬性2.4.3 contentEditable屬性2.4.4 tabindex屬性2.4.5 spellcheck屬性 designMode屬性用來指定整個頁面是否可編輯，當(dāng)頁面可編輯時，頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性只能在JavaScript腳本里被編輯修改。該屬性有兩個

30、值“on”與“off”。當(dāng)屬性被指定為“on”時，頁面可編輯；被指定為“off”時，頁面不可編輯。使用JavaScript腳本來指定designMode屬性的方法如下所示：document.designMode=”on”。注意： 出于安全考慮，IE8不允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。IE9允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。Firefox和Opera允許使用designMode屬性讓頁面進(jìn)入編輯狀態(tài)。2.4.1 designMode2.4.1 designMode屬性屬性 hidden屬性類似于input元素中的hidden元素，它告訴瀏覽器這個元素的內(nèi)容不

31、應(yīng)該以任何方式顯示。但是元素中的內(nèi)容還是瀏覽器創(chuàng)建的，也就是說頁面裝載后允許使用JavaScript腳本將該屬性取消，取消后該元素變?yōu)榭梢姞顟B(tài)，同時元素中的內(nèi)容也即時顯示出來。Hidden屬性是一個布爾值的屬性，當(dāng)設(shè)為true時，元素處于不可見狀態(tài)；當(dāng)設(shè)為false時，元素處于可見狀態(tài)。2.4.2 hidden2.4.2 hidden屬性屬性 由微軟開發(fā)，經(jīng)過反向工程后由所有其他的瀏覽器實現(xiàn)，contentEditable現(xiàn)在成為HTML的正式的部分。 該屬性的主要功能是允許用戶編輯元素中的內(nèi)容，所以該元素必須是可以獲得鼠標(biāo)焦點的元素，而且在點擊鼠標(biāo)后要向用戶提供一個插入符號，提示用戶該元素中

32、的內(nèi)容允許編輯。contentEditable是一個布爾類型屬性，因此可以將其設(shè)置為true或false。 除此之外，該屬性還有個隱藏的inherit（繼承）狀態(tài)，屬性為true時，元素被指定位允許編輯；屬性為false時，元素被指定為不允許編輯；未指定true或false時，則由inherit狀態(tài)來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。 另外，除了contentEditable屬性外，元素還具有一個iscontentEditable屬性，當(dāng)元素可編輯時，該屬性為true；當(dāng)元素不可編輯時，該屬性為false。2.4.3 contentEditable2.4.3 conten

33、tEditable屬性屬性【例例2-12-1】 下面是一個使用contentEditable屬性的實例，當(dāng)列表元素被加上contentEditable屬性后，該元素就變成可編輯的了， 實例代碼如下；contentEditable屬性示例可編輯列表列表元素1列表元素2列表元素3運(yùn)行這段代碼，效果如圖2-1所示。圖2-1 可編輯列表實例 在編輯完元素中的內(nèi)容后，如果想要保存其中內(nèi)容，只能把該元素的innerHTML發(fā)送到服務(wù)器進(jìn)行保存，因為改變元素內(nèi)容后該元素的innerHTML內(nèi)容也會隨之改變，目前還沒有特別的API來保存編輯后元素中的內(nèi)容。2.4.4 tabindex2.4.4 tabindex屬性屬性 tabindex是一個基本概念，當(dāng)用戶使用鍵盤導(dǎo)航一個頁面（通常使用Tab鍵，盡管某些瀏覽器，如最著名的Opera，可能使用不同的鍵組合來導(dǎo)航），頁面上的元素獲得焦點的順序。當(dāng)站點使用深度嵌套的布局表格來構(gòu)建時，這非常常用，但是如今這已經(jīng)不再那么常用了。默認(rèn)的標(biāo)簽頁順序是由元素出現(xiàn)在標(biāo)記中的順序來決定的，因此順序正確和結(jié)構(gòu)良好的文檔應(yīng)該不再需要額外的標(biāo)簽頁順序來提