HTML（HyperText Markup Language，超文本標記語言） 是構建網頁的基礎語言。它通過 標簽（Tag） 來描述網頁的結構和內容，常與 CSS（負責樣式 –
<style></style>）和 JavaScript（負責交互 –<script></script>）配合使用
一個標準 HTML 頁面通常包含以下骨架結構：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>我的第一個網頁</title>
</head>
<body><!-- 注釋：不會被瀏覽器執行~ 各語言通用注釋快捷鍵： ctrl+/ 注：通過查看網頁源代碼能查看到注釋，所以發布前要仔細檢查 （測試點！！！）--><h1>歡迎來到我的網頁！</h1><p>這是一個段落。</p>
</body>
</html>
<!DOCTYPE html>：聲明 HTML5 文檔類型<html>：根元素<head>：包含頁面的元信息（標題、編碼等）<body>：網頁的主要可見內容
常見的 HTML 編輯工具包括：VS Code（最常用，插件豐富）、Sublime Text、WebStorm，以及在線工具 CodePen、JSFiddle 等。推薦使用 VS Code + Live Server 插件，可實時預覽網頁效果。
文章目錄
- 常用標簽
- ? 標題標簽 `<h1>`~`<h6>`
- ? 段落 `<p>`
- ? 鏈接 `<a>`
- ? 圖片 `<img>`
- ? 空格與換行
- ? 列表 `<ul> / <ol> / <li>`
- ? 表格 `<table>`
- ? 表單 `<form>`
- ? 區塊 `<div> / <span>`
- 總結
常用標簽
? 標題標簽 <h1>~<h6>
- 說明：表示不同層級的標題，h1 最大，h6 最小
- 語法：
<h1>標題</h1> - 屬性：無常用屬性
- 示例：
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3>
? 段落 <p>
- 說明：用于表示段落，塊級元素，自動換行
- 語法：
<p>內容</p> - 屬性：無常用屬性
- 示例：
<p>這是一個段落。</p>
? 鏈接 <a>
- 說明：用于創建超鏈接，點擊后跳轉到指定頁面
- 語法：
<a href="url" target="_blank">文字</a> - 屬性：
- href：跳轉網址或文件路徑
- target：打開方式，常用 _blank（新窗口）
- 示例：
<a href="https://example.com" target="_blank">訪問示例網站</a>
? 圖片 <img>
- 說明：用于在網頁中插入圖片
- 語法：
<img src="圖片地址" alt="替代文本"/> - 屬性：
- src：圖片路徑
- title: 標題 (測試點！！！ 必須有標題)
- alt：當圖片無法顯示時的替代文字
- width / height：設置圖片大小
- 示例：
<img src="https://via.placeholder.com/150" title="我的標題"/>
? 空格與換行
- 說明：用于在網頁中插入空格，換行
- 語法：空格
 ； 換行<br /> - 屬性：無常用屬性
- 示例：
<p>這是<br />一   句話。</p>
? 列表 <ul> / <ol> / <li>
-
說明：表示無序列表、有序列表及列表項
-
語法：
- 無序列表：
<ul><li>內容</li></ul> - 有序列表：
<ol><li>內容</li></ol>
- 無序列表：
-
屬性：
<ol>可用 type 指定編號樣式（1/A/a/I/i）
-
示例：
<ul><li>蘋果</li><li>香蕉</li> </ul><ol type="A"><li>第一步</li><li>第二步</li> </ol>
? 表格 <table>
- 說明：用于展示結構化數據
- 語法：
<table><tr><td></td></tr></table> - 屬性：
- border：邊框寬度
- 示例：
<table border="1"><tr><th>姓名</th><th>年齡</th></tr><tr><td>小明</td><td>20</td></tr> </table>
? 表單 <form>
- 說明：用于收集用戶輸入
- 語法：
<form><input/><button></button></form> - 屬性：
- action：提交地址
- method：提交方式（GET/POST）
- 示例：
<form action="xxx.html" method="post"><input type="text" placeholder="請輸入用戶名" /><input type="password" placeholder="請輸入密碼" /><input type="radio" name="sex" /> 男<input type="radio" name="sex" /> 女<!--type = "text" : 文本框type = "password" : 密碼框type = "radio" : 單選按鈕 -- 設置相同組名 name 屬性值才能為一組type = "checkbox" : 復選按鈕 --><button type="submit" value="提交">提交</button><!--(測試點！！！ value 必須賦值) -> 不賦值 value 的話 不同瀏覽器可能顯示的效果不同type = "button" : 普通按鈕 -- 沒有效果，需要配合 JS 實現type = "submit" : 提價按鈕type = "reset" : 重置按鈕 --> </form>
? 區塊 <div> / <span>
- 說明：
<div>：塊級容器，用于布局 – 【大盒子 - 獨占一行】<span>：行內容器，用于局部修飾 – 【小盒子 - 一行可以放多個】
- 語法：
<div>內容</div>,<span>內容</span> - 屬性：無常用屬性
- 示例：
<div><p>這是一個塊級容器</p> </div><p>這是 <span style="color:red;">紅色文字</span>。</p>
總結
- HTML 是網頁的骨架
- 骨架標簽（html/head/body）構成基本結構
- 常見標簽包括標題、段落、鏈接、圖片、列表、表格、表單和布局容器
- 配合 CSS 和 JS 才能實現完整的網頁
)
