[分享]HTML的各种标签与用法

HTML 各种标签及其用法详解

HTML 标签是构建网页的基本"积木"。每一个标签都有特定的含义和用途，它们告诉浏览器如何理解并呈现页面上的内容。本教程将系统介绍 HTML 中所有常用标签的分类、语法和实际用法。

一、HTML 标签的基础语法

在学习具体标签之前，先理解标签的通用规则。

标签的基本结构：

1	<标签名属性名="属性值">内容</标签名>

开始标签：由尖括号和标签名组成，如 <p>。
结束标签：在标签名前加斜杠，如 </p>。
内容：开始标签和结束标签之间的文字或其他标签。
属性：在开始标签中，用于提供额外信息，如 href="https://example.com"。

自闭合标签：某些标签不需要包裹内容，也没有结束标签，如 <img>、<br>、<hr>。

嵌套规则：标签可以相互嵌套，但必须正确交叉，不能重叠。正确：<p><strong>文字</strong></p>。错误：<p><strong>文字</p></strong>。

二、文档结构标签

这些标签构成了 HTML 文档的骨架，每一个网页都从它们开始。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 内部 CSS 代码 */
    </style>
</head>
<body>
    <!-- 页面所有可见内容 -->
</body>
</html>

各标签详细用法

<!DOCTYPE html> 不是 HTML 标签，而是文档类型声明。它必须写在第一行，告诉浏览器使用 HTML5 标准解析页面。没有它，浏览器可能以兼容模式渲染，导致样式错乱。

<html> 是根元素，所有其他标签都必须放在它内部。lang 属性声明页面语言，zh-CN 表示中文，en 表示英文。浏览器和搜索引擎会根据这个属性做相应处理。

<head> 包含页面的元数据，这些内容不会直接显示在页面上。用于定义字符集、标题、引入外部资源等。

<meta> 提供元信息。charset="UTF-8" 指定字符编码，确保中文不乱码。name="viewport" 控制移动端适配，是响应式设计的必备设置。name="description" 提供页面描述，影响搜索引擎结果展示。

<title> 定义浏览器标签栏的标题，也是搜索引擎抓取和收藏夹使用的标题，必须位于 <head> 内部。

<link> 链接外部资源，最常用于引入 CSS 文件。rel 定义关系（如 stylesheet 表示样式表），href 指定文件路径。

<style> 在页面内直接编写 CSS 代码，通常放在 <head> 中。适用于单个页面的独有样式。

<base> 为页面中所有相对 URL 设置基础路径，一旦设置，所有相对链接都以此为基础。很少使用，容易造成混淆。

三、内容分区标签

这些标签帮助构建页面的结构层次，让页面内容有清晰的区块划分。

<header> 定义页面或区域的页眉，通常包含导航菜单、Logo、搜索框、标题等。一个页面可以有多个 <header>，比如页面主头部和文章内部的引言区。

<nav> 定义导航链接区域，包裹主导航菜单、面包屑导航或侧边栏导航。一个页面可以有多个 <nav> 服务于不同功能。

<main> 定义页面的主体内容。一个页面只能有一个 <main>，它应包含页面最核心、最独特的内容。侧边栏、页眉、页脚等不应放在 <main> 内部。

<article> 定义独立、可复用的内容块，如博客文章、新闻条目、产品评论、论坛帖子。它的关键是：即使脱离页面的其他部分，内容本身仍然是完整的。

<section> 定义文档中的章节或区段，通常包含一个标题。可以理解为内容块的分组容器，如"关于我们"区、"联系方式"区、产品特性区。

<aside> 定义与主内容间接相关的侧边栏内容，如广告、相关文章推荐、作者简介、引用备注。它的内容应该可以与主内容分离而不影响理解。

<div> 是最通用的块级容器，没有语义含义，纯粹用于布局或样式分组。开发中大量使用，但应优先考虑语义化标签。

<span> 是最通用的内联容器，没有语义含义，用于包裹文本片段以便单独控制样式。

四、文本内容标签

标题标签

标题是页面内容的结构骨架。<h1> 到 <h6> 定义六级标题，数字越小级别越高。

<h1> 是最高级别，一个页面通常只使用一次，用于页面的主标题。搜索引擎对其赋予很高的权重。
<h2> 到 <h6> 用于次级标题，表示内容的层级结构。

最佳实践：标题级别应该连续，不能跳级，比如 <h1> 后面直接接 <h3> 是不推荐的。

段落与排版标签

<p> 定义段落，是最常用的文本容器。浏览器会在段落前后自动添加间距。

<br> 强制换行，是一个自闭合标签。适用于地址、诗歌、歌词等需要手动换行的场景。

<hr> 水平分割线，自闭合标签。用于在视觉上分隔不同主题的内容。

<pre> 预格式化文本，浏览器会保留标签内的所有空格、缩进和换行，通常以等宽字体显示。适用于展示代码、ASCII 艺术等。

<blockquote> 块级引用，用于引用一段较长的、自成段落的文字。浏览器通常会缩进显示。

内联文本语义标签

这些标签用在段落或其他块级元素内部，为文本添加额外含义或样式。

<a> 超链接，核心属性是 href（目标地址）和 target（打开方式）。target="_blank" 表示在新窗口打开。也可以链接到页面内锚点（#id）、邮箱（mailto:）、电话（tel:）。

<strong> 表示重要性强的内容，浏览器以粗体显示。这是语义标签，应用于真正需要强调的重要信息。

<b> 仅用于加粗样式，没有语义含义。应优先使用 <strong> 或 CSS。

<em> 表示强调语气，浏览器以斜体显示。语义标签，表示内容在语调或情感上需要被着重。

<i> 仅用于斜体样式，没有强调含义。适用于技术术语、外来词、书名等。

<mark> 高亮显示文本，浏览器以黄色背景突出显示。常用于搜索结果中的关键词匹配。

<small> 小号文本，用于免责声明、法律限制、版权标注等"小字"内容。

<del> 删除线文本，表示内容已被删除或废弃。

<ins> 下划线文本，表示内容是新插入的。

<sub> 下标，将文本显示在基线下方，如 H₂O。

<sup> 上标，将文本显示在基线上方，如 x²。

<code> 显示计算机代码片段，以等宽字体呈现。适用于内联代码。

<kbd> 表示键盘输入，如 Ctrl+C。

<samp> 表示程序输出的示例结果。

<var> 表示数学或编程中的变量名。

<cite> 标记创意作品的标题，如书籍、电影、文章的名称。

<q> 短引用，浏览器会自动添加引号。适用于引用句子或短语。

<abbr> 标记缩写或首字母缩略词，title 属性提供完整解释。鼠标悬停时显示完整内容。

<address> 标记联系信息，通常位于页面底部或文章末尾。

五、列表标签

HTML 提供了三种列表类型，各有适用场景。

无序列表（`<ul>`）

项目之间没有顺序，通常用圆点作为项目符号。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表（`<ol>`）

项目之间有顺序，默认用数字编号。可以使用 type 属性改变编号样式（A、a、I、i）。

<ol type="A">
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

定义列表（`<dl>`）

由术语和描述组成，适用于词汇表、FAQ 等场景。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于控制页面样式</dd>
</dl>

六、表格标签

表格用于展示结构化数据。

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>88</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均</td>
            <td>92</td>
            <td>85</td>
        </tr>
    </tfoot>
</table>

<table> 定义整个表格。border 属性设置边框宽度。

<caption> 定义表格标题，通常位于表格上方。

<thead> 分组表头行，包含列标题。

<tbody> 分组主体数据行。

<tfoot> 分组表尾行，通常包含汇总信息。

<tr> 定义一行。

<th> 定义表头单元格，内容默认粗体居中。

<td> 定义数据单元格。

常用属性：

colspan 合并列：colspan="2" 表示该单元格横跨两列。rowspan 合并行：rowspan="3" 表示该单元格横跨三行。cellspacing 控制单元格间距，cellpadding 控制单元格内边距。这些属性在现代开发中更推荐使用 CSS 控制。

七、表单标签

表单用于收集用户输入，是交互式网页的核心。

<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">
        
        <label for="gender_male">男</label>
        <input type="radio" id="gender_male" name="gender" value="male">
        <label for="gender_female">女</label>
        <input type="radio" id="gender_female" name="gender" value="female">
        
        <label for="hobby">爱好：</label>
        <select id="hobby" name="hobby">
            <option value="reading">阅读</option>
            <option value="music">音乐</option>
            <option value="sports">运动</option>
        </select>
        
        <label for="comment">评论：</label>
        <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
        
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </fieldset>
</form>

<form> 定义表单区域。action 指定提交的目标 URL，method 指定提交方式（get 或 post）。get 用于查询类请求，数据暴露在 URL 中；post 用于修改或提交数据，数据在请求体中。

<input> 是最核心的输入控件，通过 type 属性变化出多种形态。name 属性用于提交数据时的键名，value 是提交的值，id 用于与 <label> 关联。

<textarea> 多行文本输入框。rows 和 cols 控制显示大小。

<button> 按钮。type="submit" 提交表单，type="reset" 重置表单，type="button" 普通按钮需配合 JavaScript。

<select> 下拉列表，<option> 定义每个选项。

<label> 标签，通过 for 属性与输入框的 id 关联。点击标签会自动聚焦到对应的输入框，提升用户体验。

<fieldset> 将相关控件分组，<legend> 定义分组的标题。

八、常用 `input` 类型详解

<input> 的 type 属性决定了它的外观和行为：

`type` 值	用法
`text`	单行文本输入框，默认类型
`password`	密码输入框，内容被掩码
`email`	邮箱输入，浏览器会验证格式
`number`	数字输入，浏览器会限制非数字字符
`url`	网址输入，浏览器会验证 URL 格式
`tel`	电话号码输入，在移动端会弹出数字键盘
`search`	搜索框，在某些浏览器中有清除按钮
`radio`	单选按钮。同一 `name` 的为一组，只能选一个
`checkbox`	复选框，允许多选
`file`	文件选择器，用于上传文件
`hidden`	隐藏字段，数据随表单提交但页面不显示
`submit`	提交按钮
`reset`	重置按钮
`button`	普通按钮，需配合 JavaScript

九、多媒体标签

<img> 嵌入图片。src 指定图片路径，alt 提供图片的文字描述，这是必需的——当图片无法加载时显示文字，也是屏幕阅读器读取的依据，对 SEO 和可访问性至关重要。

1	<img src="photo.jpg" alt="美丽的风景" width="600" height="400">

<audio> 嵌入音频文件。controls 属性显示播放控制栏。

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

<video> 嵌入视频文件。controls 显示控制栏，autoplay 自动播放（需谨慎使用），loop 循环播放。

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

<source> 为媒体元素指定多个备选格式，浏览器选择第一个能播放的格式。

<track> 为视频或音频添加字幕轨道，支持 VTT 格式。

<iframe> 在页面中嵌入另一个 HTML 页面。

1	<iframe src="https://example.com" width="800" height="600" frameborder="0"></iframe>

十、其他实用标签

<details> 与 <summary>：创建可折叠的内容区域。点击摘要可以展开或收起详情。

<details>
    <summary>点击查看详情</summary>
    <p>这是被折叠的内容，点击上面可以展开。</p>
</details>

<progress> 进度条，用于显示任务完成百分比。

<meter> 度量衡，用于显示值在已知范围内的位置。

<time> 标记日期或时间，帮助机器理解。

总结

HTML 标签数量众多，但每个标签都有其特定的用途。掌握这些标签的核心在于理解两个原则：语义化（选择最贴切内容含义的标签）和正确嵌套（保证标签结构清晰有效）。

从文档结构到文本排版，从表格表单到多媒体嵌入，每一个标签都是构建网页的积木。理解它们的含义和用法，是迈向 Web 开发世界的第一步。当你熟练运用这些标签后，就可以学习 CSS 来美化页面，以及 JavaScript 来赋予页面交互能力了。