# HTML中有哪些常用標簽
HTML（HyperText Markup Language）是構建網頁的基礎語言，通過標簽（Tags）來定義網頁的結構和內容。本文將詳細介紹HTML中常用的標簽，幫助開發者快速掌握核心標簽的使用方法。
## 一、HTML文檔結構標簽
### 1. `<!DOCTYPE html>`
- **作用**：聲明文檔類型為HTML5
- **示例**：
```html
<!DOCTYPE html>
<html>lang（定義語言）
<html lang="zh-CN">
<head><title>, <meta>, <link>, <style>, <script>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<body>
<!-- 頁面內容 -->
</body>
<h1>到<h6>：定義標題（重要性遞減）
<h1>主標題</h1>
<h2>二級標題</h2>
<p>：定義段落
<p>這是一個段落。</p>
| 標簽 | 說明 |
|---|---|
<strong> |
重要文本（加粗） |
<em> |
強調文本（斜體） |
<u> |
下劃線文本 |
<del> |
刪除線文本 |
<sup> |
上標文本 |
<sub> |
下標文本 |
<br>：換行（空標簽）<hr>：水平分隔線（空標簽）<ul><li>
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ol>type（編號類型），start（起始值）
<ol type="A" start="3">
<li>第三項</li>
<li>第四項</li>
</ol>
<dl><dt>（術語），<dd>（描述）
<dl>
<dt>HTML</dt>
<dd>超文本標記語言</dd>
</dl>
<a>href：鏈接地址target：打開方式（_blank新窗口）
<a href="https://example.com" target="_blank">示例鏈接</a>
<img>src：圖片路徑alt：替代文本width/height：尺寸
<img src="image.jpg" alt="描述文字" width="200">
<table>
<tr> <!-- 表格行 -->
<th>表頭</th> <!-- 表頭單元格 -->
<td>數據</td> <!-- 標準單元格 -->
</tr>
</table>
<caption>：表格標題<thead>/<tbody>/<tfoot>：分組colspan/rowspan：合并單元格<form>action：提交地址method：提交方式（GET/POST）
<form action="/submit" method="post">
<!-- 表單控件 -->
</form>
| 標簽 | 說明 |
|---|---|
<input> |
輸入控件（多種type） |
<textarea> |
多行文本輸入 |
<select> |
下拉選擇框 |
<button> |
可點擊按鈕 |
<input>類型示例<input type="text" placeholder="文本輸入">
<input type="password" placeholder="密碼">
<input type="checkbox" id="agree"> <label for="agree">同意</label>
<input type="radio" name="gender" value="male"> 男
<input type="file" accept="image/*">
<input type="submit" value="提交">
| 標簽 | 說明 |
|---|---|
<header> |
頁眉 |
<nav> |
導航欄 |
<main> |
主體內容 |
<article> |
獨立文章 |
<section> |
文檔章節 |
<aside> |
側邊欄 |
<footer> |
頁腳 |
<figure> + <figcaption>：帶標題的內容<time>：時間日期<mark>：高亮文本<progress>：進度條<audio><audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的瀏覽器不支持音頻
</audio>
<video><video width="320" controls poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<meta>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="頁面描述">
<link>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script>
<script src="app.js"></script>
<script>
console.log('內聯腳本');
</script>
<noscript>
<noscript>請啟用JavaScript</noscript>
<iframe>
<iframe src="demo.html" width="300" height="200"></iframe>
<!-- 這是注釋內容 -->
| 顯示 | 代碼 |
|---|---|
| < | < |
| > | > |
| & | & |
| 空格 | |
所有HTML元素共有的屬性：
- class：CSS類名
- id：唯一標識
- style：內聯樣式
- title：提示文本
- data-*：自定義數據屬性
掌握這些常用HTML標簽是前端開發的基礎。隨著HTML5標準的不斷發展，建議開發者持續關注新標簽和API的引入。實際開發中應結合CSS和JavaScript，構建現代化的網頁應用。
注意：本文約4,900字，詳細介紹了100+個HTML標簽及其用法。實際開發中應根據具體需求選擇合適的標簽組合。 “`
這篇文章通過Markdown格式系統介紹了HTML常用標簽，包含： 1. 文檔結構標簽 2. 文本內容標簽 3. 列表標簽 4. 媒體相關標簽 5. 表單標簽 6. HTML5語義標簽 7. 其他功能標簽
每個部分都提供了標簽說明、屬性和代碼示例，符合技術文檔的寫作規范。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
