首页 › HTML › HTML5 语义化 › 文本级语义与交互元素

除了结构标签，HTML5 还提供了文本级语义元素和无 JS 的交互元素。

文本级语义标签

<time> 日期时间

<time datetime="2026-05-16">2026年5月16日</time>
<time datetime="2026-05-16T14:30:00+08:00">2026年5月16日 14:30</time>
<time datetime="2026">2026年</time>

datetime 属性提供机器可读格式，便于日历、搜索等工具处理。

<mark> 高亮

<p>在搜索结果中，<mark>HTML</mark> 相关的页面共有 42 个。</p>
<p>请重点阅读 <mark>第3章 语义化</mark> 部分。</p>

<figure> + <figcaption> 配图

<figure>
  <img src="architecture.png" alt="系统架构图">
  <figcaption>图1：系统架构示意</figcaption>
</figure>

<figure>
  <pre><code>console.log('Hello World');</code></pre>
  <figcaption>代码 1：Hello World 示例</figcaption>
</figure>

<details> + <summary> 折叠面板

无需 JavaScript 的可折叠区域：

<details>
  <summary>点击展开详情</summary>
  <p>这里是折叠的内容。点击 summary 可以展开或收起。</p>
  <ul>
    <li>支持任意 HTML 内容</li>
    <li>纯 HTML 实现，无需 JS</li>
  </ul>
</details>

<!-- 默认展开 -->
<details open>
  <summary>公告</summary>
  <p>本网站已更新至 HTML5 标准。</p>
</details>

<dialog> 模态框

<dialog id="myDialog">
  <h2>确认操作</h2>
  <p>确定要删除这条记录吗？</p>
  <form method="dialog">
    <button value="cancel">取消</button>
    <button value="confirm">确认</button>
  </form>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">
  打开对话框
</button>

<dialog> 需要 JavaScript 调用 .showModal() / .close() 来控制显示。

<address> 联系信息

<address>
  作者：张三<br>
  邮箱：<a href="mailto:zhang@example.com">zhang@example.com</a><br>
  公司：示例科技有限公司
</address>

<cite> 作品引用

<p>我最喜欢的书是 <cite>《JavaScript 高级程序设计》</cite>。</p>

小结

标签	用途	是否需要 JS
<time>	语义化日期时间	否
<mark>	高亮文本	否
<figure> + <figcaption>	配图和说明	否
<details> + <summary>	折叠面板	否（纯 HTML）
<dialog>	模态框	是（showModal()）
<address>	联系信息	否
<cite>	作品引用	否

上一节：语义标签与页面结构 下一节：SEO 与结构化数据

贡献者: 布欧-Lewyon