感覺差不多要進入到JavaScript了，所以今天先把靜態網頁CSS 排版 + class/id 概念的基礎補好，等版面能排得漂亮一點，隔天實作上去，之後進入 JavaScript 會比較順利。

HTML：語義化的結構標籤

index.html

這些標籤本質上和 <div> 差不多，但有「語意」，讓我們能更清楚分辨

• <header>：標頭（通常放標題、導覽列）。
• <footer>：尾端（通常放聯絡資訊、版權、頁尾連結）。
• <section>：表示一個主題區塊（例如「糖尿病介紹」、「紀錄表格」）。
• <article>：一篇獨立的文章內容。
• <aside>：側邊資訊（例如延伸閱讀、相關連結）。

等等會把index.html的頁面做語意分類的處理，讓程式碼更加清楚。

report.html

另外在表單的部分調整成更多的輸入型態要新增：

• 單選按鈕 (radio)：只能選一個

<p>今天有運動嗎？</p>
<input type="radio" id="exercise_yes" name="exercise" value="yes">
<label for="exercise_yes">有</label>
<input type="radio" id="exercise_no" name="exercise" value="no">
<label for="exercise_no">沒有</label>

• 多選方塊 (checkbox)：可以選多個。

<p>運動種類：</p>
<input type="checkbox" id="jump" name="sport" value="jump">
<label for="jump">跳繩</label>
<input type="checkbox" id="walk" name="sport" value="walk">
<label for="walk">快走</label>
<input type="checkbox" id="swim" name="sport" value="swim">
<label for="swim">游泳</label>

• 多行文字 (textarea)：適合寫比較多的內容。

<p>備註：</p>
<textarea id="remark" name="remark" rows="4" cols="40"></textarea>

CSS的 flexbox 排版

flexbox定義

通常用在「一排或一列」的排版，例如：(首頁｜紀錄｜填寫)，按鈕橫排。

display: flex;

常見的屬性

• justify-content：控制水平方向對齊
  • flex-start（靠左，預設）
  • center（置中）
  • space-between（左右兩邊貼齊，中間自動分散）
• align-items：控制垂直方向對齊
  • center（垂直置中最常用）
• gap：控制元素間的間距（比用 margin-right 更方便）

Class

幫 <nav> 設一個 class

<nav class="navbar">
    <a href="index.html">首頁</a>
    <a href="report.html">紀錄</a>
    <a href="record.html">填寫</a>
</nav>

然後在 CSS 裡針對 .navbar 來排版

.navbar {
    display: flex;
    justify-content: center; /* 水平置中 */
    gap: 20px; /* 超簡單的間距控制 */
}

以上是今天的部分，明天再來實作~。