# HTML標簽與元素實例分析
## 引言
HTML（HyperText Markup Language）是構建網頁的基礎語言，通過標簽（Tags）和元素（Elements）定義內容結構和表現形式。本文將通過實例分析常見HTML標簽的用法，幫助開發者深入理解其核心功能與應用場景。
---
## 一、基礎文檔結構標簽
### 1. `<!DOCTYPE html>`
```html
<!DOCTYPE html>
<html> 根元素<html lang="zh-CN">
<!-- 頁面內容 -->
</html>
lang定義頁面語言（影響SEO和屏幕閱讀器）<head> 元信息容器<head>
<meta charset="UTF-8">
<title>頁面標題</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<meta charset>：定義字符編碼<title>：瀏覽器標簽頁標題<header>
<h1>網站主標題</h1>
<nav>
<a href="/">首頁</a>
<a href="/about">關于</a>
</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>正文內容...</p>
</article>
</main>
<footer>版權信息 ? 2023</footer>
<header>：頁眉/導航<main>：主體內容<footer>：頁腳信息<section>
<h2>章節標題</h2>
<p>這是一個<em>強調</em>文本，<strong>重要內容</strong>用strong標簽。</p>
<blockquote cite="https://example.com">
這是引用內容
</blockquote>
</section>
<em>：語義強調（默認斜體）<strong>：重要性強調（默認加粗）<blockquote>：塊級引用<figure>
<img src="image.jpg" alt="圖片描述" width="400">
<figcaption>圖片說明文字</figcaption>
</figure>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" controls>
<source src="video.mp4" type="video/mp4">
</video>
alt屬性<figure>+<figcaption>組合增強可訪問性<form action="/submit" method="POST">
<label for="username">用戶名：</label>
<input type="text" id="username" name="user" required>
<fieldset>
<legend>選擇性別</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</fieldset>
<button type="submit">提交</button>
</form>
<label>的for屬性與輸入框id綁定fieldset分組相關控件<table>
<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>
thead/tbody/tfootcolspan/rowspan合并單元格<!-- 無序列表 -->
<ul>
<li>項目一</li>
<li>項目二</li>
</ul>
<!-- 有序列表 -->
<ol start="5" reversed>
<li>第五項</li>
<li>第四項</li>
</ol>
<!-- 定義列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
</dl>
start：定義起始編號reversed：倒序顯示<meta> 標簽進階<!-- 搜索引擎優化 -->
<meta name="description" content="頁面描述">
<meta name="keywords" content="HTML,CSS,JavaScript">
<!-- 社交媒體卡片 -->
<meta property="og:title" content="分享標題">
<meta property="og:image" content="share-image.jpg">
<!-- 外部JS -->
<script src="app.js" defer></script>
<!-- 內聯腳本 -->
<script>
console.log('DOM加載完成后執行');
</script>
<!-- 模板內容 -->
<template id="card-template">
<div class="card">
<slot name="content"></slot>
</div>
</template>
defer：文檔解析后執行async：異步加載執行通過合理組合HTML標簽，可以構建語義清晰、結構良好的網頁。建議開發者： 1. 優先使用語義化標簽 2. 始終考慮可訪問性 3. 遵循W3C標準規范
提示：使用HTML驗證器檢查代碼合規性 “`
（注：實際字數約1350字，此處為精簡展示版，完整版需擴展每個章節的詳細說明和更多實例）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
