第11天H5入門

HTML5 發(fā)展史

HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊。 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。 2012年12月17日，萬維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?！?2013年5月6日， HTML 5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標(biāo)記語言（HTML）。在這個版本中，新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。 本次草案的發(fā)布，從2012年12月27日至今，進(jìn)行了多達(dá)近百項的修改，包括HTML和XHTML的標(biāo)簽，相關(guān)的API、Canvas等，同時HTML5的圖像img標(biāo)簽及svg也進(jìn)行了改進(jìn)，性能得到進(jìn)一步提升。

HTML5 的瀏覽器兼容

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內(nèi)的 遨游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。

HTML5 語法

內(nèi)容類型（ContentType） HTML5的文件擴(kuò)展符與內(nèi)容類型保持不變，仍然為".html"或".htm"。 DOCTYPE聲明 不區(qū)分大小寫 指定字符集編碼 meta charset="UTF-8" 可省略標(biāo)記的元素 不允許寫結(jié)束標(biāo)記的元素：br、col、embed、hr、img、input、、link、meta
可以省略結(jié)束標(biāo)記的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th 可以省略全部標(biāo)記的元素：html、head、body、colgroup、tbody 省略引號 屬性值可以使用雙引號，也可以使用單引號。

HTML5 新增語義化標(biāo)簽

section元素 表示頁面中的一個內(nèi)容區(qū)塊 article元素 表示一塊與上下文無關(guān)的獨(dú)立的內(nèi)容 aside元素 在article之外的，與article內(nèi)容相關(guān)的輔助信息 header元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題 footer元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的腳注 nav元素 表示頁面中導(dǎo)航鏈接部分 figure元素 表示一段獨(dú)立的流內(nèi)容，使用figcaption元素為其添加標(biāo)題(第一個或最后一個子元素的位置) main元素 表示頁面中的主要的內(nèi)容 (ie不兼容)

兼容低版本瀏覽器： <script src=“html5.js”></script>

Video和audio的應(yīng)用

video元素 定義視頻 <video src="movie.ogg" controls="controls">Video元素</video> audio元素 定義音頻 <audio src="someaduio.wav">Audio元素</audio>

controls屬性：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 autoplay屬性：如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 loop屬性：重復(fù)播放屬性。 muted屬性：靜音屬性。 poster屬性：規(guī)定視頻正在下載時顯示的圖像，直到用戶點(diǎn)擊播放按鈕。

HTML5 智能表單

新增輸入類型

Type=“email” 限制用戶必須輸入email類型 Type=“url” 限制用戶必須輸入url類型 Type=“range” 產(chǎn)生一個滑動條表單 Type=“search” 產(chǎn)生一個搜索意義的表單 Type=“color” 生成一個顏色選擇的表單 Type=“time” 限制用戶必須輸入時間類型 Type=“month” 限制用戶必須輸入月類型 Type=“week” 限制用戶必須輸入周類型 Type=“datetime-local” 選取本地時間

input類型設(shè)置 email：專門用來輸入email地址的文本框,如果該文本框中內(nèi)容不是email地址格式的，則不允許提交。但它不檢查email地址是否存在。提交時可以為空，除非加上了required屬性。 具有multiple屬性，它允許在該文本框中輸入一串以逗號分隔的email地址。

url類型 專門用來輸入URL地址的文本框。如果該文本框中內(nèi)容不是URL地址格式的，則不允許提交。mail地址。 例：<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”>;

Number類型 專門用來輸入數(shù)字的文本框。在提交時會檢查其中的內(nèi)容是否為數(shù)字，具有min、max、step的屬性。 例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />

range類型 是用來只允許輸入一段范圍內(nèi)數(shù)值的文本框，它具有min屬性與max屬性，及step屬性，可以指定每次拖動的步幅。 例： <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />

min 最小值 max 最大值 step 數(shù)字間隔

(date, month, week, time, datetime,datetime-local) 擁有多個可供選取日期和時間的新輸入類型。 date - 選取日、月、年 month - 選取月、年 week - 選取周和年 time - 選取時間（小時和分鐘） datetime - 選取時間、日、月、年（UTC 時間） datetime-local - 選取時間、日、月、年（本地時間） 例：<input type=“month” &gr; Search：輸入的是搜索的關(guān)鍵字，與type=“text” 基本上一樣。 Color：用來選取顏色。

output： 定義不同類型的輸出，如計算結(jié)果的輸出，或腳本的輸出。 注：必須從屬于某個表單。即，必須將它書寫在表單內(nèi)部 Output標(biāo)簽IE不支持

對新元素樣式的使用： 注意，跟 input 標(biāo)簽設(shè)置樣式一樣，但是要設(shè)置標(biāo)簽中局部的樣式不能實現(xiàn)。如改變?nèi)諝v的背景色，顏色框的按鈕效果，等，這些都不可以實現(xiàn)。

表單新屬性

1）、Datalist ：選項列表 例： <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> 提示：option 元素永遠(yuǎn)都要設(shè)置 value 屬性。

2.屬性 placeholder屬性： 文本框處于未輸入狀態(tài)時文本框中顯示的輸入提示。 autofocus屬性： 給文本框、選擇框、或者按鈕控件加上該屬性，當(dāng)打開頁面時，該控件自動獲得國標(biāo)焦點(diǎn)，一個頁面只能有一個。 required屬性： 驗證輸入不能為空 list屬性： 結(jié)合datalist元素使用 autocomplete屬性： 輸入富足和所用的自動完成功能，是一個節(jié)省輸入時間，同時也十分方便的功能。只有三種：on/off/""。on可是顯示指定候補(bǔ)輸入的數(shù)據(jù)列表，使用datalist元素與list屬性提供候補(bǔ)輸入的數(shù)據(jù)列表，自動完成時，可以講該datalist元素中的數(shù)據(jù)作為候補(bǔ)輸入的數(shù)據(jù)在文本框中顯示： <input type="text" name="greeting" autoconplete="on" list ="greeting">

3.自動驗證 1）、required 可以應(yīng)用在大多數(shù)輸入元素上（除了隱藏元素和圖片），在提交時如果元素內(nèi)容為空白，則不允許提交，同時顯示提示文字。 2）、pattern 將屬性值設(shè)為某個格式的正則表達(dá)式，在提交時會檢查其內(nèi)容是否符合給定格式。 例：<input pattern = “[0-9][A-Z]{3}” title="輸入內(nèi)容：一個數(shù)與三個大寫字母" placeholder=‘輸入內(nèi)容：一個數(shù)與三個大寫字母’> 3）、 min、max、step： 為包含數(shù)字或日期的 input 類型規(guī)定限定（約束） max: 最大值 min: 最小值 step: 數(shù)字間隔 例：<input type="number“ min="0" max="10" step="3" /> 4、取消驗證 可以對form表單添加novalidate屬性，即使form表單中的input添加了required，也將不進(jìn)行驗證 5.Multiple: 可以輸入一個或多個值，每個值之間用逗號分開 例：<input type=“email” multiple/> 還可以應(yīng)用于file