https://magiclen.org/tag/html/feed多元化原創文章，內容包羅萬象，有程式語言、網站應用、軟體介紹、硬體介紹、作業系統、旅行遊記、專題採訪、益智問題、文學創作，以及作者們的知識分享和作品分享。zh-TWSun, 19 Apr 2026 05:34:14 +0000hourly81970-01-01T00:00+00:00https://magiclen.org/input-time-helper 在預設的情況下，基於日期和時間的HTML input元素值是以UTC時區為基準，這很容易造成混淆而誤用。]]>JavaScriptHTMLJavaScriptTypeScriptinput-time-helperhttps://magiclen.org/input-time-helperSat, 23 Dec 2023 18:00:00 +0800Magic Lenhttps://magiclen.org/fit-html-text 早在2017年筆者在開發前端網頁的時候就遇到兩個問題：如果要做一個網頁，這網頁滿版顯示，在任意螢幕尺寸下都要長的差不多，文字的大小要怎麼處理呢？還有就是在文字高度僅允許一行文字的空間下，要怎麼保證使用者輸入的文字不會因為太多而使得顯示出來的時候換行，或是換太多行了，而導致畫面跑版？]]>JavaScriptHTMLJavaScriptTypeScriptfit-html-texthttps://magiclen.org/fit-html-textSat, 23 Dec 2023 17:00:00 +0800Magic Lenhttps://magiclen.org/html-escape 在進行網頁開發的時候，可能會需要將使用者輸入的資料顯示在HTML網頁上，此時的網頁就會暴露在XSS(Cross-Site Scripting)攻擊的危險下。如果網頁不做任何檢查，將使用者輸入的資料嵌入至網頁中的話，輸入資料中的HTML語法就會直接影響到網頁，就會使得網頁爛掉或是藏有惡意的連結和腳本。為了讓使用者輸入的資料不會被當作是一般的HTML語法，需要將特定的保留字元進行跳脫處理，像是「&lt...]]>RustHTMLRusthtml-escapehttps://magiclen.org/html-escapeTue, 6 Oct 2020 20:00:59 +0800Magic Lenhttps://magiclen.org/rust-html-outliner 一個定義良好的HTML標題結構除了能讓訪客更輕鬆地瀏覽網頁之外，也能夠幫助搜尋引擎更精確地理解HTML文件的內容，提高網站的搜尋排名。要如何使用Rust程式來產生HTML文件的標題大綱(Outline)呢？]]>RustHTMLRustSEOHTML Outlinerhttps://magiclen.org/rust-html-outlinerFri, 28 Aug 2020 07:00:15 +0800Magic Lenhttps://magiclen.org/html-script-async-defer 現代的HTML網頁常會加入大量的「腳本(Script)」來讓網頁擁有各式各樣的功能。腳本固然強大，但若使用不當，很容易造成網頁的載入時間變長，影響使用者體驗。]]>研究分享HTMLHTMLhttps://magiclen.org/html-script-async-deferThu, 14 May 2020 12:00:28 +0800Magic Lenhttps://magiclen.org/webpack-html Webpack是JavaScript的模組建置工具，運行在Node.js上，它可以將零散的JavaScript檔案用各式工具優化並打包起來，加快網頁的載入時間。Webpack也並不限於用在JavaScript上，它除了還能打包網頁有用到的靜態資源(如JS、CSS、圖片檔等)外，也還能透過HTML模板來產生HTML網頁。]]>研究分享HTMLJavaScriptHTMLJavaScriptnode.jsHandlebarsWebpackReactJSXBabelhttps://magiclen.org/webpack-htmlTue, 1 Oct 2019 12:00:06 +0800Magic Lenhttps://magiclen.org/rust-webassembly-conways-game-of-life-performance 前面花了幾個章節製作的康威生命遊戲，功能已經大致上完成了，不過我們還無法確定其效能是否還有可以優化的空間，必須要用一些方式來偵測才行。]]>研究分享RustWebassemblyJavaScriptHTMLJavaScriptnode.jsRustWasmWebpack用Rust開發Web­Assembly康威生命遊戲TypeScripthttps://magiclen.org/rust-webassembly-conways-game-of-life-performanceThu, 19 Sep 2019 12:00:18 +0800Magic Lenhttps://magiclen.org/rust-webassembly-conways-game-of-life-interact 在這個章節中，我們要替康威生命遊戲加入播放、暫停和逐格播放這幾個時間控制的功能，並且讓培養皿中的格子會因玩家滑鼠游標的點擊事件而改變狀態。]]>研究分享RustWebassemblyJavaScriptHTMLJavaScriptnode.jsRustWasmWebpack用Rust開發Web­Assembly康威生命遊戲TypeScripthttps://magiclen.org/rust-webassembly-conways-game-of-life-interactTue, 17 Sep 2019 12:00:01 +0800Magic Lenhttps://magiclen.org/rust-webassembly-conways-game-of-life 康威生命遊戲(Conway's Game of Life，又稱康威生命棋)是一個模擬生物細胞存活、繁殖與滅亡的遊戲。雖然這個稱為「遊戲」，但它其實不怎麼好玩，它是透過電腦來模擬出一個培養皿空間，這個培養皿中在一開始會被放置一些虛擬細胞，而這些細胞會遵循一些「遊戲規則」來決定其在下一個階段是持續生存、還是要繁殖、抑或是毀滅。藉由圖像化這個培養皿，我們可以從中觀察到一些有趣(?)的圖像。]]>研究分享RustWebassemblyJavaScriptHTMLJavaScriptnode.jsRustWasmWebpack用Rust開發Web­Assembly康威生命遊戲TypeScripthttps://magiclen.org/rust-webassembly-conways-game-of-lifeFri, 13 Sep 2019 12:00:43 +0800Magic Lenhttps://magiclen.org/rust-webassembly-introduction WebAssembly(簡稱Wasm)，是一個安全、可移植(無硬體和作業系統相依)的低階語言(類似組合語言)，由W3C制定標準，並由世界四大瀏覽器Mozilla Firefox、Microsoft Edge、Google Chrome和Apple Safari的提供商共同開發，能用來製作高效能且體積小的程式，通常是應用在Web上，但也不限於此。WebAssembly並不是利用新語法來編譯出優化過的...]]>研究分享RustWebassemblyJavaScriptHTMLJavaScriptnode.jsRustWasmWebpack用Rust開發Web­AssemblyTypeScripthttps://magiclen.org/rust-webassembly-introductionMon, 9 Sep 2019 12:00:29 +0800Magic Len