鐵人檔案
1. HTMX 已經推出了一段時間，目前 Github 專案上也累積了一萬多個 Star，主要的特色就是減少 JS 的撰寫，直接在 HTML 標籤的屬性中撰寫 AJAX, WebSocket... 等請求行為，也許對於獨立開發全端 Side Project 來說會非常方便，相關的教學文章不多，且主要是簡體和英文，所以藉著這次鐵人賽來學習，希望也能幫到其他有興趣的人。
2. 承接上面的情境，HTML/CSS/JS 一直都有推出新的功能，加上 IE 已經正式告別，許多舊的網頁課程沒有介紹到這些好用的東西，在 HTMX 的篇幅結束後會分享一些自己在專案上使用的新功能（主流瀏覽器都完整支援為主）。
HTMX 的由來 HTMX（https://htmx.org/ )大約在去年(2022)下半年開始出現討論聲量，但實際上已經存在了一段時間，他的前身是 2013...
HTMX 使用方式很簡單，像 jQuery 一樣使用<script> 標籤引入來源就好，以下是官方文件（https://htmx.org/docs/...
Form Methods 先來 MDN 回顧一下，原生的 form 僅提供 GET、POST 兩種方法（MDN Doc： https://developer.m...
事件觸發(trigger) 除了 HTML 原生的 button、input 等事件，HTMX 可以在任意標籤的屬性上加入其他的事件觸發，使用方式為hx-tri...
特殊事件 接續昨天講的事件觸發hx-trigger，HTMX 也提供了一些特殊場景應用： load - 元素載入後觸發，只會觸發一次 revealed - 滾...
渲染對象 如果 API 請求後要把 Response 渲染到畫面上，可以使用 hx-target="CSS 選取器" 來指定要渲染到哪個元素...
屬性說明 當畫面開始變得複雜，AJAX 請求可能不是簡單的單一元素加上一個請求、一個回應，這時候就可以使用 hx-sync 來處理多個元素之間 AJAX 請求的...
CSS Transitions 當元素使用到 HTMX 的替換內容功能時，會自動加上已經寫好的 css transition 效果，不需要再用 JS 控制。 以...
hx-swap-oob 屬性可以設置在 AJAX 的回應中，把回應的內容渲染到額外指定的 ID 元素上（Out of Band），以下是簡單範例： <!-...
基本應用 在前面的許多範例裡，都會使用到 form 來觸發 AJAX，HTMX 中跟隨原生的 form 操作方式，觸發 submit 時，所有 form 裡面的...
