HTML 可渲染标签速览

发表于 分类于
本文字数： 7.4k 阅读时长 ≈ 7 分钟

一、文档结构与元数据（可渲染部分）

尽管 <html>、<head>、<body> 不直接渲染内容，但 <body> 是可渲染内容的容器，<title> 渲染在浏览器标签栏。

二、内容分组标签

标签说明使用场景
<div>无语义块级容器布局容器、样式钩子
<span>无语义行内容器文本片段样式、图标
<p>段落文本段落
<hr>主题分隔线内容分段、视觉分隔
<br>换行诗歌、地址等强制换行
<pre>预格式化文本代码块、ASCII 艺术（保留空格和换行）
<blockquote>块级引用长引用内容
<figure>独立内容单元（常配 <figcaption>）插图、代码片段、表格
<figcaption><figure> 的标题/说明图片描述、代码说明
1
2
3
4
<figure>
  <img src="chart.png" alt="销量图">
  <figcaption>2024 年度销量趋势</figcaption>
</figure>

三、文本语义标签

标签说明使用场景
<h1>~`
`
标题层级文档大纲
<strong>强调（粗体）重要内容
<em>强调（斜体）语气强调
<b>粗体（无语义）关键词、产品名
<i>斜体（无语义）术语、外语、船名
<u>下划线拼写错误标注
<s>删除线已过时、已删除内容
<small>小字注释版权声明、法律文本
<sub> / <sup>下标 / 上标化学式 H₂O、数学指数 x²
<code>行内代码变量名、API 名称
<kbd>键盘输入快捷键提示 Ctrl+S
<samp>程序输出命令行输出示例
<var>变量数学变量 x
<abbr>缩写HTML，配 title 属性展示全称
<address>联系信息作者、公司地址
<time>时间/日期发布时间、事件日期（配 datetime）
<mark>高亮标记搜索结果关键词、重要文本
<cite>作品标题书名、文章名
<q>行内引用短引用（浏览器加引号）
<dfn>定义术语首次出现的术语
<del> / <ins>删除 / 插入内容版本变更对比
1
2
3
4
<p>按下 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>
<p>会议时间：<time datetime="2024-03-15T14:00">2024年3月15日下午2点</time></p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> 用于控制页面样式。</p>
<p>搜索结果中的 <mark>关键</mark> 词高亮显示。</p>

四、链接与交互标签

标签说明使用场景
<a>超链接页面跳转、锚点、下载
<button>按钮表单提交、交互触发
<details>可展开详情FAQ、折叠面板
<summary><details> 的可见标题折叠面板的标题行
<dialog>模态对话框弹窗、确认框
<menu>菜单列表（工具条）工具栏、上下文菜单
1
2
3
4
5
6
7
8
9
10
<details>
  <summary>什么是语义化 HTML</summary>
  <p>语义化 HTML 指使用具有含义的标签...</p>
</details>

<dialog id="confirm">
  <p>确定删除吗？</p>
  <button onclick="this.closest('dialog').close()">取消</button>
</dialog>
<button onclick="document.getElementById('confirm').showModal()">删除</button>

五、嵌入内容标签

标签说明使用场景
<img>图片展示图片
<picture>响应式图片根据屏幕条件提供不同图片源
<source>为 <picture> / <video> / <audio> 提供资源多格式降级
<video>视频播放视频
<audio>音频播放音频
<iframe>内嵌页面嵌入第三方内容（地图、支付）
<canvas>2D 绘图图表、游戏、图像处理
<svg>矢量图形图标、插画
<embed>嵌入插件已过时，用 <iframe> 替代
<object>通用嵌入很少使用
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- picture 多格式降级 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="描述">
</picture>

<!-- video 多格式 -->
<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持视频播放
</video>

六、表格标签

标签说明使用场景
<table>表格容器数据表格
<caption>表格标题表格说明文字
<thead>表头分组列标题行
<tbody>表体分组数据行
<tfoot>表尾分组汇总行
<tr>行表格行
<th>表头单元格（加粗居中）列名、行名
<td>数据单元格数据
<colgroup>列分组为整列设置样式
<col>列定义配合 <colgroup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
  <caption>2024 年销售数据</caption>
  <colgroup>
    <col style="background: #f0f0f0">
    <col span="2" style="background: #fff">
  </colgroup>
  <thead>
    <tr><th>季度</th><th>销售额</th><th>利润</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>100万</td><td>20万</td></tr>
    <tr><td>Q2</td><td>120万</td><td>25万</td></tr>
  </tbody>
  <tfoot>
    <tr><td>合计</td><td>220万</td><td>45万</td></tr>
  </tfoot>
</table>

七、表单标签

标签说明使用场景
<form>表单容器数据提交
<input>输入控件文本、密码、数字、文件等（由 type 决定）
<textarea>多行文本输入评论、描述
<select>下拉选择选项列表
<optgroup>选项分组带分组的下拉菜单
<option>选项下拉选项
<datalist>输入建议列表自动补全输入框
<label>标签关联输入控件（点击 label 聚焦 input）
<fieldset>表单字段分组分组相关控件
<legend>分组标题<fieldset> 的标题
<output>计算结果展示实时计算显示
<progress>进度条文件上传进度
<meter>度量值磁盘使用量、评分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- datalist 自动补全 -->
<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

<!-- progress + output -->
<progress id="upload" value="60" max="100"></progress>
<output for="upload">60%</output>

<!-- meter -->
<meter value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.5">70%</meter>

input type 汇总

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
type="text"       → 单行文本
type="password"   → 密码
type="number"     → 数字
type="email"      → 邮箱
type="url"        → URL
type="tel"        → 电话
type="search"     → 搜索框
type="checkbox"   → 复选框
type="radio"      → 单选框
type="file"       → 文件上传
type="color"      → 颜色选择器
type="date"       → 日期
type="time"       → 时间
type="datetime-local" → 本地日期时间
type="range"      → 滑块
type="hidden"     → 隐藏
type="submit"     → 提交按钮
type="reset"      → 重置按钮

八、列表标签

标签说明使用场景
<ul>无序列表导航、商品列表
<ol>有序列表排行榜、步骤说明
<li>列表项每一项
<dl>定义列表键值对列表
<dt>定义术语键
<dd>定义描述值
1
2
3
4
5
6
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，负责网页结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，负责网页样式</dd>
</dl>

九、脚本与交互标签

标签说明使用场景
<script>JS 脚本引入或内联 JS
<noscript>无脚本降级浏览器禁用 JS 时显示
<template>客户端模板声明可克隆的 DOM 片段
<slot>Web Component 插槽自定义元素内容分发
1
2
3
4
5
6
7
8
9
10
11
12
<template id="card-template">
  <div class="card">
    <h3 class="title"></h3>
    <p class="desc"></p>
  </div>
</template>

<script>
  const clone = document.getElementById('card-template').content.cloneNode(true);
  clone.querySelector('.title').textContent = '标题';
  document.body.appendChild(clone);
</script>

十、语义化布局标签（HTML5）

标签说明等价于
<header>页眉/头部语义化 div
<nav>导航区域语义化 div
<main>页面主体（每页仅一个）语义化 div
<section>通用章节语义化 div
<article>独立内容单元（文章、帖子）语义化 div
<aside>侧边栏/补充内容语义化 div
<footer>页脚语义化 div
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/blog">博客</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
  </article>
  <aside>
    <h2>相关文章</h2>
  </aside>
</main>
<footer>© 2024</footer>

语义化标签不改变样式，但提供以下好处：

  • SEO：搜索引擎更好地理解页面结构
  • 无障碍：屏幕阅读器可以导航到各个区域
  • 可维护性：代码结构一目了然

十一、特殊字符与实体

1
2
3
4
5
6
7
8
9
10
11
12
&nbsp;   不换行空格
&lt;      <
&gt;      >
&amp;     &
&quot;    "
&apos;    '
&copy;   ©
&reg;    ®
&trade;  ™
&mdash;  —
&ndash;  –
&rarr;   →

十二、不推荐或已废弃的标签

标签替代方案原因
<center>CSS text-align: center表现应由 CSS 控制
<font>CSS font-family / font-size表现应由 CSS 控制
<big>CSS font-size表现应由 CSS 控制
<strike><s> 或 CSS text-decoration语义更明确的标签
<u>CSS text-decoration语义易混淆（恢复使用但谨慎）
<marquee>CSS 动画非标准、可访问性差
<frame> / <frameset><iframe>标准废弃
<bgsound><audio>IE 专有
<blink>CSS 动画非标准