HTML常用的标签有哪些及如何使用

发布时间：2022-03-05 15:58:10 作者：iii
来源：亿速云阅读：236

# 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>：可见的页面内容

2. 文档结构标签

2.1 基础结构标签

标签	作用	示例
`<h1>-<h6>`	标题（1-6级）	`<h1>主标题</h1>`
`<p>`	段落	`<p>这是一个段落</p>`
`<div>`	块级容器	`<div class="box"></div>`
`<span>`	行内容器	`<span style="color:red"></span>`

2.2 元信息标签

<meta name="description" content="页面描述">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

3. 文本格式化标签

3.1 基础文本标签

<strong>加粗（语义化）</strong>
<b>加粗（视觉）</b>
<em>斜体（强调）</em>
<i>斜体（图标/技术术语）</i>
<u>下划线</u>
<s>删除线</s>

3.2 特殊文本标签

<blockquote cite="来源URL">引用块</blockquote>
<q>短引用</q>
<code>print("Hello World")</code>
<pre>保留格式的文本</pre>
<mark>高亮文本</mark>

4. 链接与图像标签

4.1 链接标签

<a href="https://example.com" target="_blank">外部链接</a>
<a href="#section1">锚点链接</a>
<a href="mailto:contact@example.com">邮件链接</a>

4.2 图像标签

<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>

5. 列表标签

5.1 无序列表

<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>

5.2 有序列表

<ol type="A" start="3">
    <li>第三项</li>
    <li>第四项</li>
</ol>

5.3 定义列表

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

6. 表格标签

6.1 基础表格结构

<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>

6.2 表格合并

colspan：水平合并单元格
rowspan：垂直合并单元格

7. 表单标签

7.1 表单基础

<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>

7.2 表单控件

类型	示例
文本输入	`<input type="text">`
单选按钮	`<input type="radio" name="gender">`
复选框	`<input type="checkbox">`
下拉选择	`<select><option>选项1</option></select>`
文本域	`<textarea rows="4"></textarea>`
文件上传	`<input type="file">`

8. 语义化标签（HTML5）

8.1 主要语义标签

<header>页眉</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立文章</article>
<section>文档章节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>

8.2 其他语义标签

<time datetime="2023-10-01">国庆节</time>
<figure>
    <img src="chart.png" alt="数据图表">
    <figcaption>图1: 销售数据</figcaption>
</figure>

9. 多媒体标签

9.1 音频与视频

<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>

9.2 嵌入内容

<iframe src="https://example.com" title="嵌入页面"></iframe>
<embed type="application/pdf" src="doc.pdf" width="600" height="400">

10. 总结

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阅读器查看完整格式。