好程序員技術分享html5和JavaScript的區別

好程序員技術分享html5和JavaScript的區別，HTML5廣義上講是前端開發學科的代名詞，包含HTML五、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編程，服務端渲染，前端架構等等。

小白入門，一時間還真有點無從下手。若是基礎好，自學能力強，自制能力強，能夠買些書籍或視頻學習，若是想系統的短時間速成，能夠考慮報個培訓班。

但願能幫到你，祝你早日煉成前端達人。