Understand-Anything HTML 语言上下文提示详解：语义标记、文件模式与知识图谱边如何协同工作

Understand-Anything HTML 语言上下文提示详解语义标记、文件模式与知识图谱边如何协同工作【免费下载链接】Understand-AnythingGraphs that teach graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.项目地址: https://gitcode.com/GitHub_Trending/un/Understand-Anything本文解析 Understand-Anything 中understand-anything-plugin/skills/understand/languages/html.md这份 HTML 语言上下文提示片段它是/understand技能在架构分析阶段注入给 LLM 的领域先验规定了 HTML 文件应关注的核心概念、典型文件模式、知识图谱边类型和摘要写作风格。读完本文你能理解这份提示如何与核心包的 HTML 语言配置、扫描器的扩展名映射共同作用使 HTML 页面在代码知识图谱中被正确分类、连线并生成可读的节点摘要。1. 语言上下文提示在 /understand 流水线中的角色html.md不是给人阅读的文档而是一段提示词片段Prompt Snippet。它的定位可以从 SKILL.md 的 Phase 4ARCHITECTURE阶段确认当架构分析代理的提示模板构建完成后技能会为 Phase 1 检测到的每种语言读取./languages/language-id.md文件并将其内容追加到基础模板之后的## Language Context标题之下其中明确列举了html在受支持语言之列并强调包含非代码语言片段——它们为非代码文件提供边模式和摘要风格见 SKILL.md。这意味着 html.md 中每一节都有明确的功能对应Key Concepts告诉分析代理判断一个 HTML 文件时该看什么Notable File Patterns帮助识别哪些 HTML 文件扮演入口、模板等角色Edge Patterns规定 HTML 节点在图谱中应连出哪些类型的边Summary Style约束最终写进knowledge-graph.json的节点摘要措辞。如果某种检测到的语言没有对应片段文件技能会静默跳过并继续——所以对 HTML 而言这份片段就是分析代理理解HTML 文件长什么样、该怎么连线的唯一结构化先验。2. Key Concepts提示为 HTML 文件划定的九类关注点原文档的 Key Concepts 一节的完整内容如下逐条展开说明其分析含义关注点原文档内容对图谱分析的含义语义元素main、nav、header、footer、article、section用于构建有意义的结构用于判断页面是结构化文档还是无语义标签堆砌影响摘要中对页面角色的描述文档结构!DOCTYPE html、html、head、body构成页面骨架识别完整的 HTML 文档而非片段或模板文件表单form、input、select、textarea用于带验证属性的用户数据采集有表单的页面登录页、设置页在摘要中应体现数据采集职责可访问性aria-*属性、role、alt文本与语义标记提示代理关注无障碍实现是摘要中值得点出的质量特征Meta 标签meta用于 viewport、charset、description、Open Graph 与 SEO 元数据SPA 外壳页与营销落地页的区分依据之一脚本与样式加载script、link、style引入 JavaScript 与 CSS这是 Edge Patterns 中depends_on边的来源见第 4 节Data 属性data-*自定义属性用于存储元素级数据常见于组件化页面与数据驱动视图帮助识别视图壳型文件模板语法框架特定模板语法Jinja/Django 的{{ }}、ERB 的% %用于把服务端渲染模板与静态 HTML 区分开Web Componentstemplate、slot、Custom Elements 实现封装的可复用组件识别前端组件化 HTML与框架组件建立related关联值得注意的是这九个关注点与核心包中的 HTML 语言配置在概念上互相呼应。html.ts 中定义的htmlConfig的concepts字段为concepts: [elements, attributes, semantic tags, forms, meta tags, scripts, stylesheets, accessibility],从源码结构看concepts由 LanguageConfigSchema 定义为字符串数组是语言配置的一部分提示片段Markdown 侧与语言配置TypeScript 侧共同构成同一语言的两份先验一份供 LLM 在分析阶段阅读一份供确定性的文件识别与结构提取阶段使用。3. Notable File PatternsHTML 文件的五种典型角色原文档 Notable File Patterns 一节列出五种模式逐一结合仓库内事实展开3.1index.html— 应用入口点或 SPA 外壳原文档描述为 Application entry point or SPA shell。这一模式同时被核心包代码确认html.ts 的filePatterns.entryPoints明确配置为[index.html]即注册表在判定某文件是语言入口时index.html是 HTML 唯一的入口模式barrels/tests/config均为空数组——这与 HTML 没有 barrel 导出、没有测试约定、没有配置文件的语言特性一致。3.2*.html/*.htm— 静态 HTML 页面双扩展名同样在仓库中有一致的映射证据scan-project.mjs 的扩展名到语言映射表中.html与.htm都归到html语言而在文件分类维度上scan-project.mjs 又把.html归入markup类别。这两张表说明扫描阶段先做语言识别、再做文件类别识别而提示片段中的扩展名模式与它们保持同构。3.3templates/**/*.html— 服务端模板文件原文档指出这是 Django、Jinja2、Go templates 的服务端模板目录。这类文件的关键判别特征是第 2 节提到的模板语法{{ }}、% %。配合 SKILL.md 中 Phase 4 的框架附录注入机制——检测到 Django 等框架时会追加./frameworks/framework-id-lowercase.md——模板文件还能获得框架级上下文两者叠加后分析代理才能正确判断这是一份用模板继承的服务端页面。3.4public/index.html— SPA 根文档React、Vue 等 SPA 的根文档通常位于public/目录只包含 viewport meta、样式引入和一个挂载点。这正是原文档 Summary Style 第一条示例描述的场景见第 6 节。3.5*.ejs/*.hbs/*.pug— 模板引擎文件这一条把视野从纯 HTML 扩展到其他模板引擎产物。从提示设计角度看它提醒分析代理模板文件即使扩展名不是.html其HTML 页面语义与连线方式应与 HTML 保持一致。4. Edge PatternsHTML 节点的四条连边规则Edge Patterns 是这份片段中操作性最强的部分它把 HTML 文件的行为翻译为图谱边的规则。原文档四条边模式为HTML 文件通过script与link标签depends_on其引入的 JavaScript 与 CSS 文件模板 HTML 文件depends_on渲染它的服务端代码HTML 入口点是构建系统与 Web 服务器的deploys目标HTML 文件与它渲染的组件或路由related。这些边类型并非片段自行发明而是在分析代理的边类型词汇表中有正式定义。file-analyzer.md 将depends_on定义为文件在运行时依赖另一个项目文件比 imports 更宽——包括动态 require、懒加载方向为forward、权重0.6file-analyzer.md 将deploys定义为基础设施文件构建/部署代码方向forward、权重0.7。也就是说html.md 的 Edge Patterns 是用具体文件特征script标签、构建系统入口去实例化这套通用边词汇表。从源码结构看HTML 在确定性的结构提取阶段没有专门的解析器extract-structure.mjs 注册的是 tree-sitter 插件加非代码解析器dockerfile、env、graphql、json、makefile、markdown、protobuf、shell、sql、terraform、toml、yamlplugins/parsers/目录下没有 HTML 解析器HTML 也没有配置 tree-sitter 语法。可以推断HTML 文件的标签级结构谁引入谁主要依赖 LLM 分析阶段结合这份提示片段来完成连边而不是由确定性脚本产出——这正是 Edge Patterns 一节存在价值最大的地方它承担了确定性解析缺位时的连线先验。第 1 条规则script/link→depends_on还依赖另一个确定性环节extract-import-map.mjs 生成的 import map 会作为跨批次边验证的输入传给组装评审代理见 SKILL.md 中 Import map for cross-batch edge verification 的派发模板。当 HTML 引用的 JS/CSS 分属不同分析批次时这条 import map 是防止跨批depends_on边丢失的兜底证据。5. 语言如何被检测到从扩展名映射到注册表提示片段被注入的前提是Phase 1 检测到了 html 语言。这条检测链在仓库中是确定的扫描阶段scan-project.mjs 将.html/.htm映射为语言html注册表阶段核心包的 LanguageRegistry 的getForFile()先按文件名精确匹配、再按扩展名回退查找。由于 htmlConfig 声明的extensions: [.html, .htm]且没有filenames字段任何以这两个扩展名结尾的文件都会命中 HTML 配置注入阶段SKILL.md Phase 4 按检测到的语言 id 读取./languages/html.md并追加进提示。三处对html的命名完全一致语言 idhtml、片段文件名html.md、配置id: html这是提示片段能被静默发现file does not exist 时才跳过的命名契约。6. Summary Style节点摘要的三条风格样例原文档 Summary Style 一节给出三条引用样例它们约束了写入knowledge-graph.json的 HTML 节点摘要写法Single-page application shell with viewport meta, CSS reset, and React root mount point.Server-rendered template with navigation, content area, and footer using Django template inheritance.Static landing page with responsive layout, form, and third-party script integrations.三条样例分别对应第 3 节的三种典型角色SPA 外壳public/index.html、服务端模板templates/**/*.html、静态落地页*.html。它们的共同写法特征是单句、无主语堆砌直接以页面角色 关键元素成句点出可验证的技术特征viewport meta、CSS reset、模板继承、第三方脚本——而不是泛泛说一个网页与 Notable File Patterns 的角色一一对应摘要风格与文件模式互相印证让下游架构分层、搜索、问答能仅凭摘要区分三类 HTML。这套风格不是孤立的 HTML 约定。从源码结构看--language lang参数还会把 locales/ 下的语言指引如 zh.md注入提示规定不同输出语言下摘要风格与标签命名习惯见 SKILL.md 的 Output locale injection因此这三条英文样例同时充当了摘要信息密度的基线参照。7. 实操路径在真实项目中观察 HTML 上下文生效要在自己项目中验证这份片段的实际效果适用前提与步骤如下环境前提需要 Node.js ≥ 22 与 pnpm ≥ 10SKILL.md 在 pnpm 缺失时给出的报错提示且插件已构建出packages/core/dist/运行分析在含 HTML 文件的项目中执行/understand。若项目含 React/Vue 的public/index.html或 Django 的templates/Phase 1 会检测到html以及可能的框架Phase 4 构建架构提示时自动追加本文分析的片段内容验证产物分析完成后项目数据目录.ua/已存在.understand-anything/的项目沿用旧目录中的knowledge-graph.json里HTML 节点应具备摘要符合第 6 节风格、depends_on边指向其引入的 JS/CSS、入口 HTML 与构建/部署文件之间存在deploys边。若某次分析后 HTML 节点的摘要明显不符上述风格例如只写HTML file可以从两个方向排查检测阶段是否遗漏了html语言对照 scan-project 的扩展名映射以及架构阶段提示是否包含了## Language Context段——前者由确定性脚本保证后者由 SKILL.md 的注入步骤保证。8. 小结html.md用不到 40 行完成了三件事为 HTML 文件定义九个分析关注点Key Concepts、五种角色判定Notable File Patterns和四条连边规则Edge Patterns并用三条样例锚定摘要风格。它不产出任何确定性的结构数据——HTML 的确定性侧由 html.ts 的扩展名与入口配置、scan-project.mjs 的语言/类别映射、LanguageRegistry 的文件识别共同承担片段的价值在于把这些确定性事实翻译成 LLM 在架构分析与摘要生成阶段可以直接执行的先验使 HTML 页面在知识图谱中既有正确的边又有可被检索和问答利用的摘要。【免费下载链接】Understand-AnythingGraphs that teach graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.项目地址: https://gitcode.com/GitHub_Trending/un/Understand-Anything创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考