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

1、移動(dòng)移動(dòng)Web開(kāi)發(fā)技術(shù)開(kāi)發(fā)技術(shù)黃增喜黃增喜內(nèi)容內(nèi)容HTML5 HTML5 語(yǔ)法語(yǔ)法HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性HTML5 HTML5 智能表單智能表單HTML5 HTML5 語(yǔ)法語(yǔ)法 文檔類型聲明文檔類型聲明(DTD)(DTD) 等也是正確的，因?yàn)镠TML語(yǔ)法是不區(qū)分大小寫的。 字符編碼 代碼引入不能混合使用: script type=text/javascript“ src=js/juery-1.6.2.js HTML5 HTML5 語(yǔ)法語(yǔ)法 省略標(biāo)記省略標(biāo)記 不允許寫結(jié)束標(biāo)記的元素：area、base、br、col、comand、embed、hr、img、input、keyg

2、en、link、meta、param、source、track和wbr。 可以省略結(jié)束標(biāo)記的元素：li、dt、dd、p、rt、rp、option、thead、tbody、tfoot、tr、td和th。 可以省略全部標(biāo)記的元素：html、head、body、colgroup和tbody。 具有布爾值的屬性具有布爾值的屬性 只寫屬性名不寫屬性值時(shí)，默認(rèn)為true 想要將屬性值設(shè)定為true，也可以將屬性名設(shè)定為屬性值。HTML5 HTML5 語(yǔ)法語(yǔ)法 具有布爾值的屬性具有布爾值的屬性 只寫屬性名不寫屬性值時(shí)，默認(rèn)為true；什么都不寫則為false。 想要將屬性值設(shè)定為true，也可以將屬性名設(shè)定

3、為屬性值。 省略引號(hào)省略引號(hào) 屬性值可用雙引號(hào)或單引號(hào) 當(dāng)屬性值不含空字符串、=等字符時(shí)，引號(hào)可省略 內(nèi)容內(nèi)容HTML5 HTML5 語(yǔ)法語(yǔ)法HTML5 HTML5 標(biāo)簽和屬性標(biāo)簽和屬性HTML5 HTML5 智能表單智能表單HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 新增結(jié)構(gòu)標(biāo)簽新增結(jié)構(gòu)標(biāo)簽語(yǔ)義化的語(yǔ)義化的div標(biāo)簽標(biāo)簽標(biāo)記定義一篇文章標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部標(biāo)記定義導(dǎo)航鏈接標(biāo)記定義一個(gè)區(qū)域標(biāo)記定義頁(yè)面內(nèi)容部分的側(cè)邊欄標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題標(biāo)簽定義figure元素的標(biāo)題。標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的底部標(biāo)記定義一個(gè)對(duì)話框(會(huì)話框)類似微信新

4、的結(jié)構(gòu)標(biāo)簽帶來(lái)的是網(wǎng)頁(yè)布局的改變及提升對(duì)搜索引擎的友好HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 新增多媒體標(biāo)簽新增多媒體標(biāo)簽 視頻標(biāo)簽 音頻標(biāo)簽 多媒體源文件標(biāo)簽 多媒體標(biāo)簽，插入各類格式多媒體，如MP3、WAV、SWF、AIFF等。 畫布標(biāo)簽。本身沒(méi)有行為，僅提供一塊畫布，但它把一個(gè)繪圖API展現(xiàn)給客戶端Javascript，以使腳本能夠把想繪制的東西繪制到畫布上。注：HTML5的多媒體標(biāo)簽的出現(xiàn)意味著富媒體的發(fā)展以及支持不使用插件的情況下即可操作媒體文件，極大地提升了用戶體驗(yàn)。HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 新增的其它功能標(biāo)簽新增的其它功能標(biāo)簽 日期標(biāo)簽我們?cè)诿刻煸缟?:00

5、開(kāi)始營(yíng)業(yè)。我在情人節(jié)有個(gè)約會(huì)。 狀態(tài)標(biāo)簽(實(shí)時(shí)狀態(tài)顯示:氣壓、氣溫) 狀態(tài)標(biāo)簽(任務(wù)過(guò)程:安裝、加載)HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 新增的其它功能標(biāo)簽新增的其它功能標(biāo)簽 標(biāo)記定義 注釋或音標(biāo) 標(biāo)記定義對(duì)ruby的注釋內(nèi)容文本 告訴那些不支持 Ruby元素的瀏覽器如何去顯示 標(biāo)記定義有標(biāo)記的文本 (黃色選中狀態(tài)) 夼 kuang 夼(kuang)夼(kuang)HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 新增的其它功能標(biāo)簽新增的其它功能標(biāo)簽 密匙標(biāo)簽 軟換行標(biāo)簽 HTML5HTML5 標(biāo)簽和屬性標(biāo)簽和屬性 全局屬性全局屬性 contentEditable 運(yùn)行用戶在線編輯元素中的內(nèi)

6、容，為true或false 指定整個(gè)頁(yè)面是否可編輯，屬性值只能用javascript腳本改 通知瀏覽器不渲染該元素，使其處于不可見(jiàn)狀態(tài)。 對(duì)用戶輸入的文本內(nèi)容進(jìn)行拼寫和語(yǔ)法檢查。 一個(gè)人生活 溫嵐 讓我愛(ài)你 胡夏 在那不遠(yuǎn)的. 孫悅HTML5 HTML5 標(biāo)簽和屬性標(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 HTML5 重新

7、定義的標(biāo)簽重新定義的標(biāo)簽HTML元素元素HTML5中的意義中的意義代表內(nèi)聯(lián)文本，通常是粗體，沒(méi)有傳遞表示重要的意思代表內(nèi)聯(lián)文本，通常是斜體，沒(méi)有傳遞表示重要的意思可以同details與figure一同使用，定義包含文本，dialog也可用可以同details與figure一同使用，匯總細(xì)節(jié)，dialog也可用表示主題結(jié)束，而不是水平線，雖然顯示相同重新定義用戶界面的菜單，配合commond或者menuitem使用表示小字體，例如打印注釋或者法律條款表示重要性而不是強(qiáng)調(diào)符號(hào)內(nèi)容內(nèi)容HTML5 HTML5 語(yǔ)法語(yǔ)法HTML5 HTML5 標(biāo)簽和屬性標(biāo)簽和屬性HTML5 HTML5 智能表單智能表單

8、HTML5 HTML5 智能表單智能表單用戶登錄收集用戶信息HTML5 HTML5 智能表單智能表單用戶登錄提交用戶搜索請(qǐng)求網(wǎng)購(gòu)HTML5 HTML5 智能表單智能表單 表單處理過(guò)程：表單處理過(guò)程：一、設(shè)計(jì)表單，并放入一些輸入域（input）二、網(wǎng)站訪問(wèn)者在自己的計(jì)算機(jī)上填寫上述輸入域，并提交到服務(wù)器端三、服務(wù)器處理數(shù)據(jù)并返回確認(rèn)信息Internet服務(wù)器服務(wù)器數(shù)據(jù)庫(kù)數(shù)據(jù)庫(kù)HTML5 HTML5 智能表單智能表單 表單基本語(yǔ)法表單基本語(yǔ)法1999提交提交HTML5 HTML5 智能表單智能表單 HTML4 HTML4 支持的支持的inputinput類型類型文本域（text）、密碼域（pass

9、word）、圖像域（image）、文件域（file） 、隱藏域（hidden） 、單選按鈕（radio）、復(fù)選框（checkbox）、下拉列表（selection與option）、提交按鈕（submit）、重置按鈕（reset）、普通按鈕（button）。HTML5 HTML5 智能表單智能表單 新增輸入類型新增輸入類型Input表單的表單的type新屬性值新屬性值Type=email限制用戶輸入必須為Email類型Type=url限制用戶輸入必須為URL類型Type=number限制用戶輸入必須為數(shù)字類型Type=range產(chǎn)生一個(gè)滑動(dòng)條的表單Type=search“產(chǎn)生一個(gè)搜索意義的表單T

10、ype=color生成一個(gè)顏色選擇表單Type=time限制用戶輸入必須為時(shí)間類型OType=date限制用戶輸入必須為日期類型Type=month限制用戶輸入必須為月類型OType=week限制用戶輸入必須為周類型OHTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) emailemail類型類型專門用于輸入E-mail地址的文本輸入框，在提交表單的時(shí)候，自動(dòng)驗(yàn)證email輸入框的值。如果不是有效的郵箱地址，則不允許提交表單。對(duì)于不支持email的瀏覽器，以type= text純文本的方式輸入。語(yǔ)法：語(yǔ)法：HTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) urlurl類型類型提供用于輸入url地址這類特殊文本的

11、文本框。表單提交時(shí)進(jìn)行校驗(yàn)。 numbernumber類型類型提供用于輸入數(shù)值的文本框。可以規(guī)定允許輸入的最大、最小值、默認(rèn)值和數(shù)字間隔等。表單提交時(shí)進(jìn)行校驗(yàn)。語(yǔ)法：語(yǔ)法：語(yǔ)法：語(yǔ)法： HTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) rangerange類型類型提供用于輸入包含一定范圍內(nèi)數(shù)字值的文本框，在網(wǎng)頁(yè)中顯示為滑動(dòng)條。語(yǔ)法：語(yǔ)法： HTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) searchsearch類型類型提供用于輸入搜索關(guān)鍵詞的文本框。形式上與text類型基本一樣。只是當(dāng)輸入關(guān)鍵詞后，搜索框右側(cè)會(huì)出現(xiàn)“”，單擊其即可清楚輸入的搜索詞。 teltel類型類型提供專門用于輸入電話號(hào)碼的文本框。它并

12、不限定只輸入數(shù)字，因?yàn)楹芏嗵?hào)碼還包括“+、-、（、）”等，如語(yǔ)法：語(yǔ)法：語(yǔ)法：語(yǔ)法：HTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) colorcolor類型類型提供專門用于設(shè)置顏色的文本框。通過(guò)單擊文本框，可以快速打開(kāi)拾色器面板，方便用戶可視化選擇一種顏色。語(yǔ)法：語(yǔ)法： HTML5 HTML5 文檔結(jié)構(gòu)文檔結(jié)構(gòu) 日期檢出器類型日期檢出器類型日期檢出器（Data Pickers）是網(wǎng)頁(yè)中經(jīng)常要用到的一種控件，在HTML5之前的版本中，多是采用JavaScript框架來(lái)實(shí)現(xiàn)，使用麻煩。輸入類型輸入類型HTML 代碼代碼功能和說(shuō)明功能和說(shuō)明date選取日、月、年month

13、選取月、年week選取周和年time選取時(shí)間（小時(shí)和分）datetime選取時(shí)間、日、月、年（UTC時(shí)間）datetime-local選取時(shí)間、日、月、年（本地時(shí)間）HTML5 HTML5 智能表單智能表單 新增新增inputinput屬性屬性 autocomplete 幫助用戶在input類型輸入框中實(shí)現(xiàn)自動(dòng)完成內(nèi)容輸入。支持的類型包括：email、url、search、tel、range、color、text、password。 三種屬性值：on、off和空值。 autofocus input 用于自動(dòng)獲取光標(biāo)焦點(diǎn)，為布爾值。 placeholder 用于為輸入框提供提示，提示用戶輸入內(nèi)容

14、，當(dāng)輸入框獲得焦點(diǎn)后自動(dòng)消失。支持的類型包括：email、url、search、tel、text、password。語(yǔ)法：語(yǔ)法： 語(yǔ)法：語(yǔ)法： HTML5 HTML5 智能表單智能表單 required規(guī)定輸入框不能為空。支持的類型包括：email、url、search、tel、text、password、date picker、number、checkbox和file等。 list屬性。用于制定輸入框所綁定的datalist元素，可以實(shí)現(xiàn)數(shù)據(jù)列表的下拉效果，外觀效果與autocomplete類似。語(yǔ)法：語(yǔ)法： 語(yǔ)法：語(yǔ)法： HTML5 HTML5 智能表單智能表單 multiple屬性。支持

15、email、file等類型一次性輸入多個(gè)郵箱地址或上傳多個(gè)文件等。 pattern屬性。用于驗(yàn)證輸入內(nèi)容是否與自定義的正則表達(dá)式匹配。支持的類型包括：text、search、url、 email、 tel、password等。 height和width屬性，用于規(guī)定image圖像的高和寬。語(yǔ)法：語(yǔ)法： 語(yǔ)法：語(yǔ)法： HTML5 HTML5 智能表單智能表單 新增新增formform元素元素 datalist 用于為輸入框提供一個(gè)可選列表，用戶可以直接選擇列表中的某一預(yù)設(shè)項(xiàng)，從而免去輸入的麻煩。語(yǔ)法：語(yǔ)法： HTML5 HTML5 智能表單智能表單 新增新增formform元素元素 output 用于顯示計(jì)算結(jié)果或輸出。 新增新增formform屬性屬性 autocomplete 用于整個(gè)fo