隨著瀏覽器不斷的進步，新技術可以讓網頁工程師更輕鬆的開發出更符合現代需求的網站，圖片與嵌入網頁一直都是最拖累網站載入速度的元素，過去為了加速載入網站，我們運用 JavaScript 延遲載入 （圖片） 或 （嵌入網頁），舉例來說有 Intersection Observer API 可以做到，還有 scroll、

這次要教學的是寫一個短短的 JavaScript 原始碼就可以做到「點擊任一按鈕使其他按鈕無法點擊」，同場加映 3 秒後恢復原狀！會使用到 取得按鈕 ID，接著運用 （點擊）事件改變另外兩顆按鈕，為他們加上屬性 與其值 ，這樣就停用這兩顆按鈕啦！三顆按鈕都做好後最後就是加映場，一樣也是做三個按鈕，不過這次用的是 （添加事件監聽）的 （點擊）事件，這是用來監聽點擊事件用的原始碼，

很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉！這邊直接示範把網頁元素置於整個網頁畫面的中央位置，這樣如果你要做其他的運用也只要簡單修改就可以做到。 這邊首先要把 、 設定為寬高都為 100%，接著建立一個 容器設定 display 為 flex，接著設定兩個屬性給這個容器： align-items 是垂直方向對齊；

好久一段時間沒來研究前端，這次的主題是「打造多國語言的靜態網頁」，上網搜尋找到非常多的作法，但這次我想找的是相對最為簡單、技術門檻最低的方式，因此找了 GitHub 上不少慷慨工程師留下的原始碼，不過很多都有問題無法運作，排除掉複雜且有問題的資料後，最終一位來自伊朗的工程師的原始碼幫我完成了這次的研究，本文的前端開發基於它的靈感 👉 jq-multi-lang 首先，

<datalist> 是 HTML 原生的標籤，目的是用來建立一組資料清單，並與 <input> 輸入欄位做結合，到瀏覽器端顯示時，使用者只要點擊輸入欄位即會跳出下拉選單，可以在開發者定義好的資料清單中做選擇，且在欄位內輸入與資料清單有關之文字，還能有自動補字或自動完成之效果，舉例來說，在做國家、縣市、地區等輸入時就可以用到。 1. 先建立 <input>，並在標籤內塞入 list 屬性並做命名。

在 HTML 中，<button> 並沒辦法直接加上 href 屬性使按鈕作為連結，因此需要靠一些「手段」讓按鈕有像是 <a> 一樣的行為。 首先是方法一，利用一個 <form> 將 <input type="submit"> 包在裡面，而外頭的 <form> 還要給予一個 action 屬性以給予連結，原始碼如下： 再來是方法二，利用 JavaScript 來設定 ，可以做到類似連結的效果，

學過網頁的人都知道 HTML 中的 <a> 標籤是用來做連結的，而我們有時會需要在網頁中導引訪客連結至一個檔案，而該檔案有可能是 DOCX、PPTX 或 PDF 等，而某些檔案瀏覽器因為無法預覽會直接跳出下載，然而像是 PDF 這種可預覽的格式則會直接給訪客進入預覽，但有時候開發者可能更希望訪客是直接下載這些檔案的，因此就可以透過新增download 屬性讓連結可直接執行下載！

Master 是一套由台灣人開發的前端框架，倡導虛擬 CSS（Virtual CSS）的概念，將 CSS 語法都寫在 HTML 的 class 中，這樣開發者就不用每次都還要去想怎麼命名 class，或者修改一個 class 卻導致多處版面破壞， 非常新穎的觀念！重點是它真的超輕量化，僅僅才 13KB，因此對使用者的流量負擔極小，而且還能將 CSS 屬性縮寫，如：padding → p、