# HTML常用的標簽有哪些及如何使用
## 目錄
1. [HTML基礎概述](#1-html基礎概述)
2. [文檔結構標簽](#2-文檔結構標簽)
3. [文本格式化標簽](#3-文本格式化標簽)
4. [鏈接與圖像標簽](#4-鏈接與圖像標簽)
5. [列表標簽](#5-列表標簽)
6. [表格標簽](#6-表格標簽)
7. [表單標簽](#7-表單標簽)
8. [語義化標簽](#8-語義化標簽)
9. [多媒體標簽](#9-多媒體標簽)
10. [總結](#10-總結)
---
## 1. HTML基礎概述
HTML（HyperText Markup Language）是構建網頁的標準標記語言，通過標簽（Tag）定義內容結構。所有HTML文檔都以`.html`擴展名保存，基本結構如下：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
<!DOCTYPE html>：聲明文檔類型為HTML5<html>：根元素，lang屬性定義語言<head>：包含元數據和引用的外部資源<body>：可見的頁面內容| 標簽 | 作用 | 示例 |
|---|---|---|
<h1>-<h6> |
標題（1-6級） | <h1>主標題</h1> |
<p> |
段落 | <p>這是一個段落</p> |
<div> |
塊級容器 | <div class="box"></div> |
<span> |
行內容器 | <span style="color:red"></span> |
<meta name="description" content="頁面描述">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<strong>加粗（語義化）</strong>
<b>加粗（視覺）</b>
<em>斜體（強調）</em>
<i>斜體（圖標/技術術語）</i>
<u>下劃線</u>
<s>刪除線</s>
<blockquote cite="來源URL">引用塊</blockquote>
<q>短引用</q>
<code>print("Hello World")</code>
<pre>保留格式的文本</pre>
<mark>高亮文本</mark>
<a href="https://example.com" target="_blank">外部鏈接</a>
<a href="#section1">錨點鏈接</a>
<a href="mailto:contact@example.com">郵件鏈接</a>
<img src="image.jpg" alt="圖片描述" width="300" height="200">
<!-- 響應式圖片示例 -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="響應式圖片">
</picture>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ol type="A" start="3">
<li>第三項</li>
<li>第四項</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
</dl>
<table border="1">
<caption>表格標題</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合計：1人</td>
</tr>
</tfoot>
</table>
colspan：水平合并單元格rowspan：垂直合并單元格<form action="/submit" method="POST">
<fieldset>
<legend>用戶注冊</legend>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼：</label>
<input type="password" id="password" name="password" minlength="6">
</fieldset>
</form>
| 類型 | 示例 |
|---|---|
| 文本輸入 | <input type="text"> |
| 單選按鈕 | <input type="radio" name="gender"> |
| 復選框 | <input type="checkbox"> |
| 下拉選擇 | <select><option>選項1</option></select> |
| 文本域 | <textarea rows="4"></textarea> |
| 文件上傳 | <input type="file"> |
<header>頁眉</header>
<nav>導航欄</nav>
<main>主要內容</main>
<article>獨立文章</article>
<section>文檔章節</section>
<aside>側邊欄</aside>
<footer>頁腳</footer>
<time datetime="2023-10-01">國慶節</time>
<figure>
<img src="chart.png" alt="數據圖表">
<figcaption>圖1: 銷售數據</figcaption>
</figure>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的瀏覽器不支持音頻
</audio>
<video width="320" controls poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<iframe src="https://example.com" title="嵌入頁面"></iframe>
<embed type="application/pdf" src="doc.pdf" width="600" height="400">
HTML標簽是構建網頁的基石，本文涵蓋了： - 基礎文檔結構標簽 - 文本格式化方法 - 多媒體內容嵌入 - 現代語義化標簽 - 交互式表單創建
建議開發者：
1. 始終使用語義化標簽
2. 為圖像添加alt屬性
3. 表單元素配合<label>使用
4. 定期查閱MDN文檔保持更新
<!-- 示例：完整的HTML5頁面 -->
<!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>
<header>
<h1>網站標題</h1>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>這里是文章內容...</p>
</article>
</main>
<footer>
<p>? 2023 版權所有</p>
</footer>
</body>
</html>
注意：實際開發中應結合CSS和JavaScript創建完整網頁體驗。本文約5300字，詳細介紹了HTML核心標簽及其應用場景。 “`
注：實際輸出為Markdown格式，此處為展示效果。實際使用時可將此內容保存為.md文件，通過Markdown閱讀器查看完整格式。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
