目錄

一、基礎結構與文本

1. 文檔基礎

2. 文本元素

二、多媒體元素

1. 圖像

2. 音頻

3. 視頻

三、列表系統

1. 無序列表

2. 有序列表

3. 定義列表

四、表格系統

1. 表格結構

2. 合并單元格

五、表單系統

1. 輸入控件

2. 表單元素

3. 高級表單特性

六、布局系統

1. 語義化標簽

2. 通用容器

七、路徑與鏈接

1. 路徑類型

2. 超鏈接

---

此章節是總結html的基本知識點，以下給的代碼只是知識點對應的寫法只是一個知識點的模型參考，并不能直接運行。

一、基礎結構與文本

1. 文檔基礎

注釋：<!-- 內容 -->，用于代碼說明或臨時禁用代碼

字符實體：

&nbsp;：不間斷空格

&lt;/&gt;：顯示<>符號

&yen;：貨幣符號

注意事項：

生產環境移除調試注釋

實體名稱區分大小寫

2. 文本元素

第一行<br> <!-- 強制換行 --><textarea placeholder="地址"></textarea> <!-- 占位文本 --><hr> <!-- 水平分隔線 -->

換行符：<br>用于文本內換行（非段落分隔）

文本域：

<textarea rows="4" placeholder="多行輸入"></textarea>

移動端適配：min-height: 100px; max-width: 100%

注意事項：

避免多個<br>堆疊間距（用CSS margin代替）

文本域必填字段加required屬性

二、多媒體元素

1. 圖像

<img src="logo.jpg" alt="公司標志"title="首頁" width="200" loading="lazy">

關鍵屬性：

alt：SEO和可訪問性必需

loading="lazy"：延遲加載優化性能

響應式規則：

css

img {

? max-width: 100%;

? height: auto;

}

2. 音頻

<audio controls loop><source src="sound.mp3" type="audio/mpeg">瀏覽器不支持音頻</audio>

格式優先級：MP3 > Ogg > Wav

移動端限制：

自動播放通常被阻止

需用戶交互觸發播放

3. 視頻

<video controls muted autoplayposter="preview.jpg" width="640"><source src="video.mp4" type="video/mp4"></video>

自動播放條件：

必須設置muted

移動端需用戶首次交互

優化技巧：

使用preload="metadata"減少初始加載

WebM格式提供更小體積

三、列表系統

1. 無序列表

<ul class="news-list"><li>Surface Pro 9新品評測</li><li>榮耀Magic V折疊屏曝光</li></ul>

使用場景：導航菜單、新聞列表

移動端優化：

css

li {

? padding: 12px 0; /* 增大觸控區域 */

}

2. 有序列表

<ol><li>第一步：注冊賬號</li><li>第二步：驗證郵箱</li></ol>

語義價值：步驟說明、排行榜

樣式控制：list-style-type: decimal|lower-roman|upper-alpha

3. 定義列表

<dl><dt>HTML</dt><dd>超文本標記語言</dd></dl>

最佳實踐：術語解釋、鍵值對展示

四、表格系統

1. 表格結構

<table><thead><tr><th scope="col">球員</th> <!-- 可訪問性優化 --><th>得分</th></tr></thead><tbody><tr><td>庫里</td><td>40</td></tr></tbody></table>

分區原則：

thead：列標題（必須含<th>）

tfoot：匯總行（如總計）

移動端適配：

css

@media (max-width: 600px) {

? table, thead, tbody, th, td, tr {

??? display: block;

? }

}

2. 合并單元格

<tr><td colspan="2">跨兩列</td></tr><tr><td rowspan="3">跨三行</td></tr>

黃金規則：

從左到右合并

從上到下合并

刪除被覆蓋單元格

注意事項：

復雜表格添加aria-describedby屬性

避免超過3級嵌套

五、表單系統

1. 輸入控件

<!-- 文本輸入 --><input type="text" placeholder="用戶名"><!-- 單選按鈕組 --><input type="radio" name="gender" id="male"><label for="male">男</label><!-- 文件上傳 --><input type="file" accept=".jpg,.png">

關鍵技巧：

單選/復選框必用<label>關聯

文件上傳限制類型：accept="image/*"

移動端優化：

觸發數字鍵盤：type="tel"

輸入框添加autocorrect="off"

2. 表單元素

<!-- 按鈕類型 --><button type="submit">提交</button><button type="reset">重置</button><!-- 文本域 --><textarea placeholder="留言..."></textarea><!-- 下拉菜單 --><select><option value="1">北京</option><option selected>上海</option></select>

按鈕注意事項：

提交按鈕默認觸發表單刷新

普通按鈕需配合JavaScript

選擇框優化：

多選：<select multiple>

分組：<optgroup label="省份">

3. 高級表單特性

<!-- 標簽擴大點擊范圍 --><label><input type="checkbox"> 同意協議</label><!-- 輸入驗證 --><input type="email" required pattern=".+@.+\..+">

標簽使用方式：

顯式關聯：for與id綁定

隱式包裹：直接包含控件

驗證規則：

required：必填字段

pattern：正則驗證

六、布局系統

1. 語義化標簽

<header>頁眉</header><main><article>獨立內容</article></main><footer>頁腳</footer>

SEO優勢：提升內容可讀性

移動端布局：

css

main {

? display: grid;

? grid-template-columns: 1fr;

}

2. 通用容器

<div class="container"> <!-- 塊級容器 --><p>文本<span>片段</span></p> <!-- 行內容器 --></div>

使用原則：

div：布局分區/卡片容器

span：文本樣式控制

避免陷阱：

嵌套不超過4層

不用div替代語義標簽

七、路徑與鏈接

1. 路徑類型

<!-- 絕對路徑 --><img src="https://example.com/logo.png"><!-- 相對路徑 --><a href="../docs/manual.pdf">手冊</a>

選擇策略：

外部資源用絕對路徑

內部資源用相對路徑

目錄符號：

../：上級目錄

images/：子目錄

2. 超鏈接

<a href="contact.html" target="_blank" rel="noopener">聯系我們</a>

安全防護：

rel="noopener"：防止釣魚攻擊

rel="nofollow"：SEO不追蹤

錨點跳轉：

<a href="#section2">跳轉第二節</a>

<section id="section2">...</section>