好程式設計師 技術分享 html5和JavaScript的區別， HTML5廣義上講是前端開發學科的代名詞，包含HTML5、CSS3及JavaScript三個重要的部分，是執行在瀏覽器上應用的統稱。如PC端網站、管理系統、手機網頁應用（WebApps）、混合應用（HybridApps）、微信公眾號、小程式、小遊戲、資料視覺化等。

HTML5狹義上講是指HTML版本5（v5）,相較HTML4，增加了很多新的元素（標籤）和元素屬性，大大增強了HTML的語義化和表現力，這一部分屬於頁面結構的內容，比如媒體標籤video、audio，畫布canvas標籤，這三個新標直接K.O了flash。另外，HTML5增加了很多API，為移動APP開發奠定了堅實的基礎，比如最佳化了本地儲存（WebStorage）、應用的離線快取（Application Cache）、地理定位（Geolocation）、監聽網路狀態等。

上述的 HTML5新增的API就是透過JavaScript來呼叫的，或者本身就是JavaScript程式。下面列示一些重要的API：

API名稱	功能描述	API舉例
應用快取	web 應用可進行快取，並可在沒有因特網連線時進行訪問	透過配置Manifest檔案實現快取
WebSQL	Web SQL Database概念，它使用 SQL 來操縱客戶端資料庫的 API	openDatabase() transaction() executeSql
本地儲存	web 應用程式能夠在使用者瀏覽器中對資料進行本地的儲存	window.localStorage window.sessionStorage
Canvas	HTML5 <canvas> 標籤透過JavaScript繪製影像	createLinearGradient() fillRect() stroke() bezierCurveTo() transform() drawImage()
檔案API	讓前端操作檔案變的可能	FileList、File、Blob、FileReader、URL
地理定位	HTML5 Geolocation（地理定位）用於定位使用者的位置	navigator.geolocation.getCurrentPosition(showPosition)
多媒體	在網頁裡播放音訊和影片的新的Api	video，audio系列API
拖放	最佳化了原生JavaScript實現的拖放	ondragstart、setData()、ondragover、ondrop
history	window物件透過history物件提供了對瀏覽器歷史的訪問	pushState()、replaceState()
網路狀態	HTML5網路狀態檢測	window.ononline、window.onoffline
WebWorker	web worker 是執行在後臺的 JavaScript，不會影響頁面的效能	new Worker()、postMessage()
WebSocket	WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議	Socket.send()、Socket.close()

以上可見， HTML5新增的API，是離不開JavaScript的，JavaScript是前端開發的核心，只學HTML5，或者說只學HTML5標籤是不能進行前端開發的，或者這樣說本來就是不全面的，因為HTML5是包含JavaScript Api的。

目前，大前端的概念已經深入人心，大前端開發的職業前景越發的廣闊， Google fluter，人工智慧（AI）在前端的應用賦能大前端開發，使這些從業者越來越搶手。

大前端開發包括很多內容 : HTML5,CSS3,JavaScript,ES,TypeScript,BootStrap,jQuery,Vue.js, React, RN, Angular, 各類小程式，JavaScript庫，前端開發工具，Node.js,狀態管理，桌面開發(Electron), 前端單元測試，伺服器，Socket程式設計，服務端渲染，前端架構等等。

小白入門，一時間還真有點無從下手。如果基礎好，自學能力強，自制能力強，可以買些書籍或影片學習，如果想系統的短期速成，可以考慮報個培訓班。

希望能幫到你，祝你早日煉成前端達人。

好程式設計師技術分享html5和JavaScript的區別

相關文章