html5常見的新功能：1、Canvas繪圖；2、表單元素；3、語意化標籤；4、媒體元素；5、地理定位；6、拖放API；7、WebWorker；8、 WebStorage；9、WebSocket；10、SVG繪圖。 html5是最新的html標準，專門為承載豐富的 web 內容而設計的，並且無需額外插件，提供的新元素和新的 API 簡化了 web 應用程式的構建。 本教學作業系統：windows10系統、HTML5版本、DELL G3電腦。 HTML5是什麼： 1、HTML5 是最新的 HTML 標準。 2、HTML5 是專門為承載豐富的 web 內容而設計的，並且無需額外插件。 3、HTML5 擁有新的語意、圖形以及多媒體元素。 4、HTML5 提供的新元素和新的 API 簡化了 web 應用程式的建置。 5、HTML5 是跨平台的，被設計為在不同類型的硬體（PC、平板、手機、電視機等等）之上運作。 HTML5常見的新功能： 一、Canvas元素 Canvas元素用於在網頁上繪製圖形，有多重繪製路徑、矩形、圓形、字元以及添加圖像的方法。 Canvas透過js繪製2d圖形，並逐像素進行渲染，且假若在圖片完成後進行修改，整個場景就會重新繪製。 二、表單元素 （1）新增的表單元素 ：元素規定輸入域的選項列表，使用元素的list元素與元素的id綁定； ：提供檢驗使用者可靠的方法，標籤規定用於表單的金鑰對產生器字段； ：用於不使用類型的輸出，例如計算或腳本輸出。 （2）新增的表單屬性 placehoder屬性：簡短的提示在使用者輸入值前會顯示在輸入網域上，既預設框提示； required屬性：是boolean屬性，要求填寫的輸入域不為空； pattern屬性：描述了一個正規表示式用於驗證元素的值；##max/ min屬性：最大最小值；step屬性：為輸入域規定合法的數字間隔；height/width屬性：用於image類型的標籤的圖像高度和寬度；autofocus屬性：是一個boolean屬性，在頁面載入時自動取得焦點；multiple屬性：是一個boolean屬性，規定元素中選擇多個值。 三、語意化標籤語意化標籤既是讓標籤有自己的意義，語意化標籤的優點：（1）讓介面的程式碼結構清晰，方便程式碼的閱讀和團隊的合作開發；（2）方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以語義的方式來渲染網頁；（3）有利於搜尋引擎優化（SEO）。 四、媒體元素播放音訊檔案的元素————（1）control屬性提供播放暫停和音量控制；（2）和之間插入瀏覽器不支援的元素的提示文字；（3）允許使用多個元素用來連結不同的音訊文件，瀏覽器使用第一個支援的音訊檔案；（4）支援三種音訊格式檔案：mp3、 wax、ogg。 播放視屏檔案的元素（1）control屬性提供播放暫停和音量控件，也可以使用dom操作：play()和pause(); （2）video元素提供了width和height控制影片的尺寸。如果設定了就會在頁面載入時保留，沒設定就不保留，頁面會根據原始影片改變。 五、地理定位HTML5使用getCurrentPosition()方法來取得使用者的位置，可以基於此實作計算位置距離。 六、拖曳API拖曳是一種常見的特性，即抓取物件以後拖曳到另一個位置。在HTML5中，拖放是標準的一部分，任何元素都能夠拖放。拖放的過程分為來源物件和目標物件。來源物件是指你即將拖曳元素，而目標物件則是指拖曳之後要放置的目標位置。 拖曳的來源物件(可能發生移動的)可以觸發的事件－3個：dragstart：拖曳開始drag：拖曳中dragend：拖曳結束 整個拖曳過程的組成：dragstart*1 drag*n dragend*1。 拖曳的目標物件(不會發生移動)可以觸發的事件－4個：dragenter：拖曳著進入dragover：拖曳著懸停dragleave：拖曳著離開drop：釋放整個拖曳過程的組成1：dragenter*1 dragover*n dragleave*1；整個拖曳過程的組成2：dragenter*1 dragover*n drop* 1。 七、Web Worker 當在HTML頁面中執行腳本時，頁面的狀態是無法回應的，直到腳本已完成。 Web Worker是執行在背景的JavaScript，且獨立於其他腳本，不會影響頁面的效能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時Web Worker就會在背景運行。 八、Web Storage Web Storage是H5引入的一個幫助解決cookie儲存本地快取的重要功能。早些時候，本地儲存使用的是cookies。但Web儲存需要更加的安全與快速，Web Storage中有5M容量，cookie只有4k。 九、Web Socket WebSocket協定為web應用程式用戶端和服務端之間提供了一個全雙工通訊機制。在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後瀏覽器和伺服器之間就形成了一條快速通道，兩者之間就直接可以資料互相傳送。瀏覽器透過JavaScript向伺服器發出建立WebSocket連線的請求，連線建立以後，客戶端和伺服器端就可以透過TCP連線直接交換資料。當你取得Web Socket連線後，你可以透過send()方法來傳送數據，並透過onmessage事件接收伺服器傳回的資料。 第十、SVG繪圖 SVG是指可伸縮的向量圖形，它是一種使用XML描述2D圖形的語言。在SVG中，每個被繪製的圖形被視為物件。如果SVG物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。 延伸閱讀 常見的html5事件有哪些： 常見的html5事件有：1.一般事件；2.頁面相關事件； 3.表單相關事件；4.滾動字幕事件；5.編輯事件；6.觸發的事件；7.外部事件。 1.一般事件 onClick：滑鼠點擊事件，多用在某個物件控制的範圍內的滑鼠點擊；onDblClick：滑鼠雙擊事件；onMouseDown：滑鼠上的按鈕被按下了；onMouseUp：滑鼠按下後，放開時激發的事件；onMouseOver：當滑鼠移動到某個物件範圍的上方時觸發的事件；onMouseMove：滑鼠移動時觸發的事件；onMouseOut：當滑鼠離開某個物件範圍時觸發的事件；onKeyPress：當鍵盤上的某個按鍵被按下並且釋放時觸發的事件；onKeyDown：當鍵盤上某個按鍵被按下時觸發的事件；onKeyUp：當鍵盤上某個按鍵被按放開時觸發的事件。 2.頁面相關事件 onAbort：圖片下載時被使用者中斷；onBeforeUnload：目前頁面的內容將會被改變時觸發的事件；onError：捕抓住目前頁面因某些原因而出現的錯誤，如腳本錯誤與外部資料引用的錯誤；onLoad：頁面內空完成傳送到瀏覽器時觸發的事件，包括外部文件引入完成；onMove：瀏覽器的視窗被移動時觸發的事件；onResize：當瀏覽器的視窗大小改變時觸發的事件；onScroll：瀏覽器的滾動條位置發生變化時觸發的事件；onStop：瀏覽器的停止按鈕被按下時觸發的事件或正在下載的檔案中斷；onUnload：目前頁面將被改變時觸發的事件。 3.表單相關事件 onBlur：當前元素失去焦點時觸發的事件[滑鼠與鍵盤的觸發均可]；onChange：當前元素失去焦點並且元素的內容改變而觸發的事件[滑鼠與鍵盤的觸發皆可]；onFocus：當某個元素獲得焦點時觸發的事件；onReset：當表單中RESET的屬性被激發時觸發的事件；onSubmit：一個表單被遞交時觸發的事件。 4.滾動字幕事件 onBounce： 在Marquee內的內容移動至Marquee顯示範圍之外時觸發的事件；onFinish：當Marquee元素完成需要顯示的內容後觸發的事件；onStart：當Marquee元素開始顯示內容時觸發的事件。 5.編輯事件 onBeforeCopy HTML:當頁面目前的被選擇內容將要複製到瀏覽者係統的剪貼簿前觸發的事件；onBeforeCut：當頁面中的一部分或全部的內容將被移離目前頁面[剪貼]並移動到瀏覽者的系統剪貼簿時觸發的事件。 6.觸發的事件 onBeforeEditFocus：目前元素將要進入編輯狀態；onBeforePaste：內容將會從瀏覽者的系統剪貼簿傳送[貼上]到頁面中時觸發的事件；onBeforeUpdate：當瀏覽者貼上系統剪貼簿中的內容時通知目標物件；onContextMenu：當瀏覽者按下滑鼠右鍵出現選單或透過鍵盤的按鍵觸發頁面選單時觸發的事件[試試在頁面中的中加入onContentMenu=”return false”就可禁止使用滑鼠右鍵了]； onCopy：當頁面目前的被選擇內容被複製後觸發的事件；onCut：當頁面目前的被選擇內容被剪切時觸發的事件；onDrag：當某個物件被拖曳時觸發的事件[活動事件] ；onDragDrop：一個外部物件被滑鼠拖進目前視窗或幀；onDragEnd HTML:當滑鼠拖曳結束時觸發的事件，即滑鼠的按鈕被釋放了；onDragEnter：當物件被滑鼠拖曳的物件進入其容器範圍內時觸發的事件；onDragLeave：當物件被滑鼠拖曳的物件離開其容器範圍內時觸發的事件；onDragOver：當某被拖曳的物件在另一物件容器範圍內拖曳時觸發的事件[活動事件]；onDragStart：當某個物件將被拖曳時觸發的事件；onDrop：在一個拖曳過程中，釋放滑鼠鍵時觸發的事件；onLoseCapture：當元素失去滑鼠移動所形成的選擇焦點時觸發的事件； onPaste：當內容被貼上時觸發的事件；onSelect：當文字內容被選擇時的事件；onSelectStart HTML：當文字內容選擇將開始發生時觸發的事件。 7.外部事件 onAfterPrint：當文件列印後觸發的事件；onBeforePrint：當文件即將列印時觸發的事件；onFilterChange：當某個對象的濾鏡效果改變時觸發的事件；onHelp：當瀏覽者按下F1或瀏覽器的幫助選擇時觸發的事件；onPropertyChange：當物件的屬性之一發生變化時觸發的事件；onReadyStateChange：當物件的初始化屬性值發生變化時觸發的事件。
