HTML 前端核心知識體系：XHTML 規範、語義化標籤與表單實戰

HTML 前端核心知識體系

現代前端開發遵循結構、表現、行為分離原則。本文系統整理 XHTML 規範、核心標籤、列表、表格、表單與語義化標籤，構建扎實 HTML 基礎。

W3C 標準與分層架構

• 結構層：XHTML（可擴展超文本標記語言）
• 表現層：CSS（層疊樣式表）
• 行為層：DOM + ECMAScript（JavaScript 標準）

XHTML 七大強制規範

1. 標籤名、屬性名全小寫。
2. 所有標籤必須關閉（`
   `、`` 自閉合；`
   ` 雙標籤）。
3. 屬性值必須加引號（``）。
4. 標籤正確巢狀（`
   ` 正確；`
   ` 錯誤）。
5. 屬性不可簡寫（`` 而非 ``）。
6. 文件必須宣告 DOCTYPE（`<`）。
7. 屬性值使用完整形式（``）。

核心標籤速查

類別	標籤	關鍵屬性
圖片	``	src, alt, width, height, title
段落/換行/分隔	` ` ` ` ` `	—
超連結	``	href, target(_blank/_self), name(錨點)
註解	``	—

三大列表類型

<!-- 無序列表 -->
<ul type="disc|circle|square"><li>項目</li></ul>

<!-- 有序列表 -->
<ol type="1|A|a|I|i"><li>項目</li></ol>

<!-- 自定義列表 -->
<dl><dt>術語</dt><dd>描述</dd></dl>

表格進階屬性

• `cellspacing`：單元格間距；`cellpadding`：內容與邊框內距。
• `align`：內容對齊（left/center/right）。
• 跨行跨列：`` 橫跨兩列；`` 縱跨三行。

表單元素完整屬性

<input name="username" type="text" value="張三" size="20" maxlength="10" />
<input type="radio" name="gender" value="male" id="male" />
<label for="male">男</label>  <!-- label 綁定 id，點擊文字選中 -->
<input type="checkbox" name="hobby" value="coding" checked="checked" />
<input type="submit" value="提交" />  <input type="reset" value="重置" />
<input type="image" src="btn.png" />  <!-- 圖片提交按鈕 -->

<form action="url" method="get|post">：`action` 指定提交地址，預設當前頁；`method` 決定資料傳輸方式。

語義化表單：fieldset + legend

<fieldset>
  <legend>個人信息</legend>
  <label>姓名：<input type="text" name="name" /></label>
  <label>郵箱：<input type="email" name="email" /></label>
</fieldset>

• 視覺上分組，無障礙閱讀器友善，結構清晰利於 SEO。
• 配合 `` 提升點擊區域與可用性。

跑馬燈標籤（非標準，慎用）

<marquee behavior="scroll" direction="left" scrollamount="5">公告內容</marquee>

遵循 XHTML 規範、善用語義化標籤，是寫出可維護、無障礙、SEO 友善前端頁面的基石。