一、HTML 基礎概念

• HTML：超文本標記語言，用于創建網頁和 Web 應用的結構。

• 超文本：可以包含文字、圖片、音頻、視頻、鏈接等多種媒體。

• 標記語言：通過標簽標記網頁的各個部分。

---

二、HTML5 的新特性（區別于 HTML4）

1. 新的結構標簽：提升語義化

   • <header>：頁眉

   • <nav>：導航

   • <main>：主要內容

   • <article>：文章

   • <section>：區域

   • <aside>：側邊欄

   • <footer>：頁腳

2. 新的表單控件類型：增強表單體驗

   <input type="email" />
   <input type="url" />
   <input type="number" />
   <input type="range" />
   <input type="date" />
   <input type="color" />
   

3. 新的表單屬性：

   • required：必須填寫

   • autofocus：頁面加載時自動聚焦

   • placeholder：占位文本

   • pattern：正則驗證

   • autocomplete：是否自動補全

4. 多媒體標簽：

   <audio controls><source src="sound.mp3" type="audio/mpeg">
   </audio><video controls width="400"><source src="movie.mp4" type="video/mp4">
   </video>
   

5. 本地存儲：

   • localStorage：永久存儲（關閉瀏覽器也不會清除）

   • sessionStorage：會話級存儲（關閉瀏覽器清除）

6. Canvas 畫布繪圖：

   <canvas id="myCanvas" width="200" height="100"></canvas>
   

   const c = document.getElementById("myCanvas");
   const ctx = c.getContext("2d");
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(0, 0, 150, 75);
   

7. SVG 圖形支持：

   <svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
   

---

三、HTML 標簽分類

1. 元信息標簽

標簽	說明
<meta>	元數據（關鍵詞、作者、編碼）
<title>	頁面標題
<link>	外部樣式表
<style>	內部 CSS
<script>	JavaScript 腳本

2. 文本內容標簽

標簽	說明
<p>	段落
<h1>~<h6>	標題
<blockquote>	引用
<abbr>	縮寫
<code>	代碼
<mark>	高亮
<strong> / <em>	加重語氣

3. 編輯類標簽

標簽	功能
<b> / <i> / <u>	粗體 / 斜體 / 下劃線
<sup> / <sub>	上標 / 下標
<del> / <ins>	刪除 / 插入

---

四、表單相關

常見控件

類型	示例
文本	<input type="text">
密碼	<input type="password">
單選	<input type="radio" name="x">
復選	<input type="checkbox">
文本域	<textarea>
下拉	<select>
提交	<button type="submit">提交</button>

表單屬性

• action：提交地址

• method：提交方式（GET/POST）

• enctype：編碼類型（上傳文件時用 multipart/form-data）

---

五、語義化標簽的優勢

• 提升 SEO 友好度

• 結構清晰、可讀性強

• 更便于無障礙訪問（如讀屏軟件）

---

六、布局方式簡介

方式	說明
表格布局	使用 <table> 實現（已過時）
浮動布局	float+clear
定位布局	position: absolute/fixed
Flex布局	彈性盒子，現代主流方式
Grid布局	網格布局，更適用于二維結構

---

七、HTML 與 JavaScript、CSS 的關系

• HTML 負責 結構

• CSS 負責 樣式

• JavaScript 負責 行為與交互

三者共同組成 Web 前端三大核心技術。

---

八、響應式設計基礎

• 使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 控制移動端縮放

• 使用媒體查詢（Media Query）

• 使用百分比、vw/vh 等相對單位替代 px

• 盡量使用彈性布局（Flex 或 Grid）

---

九、HTML5 API 簡介（JavaScript）

API	功能
Geolocation	獲取地理位置
Web Storage	本地數據存儲
Drag and Drop	拖拽功能
WebSocket	實時通信
Web Worker	多線程計算
File API	文件讀取上傳

---

十、開發與調試工具推薦

• 瀏覽器開發者工具（F12）

• 在線編輯器如 CodePen、JSFiddle

• VS Code + Live Server 插件

• HTML 校驗工具：W3C Validator