HTML5

HTML5中的一些有用的技巧

警告：此文章已經過時，可能無法反應目前的技術狀態。自動焦點當頁面加載時，<input autofocus="autofocus" />會將焦點放在指定的HTML元素上。下載文件 <a href="file.pdf" download="pdf-file">下載</a>將下載指定的文件，並提供文件名。隱藏元素儘管將表現放在HTML中並不理想，但<div hidden="hidden"></div>有時會派上用場。關閉（或打開）拼寫檢查操作系統設定了拼寫檢查功能，它有時可能會妨礙使用者輸入 - <input type="text" spellcheck="true|false">有助於解決此問題。自動建議文字輸入控件 <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist>

什麼是 Doctype

任何 HTML 文件都必須以文件類型聲明（Document Type Declaration），簡稱 Doctype，開頭，該聲明告訴瀏覽器該頁面使用的 HTML 版本。任何 HTML 文件都必須在第一行開始以文件類型聲明（簡稱doctype）開始，該聲明告訴瀏覽器該頁面使用的 HTML 版本。這個文件類型聲明（不區分大小寫）： <!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文件。瀏覽器渲染模式有了這個聲明，瀏覽器可以以標準模式來呈現文件。如果沒有它，瀏覽器將以怪異模式來呈現頁面。如果你聽過怪異模式，你必須知道瀏覽器引入這種渲染模式是為了使以「舊風格」編寫的頁面與使用的新功能和標準兼容。如果沒有它，隨著瀏覽器和 HTML 的發展，舊的頁面將破壞其外觀，而網絡平台在這方面一直非常保護（這是我認為其成功的一部分）。瀏覽器基本上在未識別頁面為標準模式的情況下默認使用怪異模式。你希望使用標準模式，並且 <!DOCTYPE html> 是實現它的方法。對於 Internet Explorer <= 10 的使用者，還需要額外注意避免怪異模式，方法是在頁面的 <head> 標籤中，在加載任何腳本之前，插入以下內容： <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 舊的 HTML 版本 HTML 有一套奇怪的版本： HTML（1991） HTML 2.0（1995） HTML 3.2（1997） HTML 4.01（1999） XHTML（2000） HTML5（2014） HTML 4.01 Strict 文件的文件類型聲明為： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 類似：...

如何將文本寫入 HTML canvas

使用 CSS 或 HTML 的 width / height 屬性設定 canvas 的大小，例如 200 x 400： <canvas width="200" height="400"></canvas> 並且確保也在 JavaScript 中設定 canvas 物件的寬度 / 高度屬性，以避免文本模糊呈現，例如： canvas.width = 1800 canvas.height = 1200 首先，獲取對 canvas 的引用： const canvas = document.querySelector('canvas') 然後從它創建一個上下文對象： const context = canvas.getContext('2d') 現在，我們可以調用上下文對象的 fillText() 方法： context.fillText('hi!', 100, 100) 確保起點的 x 和 y 坐標包含在 canvas 的大小內。你可以在調用 fillText() 之前傳遞額外的屬性來自定義外觀，例如： context.font = 'bold 70pt Menlo' context.fillStyle = '#ccc' context.fillText('hi!', 100, 100)

設置項目以使用Phaser構建JavaScript遊戲

建立一個現代化的項目，並開始使用Phaser 3構建JavaScript HTML5遊戲 Phaser是一個了不起的平台，它使創建遊戲變得非常簡單，還支持物理引擎。它足夠受歡迎，你可以找到插件和工具來更好地構建遊戲並更快地構建遊戲。它基於HTML5技術，這意味著您可以通過Web進行遊戲分發，並且如果需要，也可以將其打包為桌面或移動應用程序。遊戲編程是一個大的主題，在這個介紹中，我想談談基本知識，這些基本知識足以創建簡單的遊戲。在這個教程中，我想詳細介紹一個最佳設置，以使用Phaser 3構建遊戲。讓我們在文件夾中使用npm安裝phaser： npm init -y npm install phaser 現在讓我們設置 Parcel 來打包我們的遊戲： npm install -g parcel-bundler 現在創建一個 game.js 文件，內容如下： import Phaser from 'phaser' new Phaser.Game() 現在運行 parcel watch game.js Parcel將在 dist/game.js 文件中生成我們的JavaScript代碼。現在創建一個 index.html 文件，內容如下： <!DOCTYPE html> <html> <head> <script src="./dist/game.js"></script> </head> </html> 安裝 browser-sync 以運行一個包含這個文件夾內容的HTTP服務器： npm install -g browser-sync 然後運行 browser-sync start --server --files "." 上述命令將監視當前文件夾（和所有子文件夾）中的所有文件的變化，并在端口3000上啟動一個Web服務器，自動打開一個瀏覽器窗口連接到服務器。每次您更改文件時，瀏覽器將自動刷新。在我們原型開發遊戲時，這將非常有用。您現在應該在瀏覽器中看到一個空白屏幕，因為我們初始化了Phaser： import Phaser from 'phaser' new Phaser....