教學與資訊
HTML5 設定依據不同解析度讀取不同影片(video)
HTML5 允許我們設定在不同解析度下讀取不同影片，只要在 video 的標籤內設定 source 的 media 就可以了，這邊的 media 就跟 media query 的 media 概念一樣。
教學與資訊
教學與資訊
利用 YouTube API 製作網頁全螢幕影片背景播放區塊
說明如何使用 Youtube Player Iframe API 製作網頁全螢幕背景播放的效果。
網路資源
HTML5 Security Cheatsheet- 收錄了網頁前端各種需要認識的資安相關知識的網站
HTML5 Security Cheatsheet 是一個收錄了網頁前端各種需要認識的資安相關知識的網站。
網路資源
HTML5 Canvas Cheat Sheet- HTML5 Canvas 的簡單 Cheat Sheet
HTML5 Canvas Cheat Sheet 是一個收錄了比較簡單且常用的 HTML5 Canvas API 的網站。
網路資源
Awesome Cheatsheets- 好用的熱門程式語言與框架語法整理網站
Awesome Cheatsheets 是一個收錄了許多熱門程式語言與框架語法的網站，包含像 PHP、javascript、C、C#、Laravel、Django、Vue.js、Angular、React、Docker、Xcode...等，還有很多沒有提到的，如果有興趣可以前往看看自己平常在寫的程式語言，有沒有什麼沒有用過的好用語法。
教學與資訊
使用 Web Share API- Navigator.share() 讓使用者分享內容
說明使用 Web Share API- Navigator.share() 讓使用者分享內容的方法。
教學與資訊
認識 Progressive Web App，什麼是 PWA?
PWA 全名為漸進式網路應用程式（Progressive web app），是使用當代 web API，並以漸進增強策略，建立跨平台 web 應用程式。這些程式提供了能讓用戶體驗，逼近於原生程式的功能。
教學與資訊
[javascript] 透過 HTML5 API 做表單驗證
透過 HTML5 API，我們就可以透過設定表單驗證的錯誤訊息客製化瀏覽器內建的驗證行為。
教學與資訊
HTML5 透過 accept 屬性設定上傳檔案的格式限制
HTML5 可以直接在 input 欄位設定可以接受的檔案格式，只要在 accept 屬性裡加上允許的檔案格式副檔名就好了。
教學與資訊
使用 HTML 原生的 dialog，讓製作彈出視窗更簡單
HTML 的 dialog 是一個新的標籤，如同其語意，可以讓我們更輕鬆製作可以和使用者互動的提示訊息框。
教學與資訊
[Vue.js] 利用 HTML5 File api
這邊紀錄一下用 Vue.js 使用 HTML5 File api 的方法。
教學與資訊
HTML 的 output 標籤
認識一下 HTML 的 output 標籤，這個標籤可以直接把輸入的內容輸出。
教學與資訊
HTML 的 datalist 標籤
datalist 是 HTML5 新增的滿有趣的標籤，這邊簡單說明一下用法。
教學與資訊
修改 html input placeholder 的顏色
placeholder 是 HTML5 後新增的 input 欄位的浮水印效果，可以用來提示使用者輸入的內容與格式之類的，要修改 placeholder 的顏色，要使用 CSS 的 ::placeholder 屬性。
教學與資訊
HTML5 棄用的標籤
HTML5 普及後，以下是建議不要再使用的標籤，包含：big、basefont、center...等。
教學與資訊
PWA 與 Service Worker
Service Worker 是一種 JS 的 Web Worker ，他是一隻獨立運行於瀏覽器頁面執行緒之外的一隻 JS 檔案，可以攔截網路請求，存取快取資源，並且能傳送訊息。也因為 Service Worker 可以攔截網路請求並改變 reponse，所以只能在 localhost 或是 https 上使用。
教學與資訊
Web App Manifest
Web App manifest 是一個 JSON 格式的文件，它提供了應用程式相關的資訊，像是名稱、作者、圖示和描述等，還可以設定類似 app 的開啟畫面，可以讓使用者將 Web 應用程式安裝到設備的主畫面，提供更快速的訪問和更豐富的體驗。
教學與資訊
HTML5 的 Geolocation(地理位置) API
Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度，所以大部分的情況用手機的定位會比較精準一些，但也可能因為環境的關係會飄到奇怪的地方，要使用的話要注意誤差的問題。