?? HTML 知識體系
一、HTML 基礎入門
1. HTML 簡介與作用
HTML（HyperText Markup Language，超文本標記語言）是構建網頁的基礎語言。它的核心作用是：
- 定義網頁內容的結構（標題、段落、圖片、表格等）
- 提供語義化標簽，幫助搜索引擎與輔助設備理解頁面內容
- 配合 CSS 實現頁面樣式、配合 JS 實現交互功能
簡而言之：HTML 是網頁的骨架。
2. HTML 文件結構
一個完整的 HTML 頁面通常包含以下基本結構：
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我的網頁</title></head><body><h1>Hello HTML!</h1></body>
</html>
核心組成：
| 元素 | 作用 |
|---|---|
<!DOCTYPE> | 聲明 HTML5 文檔類型，瀏覽器按標準模式解析 |
<html> | 根元素，包含整個頁面內容 |
<head> | 頁面頭部信息（元數據、引入資源） |
<body> | 頁面可見內容 |
3. 常見開發工具與編輯器推薦
開發 HTML 網頁時，推薦使用以下編輯器（支持語法高亮、自動補全）：
- VS Code（推薦，輕量強大）
- Sublime Text
- WebStorm（功能強大，適合大型項目）
- Notepad++（輕量基礎）
?? 大多數現代瀏覽器也提供了強大的開發者工具（DevTools）用于調試頁面結構和樣式。
4. 標簽命名規范與大小寫約定
HTML 標簽命名建議遵循以下規范：
- 小寫書寫標簽名（HTML5 標準推薦）
? 正確：<div>，<h1>；? 錯誤：<DIV>，<H1> - 使用語義化標簽（如
<header>、<article>）提升代碼可讀性與 SEO - 合理嵌套標簽，避免結構混亂
- 屬性值建議使用 雙引號包裹，例如：
class="title"
二、常用基礎標簽
HTML 提供了多種語義清晰的標簽，用于表達不同類型的內容結構。以下是最常用的一類基礎標簽。
1. 文本內容標簽
| 標簽 | 作用描述 |
|---|---|
<h1>~<h6> | 標題標簽，<h1> 為最高級標題 |
<p> | 段落 |
<span> | 行內文本容器（無語義） |
<strong> | 強調內容（加粗 + 語義） |
<em> | 強調語氣（斜體 + 語義） |
<br> | 換行（單標簽） |
<hr> | 分隔線（單標簽） |
<h2>HTML 是什么？</h2>
<p><strong>HTML</strong> 是網頁的結構語言。</p>
<span>這是一段內聯文字。</span>
2. 超鏈接標簽 <a>
標簽用于創建超鏈接，允許用戶從一個頁面跳轉到另一個頁面，或者執行其他操作，如跳轉到錨點、撥打電話、發送郵件等。
基本用法
<a href="https://www.example.com" target="_blank">訪問官網</a>
href: 必須屬性，指定鏈接目標地址，可以是一個網頁的 URL，或者是一個相對路徑。target="_blank": 可選屬性，指定在新窗口或新標簽頁打開鏈接。常用于外部鏈接。download: 可選屬性，表示點擊鏈接時下載指定資源，而不是直接打開該資源。
常見屬性
href: 設置鏈接的目標地址。- 例如，跳轉到一個網頁：
<a href="https://www.example.com">官網</a> - 跳轉到頁面中的錨點：
<a href="#section1">跳到第一個部分</a>
- 例如，跳轉到一個網頁：
target: 控制鏈接打開的方式。_blank: 在新窗口或標簽頁中打開鏈接。_self（默認）：在同一窗口或標簽頁中打開鏈接。_parent: 在父窗口中打開鏈接。_top: 在整個瀏覽器窗口中打開鏈接。
rel: 用來指定與目標文檔之間的關系。通常與target="_blank"一起使用，用來增強安全性。- 例如：
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">官網</a> noopener: 防止新頁面通過window.opener訪問原始頁面。noreferrer: 防止傳遞 HTTP Referer 頭。
- 例如：
download: 表示點擊鏈接時觸發文件下載，而不是跳轉到該文件。- 例如：
<a href="file.pdf" download="filename.pdf">下載 PDF</a>
- 例如：
tel: 用于撥打電話。- 例如：
<a href="tel:+123456789">撥打電話</a>
- 例如：
mailto: 用于打開用戶的郵件客戶端并創建一個新郵件。- 例如：
<a href="mailto:someone@example.com">發送郵件</a>
- 例如：
錨點鏈接
- 用于在當前頁面中定位到特定部分。
<!-- 錨點目標 -->
<h2 id="section1">第一個部分</h2><!-- 錨點鏈接 -->
<a href="#section1">跳轉到第一個部分</a>
多重用途
- 鏈接到電子郵件：
<a href="mailto:someone@example.com">發送郵件</a>
- 鏈接到電話號碼：
<a href="tel:+1234567890">撥打電話</a>
無鏈接的 <a> 標簽
如果不為 href 屬性指定值，<a> 標簽仍然可以用作其他目的，如 JavaScript 事件監聽：
<a href="#" onclick="alert('按鈕點擊')">點擊我</a>
注意：
href="#"常用于 JavaScript 操作中，但不建議過度使用，因為這會導致頁面滾動到頂部或產生不必要的行為。
3. 圖片與媒體標簽
圖片 <img>
<img src="logo.png" alt="網站Logo" width="100" loading="lazy" />
src: 圖片路徑alt: 替代文本（無圖時代替顯示）width/height: 控制圖片尺寸loading="lazy": 啟用圖片懶加載，圖片只有在進入可視區域時才會加載
圖片懶加載（Lazy Loading）
使用 loading="lazy" 屬性可以實現圖片懶加載，優化頁面的加載性能，減少不必要的請求。只有當圖片滾動到視口時才會加載，從而加速頁面初始加載。
注意：
loading="lazy"是 HTML5 中新增的屬性，現代瀏覽器（如 Chrome、Firefox、Edge）支持它。但老版本的瀏覽器可能不支持該功能，可以通過 JavaScript 或第三方庫（如lazysizes）來實現懶加載。
音頻 <audio>
<audio controls src="music.mp3"></audio>
視頻 <video>
<video controls width="300"><source src="movie.mp4" type="video/mp4" />瀏覽器不支持該視頻。
</video>
4. 列表標簽
- 無序列表
<ul>+<li> - 有序列表
<ol>+<li> - 定義列表
<dl>+<dt>（術語）+<dd>（定義）
<ul><li>蘋果</li><li>香蕉</li>
</ul><ol><li>第一步</li><li>第二步</li>
</ol><dl><dt>HTML</dt><dd>網頁的結構</dd>
</dl>
5. 表格標簽
| 標簽 | 作用 |
|---|---|
<table> | 表格容器 |
<tr> | 表格行 |
<td> | 單元格 |
<th> | 表頭單元格 |
<table border="1"><tr><th>姓名</th><th>年齡</th></tr><tr><td>小明</td><td
