html 标签

# HTML 现代标签使用介绍（Astro 可直接渲染）

这份文档整理了你上面示例里常见的现代 HTML5 标签，并按统一格式说明：

• 1. 标题标签
• 2. 介绍
• 3. 属性和使用方式
• 4. 代码例子（可看源码，也可直接渲染）

---

1. time 时间标签

介绍

用于标记“机器可读”的时间/日期/时长，便于 SEO、可访问性和程序解析。

属性和使用方式

• datetime：标准时间值（如 2026-06-11T20:00）或时长（如 P3D）。
• 标签文本可以是给用户看的本地化文案。

代码例子

<p>世界杯开幕：<time datetime="2026-06-11T20:00">2026年6月11日 晚上8点</time></p>
<p>定制周期：预计 <time datetime="P3D">3天</time> 内发货</p>

渲染效果

世界杯开幕：2026年6月11日 晚上8点

定制周期：预计 3天 内发货

---

2. output 输出标签

介绍

用于展示表单计算结果，语义上比普通 span 更清晰。

属性和使用方式

• name：输出项名称。
• for：关联参与计算的输入控件 id。
• 常见配合：form oninput + output。

代码例子

<form oninput="total.value = parseInt(base.value, 10) + (urgent.checked ? parseInt(urgent.value, 10) : 0)">
  <input type="hidden" id="base" value="25" />
  <label><input type="checkbox" id="urgent" value="5" /> 加急发货 (+$5)</label>
  <p>订单总额：$<output name="total" for="base urgent">25</output></p>
</form>

渲染效果

加急发货 (+$5)

订单总额：$

25

---

3. datalist 数据建议列表

介绍

给 input 提供可选建议项，保留输入自由度，适合“可输入可选择”的场景。

属性和使用方式

• input 的 list 对应 datalist 的 id。
• <option value="..."> 作为候选值。

代码例子

<label for="country">选择应援国家：</label>
<input id="country" list="countries" placeholder="输入或选择..." autocomplete="off" />
<datalist id="countries">
  <option value="Argentina"></option>
  <option value="Brazil"></option>
  <option value="Germany"></option>
</datalist>

渲染效果

选择应援国家：

---

4. meter 度量标签

介绍

表示“有范围的当前值”（如库存比例、评分、负载）。

属性和使用方式

• min/max：范围。
• value：当前值。
• low/high/optimum：阈值和理想区间提示。

代码例子

<p>
  限时折扣名额：
  <meter min="0" max="100" low="20" high="80" optimum="10" value="15"></meter>
  <span>仅剩 15%</span>
</p>

渲染效果

限时折扣名额： 仅剩 15%

---

5. progress 进度标签

介绍

表示任务执行进度，适合上传、生成、下载等流程。

属性和使用方式

• value：当前进度。
• max：总量。
• 不设置 value 时，可用于不确定进度状态。

代码例子

<p>AI 宠物画像生成中：</p>
<progress value="70" max="100"></progress>

渲染效果

AI 宠物画像生成中：

---

6. abbr 缩写标签

介绍

表示缩写词，帮助用户和搜索引擎理解术语含义。

属性和使用方式

• title：完整释义，鼠标悬停可见。

代码例子

<p>面料规格为 <abbr title="Grams per Square Meter">GSM</abbr> 240。</p>

渲染效果

面料规格为 GSM 240。

---

7. mark 高亮标签

介绍

用于标记“当前语境下重点内容”。

属性和使用方式

• 通常直接包裹关键文本，不需要额外属性。

代码例子

<p>世界杯期间，所有定制订单 <mark>全球包邮</mark>。</p>

渲染效果

世界杯期间，所有定制订单 全球包邮。

---

8. wbr 换行建议标签

介绍

在超长英文/标识符中提供“可断行点”，避免撑破布局。

属性和使用方式

• wbr 是空标签，插在可断行位置。

代码例子

<h3>Super<wbr />Custom<wbr />World<wbr />Cup<wbr />Edition<wbr />2026</h3>

渲染效果

SuperCustomWorldCupEdition2026

---

9. fieldset + legend 表单分组

介绍

用于把一组相关表单项组织在一起，提升可读性和可访问性。

属性和使用方式

• fieldset：分组容器。
• legend：分组标题（语义标题）。

代码例子

<fieldset>
  <legend>球衣定制信息</legend>
  <label>背后姓名：<input type="text" /></label>
  <label>背号：<input type="number" /></label>
</fieldset>

渲染效果

球衣定制信息

背后姓名： 背号：

---

10. optgroup 选项分组

介绍

在下拉框中给选项分类，适合层级清晰的数据选择。

属性和使用方式

• optgroup label：分类名称。
• 内部放置多个 option。

代码例子

<select name="team-color">
  <optgroup label="南美强队">
    <option value="arg">阿根廷蓝白</option>
    <option value="bra">巴西黄绿</option>
  </optgroup>
  <optgroup label="欧洲豪强">
    <option value="ger">德国黑白</option>
    <option value="fra">法国深蓝</option>
  </optgroup>
</select>

渲染效果

阿根廷蓝白 巴西黄绿 德国黑白 法国深蓝

---

11. bdi 双向文本隔离

介绍

在混排场景（中英文 + 阿拉伯语等）中隔离用户名方向，避免标点和数字错位。

属性和使用方式

• 常用于“用户名、昵称、动态内容”等方向未知的内容节点。

代码例子

<ul>
  <li>用户 <bdi>Tommy</bdi>: 买了 3 件</li>
  <li>用户 <bdi>إيان</bdi>: 买了 3 件</li>
</ul>

渲染效果

• 用户 Tommy: 买了 3 件
• 用户 إيان: 买了 3 件

---

12. kbd 键盘输入提示

介绍

用于教程、帮助文档中的键位提示，语义明确且视觉统一。

属性和使用方式

• 可多个 kbd 组合成快捷键说明。

代码例子

<p>按 <kbd>Ctrl</kbd> + <kbd>Z</kbd> 撤销上一步操作。</p>

渲染效果

按 Ctrl + Z 撤销上一步操作。

---

13. address 联系信息标签

介绍

用于表示文档或区域的联系信息，不建议用于普通地址排版。

属性和使用方式

• 常配合 mailto:、官网链接、地理信息等。

代码例子

<address>
  联系我们：<br />
  Email: <a href="mailto:support@yourstore.com">support@yourstore.com</a><br />
  加利福尼亚州，设计工作室
</address>

渲染效果

联系我们：
Email: support@yourstore.com
加利福尼亚州，设计工作室

---

补充：输入增强属性（非标签，但非常实用）

enterkeyhint

• 控制移动端键盘回车文案，如 done、search、next。

<input type="text" enterkeyhint="done" />
<input type="text" enterkeyhint="search" />
<input type="text" enterkeyhint="next" />

autocomplete

• 利用浏览器自动填充，提升填写效率，如 cc-number、cc-exp。

<input type="text" autocomplete="cc-number" />
<input type="text" autocomplete="cc-exp" />

---

注意事项

• 在文档中展示标签名时，避免写成真实标签（例如 <base>），否则会被浏览器当成真实元素解析。
• time 的 datetime 建议使用标准格式，便于程序和搜索引擎解析。
• 需要“代码 + 渲染”时，先放代码块，再放一份真实 HTML，即可在 Astro 文档中直接展示效果。