分类

← View All Tools

自闭合HTML标签参考

HTML空元素（自闭合标签）、SVG元素和MathML元素的完整参考指南

Filter elements by type

按名称或描述过滤元素

包含HTML元素的语法示例（如适用）

选择输出格式

关键信息

分类
Development
输入类型
select, text, checkbox
输出类型
text
样本覆盖
4
支持 API
Yes

概览

这是一个快速、全面的自闭合HTML标签（空元素）、SVG元素和MathML元素参考工具。它能帮助开发者快速查找、筛选和验证这些特殊标签的正确语法与用法，提升编码效率与准确性。

适用场景

  • •在编写HTML代码时，需要快速确认某个标签（如 `<img>`、`<br>`）是否为自闭合标签及其正确写法。
  • •在开发SVG图形或MathML数学公式时，需要查询特定的SVG或MathML元素及其属性。
  • •在代码审查或学习过程中，需要验证或了解自闭合标签的完整列表和标准用法。

工作原理

  • •选择要查询的元素类型，包括所有自闭合元素、仅HTML空元素、仅SVG元素或仅MathML元素。
  • •在搜索框中输入元素名称或关键词，工具将实时过滤并显示匹配的结果列表。
  • •可选择是否在结果中包含该元素的代码语法示例，以便直接参考或复制。
  • •选择输出格式（纯文本、Markdown或JSON），以满足不同场景下的信息展示或集成需求。

使用场景

前端开发人员在编写HTML页面时，快速查询并插入正确的自闭合图片标签 `<img src="..." alt="..." />`。
SVG图形开发者在创建矢量图标时，查找 `<circle>` 或 `<rect>` 等SVG元素的正确属性和语法结构。
教育工作者或学生在编写包含数学公式的网页时，参考MathML元素（如 `<msup>`）来正确表示上标。

用户案例

1. 快速查找图片标签语法

前端开发者
背景原因
开发者正在编写一个产品展示页面，需要插入产品图片，但不确定 `<img>` 标签是否需要闭合以及 `alt` 属性是否必需。
解决问题
需要确认 `<img>` 标签的正确、完整写法，避免语法错误。
如何使用
在工具中选择“HTML空元素”类型，在搜索框输入“img”，并勾选“包含代码示例”。
效果
工具立即显示 `<img>` 是自闭合标签，并提供标准语法示例 `<img src="url" alt="description" />`，确认了 `alt` 属性的重要性。

2. 查询SVG圆形元素

UI设计师/开发者
背景原因
设计师需要将一个设计稿中的圆形图标用代码实现，但不熟悉SVG中绘制圆形的具体元素和属性。
解决问题
需要找到在SVG中绘制圆形的正确元素及其必需的属性（如圆心坐标、半径）。
如何使用
将元素类型切换为“SVG元素”，搜索“circle”。
效果
工具列出 `<circle>` 元素，并显示其核心属性如 `cx`、`cy`、`r` 的示例代码 `<circle cx="50" cy="50" r="40" />`，帮助开发者快速实现图标。

用 Samples 测试

html, image, svg
包含图片的HTML示例
包含图片的HTML源代码示例，用于测试提取
title token html
image
SVG示例
可缩放矢量图形（SVG）示例，展示各种SVG功能和技术
matched family image,svg
image, svg
D3.js 数据可视化示例
全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化
matched family image,svg
image, svg
XML 示例
XML（可扩展标记语言）格式示例，从简单到复杂结构
matched family image,svg
image, svg

相关专题

ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。
Image 工具专题
探索 40 个围绕 image 的 utility 工作流工具，快速找到相近能力。
HtmlConvert工具专题
探索 11 个围绕 html 的 convert 工作流工具，快速找到相近能力。

常见问题

什么是自闭合HTML标签？

自闭合标签（也称为空元素）是指在HTML中不需要闭合标签的元素，它们通常没有内容，语法为 `<标签名 />` 或 `<标签名>`，例如 `<img />`、`<br>` 和 `<input />`。

为什么需要这个参考工具？

它提供了一个集中、可搜索的列表，避免了开发者在不同文档间切换查找，能快速确认标签的正确性、支持的属性以及所属类别（HTML/SVG/MathML）。

这个工具支持哪些类型的元素？

支持三大类：HTML空元素（如 `<hr>`、`<meta>`）、SVG元素（如 `<circle>`、`<path>`）和MathML元素（如 `<msqrt>`、`<mfrac>`）。

如何搜索特定的元素？

在“搜索元素”输入框中键入元素名称（如“img”）或描述性关键词（如“换行”），列表将自动筛选并显示相关结果。

输出格式有什么区别？

纯文本适合快速阅读；Markdown格式便于粘贴到文档中；JSON格式则方便程序解析或与其他工具集成。

API 文档

请求端点

POST /zh/api/tools/self-closing-html-tags

请求参数

参数名 类型 必填 描述
elementType select 否 Filter elements by type
search text 否 按名称或描述过滤元素
includeExamples checkbox 否 包含HTML元素的语法示例（如适用）
format select 否 选择输出格式

响应格式

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
文本: 文本

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-self-closing-html-tags": {
      "name": "self-closing-html-tags",
      "description": "HTML空元素（自闭合标签）、SVG元素和MathML元素的完整参考指南",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=self-closing-html-tags",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]