標籤: HTML5 頁1

教學

修改 html input placeholder 的顏色

placeholder 是 HTML5 後新增的 input 欄位的浮水印效果,可以用來提示使用者輸入的內容與格式之類的,要修改 placeholder 的顏色,要使用 CSS 的 ::placeholder 屬性。

教學

HTML5 棄用的標籤

HTML5 普及後,以下是建議不要再使用的標籤,包含:big、basefont、center...等。

教學

使用 Indexed Database API 存取資料

使用 Indexed Database API 開發的步驟為:1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。

教學

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來取得經緯度,所以大部分的情況用手機的定位會比較精準一些,但也可能因為環境的關係會飄到奇怪的地方,要使用的話要注意誤差的問題。

教學

IndexedDB基礎概念

IndexedDB 讓我們透過資料鍵 (key) 儲存、取回物件。所有對資料庫的變更都發生在交易操作;如同大部分網頁儲存方案,IndexedDB 遵守同源政策,也就是說我們只能存取同網域下的資料。

教學

HTML5 的 Web Storage- local storage 與 session storage

以往我們要在使用者端存取資料會使用 cookie,但 cookie 可以存的資料非常有限,所以後來 HTML5 發展出了 Web Storage,而 Web Storage 又分成了 local storage 和 session storage。

教學

HTML5 的 Video and Audio APIs(音樂與影片控制)

我們可以透過 HTML5 的 Video and Audio APIs 來實現自製播放器的功能。

教學

HTML5 新的 input 屬性

HTML5 新的 input 的類型,包含color、range、number、email、url、tel、search、date、time、datetime-local、week、month...等

教學

Notification- 瀏覽器的推播通知

Web Notifications API 可將通知傳送至頁面以外的系統層級並顯示通知,但要使用的話需要使用者授權才有辦法接收通知。

教學

Shared workers- 跨越不同 window、iframe 或 worker處理 script

要在兩個頁籤(視窗)共用一個 script,我們可以使用 Shared workers 來執行。

教學

讓網頁在背景執行緒 (Thread) 中執行程式- Web Workers

Web Workers 提供簡單的方法讓網頁在背景執行緒 (Thread) 中執行程式,而不干擾使用者介面運行,而且兩線可以透過 postMessage 發送訊息、onmessage 接收訊息來溝通。

教學

HTML5 Drag and Drop(拖曳效果)

使用 HTML5 的 Drag and Drop 來實現物件在區塊內拖曳的效果。

教學

HTML5 的 File API

透過 File API ,我們可以讓瀏覽器顯示預備要上傳的檔案的資料,接著利用 readAsText 抓取文字內容或利用 readAsDataURL 抓取圖片內容。

教學

修改頁面內容- HTML5 中的 execCommand 指令

HTML5 中的 execCommand 是用來讓網頁選取位置產生變化,如: 文字處理(複製、貼上、剪下)、排版(對齊、編號、上下標)、變更字型與大小等等...

教學

可編輯的 HTML 區塊- contenteditable 與 designMode

contenteditable 與 designMode 都是 html5 新增的屬性,目的就是讓 html 的區塊變成可以編輯,差別在於 contenteditable 是用來指定區塊,而 designMode 則是可以對整個 html 文件切換可編輯狀態。

教學

HTML5 Canvas 基礎(七) 生成圖片- toDataURL

要把 canvas 的內容轉成圖片,只要透過 toDataURL 就可以了,toDataURL可以再設定圖片的格式和品質。