企业官网建设流程全解析

Label Studio HTML 文档实体识别（NER）标注模板详解：基于 HyperText 与 Labels 标签的 HTML 实体解析

【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio

Label Studio 的 HTML Document 模板用于对带 HTML 标记的文本（HTML-encoded text）与网页执行命名实体识别（NER）标注，帮助数据科学团队从富文本、网页正文等结构化文档中抽取「人名」「组织」等实体跨度。读完本文你将掌握：如何用HyperText对象标签展示带标记的 HTML 内容、如何用Labels控制标签定义实体类别并输出 XPath 级精度的标注结果，以及如何将该模板直接投入任务数据准备与模型训练流程。

模板概览与适用场景

该模板的核心用途是对 HTML 文档做实体解析（HTML entity resolution）：页面以富文本形式展示带标记的内容，标注员用鼠标划选文本片段并为其打上实体标签，最终产出的结果包含精确的 XPath 定位信息，可无缝用于下游的 NER 模型训练、信息抽取与知识图谱构建。

适用场景包括：

• 网页正文、新闻稿、博客文章的实体标注；
• 富文本（带<b>、<em>、<p>等标记）中的 NER 任务；
• 需要保留原文标记结构、同时标注语义实体的 NLP 项目。

完整的最小标注配置如下（即 docs/source/templates/html_document.md 中的核心配置）：

<View> <Labels name="ner" toName="text"> <Label value="Person"></Label> <Label value="Organization"></Label> </Labels> <HyperText name="text" value="$text"></HyperText> </View>

这段配置共三个组成部分：外层<View>容器、<Labels>控制标签（定义实体类别）、<HyperText>对象标签（展示 HTML 内容）。三个部分各自独立可调，下面逐一拆解。

配置结构：View、Labels 与 HyperText 的分工

View：所有标注配置的根容器

所有 Label Studio 标注配置都必须包裹在<View>标签中，它负责承载与渲染页面上的全部控件与对象：

<View> ... </View>

View是整个配置 XML 的顶层骨架，Labels、HyperText以及其他标签（如Text、Image、Choices）均作为其子节点存在。

Labels：定义实体类别集合

Labels控制标签用于指定标注员在 HTML 文档上可以标注的实体类别，通过toName指向目标对象标签：

<Labels name="ner" toName="text"> <Label value="Person"></Label> <Label value="Organization"></Label> </Labels>

各属性含义如下：

参数详情见 docs/source/includes/tags/labels.md 与 docs/source/tags/labels.md。

动态标签（Dynamic Labels）：Labels支持从任务数据动态加载标签，只需在标签上指定value字段，任务 JSON 中提供选项列表即可：

<Labels name="product" toName="shelf" value="$brands" />

{ "data": { "brands": [ { "value": "Big brand" }, { "value": "Another brand", "background": "orange" }, { "value": "Green brand", "alias": "Eco" } ] } }

这与静态书写多个<Label>完全等价，且每个选项的所有参数（如background、alias）都会原样传递到生成的<Label>上。

HyperText：渲染带 HTML 标记的内容

HyperText对象标签用于展示包含 HTML 标记的文本，是「HTML 文档」模板区别于纯文本Text模板的关键：

<HyperText name="text" value="$text"></HyperText>

value="$text"表示从任务数据data.text字段读取 HTML 字符串。其完整参数如下（见 docs/source/includes/tags/hypertext.md）：

除从任务数据读取外，HyperText也支持直接在配置中内嵌 HTML 片段：

<View> <HyperText name="p1"> <p>Some explanations <em>with style</em></p> </HyperText> </View>

任务数据格式与标注结果

任务数据（Task Data）

使用该模板时，任务 JSON 中需要提供一个包含 HTML 字符串的字段。例如：

{ "data": { "text": "<div><p>Apple Inc. was founded by Steve Jobs and Steve Wozniak.</p><p>Google is headquartered in Mountain View.</p></div>" } }

HyperText通过value="$text"读取该字段并将其渲染为富文本页面供标注。

标注结果结构（HyperTextRegionResult）

HyperText区域的标注结果不采用纯文本的行列偏移，而是使用XPath + 偏移量精确记录跨容器的选择范围，结构如下（定义于 web/libs/editor/src/regions/HyperTextRegion.js）：

{ "value": { "start": "/div[1]/p[2]/text()[1]", "end": "/div[1]/p[4]/text()[3]", "startOffset": 2, "endOffset": 81, "hypertextlabels": ["Car"] } }

这一设计使标注可以跨越多个 HTML 容器（如从第 2 段中间到第 4 段结尾），同时保留原文档的标记结构，保证下游解析的完整性。

仓库中的对应实现与可运行示例

模板背后的实现位于前端编辑器仓库中，围绕HyperText对象标签与HyperTextRegion区域类型展开：

• 对象标签实现：web/libs/editor/src/tags/object/HyperText.js 中声明了HyperText标签的全部参数（valueType、inline、saveTextResult、encoding、selectionEnabled、clickableLinks、granularity、resolveUrls等），与文档参数表一一对应；
• 区域与结果模型：web/libs/editor/src/regions/HyperTextRegion.js 定义了HyperTextRegionResult的 XPath 结果结构（start/end/startOffset/endOffset/text）；
• 配套控制标签：web/libs/editor/src/tags/control/HyperTextLabels.jsx 是专用于超文本区域的标签控件实现；
• 可运行示例配置：web/libs/editor/src/examples/html_document/config.xml 中内置了与本模板完全一致的 NER 示例（Person/Organization），可直接在编辑器示例中加载体验；
• 同主题参考示例：web/libs/editor/src/examples/rich_text_html/config.xml 提供富文本 HTML 标注的更多示例。

在 web/libs/editor/src/examples/html_document/config.xml 中，示例使用的是HyperTextLabels标签控件（HyperText区域专用），而本文模板文档中使用的是通用Labels控件——两者配合HyperText对象均能完成实体标注，可按需选用。

使用步骤：从模板到标注任务

1. 创建项目：在 Label Studio 中新建项目，命名并（可选）填写项目描述。
2. 选择/粘贴配置：在 Labeling Setup 页面选择Structured Data Parsing分类下的 HTML Document 模板，或直接粘贴上面的最小配置。
3. 导入数据：上传包含 HTML 文本字段的任务数据（如 JSON/CSV），确保字段名与value="$text"一致（此处为text）。
4. 开始标注：进入标注界面，用鼠标划选 HTML 文本中的实体片段，选择Person或Organization标签完成打标；如需多个实体类型，可增加<Label value="...">行。
5. 导出结果：标注完成后导出，结果中每条实体记录均含 XPath 定位与标签列表，可直接喂给下游 NER 模型或信息抽取管线。

相关标签速查

更多 HTML 文档相关的标注玩法可参考 Structured Data Parsing 模板目录 下的其他模板，以及 HTML 富文本标注 的完整参数文档。

小结

Label Studio 的 HTML Document 模板用「HyperText展示富文本 +Labels定义实体」的组合，把 NER 任务从纯文本扩展到带 HTML 标记的真实网页内容，并以 XPath + 偏移量输出跨容器、可还原的高精度标注结果。无论是处理新闻正文、富文本段落还是需要保留标记结构的文档，你都可以基于该模板快速搭建标注流水线，为下游 NLP 模型提供结构化的训练数据。

【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio