第二講HTML5語法、新增標簽及智能表單

移動Web開發(fā)技術黃增喜內(nèi)容HTML5語法HTML5標簽和屬性HTML5智能表單HTML5語法文檔類型聲明(DTD)<!doctypehtml><!DOCTYPEhtml>等也是正確的，因為HTML語法是不區(qū)分大小寫的。字符編碼代碼引入<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語法省略標記不允許寫結(jié)束標記的元素：area、base、br、col、comand、embed、hr、img、input、keygen、link、meta、param、source、track和wbr。可以省略結(jié)束標記的元素：li、dt、dd、p、rt、rp、option、thead、tbody、tfoot、tr、td和th。可以省略全部標記的元素：html、head、body、colgroup和tbody。具有布爾值的屬性只寫屬性名不寫屬性值時，默認為true想要將屬性值設定為true，也可以將屬性名設定為屬性值。HTML5語法具有布爾值的屬性只寫屬性名不寫屬性值時，默認為true；什么都不寫則為false。想要將屬性值設定為true，也可以將屬性名設定為屬性值。省略引號屬性值可用雙引號或單引號當屬性值不含空字符串、<、>、=等字符時，引號可省略<inputtype=“checkbox”checked><inputtype=“checkbox”><inputtype=“checkbox”checked=“checked”><inputtype=“checkbox”checked=“”><inputtype=“checkbox”><inputtype=‘checkbox’><inputtype=checkbox>內(nèi)容HTML5語法HTML5標簽和屬性HTML5智能表單HTML5標簽和屬性新增結(jié)構(gòu)標簽語義化的div標簽

<article> 標記定義一篇文章

<header> 標記定義一個頁面或一個區(qū)域的頭部

<nav> 標記定義導航鏈接

<section> 標記定義一個區(qū)域

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

<hgroup> 標記定義文件中一個區(qū)塊的相關信息

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

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

</rt></ruby><ruby>

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