第二講HTML5語(yǔ)法、新增標(biāo)簽及智能表單

移動(dòng)Web開(kāi)發(fā)技術(shù)黃增喜內(nèi)容HTML5語(yǔ)法HTML5標(biāo)簽和屬性HTML5智能表單HTML5語(yǔ)法文檔類型聲明(DTD)<!doctypehtml><!DOCTYPEhtml>等也是正確的，因?yàn)镠TML語(yǔ)法是不區(qū)分大小寫(xiě)的。字符編碼代碼引入<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>不能混合使用:<metacharset=“utf-8”http-equiv="Content-Type"content="text/html;charset=utf-8"/><metacharset=“utf-8”><scriptsrc="js/juery-1.6.2.js"></script>script

type="text/javascript“src="js/juery-1.6.2.js"></script>

HTML5語(yǔ)法省略標(biāo)記不允許寫(xiě)結(jié)束標(biāo)記的元素：area、base、br、col、comand、embed、hr、img、input、keygen、link、meta、param、source、track和wbr?？梢允÷越Y(jié)束標(biāo)記的元素：li、dt、dd、p、rt、rp、option、thead、tbody、tfoot、tr、td和th?？梢允÷匀繕?biāo)記的元素：html、head、body、colgroup和tbody。具有布爾值的屬性只寫(xiě)屬性名不寫(xiě)屬性值時(shí)，默認(rèn)為true想要將屬性值設(shè)定為true，也可以將屬性名設(shè)定為屬性值。HTML5語(yǔ)法具有布爾值的屬性只寫(xiě)屬性名不寫(xiě)屬性值時(shí)，默認(rèn)為true；什么都不寫(xiě)則為false。想要將屬性值設(shè)定為true，也可以將屬性名設(shè)定為屬性值。省略引號(hào)屬性值可用雙引號(hào)或單引號(hào)當(dāng)屬性值不含空字符串、<、>、=等字符時(shí)，引號(hào)可省略<inputtype=“checkbox”checked><inputtype=“checkbox”><inputtype=“checkbox”checked=“checked”><inputtype=“checkbox”checked=“”><inputtype=“checkbox”><inputtype=‘checkbox’><inputtype=checkbox>內(nèi)容HTML5語(yǔ)法HTML5標(biāo)簽和屬性HTML5智能表單HTML5標(biāo)簽和屬性新增結(jié)構(gòu)標(biāo)簽語(yǔ)義化的div標(biāo)簽

<article> 標(biāo)記定義一篇文章

<header> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部

<nav> 標(biāo)記定義導(dǎo)航鏈接

<section> 標(biāo)記定義一個(gè)區(qū)域

<aside> 標(biāo)記定義頁(yè)面內(nèi)容部分的側(cè)邊欄

<hgroup> 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息

<figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題

<figcaption> 標(biāo)簽定義figure元素的標(biāo)題。 <footer> 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的底部 <dialog> 標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)類似微信新的結(jié)構(gòu)標(biāo)簽帶來(lái)的是網(wǎng)頁(yè)布局的改變及提升對(duì)搜索引擎的友好HTML5標(biāo)簽和屬性新增多媒體標(biāo)簽<video>視頻標(biāo)簽<audio>音頻標(biāo)簽<source>多媒體源文件標(biāo)簽<embed>多媒體標(biāo)簽，插入各類格式多媒體，如MP3、WAV、SWF、AIFF等。<canvas>畫(huà)布標(biāo)簽。本身沒(méi)有行為，僅提供一塊畫(huà)布，但它把一個(gè)繪圖API展現(xiàn)給客戶端Javascript，以使腳本能夠把想繪制的東西繪制到畫(huà)布上。注：HTML5的多媒體標(biāo)簽的出現(xiàn)意味著富媒體的發(fā)展以及支持不使用插件的情況下即可操作媒體文件，極大地提升了用戶體驗(yàn)。HTML5標(biāo)簽和屬性新增的其它功能標(biāo)簽<time>日期標(biāo)簽<p>我們?cè)诿刻煸缟?lt;time>9:00</time>開(kāi)始營(yíng)業(yè)。</p><p>我在<timedatetime="2015-02-14">情人節(jié)</time>有個(gè)約會(huì)。</p><meter>狀態(tài)標(biāo)簽(實(shí)時(shí)狀態(tài)顯示:氣壓、氣溫)<progess>狀態(tài)標(biāo)簽(任務(wù)過(guò)程:安裝、加載)<metermin="0"max="10"value="5"low="3"high="7"></meter><metervalue="0.6"></meter><progressmax="100"id="pro"></progress>HTML5標(biāo)簽和屬性新增的其它功能標(biāo)簽<ruby>標(biāo)記定義注釋或音標(biāo)<rt>標(biāo)記定義對(duì)ruby的注釋內(nèi)容文本<rp>告訴那些不支持Ruby元素的瀏覽器如何去顯示<mark>標(biāo)記定義有標(biāo)記的文本(黃色選中狀態(tài))<ruby>夼<rt>kuang

</rt></ruby><ruby>

夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>夼(kuang)HTML5標(biāo)簽和屬性新增的其它功能標(biāo)簽<keygen>密匙標(biāo)簽<wbr>軟換行標(biāo)簽<email><url><tel><number><range><color>HTML5標(biāo)簽和屬性全局屬性contentEditable運(yùn)行用戶在線編輯元素中的內(nèi)容，為true或false<designMode>指定整個(gè)頁(yè)面是否可編輯，屬性值只能用javascript腳本改<hidden>通知瀏覽器不渲染該元素，使其處于不可見(jiàn)狀態(tài)。<spellcheck>對(duì)用戶輸入的文本內(nèi)容進(jìn)行拼寫(xiě)和語(yǔ)法檢查。<olcontentEditable="true"><li>一個(gè)人生活溫嵐</li><li>讓我愛(ài)你胡夏</li><li>在那不遠(yuǎn)的...孫悅</li></ul>HTML5標(biāo)簽和屬性刪除的標(biāo)簽純表現(xiàn)的元素：basefont、big、center、font、s、strike、tt、u；對(duì)可用性產(chǎn)生負(fù)面影響的元素：Frame、frameset、noframes；產(chǎn)生混淆的元素：acronym、applet、isindex、dir其它：Applet、bgsound、marqueeHTML5重新定義的標(biāo)簽HTML元素HTML5中的意義<b>代表內(nèi)聯(lián)文本，通常是粗體，沒(méi)有傳遞表示重要的意思<i>代表內(nèi)聯(lián)文本，通常是斜體，沒(méi)有傳遞表示重要的意思<dd>可以同details與figure一同使用，定義包含文本，dialog也可用<dt>可以同details與figure一同使用，匯總細(xì)節(jié)，dialog也可用<hr>表示主題結(jié)束，而不是水平線，雖然顯示相同<menu>重新定義用戶界面的菜單，配合commond或者menuitem使用<small>表示小字體，例如打印注釋或者法律條款<strong>表示重要性而不是強(qiáng)調(diào)符號(hào)內(nèi)容HTML5語(yǔ)法HTML5標(biāo)簽和屬性HTML5智能表單HTML5智能表單用戶登錄收集用戶信息HTML5智能表單用戶登錄提交用戶搜索請(qǐng)求網(wǎng)購(gòu)HTML5智能表單表單處理過(guò)程：一、設(shè)計(jì)表單，并放入一些輸入域（input）二、網(wǎng)站訪問(wèn)者在自己的計(jì)算機(jī)上填寫(xiě)上述輸入域，并提交到服務(wù)器端三、服務(wù)器處理數(shù)據(jù)并返回確認(rèn)信息Internet服務(wù)器數(shù)據(jù)庫(kù)HTML5智能表單表單基本語(yǔ)法<formaction=“”method=“get“> <inputtype="text"name="user"/> <selectname="year"> <optionvalue="1999">1999</option> </select> <inputtype="submit">提交</button></form><formaction=""method=“get“id=”form1”> <inputtype="text"name="user"/> <selectname="year"> <optionvalue="1999"></option> </select></form><inputtype="submit“form=”form1”>提交</button>HTML5智能表單HTML4支持的input類型文本域（text）、密碼域（password）、圖像域（image）、文件域（file）、隱藏域（hidden）、單選按鈕（radio）、復(fù)選框（checkbox）、下拉列表（selection與option）、提交按鈕（submit）、重置按鈕（reset）、普通按鈕（button）。HTML5智能表單新增輸入類型Input表單的type新屬性值Type="email"限制用戶輸入必須為Email類型Type="url"限制用戶輸入必須為URL類型Type="number"限制用戶輸入必須為數(shù)字類型Type="range"產(chǎn)生一個(gè)滑動(dòng)條的表單Type="search“產(chǎn)生一個(gè)搜索意義的表單Type="color"生成一個(gè)顏色選擇表單Type="time"限制用戶輸入必須為時(shí)間類型OType="date"限制用戶輸入必須為日期類型Type="month"限制用戶輸入必須為月類型OType="week"限制用戶輸入必須為周類型OHTML5文檔結(jié)構(gòu)email類型專門(mén)用于輸入E-mail地址的文本輸入框，在提交表單的時(shí)候，自動(dòng)驗(yàn)證email輸入框的值。如果不是有效的郵箱地址，則不允許提交表單。對(duì)于不支持email的瀏覽器，以type=text純文本的方式輸入。語(yǔ)法：<inputtype="email"class="inp"name="user_email"/>HTML5文檔結(jié)構(gòu)url類型提供用于輸入url地址這類特殊文本的文本框。表單提交時(shí)進(jìn)行校驗(yàn)。number類型提供用于輸入數(shù)值的文本框?？梢砸?guī)定允許輸入的最大、最小值、默認(rèn)值和數(shù)字間隔等。表單提交時(shí)進(jìn)行校驗(yàn)。語(yǔ)法：<inputtype="url"class="inp"name="user_url"/>語(yǔ)法：<inputclass=“inp”type=“number”name=“number1”min=“1”max=“20”step=“4”/>HTML5文檔結(jié)構(gòu)range類型提供用于輸入包含一定范圍內(nèi)數(shù)字值的文本框，在網(wǎng)頁(yè)中顯示為滑動(dòng)條。語(yǔ)法：<inputclass="inp"type="range"name="range1"min="1"max="30"step="10"/>HTML5文檔結(jié)構(gòu)search類型提供用于輸入搜索關(guān)鍵詞的文本框。形式上與text類型基本一樣。只是當(dāng)輸入關(guān)鍵詞后，搜索框右側(cè)會(huì)出現(xiàn)“╳”，單擊其即可清楚輸入的搜索詞。tel類型提供專門(mén)用于輸入電話號(hào)碼的文本框。它并不限定只輸入數(shù)字，因?yàn)楹芏嗵?hào)碼還包括“+、-、（、）”等，如語(yǔ)法：<inputclass="inp"type="search"name="search1"/>語(yǔ)法：<inputclass="inp"type="tel"name="tel1"pattern="\d{11}"/>HTML5文檔結(jié)構(gòu)color類型提供專門(mén)用于設(shè)置顏色的文本框。通過(guò)單擊文本框，可以快速打開(kāi)拾色器面板，方便用戶可視化選擇一種顏色。語(yǔ)法：<inputclass="inp"type="color"name="color1"/>HTML5文檔結(jié)構(gòu)日期檢出器類型日期檢出器（DataPickers）是網(wǎng)頁(yè)中經(jīng)常要用到的一種控件，在HTML5之前的版本中，多是采用JavaScript框架來(lái)實(shí)現(xiàn)，使用麻煩。輸入類型HTML代碼功能和說(shuō)明date<inputtype=“date”>選取日、月、年month<inputtype=“month”>選取月、年week<inputtype=“week”>選取周和年time<inputtype=“time”>選取時(shí)間（小時(shí)和分）datetime<inputtype=“datetime”>選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local<inputtype=“datetime-local”>選取時(shí)間、日、月、年（本地時(shí)間）HTML5智能表單新增input屬性autocomplete幫助用戶在input類型輸入框中實(shí)現(xiàn)自動(dòng)完成內(nèi)容輸入。支持的類型包括：email、url、search、tel、range、color、text、password。三種屬性值：on、off和空值。autofocusinput用于自動(dòng)獲取光標(biāo)焦點(diǎn)，為布爾值。placeholder用于為輸入框提供提示，提示用戶輸入內(nèi)容，當(dāng)輸入框獲得焦點(diǎn)后自動(dòng)消失。支持的類型包括：email、url、search、tel、text、password。語(yǔ)法：<inputtype=“email”name=“user_em”autocomplete=“on”/>語(yǔ)法：<inputtype=“email”name=“user_em”autofocus=“on”/><inputtype=“text”name=“zip_code”placeholder=“請(qǐng)輸入6位數(shù)字”/>HTML5智能表單required規(guī)定輸入框不能為空。支持的類型包括：email、url、search、tel、text、password、datepicker、number、checkbox和file等。list屬性。用于制定輸入框所綁定的datalist元素，可以實(shí)現(xiàn)數(shù)據(jù)列表的下拉效果，外觀效果與autocomplete類似。語(yǔ)法：<inputtype=“email”name=“user_em”required=“required”/>語(yǔ)法：<inputclass="inp"type="url"name="user_url"list="urllist"/><datalistid="urllist"><optionlabel="百度"value=""/><optionlabel="谷歌"value=""/></datalist>HTML5智能表單multiple屬性。支持email、file等類型一次性輸入多個(gè)郵箱地址或上傳多個(gè)文件等。pattern屬性。用于驗(yàn)證輸入內(nèi)容是否與自定義的正則表達(dá)式匹配。支持的類型包括：text、search、url、email、tel、password等。height和width屬性，用于規(guī)定image圖像的高和寬。語(yǔ)法：<inputtype="file"name="fileselect"multiple=“multiple”/>語(yǔ)法：<inputtype=“text”name=“zip_code”patt