📘

HTML5 常用标签完全指南

一小时系统化掌握 Web 前端核心标签

📋 文档概述

这是一套完整的 HTML 标签知识体系。覆盖12大知识模块，涵盖网页骨架、文本排版、布局容器、超链接、多媒体、列表、表格、表单、HTML5 语义化标签及标签分类补充知识，适合初学者系统学习和有经验开发者快速查阅。

🏷️ 30+ 核心标签 📦 12 知识模块 💻 20+ 代码示例
HTML5 语义化 表单 SEO 响应式 最佳实践

📝 一、文档基础

🏛️

网页结构标签

文档骨架 · 构建 HTML 页面的基础框架

结构标签定义页面的整体框架，所有网页内容均需嵌套在骨架标签中。它们是网页运行的基础。

标签 作用 关键说明
<!DOCTYPE html> 文档类型声明 必须写在第一行，使用 HTML5 标准
<html> 网页根标签 建议添加 lang="zh-CN"，利于 SEO
<head> 头部配置区域 内容不会显示在页面中
<title> 标签页标题 对 SEO 至关重要
<meta> 页面元信息 charset="UTF-8" + viewport
<link> 引入外部资源 最常用：rel="stylesheet"
<style> 内嵌 CSS 样式 仅对当前页面生效
<script> 引入/编写 JavaScript 可放在 <head> 或 <body> 末尾
<body> 可见内容区域 所有用户可见内容均在此

📝标准 HTML5 模板

<!-- 标准 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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面可见内容从这里开始 -->
</body>
</html>
📐

标题标签

页面层级 · 定义内容结构，形成大纲体系

标题具有语义权重，搜索引擎会根据标题层级理解页面结构。<h1> 到 <h6> 共六级，权重逐级递减。

标签 级别 使用规范
<h1> 一级 一个页面只用一次，SEO 权重最高
<h2> 二级 章节标题，可多次使用
<h3> ~ <h6> 三至六级 逐级细分，按层级嵌套，不越级
⚠️ 注意事项：
1. 标题必须按层级递进（h1 → h2 → h3），不要越级使用；
2. 不要为了调整字体大小而滥用标题标签，样式应交给 CSS 控制；
3. 标题标签是块级元素，自带上下外边距和加粗样式。

📝正确的层级嵌套

<h1>网站主标题</h1>
  <h2>第一章</h2>
    <h3>1.1 小节</h3>
      <h4>1.1.1 细节</h4>
📝

文本标签

内容排版 · 语义化文本 vs 纯表现标签

文本标签负责组织和修饰页面文字。现代开发中优先使用语义化标签，纯样式标签应尽量少用。

📌基础文本标签

标签 作用 特性
<p> 段落 块级元素，段落间有间距
<br> 强制换行 单标签，仅用于文本换行
<hr> 水平分割线 块级，表示主题转换
<span> 行内盒子 无默认样式，配合 CSS 使用

✅语义化文本标签（推荐）

标签 视觉效果 语义含义
<strong> 加粗 表示重要内容，屏幕阅读器加重语气
<em> 斜体 表示强调语气，屏幕阅读器改变语调
<mark> 高亮背景 标记重点/高亮文本
<del> 删除线 已删除内容，常用于修订
<ins> 下划线 新增/插入内容，常与 <del> 配合

⚠️纯表现标签（少用）

标签 视觉效果 说明
<b> 加粗 仅视觉加粗，无语义
<i> 斜体 仅视觉斜体，常放图标字体

📝代码示例

<p>这是一个段落，包含<strong>重要内容</strong>和<em>需要强调</em>的文字。</p>
<p>原价：<del>¥199</del> <ins>现价：¥99</ins></p>
<p>请注意：<mark>此条款已于2026年更新</mark></p>

🔗 二、布局与链接

📦

布局标签

页面容器 · 划分功能区域的基石

标签 类型 特性 使用场景
<div> 块级盒子 独占一行，可设宽高和内外边距 最常用布局标签
<span> 行内盒子 同行显示，不可设宽高 包裹小段文字做 CSS 控制
⚠️ 注意：<div> 和 <span> 都没有语义，仅作为布局/样式容器。现代开发中应优先使用 HTML5 语义化标签替代纯 <div> 布局。

📝代码示例

<div class="header">头部区域</div>
<div class="main-content">
    <p>主体内容...这里有一段<span class="highlight">高亮文字</span>。</p>
</div>
<div class="footer">底部区域</div>
🔗

页面跳转 · 网页互联的核心

<a> 标签是行内元素，实现跳转、锚点、邮件/电话调用。在 HTML5 中可以包裹块级元素。

⚙️核心属性

属性 作用 示例
href 跳转地址（必填） href="https://example.com"
target="_blank" 新窗口打开 外部链接常用
target="_self" 当前窗口（默认） 可省略
title 悬浮提示 title="点击跳转"
rel 关系定义 rel="noopener noreferrer"

🎯href 的多种写法

类型 写法 说明
外部链接 href="https://www.baidu.com" 完整 URL
相对路径 href="./about.html" 相对于当前页面
锚点跳转 href="#section1" 跳转到页面内 id 位置
邮件链接 href="mailto:test@example.com" 调用邮件客户端
电话链接 href="tel:10086" 移动端调用拨号
🔒 安全最佳实践：使用 target="_blank" 时务必同时添加 rel="noopener noreferrer"，防止新页面通过 window.opener 攻击原页面。

📝代码示例

<!-- 安全的外部链接 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">安全打开</a>

<!-- 页面内锚点 -->
<a href="#bottom">跳到底部</a>

<!-- 邮件链接 -->
<a href="mailto:contact@example.com">联系我们</a>

🖼️ 三、多媒体与数据展示

🖼️

图片标签

多媒体插入 · 单标签，无需闭合

<img> 是单标签（自闭合），用于在页面中插入图片。支持相对路径和网络地址。

属性 作用 是否必填
src 图片路径 ✅ 必填
alt 替代文本（SEO + 无障碍） ✅ 必填
title 鼠标悬浮提示 可选
width / height 图片尺寸 建议设置，防止布局抖动 (CLS)
💡 提示：推荐优先用 CSS 控制图片尺寸，width/height 属性仅作为预留占位，防止加载时页面跳动。

📝代码示例

<!-- 本地图片 -->
<img src="images/photo.jpg" alt="风景照片描述" title="美丽风景"
     width="400" height="300">

<!-- 网络图片 -->
<img src="https://example.com/banner.png" alt="网站横幅广告">
📋

列表标签

规整化展示 · 三种列表类型及应用场景

列表是网页中最常用的结构之一。根据内容关系选择合适的列表类型至关重要。

类型 标签组合 默认样式 适用场景
无序列表 <ul> + <li> 实心圆点 导航菜单、商品列表
有序列表 <ol> + <li> 数字编号 步骤教程、排行榜
自定义列表 <dl> + <dt> + <dd> dt 标题 + dd 缩进 名词解释、FAQ、参数
⚠️ 结构规则：<ul> / <ol> 内只能直接嵌套 <li>，<li> 内可嵌套任意标签。

📝代码示例

<!-- 无序列表：导航菜单 -->
<ul>
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
</ul>

<!-- 有序列表：操作步骤 -->
<ol>
    <li>打开浏览器</li>
    <li>输入网址</li>
</ol>

<!-- 自定义列表：名词解释 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，构建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制页面样式。</dd>
</dl>
📊

表格标签

数据可视化 · 仅用于展示结构化数据

表格专门用于展示结构化二维数据（报表、价格表、参数对比等），严禁使用表格进行网页布局！

标签 作用 说明
<table> 表格容器 包裹所有表格内容
<caption> 表格标题 显示在表格上方
<tr> 表格行 Table Row
<th> 表头单元格 默认加粗居中
<td> 普通单元格 默认左对齐
<thead> 表头区域 语义化分组
<tbody> 表体区域
<tfoot> 表尾区域

🔀合并单元格

属性 作用 示例
colspan 跨列合并（水平） colspan="2"
rowspan 跨行合并（垂直） rowspan="3"

📝代码示例

<table>
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>90</td>
            <td>85</td>
        </tr>
    </tbody>
</table>

📨 四、表单与交互

📨

表单标签

数据收集 · 前后端交互的桥梁

表单用于收集用户输入数据。name 属性是后端接收数据的键名，value 是提交的值。

📦表单容器 <form>

属性 作用 说明
action 提交地址 action="/api/submit"
method 提交方式 GET（参数在 URL）/ POST（参数在请求体）
enctype 编码类型 文件上传需设为 multipart/form-data

🔤核心输入控件

标签 作用 关键说明
<input> 通用输入框 type 决定类型（见下表）
<label> 绑定输入框 for 对应 id，点击文字聚焦
<textarea> 多行文本 值写在标签对之间
<select> + <option> 下拉选择 option 的 value 为提交值
<button> 按钮 type="submit" / reset / button

⌨️<input> type 类型汇总

type 值 形态 用途
text 单行文本 用户名、昵称
password 密码框 自动掩码显示
email 邮箱输入 有格式校验
number 数字输入 带上下调节
tel 电话输入 移动端调出数字键盘
url 网址输入 有格式校验
radio 单选框 同 name 互斥
checkbox 复选框 多选
file 文件上传 需配合 enctype
date 日期选择 浏览器原生控件
submit 提交按钮 点击提交表单
reset 重置按钮 清空表单
hidden 隐藏域 传递不可见参数

✨增强属性

属性 作用 示例
placeholder 占位提示 placeholder="请输入"
required 必填校验 required
name 字段名称 name="username"
value 默认值 value="默认"

📝完整表单示例

<form action="/register" method="POST">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"
           placeholder="请输入用户名" required>

    <label for="pwd">密码：</label>
    <input type="password" id="pwd" name="password" required>

    <!-- 单选框：同一 name 互斥 -->
    <label><input type="radio" name="gender" value="male"> 男</label>
    <label><input type="radio" name="gender" value="female"> 女</label>

    <label for="intro">个人简介：</label>
    <textarea id="intro" name="intro" rows="4"
              placeholder="请介绍一下自己"></textarea>

    <label for="city">所在城市：</label>
    <select id="city" name="city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>

    <button type="submit">注册</button>
</form>

🧩 五、HTML5 语义化

🧩

HTML5 语义化标签

现代布局 · 让代码"自带注释"

HTML5 新增带语义的布局标签，替代传统 <div>，让浏览器和搜索引擎快速识别页面模块，提升 SEO 和可读性。

📋标签详解

标签 含义 使用规范
<header> 页面/区块头部 通常放 Logo、标题、搜索框
<nav> 导航链接集合 用于主要导航菜单
<main> 页面核心主体 一个页面只用一次，不能嵌套在 article/aside/footer 内
<section> 通用内容区块 通常带有标题
<article> 独立内容单元 博客文章、新闻条目等可独立分发的内容
<aside> 侧边栏/附属 广告、推荐、标签云等
<footer> 页面/区块底部 版权、联系方式、站点地图
<figure> + <figcaption> 媒体 + 标题 将图片和说明关联

📝完整语义化页面示例

<body>
    <header>
        <h1>我的技术博客</h1>
        <nav>
            <a href="/">首页</a>
            <a href="/articles">文章</a>
            <a href="/about">关于</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>HTML 学习心得</h2>
            <section>
                <h3>为什么学习 HTML</h3>
                <p>HTML 是 Web 开发的基础...</p>
            </section>
        </article>

        <aside>
            <h3>相关推荐</h3>
            <ul>
                <li>CSS 入门</li>
                <li>JavaScript 基础</li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2026 我的博客</p>
    </footer>
</body>
🏷️

标签分类补充

显示特性 · 块级 / 行内 / 行内块

理解标签的显示特性是 CSS 布局的基础。每种标签在页面中的"占地面积"由它的分类决定。

📐按显示类型分类

类型 特征 常见标签
块级 独占一行，可设宽高 div p h1~h6 ul ol table header nav section article footer
行内 同行显示，不可设宽高 span a strong em b i mark del ins label
行内块 同行显示，可设宽高 img input button select textarea

🔖按闭合方式分类

类型 特征 常见标签
双标签 有开始和结束标签 html body div p a span ul li table form
单标签 无需结束标签 meta link br hr img input
⚠️ 嵌套规则：
1. 层层递进：<p><strong>文字</strong></p> ✅
2. 禁止交叉：<p><strong>文字</p></strong> ❌
3. 块级可含行内，行内通常不含块级（HTML5 中 <a> 是例外）
4. <ul>/<ol> 内只能直接嵌套 <li>

💡 学习建议总结

🧠 按分类记忆 结构 → 内容 → 布局 → 交互，形成知识体系而非零散记忆。
✍️ 手写练习 每个标签亲手敲一遍，比单纯阅读记忆更深刻。
📝 先结构，后样式 HTML 负责结构和语义，CSS 负责外观，不要混用。
♿ 关注语义化 优先使用 <header>、<article> 等标签，减少纯 <div> 滥用。
✅ 标签正确闭合 除单标签外，所有标签都需要结束标签，注意嵌套顺序。
🔍 善用 F12 查看任意网页的 HTML 源码，学习实际项目的标签使用。