HTML 設計與使用入門?
一、完整示例（基礎頁面模板）這是一個結構清晰、可直接拷貝運行的最小 HTML 模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>HTML 設計與使用示例</title>
</head>
<body><header><h1>我的第一個網頁</h1></header><main><section><h2>段落與文本格式</h2><p>這里是一段示例段落。可以使用 <strong>strong / b</strong> 加粗，<em>em / i</em> 傾斜，<u>u</u> 下劃線，<del>del</del> 刪除線。</p><p>換行使用 <br> 標簽。示例：第一行<br>第二行。</p></section><section><h2>超鏈接與圖片</h2><a href="https://www.example.com" target="_blank" rel="noopener">訪問示例網站（新窗口打開）</a><p><a href="localpage.html">鏈接到本地頁面</a></p><p><img src="abc.jpg" alt="示例圖片描述" width="300"></p></section><section><h2>列表</h2><ul><li>無序列表（disc / circle / square）</li></ul><ol start="3" type="1"><li>有序列表（可設置 start 與 type）</li></ol></section><section><h2>表格</h2><table border="1"><tr><th colspan="3">表格標題（合并 3 列）</th></tr><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr></table></section><section><h2>表單（form）</h2><form action="/submit" method="post"><label>姓名：<input type="text" name="name" placeholder="輸入姓名" required maxlength="50"></label><br><label>郵箱：<input type="email" name="email" placeholder="example@mail.com" required></label><br><input type="submit" value="提交"></form></section></main><footer><hr><small>版權所有 ? 2025</small></footer>
</body>
</html>
二、基礎概念快速回顧
1. 文檔結構
<!DOCTYPE html>：聲明文檔為 HTML5，放在最頂端。<html lang="zh-CN">：根元素，lang用于指定頁面語言（利于 SEO 與無障礙）。<head>：包含字符集、title、meta、樣式與腳本等元信息。<body>：頁面可見內容放這里。
2. 常用文本元素
標題：
<h1>~<h6>，語義化標題（h1最大）。段落：
<p>，會自帶段落間距。換行：
<br>（單標簽）。強調/加粗：
<strong>（語義強調）或<b>（樣式化加粗）。斜體：
<em>（語義強調）或<i>。刪除線：
<del>，通常用來表示已刪除內容。下劃線：
<u>（盡量少用做語義裝飾）。小字號：
<small>，上/下標：<sup>/<sub>。高亮：
<mark>（黃色背景，表示重要或匹配項）。注釋：
<!-- 注釋內容 -->（不會顯示在頁面上）
3. 元素屬性（attribute）
屬性用于為標簽添加額外信息，如 id、class、title、style、data-* 等：
<p id="intro" class="lead" title="簡介">……</p>
常見的布局或表現屬性（盡量用 CSS 替代）：
align（已過時，建議使用 CSS）bgcolor（表格或 body 設置背景色，建議用 CSS：background-color）
三、超鏈接（<a>）
基本寫法：
<a href="URL">鏈接文字</a>五種常見用途：
外部鏈接：
href="https://..."本地頁面：
href="page.html"圖片鏈接：把
<img>放到<a>內郵件：
href="mailto:email@example.com"下載鏈接：
href="file.zip" download
新窗口打開：
target="_blank"（配合rel="noopener noreferrer"更安全）
四、圖片（<img>）
基本屬性：
src、alt（必須）、width、heightalt：當圖片無法顯示或用于無障礙工具時顯示文字，務必填寫有意義描述。寬高可以用像素或百分比（百分比相對于包含塊，注意高度百分比有時無效）。
示例：
<img src="abc.jpg" alt="示例美女" width="300">
五、列表（<ul>, <ol>, <li>）
無序列表：
<ul>，常見type（過時，建議用 CSS）有disc、circle、square。有序列表：
<ol>，可以設置start（起始序號）與type（數字/字母/羅馬數字）。列表項：
<li>內可嵌入文本、鏈接、圖片、甚至子列表。
六、表格（<table>）
結構：
<table>><tr>（行） ><td>/<th>（單元格 / 表頭）合并：水平合并使用
colspan="n"，垂直合并使用rowspan="n"。表頭：用
<th>（默認居中且加粗）。示例：
<table border="1"><tr><th colspan="3">姓名表</th></tr><tr><td>A</td><td>B</td><td>C</td></tr>
</table>
提示：表格用于展示表格化數據，不要用表格做布局（已過時，使用 CSS 布局）。
七、表單（<form>）與輸入元素
action：提交地址；method：GET（參數附在 URL 后）或POST（請求體傳遞）常用
input類型：text,password,email,number,tel,urlsubmit,reset,button,hidden,image
HTML5 新屬性：
required：必填項placeholder：提示文本maxlength：最大長度type="email"等能做基本校驗（瀏覽器支持差異）
示例：
<form action="/send" method="post"><input type="text" name="username" placeholder="用戶名" required><input type="email" name="email" placeholder="郵箱"><input type="submit" value="提交">
</form>
注意：表單提交真實應用中要做好后端與前端驗證，避免安全問題（如 XSS、SQL 注入等）。
八、HTML 實體（Entities）
某些特殊字符必須使用實體表示：
<表示<>表示>&表示& 表示不間斷空格還有很多字符實體用于數學符號或其他語言字符。
九、語義化與可訪問性（重要）
使用語義標簽（
header,nav,main,article,section,footer）能讓頁面結構更清晰，利于 SEO 與屏幕閱讀器。給交互元素添加
aria-*屬性或alt、label等，有助于無障礙訪問。表單元素應配合
<label>使用，便于屏幕閱讀器識別：
<label for="email">郵箱：</label>
<input id="email" type="email" name="email">
十、最佳實踐與建議
用 CSS 做樣式，不要濫用內聯屬性（如
bgcolor、align）——保持結構與樣式分離。始終設置
<meta charset="utf-8">，避免中文亂碼。圖片必須有
alt，并盡量壓縮圖片以提升性能。用語義化標簽 讓內容對機器與用戶都更友好。
表單與輸入校驗：前端做體驗上校驗，后端必須做安全校驗。
響應式設計：用
<meta name="viewport">+ CSS 媒體查詢適配移動設備。避免使用過時屬性/標簽（如
align, 部分<font>），應用現代 CSS。性能考慮：盡可能延遲/合并腳本、使用合適圖片尺寸、開啟壓縮與緩存。
可訪問性（a11y）：鍵盤導航、合理對比度、ARIA 標簽等不可忽視。
十一、常見小問題與解答
<br>與<p>的區別？<br>強制換行，通常用于詩句或地址類；<p>表示段落，會自動在段落之間產生間距。圖片百分比寬高無效怎么辦？
百分比寬度相對于包含塊有效，但高度百分比可能依賴父元素高度；通常用 CSS 控制尺寸更可靠（例如max-width:100%）。表格合并單元格出錯？
確保colspan與rowspan的數值與行列結構匹配，不要讓表格單元格數目在某行不相等（除非確實合并）。
十二、簡短檢查清單（創建頁面前）
加入
<!DOCTYPE html>與<meta charset="utf-8">頁面
<title>是否設置？圖片是否有
alt描述？表單字段是否有
label？是否需要required？使用語義化標簽組織內容？
是否為移動端適配（viewport 與響應式）？
是否使用外部 CSS/JS 而非內聯（便于維護）？
：Java Stream 求兩個List的元素交集)
