1、介紹什么是HTML5？HTML5是一個新的網絡標準，現在仍處于發展階段。目標是取代現有的HTML4.01和XHTML1.0 標準。它希望能夠減少互聯網富應用（RIA)對Flash、Silverlight、JavaFX等的依賴，并且提供更多能有效增強網絡應用的API。2004年提出構想2008年發布第一份草案2012年推廣階段2020年最終測試2022年正式發布HTML5時間表HTML5的八大新特性語義離線存儲設備通用連接多媒體三維、圖形與特效性能與集成CSS3語義化的標簽HTML5 引入了新的 HTML 元素，通過使用這些元素，開發者可以更細致的描述文檔結構，讓文檔更加易讀，搜索引擎也能更好的

2、理解頁面中各部分間的關系，我們也可以搜索到更快，更準確的信息。十個常用的新標簽列表 定義文章 定義文章的側邊欄 一組媒體對象以及文字 定義 figure 的標題定義頁腳定義頁眉定義對網頁標題的組合定義導航 定義文檔中的區段定義日期和時間被棄用的標簽：、 、 、和。html5 標簽標簽描述定義文章。定義頁面內容之外的內容。定義聲音內容。定義圖形。定義元素的細節。定義對話框或窗口。定義 figure 元素的標題。定義媒介內容的分組，以及它們的標題。定義 section 或 page 的頁腳。定義 section 或 page 的頁眉。定義導航鏈接。定義 section。定義媒介源。為 元素定義可見

3、的標題。定義日期/時間。定義視頻。關于文檔的細節：google支持HTML5 Input 標簽2022/8/7Copyright 2011.All pages and graphics on this web site are the property of W3School.標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。用作文檔中插圖的圖像，帶有一個標題：HTML5 Input 標簽2022/8/7 黃浦江上的的盧浦大橋 黃浦江上的的盧浦大橋 標簽 標簽定義公歷的時間（24 小時制）或日期，時間和時區偏移是

4、可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。HTML5 Input 標簽2022/8/7我們在每天早上 9:00 開始營業。我在 情人節 有個約會。 標簽標簽定義文檔中的節HTML5 section 標簽2022/8/7 PRC The Peoples Republic of China was born in 1949. 標簽 標簽不適合用來表示度量衡（例如，磁盤空間使用情況或查詢結果）HTML5 標簽2022/8/7注釋：Internet Explorer 9 以及更早的版本

5、不支持 標簽。 標簽 標簽不適合用來表示度量衡（例如，磁盤空間使用情況或查詢結果）HTML5 Input 標簽2022/8/7注釋：Internet Explorer 9 以及更早的版本不支持 標簽。 拾色器日期字段時間字段 數字字段滑動組件類型匹配除了這些，還有搜索進度條25%密鑰輸出10 + 5 = And so on正則匹配必填字段選項列表 增強的表單控件HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 類型2022/8/7Input typeIEFirefoxOperaChromeSafarie

6、mailNo4.09.010.0NourlNo4.09.010.0NonumberNoNo9.07.0NorangeNoNo9.04.04.0Date pickersNoNo9.010.0NosearchNo4.011.010.0NocolorNoNo11.0NoNoInput 類型 - emailemail 類型用于應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。提示：iPhone 中的 Safari 瀏覽器支持 email 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 和 選項）。Input 類型 - URLurl 類型用于應該包含 URL 地址的輸入域

7、。在提交表單時，會自動驗證 url 域的值。提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 選項）。即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 類型2022/8/7E-mail: Homepage: Input 類型 - numbernumber 類型用于應該包含數值的輸入域。您還能夠設定對所接受的數字的限定：提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，并通過改變觸摸屏鍵盤來配合它（顯示數字）。即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 類型2022/8/7Po

8、ints: 屬性值描述maxnumber規定允許的最大值minnumber規定允許的最小值stepnumber規定合法的數字間隔（如果 step=3，則合法的數是 -3,0,3,6 等）valuenumber規定默認值Input 類型 - rangerange 類型用于應該包含一定范圍內數字值的輸入域。range 類型顯示為滑動條。提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，并通過改變觸摸屏鍵盤來配合它（顯示數字）。即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 類型2022/8/7屬性值描述maxnumber規定允許的最大值minnumber

9、規定允許的最小值stepnumber規定合法的數字間隔（如果 step=3，則合法的數是 -3,0,3,6 等）valuenumber規定默認值Input 類型 - Date Pickers（日期選擇器）date - 選取日、月、年month - 選取月、年week - 選取周和年time - 選取時間（小時和分鐘）datetime - 選取時間、日、月、年（UTC 時間）datetime-local - 選取時間、日、月、年（本地時間）即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 類型2022/8/7Date: HTML5 表單屬性2022/8/7Input typeIE

10、FirefoxOperaChromeSafari plete8.03.59.53.04.0autofocusNoNo10.03.04.0formNoNo9.5NoNoform overridesNoNo10.5NoNoheight and width8.03.59.53.04.0listNoNo9.5NoNomin, max and stepNoNo9.53.0NomultipleNo3.5No3.04.0novalidateNoNoNoNoNopatternNoNo9.53.0NoplaceholderNoNoNo3.03.0requiredNoNo9.53.0Noautofocus 屬性a

11、utofocus 屬性規定在頁面加載時，域自動地獲得焦點。注釋：autofocus 屬性適用于所有 標簽的類型。placeholder 屬性placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。注釋：placeholder 屬性適用于以下類型的 標簽：text, search, url, telephone, email 以及 password。提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添加 選項）。即使不被支持，仍然可以顯示為常規的文本域。HTM

12、L5 Input 屬性2022/8/7User name: required 屬性required 屬性規定必須在提交之前填寫輸入域（不能為空）。即使不被支持，仍然可以顯示為常規的文本域。HTML5 Input 屬性2022/8/7Name: 多媒體音頻和視頻 (Audio + Video)Audio和Video是首批添加到HTML規范中的標簽。它們的加入使得我們可以像插入圖片一樣來處理音頻及視頻文件。許多時髦的網站都提供視頻。ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件W

13、ebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件如需在 HTML5 中顯示視頻，您所有需要的是：HTML 5 視頻2022/8/7 tip：control 屬性供添加播放、暫停和音量控件。格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No視頻兼容上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。video 元素允許多個

14、source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。HTML 5 視頻2022/8/7 Your browser does not support the video tag. 標簽的屬性HTML 5 視頻2022/8/7屬性值描述autoplayautoplay如果出現該屬性，則視頻在就緒后馬上播放。controlscontrols如果出現該屬性，則向用戶顯示控件，比如播放按鈕heightpixels設置視頻播放器

15、的高度。looploop如果出現該屬性，則當媒介文件完成播放后再次開始播放。preloadpreload如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 autoplay，則忽略該屬性。srcurl要播放的視頻的 URL。widthpixels設置視頻播放器的寬度。音頻格式ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件如需在 HTML5 中播放音頻，您所有需要的是：HTML 5 音

16、頻2022/8/7tip：control 屬性供添加播放、暫停和音量控件。IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg Vorbis MP3 Wav 音頻兼容上面的例子使用一個 Ogg 文件，適用于Firefox、Opera 以及 Chrome 瀏覽器。要確保適用于 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 a

17、udio 元素的支持。HTML 5 音頻2022/8/7 Your browser does not support the audio tag. 標簽的屬性HTML 5 音頻2022/8/7屬性值描述autoplayautoplay如果出現該屬性，則音頻在就緒后馬上播放。controlscontrols如果出現該屬性，則向用戶顯示控件，比如播放按鈕。looploop如果出現該屬性，則每當音頻結束時重新開始播放。preloadpreload如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 autoplay，則忽略該屬性。srcurl要播放的音頻的 URL。拖拽與拖放 (Drag

18、 & Drop) 與 文件處理 (File API)過去我們想實現網頁中的拖拽效果，基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup的鼠標事件監聽來模擬拖拽效果，為了實現實時的拖拽移動效果，還要不停地獲取鼠標的坐標，不停的修改元素的位置，代碼要堆很多，而且性能也很差，現在有了HTML5原生的Drag & Drop 拖拽事件，再結合FileAPI 中的 FileReader，一切變得so easy在 HTML5 中，任何元素都能夠拖放。Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。1.設置元素為可拖放2然后，規定當元素被拖動時，會發生什么。在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。dataTransfer.setData() 方法設置被拖數據的數據類型和值：在這個例子中，數據類型是 Text，值是可拖動元素的 id (drag1)。HTML 5 拖放202