蛋壳物语

首页
早报
物语

完整的 WordPress HTML5 标签测试合集

发布于 更新于
13

HTML5 标签完整分类手册

一、语义化结构标签

h1-h6 - 标题层级标签

主标题 h1（页面唯一）

二级标题 h2（章节标题）

三级标题 h3（子章节）

四级标题 h4

五级标题 h5
六级标题 h6
<h1>主标题 h1（页面唯一）</h1>
<h2>二级标题 h2（章节标题）</h2>
<h3>三级标题 h3（子章节）</h3>
<h4>四级标题 h4</h4>
<h5>五级标题 h5</h5>
<h6>六级标题 h6</h6>

div - 块级容器

div块级容器内容
<div style="border: 1px solid #ccc; padding: 10px;">div块级容器内容</div>

span - 行内文本容器

这是普通文本，这是红色span文本，这是黄色背景span文本

<p>这是普通文本，<span style="color: red;">这是红色span文本</span>，<span style="background: yellow;">这是黄色背景span文本</span></p>

br - 换行标签

第一行文本
第二行文本（使用br标签换行）
第三行文本

<p>第一行文本<br>第二行文本（使用br标签换行）<br>第三行文本</p>

nav - 导航区域

<nav>
<a href="#">首页</a> |
<a href="#">关于</a> |
<a href="#">服务</a> |
<a href="#">联系</a>
</nav>

section - 主题内容区块

关于Web开发

Web开发是一个快速发展的领域，涉及前端、后端和全栈开发技术。

<section>
<h4>关于Web开发</h4>
<p>Web开发是一个快速发展的领域，涉及前端、后端和全栈开发技术。</p>
</section>

article - 独立文章片段

HTML5新特性介绍

HTML5引入了许多新的元素和API，让Web开发更加便捷和强大...

发布时间：2025年11月13日

<article>
<h4>HTML5新特性介绍</h4>
<p>HTML5引入了许多新的元素和API，让Web开发更加便捷和强大...</p>
<small>发布时间：2025年11月13日</small>
</article>

aside - 侧边补充内容

<aside>
<h4>💡 提示</h4>
<p>使用语义化标签可以提高网页的可访问性和SEO效果。</p>
</aside>

ul, ol, li - 列表标签

无序列表 (ul)

  • 前端技术
    • HTML5
    • CSS3
  • 后端技术
  • 数据库

有序列表 (ol)

  1. 学习HTML
  2. 掌握CSS
    1. 基础语法
    2. 布局技术
  3. JavaScript编程
<!-- 无序列表 -->
<ul>
  <li>前端技术
    <ul>
      <li>HTML5</li>
      <li>CSS3</li>
    </ul>
  </li>
  <li>后端技术</li>
  <li>数据库</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>学习HTML</li>
  <li>掌握CSS
    <ol type="a">
      <li>基础语法</li>
      <li>布局技术</li>
    </ol>
  </li>
  <li>JavaScript编程</li>
</ol>

table - 表格标签

技术栈对比表
技术 难度 应用场景
HTML 简单 页面结构
CSS 中等 样式设计
JavaScript 负责交互逻辑 
<table border="1" cellpadding="5">
<caption>技术栈对比表</caption>
<thead>
  <tr>
    <th>技术</th>
    <th>难度</th>
    <th>应用场景</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>HTML</td>
    <td>简单</td>
    <td>页面结构</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>中等</td>
    <td>样式设计</td>
  </tr>
  <tr>
    <td colspan="3">JavaScript 负责交互逻辑</td>
  </tr>
</tbody>
</table>

a - 超链接标签

<!-- 外部链接 -->
<a href="https://www.example.com" target="_blank">外部链接</a>

<!-- 锚点链接 -->
<a href="#top">回到页面顶部</a>

<!-- 邮件和电话链接 -->
<a href="mailto:contact@example.com">发送邮件</a>
<a href="tel:+86123456789">拨打电话</a>

figure & figcaption - 媒体说明

示例图片
图1：HTML5语义化标签的视觉表现
<figure>
  <img src="image.jpg" alt="示例图片">
  <figcaption>图1：HTML5语义化标签的视觉表现</figcaption>
</figure>

二、文本格式标签

strong & em - 强调文本

这是strong强调文本，这是em斜体强调的效果对比。

<p>这是<strong>strong强调文本</strong>，这是<em>em斜体强调</em>的效果对比。</p>

b & i - 文本样式标签

这是标签的粗体文本（无强调语义）

这是标签的斜体文本（无强调语义）

<p>这是<b>标签的<b>粗体文本</b>（无强调语义）</p>
<p>这是<i>标签的<i>斜体文本</i>（无强调语义）</p>

mark - 高亮文本

这是一段包含高亮内容的文本，常用于搜索结果或重要信息标记。

<p>这是一段包含<mark>高亮内容</mark>的文本...</p>

abbr - 缩写词

HTML是网页的标准标记语言。

CSS控制网页的外观和布局。

<abbr title="HyperText Markup Language">HTML</abbr>是网页的标准标记语言
<abbr title="Cascading Style Sheets">CSS</abbr>控制网页的外观

blockquote & cite - 引用

"Web 的力量在于其普遍性。任何人都，无论能力如何，都可以通过浏览器访问 Web。"
—— Tim Berners-Lee 

<blockquote>
  "Web 的力量在于其普遍性..."
  <cite>—— Tim Berners-Lee</cite>
</blockquote>

code & pre - 代码展示

行内代码示例：const greeting = 'Hello World!';

function greet(name) {
    return `Hello, ${name}! Welcome to Web Development.`;
}

console.log(greet('Developer'));
<p>行内代码示例：<code>const greeting = 'Hello World!';</code></p>

<pre>
function greet(name) {
    return `Hello, ${name}! Welcome to Web Development.`;
}

console.log(greet('Developer'));
</pre>

small - 小号文本

活动规则：参与本次活动的用户需满足相关条件 （活动最终解释权归主办方所有）

<p>活动规则：参与本次活动的用户需满足相关条件 <small>（活动最终解释权归主办方所有）</small></p>

sub & sup - 下标和上标

化学公式示例：H2O（水分子）、CO2（二氧化碳）

数学公式示例：a2 + b2 = c2（勾股定理）

脚注示例：Web标准1确保了网页的跨平台兼容性。

<p>化学公式示例：H<sub>2</sub>O（水分子）</p>
<p>数学公式示例：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>脚注示例：Web标准<sup>1</sup>确保了网页的跨平台兼容性。</p>

bdi - 双向文本隔离

用户评论：用户名 שָׁלוֹם 发表了评论

用户评论：用户名 السلام عليكم 发表了评论

<p>用户评论：用户名 <bdi>שָׁלוֹם</bdi> 发表了评论</p>
<p>用户评论：用户名 <bdi>السلام عليكم</bdi> 发表了评论</p>

del & ins - 删除和插入文本

价格对比：原价 ¥199 现价 ¥99

文档更新：旧版本内容 新版本内容

<p>价格对比：原价 <del>¥199</del> 现价 <ins>¥99</ins></p>
<p>文档更新：<del>旧版本内容</del> <ins>新版本内容</ins></p>

三、文本对齐和样式标签

文本对齐 - align属性

左对齐文本
这是左对齐的文本内容，使用 text-align: left 或 align="left"
居中对齐文本
这是居中对齐的文本内容，使用 text-align: center 或 align="center"
右对齐文本
这是右对齐的文本内容，使用 text-align: right 或 align="right"

左对齐图片

居中齐图片

右对齐图片

<!-- 左对齐 -->
<div style="text-align: left;">左对齐文本</div>

<!-- 居中对齐 -->
<div style="text-align: center;">居中对齐文本</div>

<!-- 右对齐 -->
<div style="text-align: right;">右对齐文本</div>

<!-- 图片对齐 -->
<img src="https://picsum.photos/200/200?random=1" class="alignleft" alt="左对齐图片">
<img src="https://picsum.photos/200/200?random=2" class="aligncenter" alt="居中图片">
<img src="https://picsum.photos/200/200?random=3" class="alignright" alt="右对齐图片">

字体颜色 - style="color"

红色文本：使用 style="color: red"

蓝色文本：使用 style="color: blue"

绿色文本：使用 style="color: green"

橙色文本：使用 style="color: #ff6600"

紫色文本：使用 style="color: purple"

深灰色文本：使用 style="color: #333333"

<p style="color: red;">红色文本</p>
<p style="color: blue;">蓝色文本</p>
<p style="color: green;">绿色文本</p>
<p style="color: #ff6600;">橙色文本</p>
<p style="color: purple;">紫色文本</p>
<p style="color: #333333;">深灰色文本</p>

字体背景色 - style="background-color"

黄色背景文本

浅蓝色背景文本

浅绿色背景文本

自定义颜色背景文本 (#ffeecc)

自定义红色背景文本 (#ffcccc)

自定义绿色背景文本 (#ccffcc)

<p style="background-color: yellow;">黄色背景文本</p>
<p style="background-color: lightblue;">浅蓝色背景文本</p>
<p style="background-color: lightgreen;">浅绿色背景文本</p>
<p style="background-color: #ffeecc;">自定义颜色背景文本</p>

文本缩进 - text-indent 和 margin-left

这是使用 text-indent: 2em 实现的段落首行缩进效果。通常用于中文排版，让每个段落的首行缩进两个字符的距离，这样可以让文章看起来更加整洁和专业。

这是使用 margin-left: 2em 实现的全段落缩进效果。整个段落都向右缩进了两个字符的距离，常用于引用文本或者列表项的缩进显示。

引用文本示例：
这是模拟blockquote样式的引用文本，使用了左边界缩进和左边框来突出显示。通常用于显示引用的内容或者重要的提示信息。
  • 这是使用margin-left: 2em的列表项缩进
  • 第二个列表项
  • 第三个列表项
    • 嵌套列表项也使用缩进
    • 第二个嵌套项
<!-- 首行缩进 -->
<p style="text-indent: 2em;">这是首行缩进的段落...</p>

<!-- 全段落缩进 -->
<p style="margin-left: 2em;">这是全段落缩进的文本...</p>

<!-- 引用样式缩进 -->
<div style="margin-left: 3em; border-left: 3px solid #ccc; padding-left: 1em;">
  引用文本示例
</div>

<!-- 列表缩进 -->
<ul style="margin-left: 2em;">
  <li>列表项缩进</li>
  <li>第二个列表项
    <ul style="margin-left: 2em;">
      <li>嵌套列表项缩进</li>
    </ul>
  </li>
</ul>

综合文本样式示例

居中的蓝色标题（带背景色）

这是综合应用了多种样式的段落：右对齐、段落缩进、首行缩进、文字颜色和背景色。

深色背景的居中文本 
<div style="background-color: #f0f8ff; color: #0066cc; text-align: center; padding: 15px;">
  居中的蓝色标题（带背景色）
</div>

<div style="text-align: right; margin-left: 2em; border: 1px solid #ddd; padding: 10px;">
  <p style="color: #333; background-color: #f9f9f9; text-indent: 1em;">
    综合样式段落
  </p>
</div>

<div style="text-align: center; color: white; background-color: #333; padding: 10px;">
  深色背景的居中文本
</div>

四、交互组件标签

details & summary - 折叠面板

📖 点击展开 HTML5 新特性
  • 新增语义化标签：header, nav, main, article, section, aside, footer
  • 新增表单控件：date, time, email, tel, range 等
  • 新增多媒体支持：video, audio 标签
  • 新增图形标签：canvas, SVG 支持
🔧 默认展开的示例

添加 open 属性可以让 details 元素默认展开。

<details>
  <summary>📖 点击展开 HTML5 新特性</summary>
  <ul>
    <li>新增语义化标签...</li>
    <li>新增表单控件...</li>
  </ul>
</details>

<details open>
  <summary>🔧 默认展开的示例</summary>
  <p>添加 open 属性可以默认展开</p>
</details>

progress - 进度条

任务进度：70% 70%

文件上传：45% 45%

课程学习：3/10 3/10 完成

<p>任务进度：<progress value="70" max="100">70%</progress> 70%</p>
<p>文件上传：<progress value="45" max="100">45%</progress> 45%</p>
<p>课程学习：<progress value="3" max="10">3/10</progress> 3/10 完成</p>

meter - 度量值

磁盘使用情况：60% 60%

电池电量：25% 25%

<meter value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.5">60%</meter>

<p>磁盘使用情况：
  <meter value="0.6" min="0" max="1" low="0.3" high="0.7" 
          optimum="0.5">60%</meter> 60%</p>

dialog - 对话框

确认操作

您确定要执行此操作吗？



<button onclick="document.getElementById('myDialog').showModal()">打开对话框</button>
<dialog id="myDialog">
  <h4>对话框标题</h4>
  <p>这是HTML5的dialog标签内容</p>
  <button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>

五、媒体标签

img - 图片

示例图片 
<img src="image.jpg" alt="示例图片" width="300" height="200">

<!-- 带说明的图片 -->
<figure>
  <img src="image.jpg" alt="示例图片">
  <figcaption>图片说明文字</figcaption>
</figure>

video - 视频

<video controls width="300" height="150">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频标签
</video>

audio - 音频

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频标签
</audio>

canvas - 绘图画布


<canvas id="myCanvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 100, 50);

ctx.beginPath();
ctx.arc(200, 75, 25, 0, 2 * Math.PI);
ctx.fillStyle = '#e74c3c';
ctx.fill();
</script>

iframe - 内嵌框架

<iframe src="https://www.example.com" 
        width="300" height="150" 
        title="示例网站">您的浏览器不支持 iframe</iframe>

picture - 响应式图片

响应式图片示例 
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

六、表单标签

input - 基础输入类型





<form>
  <label for="text">文本：</label>
  <input type="text" id="text" placeholder="请输入文本"><br><br>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" placeholder="test@example.com"><br><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" placeholder="请输入密码"><br><br>
  
  <label for="tel">电话：</label>
  <input type="tel" id="tel" placeholder="13800138000"><br><br>
</form>

input - 高级输入类型







<!-- 日期和时间 -->
<input type="date">
<input type="time">

<!-- 数值输入 -->
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100" value="50">

<!-- 特殊类型 -->
<input type="color" value="#3498db">
<input type="search" placeholder="搜索...">
<input type="file" accept="image/*">

select - 选择控件




<!-- 单选下拉框 -->
<select id="framework">
  <option value="">请选择技术栈</option>
  <option value="html">HTML5</option>
  <option value="css">CSS3</option>
  <option value="js">JavaScript</option>
</select>

<!-- 多选列表 -->
<select multiple size="4">
  <option value="html">HTML5</option>
  <option value="css">CSS3</option>
  <option value="js">JavaScript</option>
</select>

radio & checkbox - 单选复选

单选题（性别）：



复选框（技能）：





<!-- 单选按钮 -->
<label>
  <input type="radio" name="gender" value="male"> 男性
</label>
<label>
  <input type="radio" name="gender" value="female"> 女性
</label>

<!-- 复选框 -->
<label>
  <input type="checkbox" name="skills" value="html"> HTML5
</label>
<label>
  <input type="checkbox" name="skills" value="css"> CSS3
</label>

textarea - 多行文本输入



<form>
  <label for="feedback">意见反馈：</label><br>
  <textarea id="feedback" 
            rows="5" 
            cols="50" 
            placeholder="请输入您的意见和建议..."></textarea><br><br>
  <button type="submit">提交反馈</button>
</form>

button - 按钮




<!-- 不同类型的按钮 -->
<button type="button" onclick="alert('点击了')">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button disabled>禁用按钮</button>

datalist - 输入建议




<form>
  <label for="framework">选择前端框架：</label>
  <input list="frameworks" id="framework" placeholder="输入或选择框架...">
  
  <datalist id="frameworks">
    <option value="React">
    <option value="Vue.js">
    <option value="Angular">
    <option value="Svelte">
  </datalist>
</form>

output - 计算结果

+
=
30
<form oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
  <input type="number" id="num1" value="10"> +
  <input type="number" id="num2" value="20"> =
  <output name="result" for="num1 num2">30</output>
</form>

七、WordPress特色短代码

gallery - 图片画廊

<!-- WordPress 画廊短代码 -->
【gallery ids="1,2,3,4,5,6" columns="3" size="medium"】

<!-- 参数说明： -->
<!-- ids: 图片ID列表 -->
<!-- columns: 显示列数 (1-8) -->
<!-- size: 图片尺寸 (thumbnail, medium, large, full) -->

<!-- 其他参数： -->
【gallery ids="1,2,3" orderby="rand" link="file"】

caption - 图片说明

示例图片

图片说明文字（caption效果）
<!-- WordPress 图片说明短代码 -->
【caption id="attachment_1" align="aligncenter" width="400"】
<img src="image.jpg" alt="示例图片" width="400">
图片说明文字（caption效果）
【/caption】

<!-- 对齐方式： -->
<!-- alignleft, aligncenter, alignright, alignnone -->

audio - 音频播放器

<!-- WordPress 音频播放器 -->
【audio src="podcast-episode1.mp3"】

<!-- 多格式音频源 -->
【audio mp3="audio.mp3" ogg="audio.ogg"】

<!-- 其他参数： -->
【audio src="audio.mp3" loop autoplay preload="none"】

video - 视频播放器

🎬 WordPress视频播放器演示

<!-- WordPress 视频播放器 -->
【video width="640" height="360" mp4="tutorial.mp4"】

<!-- 多格式视频源 -->
【video mp4="video.mp4" webm="video.webm" ogg="video.ogv"】

<!-- 带封面图 -->
【video poster="https://picsum.photos/600/300" mp4="tutorial.mp4" width="640"】

八、其他实用标签

time - 时间日期

发布时间：

活动时间：

文章更新：

<!-- 基础时间标签 -->
<time datetime="2025-11-13">2025年11月13日</time>

<!-- 完整日期和时间 -->
<time datetime="2025-11-13T10:30:00Z">
  2025年11月13日上午10:30
</time>

<!-- 带时区的时间 -->
<time datetime="2025-12-25T18:30:00+08:00">
  2025年12月25日 18:30 (北京时区)
</time>

address - 联系信息

作者：张三
公司：Web开发工作室
地址：北京市朝阳区建国门外大街1号
电话：010-12345678
网站：www.dkwy.com
<address>
  <strong>作者：</strong><a href="mailto:author@dkwy.com">张三</a><br>
  <strong>公司：</strong>Web开发工作室<br>
  <strong>地址：</strong>北京市朝阳区建国门外大街1号<br>
  <strong>电话：</strong><a href="tel:+86101234567890">010-12345678</a><br>
  <strong>网站：</strong><a href="https://www.dkwy.com">www.dkwy.com</a>
</address>

hr - 水平分割线

第一部分内容

这部分包含了相关的文本内容...

第二部分内容

这部分是不同的内容主题...

第三部分内容

还有其他相关内容...

<!-- 基础分割线 -->
<hr>

<!-- CSS样式化分割线 -->
<hr style="border: none; border-top: 2px solid #3498db;">

<!-- 虚线分割线 -->
<hr style="border: none; border-top: 2px dashed #ccc;">
0 / 600
欢迎参与讨论 登录/注册
0 条评论
热门最新