HTML5 常用标签完全指南

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

标签	作用	关键说明
<!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>	三至六级	逐级细分，按层级嵌套，不越级

📝正确的层级嵌套

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

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

📌基础文本标签

标签	作用	特性
<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 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"	移动端调用拨号

📝代码示例

<!-- 安全的外部链接 -->
<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)

📝代码示例

<!-- 本地图片 -->
<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>
    <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 新增带语义的布局标签，替代传统 <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