第一個 HTML 頁面已能開啟，今天要放上狀態顯示區與遠端切換按鈕。
狀態區負責呈現 MCU 回報的結果，按鈕則是未來發出遠端操作命令的入口，兩者用途不同，因此要使用獨立的 HTML 元素與識別名稱。
狀態顯示採用 <div>，因為它適合包住一個可由程式更新的區塊，操作入口則使用 <button>，瀏覽器會將它辨認為可以點擊的控制元件。
將 assets/index.html 的 <body> 改成以下內容。
<!-- 本日新增 -->
<body>
<h2>LED 遠端控制</h2>
<div id="status" class="off">OFF</div>
<button id="toggle-btn">切換 LED</button>
</body>
<div> 目前顯示 OFF，代表頁面開啟時先使用關閉外觀，但這只是初始文字，尚未證明 MCU 的實際狀態，真正同步功能會等 Python 與 JavaScript 接通後完成。
<button> 會在瀏覽器產生可點擊按鈕，目前按下後沒有反應，因為 HTML 只定義結構，並不知道點擊後應執行什麼程式。
id="status" 與 id="toggle-btn" 分別替兩個元素建立唯一名稱，後續 CSS 可以指定外觀，JavaScript 也能依名稱取得元素並修改內容。
同一個頁面不應讓多個元素共用相同 id，否則程式無法確定要操作哪一個物件，本專案固定使用 status 與 toggle-btn，後續不再任意更名。
名稱中的連字號只是一部分字串，JavaScript 取用時必須完整寫成 "toggle-btn"，不能自行改成底線或省略其中一段。
狀態區除了 id，還設定 class="off"，id 用來辨認這一個元素，class 則描述它目前使用哪一組外觀規則。
未來狀態為 ON 時，JavaScript 會將 class 改為 on，狀態為 OFF 時再改回 off，畫面就能依同一個元素套用不同顏色。
目前尚未建立 CSS，因此 off 不會立即改變外觀，但先固定名稱可以讓後續樣式與程式共用同一套介面。
檢視頁面原始碼時，應能清楚找到 status 與 toggle-btn，這兩個名稱將一路沿用到最終版本，若後續改名，CSS 與 JavaScript 也必須同步修改，因此此時先確認命名比先追求外觀更重要。
元素階層保持簡單
標題、狀態區與按鈕都直接放在 <body> 中，現階段不增加多餘容器，讓讀者能直接看出頁面只有三個主要元素。
HTML 的順序也會影響預設畫面排列，瀏覽器會先顯示標題，再顯示 OFF，最後顯示按鈕，Day 20 加入 CSS 後才會進一步處理置中與間距。
重新執行 App 並整理瀏覽器，畫面應同時出現標題、OFF 文字與「切換 LED」按鈕，點擊按鈕後畫面不會改變，Python Console 也不會收到訊息。
這個結果代表 HTML 結構已完成，而不是功能失敗，本日尚未加入 JavaScript，按鈕只需要能被看見與點擊即可。
同時按下 D9，實體 LED 雖會切換，網頁仍顯示 OFF，這也證明目前頁面只是靜態畫面，後續必須建立狀態同步路徑。
驗收本日成果時，只要三個元素順序正確、名稱固定且按鈕可以被瀏覽器點擊即可，不應要求它提前產生控制效果。
<div> 建立狀態顯示區。<button> 建立遠端操作入口。id 固定 JavaScript 使用的元素名稱。class="off" 預留狀態樣式。現在管理頁面已經有狀態區與按鈕，但仍是瀏覽器預設排版，下一篇要用 CSS 把它整理成比較像控制台的畫面。
下一篇｜用 CSS 渲染頁面
iThome鐵人賽
看影片追技術