Chromium HTML Tags与c++接口对应关系分析
一、HTML 标签(HTML Tags)
<a> <head> <img>等等这些标签在c++中的接口是如何定义和查找的呢？
更多标签参考：
HTML <a> target 属性 (w3school.com.cn)
二、html_tag_names.json5
(third_party\blink\renderer\core\html\html_tag_names.json5)
此文件里面是c++用来生成前端对应HTML Tags。
{metadata: {namespace: "HTML",namespacePrefix: "xhtml",namespaceURI: "http://www.w3.org/1999/xhtml",fallbackInterfaceName: "HTMLUnknownElement",export: "CORE_EXPORT",},// If you add any tag names here, remember to update html_tree_builder_test.cc.// Note that if an element is associated with a feature flag that has an// origin trial, you must:// * set runtimeFlagHasOriginTrial to true below, which disables the checks// that ensure that the tokenizer produces HTMLTag::kUnknown when the// feature flag is disabled.// * make sure that any uses of HTMLTag::kYourElement treat it as// HTMLTag::kUnknown if the feature flag is disabled. The member is// renamed to HTMLTag::kYourElementOrUnknown to remind you of this.// * have a virtual suite testing the feature flag being disabled that// checks that any relevant behaviors (parsing or otherwise) are// unaffected when the feature is disabled.// See https://crbug.com/1512345data: [{name: "a",interfaceName: "HTMLAnchorElement",},{name: "abbr",interfaceName: "HTMLElement",},{name: "acronym",interfaceName: "HTMLElement",},{name: "address",interfaceName: "HTMLElement",},{name: "applet",interfaceName: "HTMLUnknownElement",},"area",{name: "article",interfaceName: "HTMLElement",},{name: "aside",interfaceName: "HTMLElement",},{name: "audio",interfaceHeaderDir: "third_party/blink/renderer/core/html/media",},{name: "b",interfaceName: "HTMLElement",},"base",{name: "basefont",interfaceName: "HTMLElement",},{name: "bdi",JSInterfaceName: "HTMLElement",interfaceName: "HTMLBDIElement",},{name: "bdo",interfaceName: "HTMLElement",},{name: "bgsound",interfaceName: "HTMLUnknownElement",},{name: "big",interfaceName: "HTMLElement",},{name: "blockquote",interfaceName: "HTMLQuoteElement",},"body",{name: "br",interfaceName: "HTMLBRElement",},{name: "button",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "canvas",interfaceHeaderDir: "third_party/blink/renderer/core/html/canvas",},{name: "caption",interfaceName: "HTMLTableCaptionElement",},{name: "center",interfaceName: "HTMLElement",},{name: "cite",interfaceName: "HTMLElement",},{name: "code",interfaceName: "HTMLElement",},{name: "col",interfaceName: "HTMLTableColElement",},{name: "colgroup",interfaceName: "HTMLTableColElement",},{name: "command",interfaceName: "HTMLUnknownElement",},{name: "data",interfaceName: "HTMLDataElement",},{name: "datalist",interfaceName: "HTMLDataListElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "dd",interfaceName: "HTMLElement",},{name: "del",interfaceName: "HTMLModElement",},"details",{name: "dfn",interfaceName: "HTMLElement",},{name: "dir",interfaceName: "HTMLDirectoryElement",},"dialog","div",{name: "dl",interfaceName: "HTMLDListElement",},{name: "dt",interfaceName: "HTMLElement",},{name: "em",interfaceName: "HTMLElement",},{name: "embed",constructorNeedsCreateElementFlags: true,},{name: "fencedframe",interfaceName: "HTMLFencedFrameElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/fenced_frame",runtimeEnabled: "FencedFrames",// Set runtimeFlagHasOriginTrial to disable feature flag checks in// the tokenizer (which doesn't necessarily have access to the// document)runtimeFlagHasOriginTrial: true,// This element could be enabled in some documents but not others (due to// origin trials), so we need custom type helpers.noTypeHelpers: true,},{name: "fieldset",interfaceName: "HTMLFieldSetElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "figcaption",interfaceName: "HTMLElement",},{name: "figure",interfaceName: "HTMLElement",},"font",{name: "footer",interfaceName: "HTMLElement",},{name: "form",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},"frame",{name: "frameset",interfaceName: "HTMLFrameSetElement",},{name: "h1",interfaceName: "HTMLHeadingElement",},{name: "h2",interfaceName: "HTMLHeadingElement",},{name: "h3",interfaceName: "HTMLHeadingElement",},{name: "h4",interfaceName: "HTMLHeadingElement",},{name: "h5",interfaceName: "HTMLHeadingElement",},{name: "h6",interfaceName: "HTMLHeadingElement",},"head",{name: "header",interfaceName: "HTMLElement",},{name: "hgroup",interfaceName: "HTMLElement",},{name: "hr",interfaceName: "HTMLHRElement",},"html",{name: "i",interfaceName: "HTMLElement",},{name: "iframe",interfaceName: "HTMLIFrameElement",},{name: "image",interfaceName: "HTMLUnknownElement",},{name: "img",constructorNeedsCreateElementFlags: true,interfaceName: "HTMLImageElement",},{name: "input",constructorNeedsCreateElementFlags: true,interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "ins",interfaceName: "HTMLModElement",},{name: "kbd",interfaceName: "HTMLElement",},{name: "keygen",interfaceName: "HTMLUnknownElement",},{name: "label",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "layer",interfaceName: "HTMLElement",},{name: "legend",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "li",interfaceName: "HTMLLIElement",},{name: "link",constructorNeedsCreateElementFlags: true,},{name: "listbox",interfaceName: "HTMLListboxElement",runtimeEnabled: "HTMLSelectListElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "listing",interfaceName: "HTMLPreElement",},{name: "main",interfaceName: "HTMLElement",},"map",{name: "mark",interfaceName: "HTMLElement",},"marquee","menu",{name: "meta",constructorNeedsCreateElementFlags: true,},{name: "meter",interfaceName: "HTMLMeterElement",},{name: "nav",interfaceName: "HTMLElement",},{name: "nobr",interfaceName: "HTMLElement",},{name: "noembed",JSInterfaceName: "HTMLElement",interfaceName: "HTMLNoEmbedElement",},{name: "noframes",interfaceName: "HTMLElement",},{name: "nolayer",interfaceName: "HTMLElement",},{name: "object",constructorNeedsCreateElementFlags: true,},{name: "ol",interfaceName: "HTMLOListElement",},{name: "optgroup",interfaceName: "HTMLOptGroupElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "option",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "output",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "p",interfaceName: "HTMLParagraphElement",},"param",{name: "permission",interfaceName: "HTMLPermissionElement",runtimeEnabled: "PermissionElement",},{name: "picture",interfaceName: "HTMLPictureElement",},{name: "plaintext",interfaceName: "HTMLElement",},"pre",{name: "progress",interfaceName: "HTMLProgressElement",},{name: "q",interfaceName: "HTMLQuoteElement",},{name: "rb",interfaceName: "HTMLElement",},{name: "rp",interfaceName: "HTMLElement",},{name: "rt",JSInterfaceName: "HTMLElement",interfaceName: "HTMLRTElement",},{name: "rtc",interfaceName: "HTMLElement",},{name: "ruby",JSInterfaceName: "HTMLElement",interfaceName: "HTMLRubyElement",},{name: "s",interfaceName: "HTMLElement",},{name: "samp",interfaceName: "HTMLElement",},{name: "script",constructorNeedsCreateElementFlags: true,},{name: "search",interfaceName: "HTMLElement",runtimeEnabled: "HTMLSearchElement",},{name: "section",interfaceName: "HTMLElement",},{name: "select",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "selectedoption",interfaceName: "HTMLElement",runtimeEnabled: "HTMLSelectListElement",},{name: "selectlist",interfaceName: "HTMLSelectListElement",runtimeEnabled: "HTMLSelectListElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "slot",interfaceName: "HTMLSlotElement",},{name: "small",interfaceName: "HTMLElement",},"source","span",{name: "strike",interfaceName: "HTMLElement",},{name: "strong",interfaceName: "HTMLElement",},{name: "style",constructorNeedsCreateElementFlags: true,},{name: "sub",interfaceName: "HTMLElement",},{name: "summary",JSInterfaceName: "HTMLElement",interfaceName: "HTMLSummaryElement",},{name: "sup",interfaceName: "HTMLElement",},"table",{name: "tbody",interfaceName: "HTMLTableSectionElement",},{name: "td",interfaceName: "HTMLTableCellElement",},"template",{name: "textarea",interfaceName: "HTMLTextAreaElement",interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",},{name: "tfoot",interfaceName: "HTMLTableSectionElement",},{name: "th",interfaceName: "HTMLTableCellElement",},{name: "thead",interfaceName: "HTMLTableSectionElement",},{name: "time",interfaceName: "HTMLTimeElement",},"title",{name: "tr",interfaceName: "HTMLTableRowElement",},{name: "track",interfaceHeaderDir: "third_party/blink/renderer/core/html/track",},{name: "tt",interfaceName: "HTMLElement",},{name: "u",interfaceName: "HTMLElement",},{name: "ul",interfaceName: "HTMLUListElement",},{name: "var",interfaceName: "HTMLElement",},{name: "video",interfaceHeaderDir: "third_party/blink/renderer/core/html/media",},{name: "wbr",JSInterfaceName: "HTMLElement",interfaceName: "HTMLWBRElement",},{name: "xmp",interfaceName: "HTMLPreElement",},{name: "noscript",JSInterfaceName: "HTMLElement",interfaceName: "HTMLNoScriptElement",},],
}
三、接下来以以<a> <head>标签定义看下html_tag_names.json5中如何定义的
3.1、<a> 对应 {
name: "a",
interfaceName: "HTMLAnchorElement",
},
<head>对应
"head",
{
name: "header",
interfaceName: "HTMLElement",
},
其中<a> == "a" 接口定义 interfaceName: "HTMLAnchorElement", 其他的也类似。
3.2、interfaceName: "HTMLAnchorElement" 名字直接对应的HTMLAnchorElement.idl（c++接口定义）
2.1)、规则interfaceName+.idl,
2.2)、还有根据interfaceHeaderDir定义的接口 {
name: "input",
constructorNeedsCreateElementFlags: true,
interfaceHeaderDir: "third_party/blink/renderer/core/html/forms",
},
2.3)、还有 "body",这样的无name的
搜索规则： html_"tag"_element.idl html_"tag"_element.h html_"tag"_element.cc
看例子：
"body" html_body_element.idl html_body_element.h html_body_element.cc
"details", html_details_element.idl html_details_element.h html_details_element.cc
3.3、根据HTMLAnchorElement.idl即可找到blink的c++实现
third_party\blink\renderer\core\html\html_anchor_element.h
third_party\blink\renderer\core\html\html_anchor_element.cc
3.4、接口HTMLAnchorElement.idl在v8下实现规则：
规则 v8_ + html_anchor_element.cc
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_html_anchor_element.h
out\Debug\gen\third_party\blink\renderer\bindings\core\v8\v8_html_anchor_element.cc
四、总结：
查找html_tag定义只需在third_party\blink\renderer\core\html\html_tag_names.json5文件中输入对对应标签，即可找到interfaceName定义。又可以根据interfaceName定义的文件名找到blink和v8定义。
相关文章：
Chromium HTML Tags与c++接口对应关系分析
一、HTML 标签(HTML Tags) <a> <head> <img>等等这些标签在c中的接口是如何定义和查找的呢？ 更多标签参考： HTML <a> target 属性 (w3school.com.cn) 二、html_tag_names.json5 (third_party\blink\renderer\core\html\htm…...
React Fiber 解析：前端性能提升密码
文章目录 背景React 采用 fiber 主要为了解决哪些问题？性能问题：用户体验问题： 为什么在 React 15 版本中性能会差：浏览器绘制原理：react 15 架构和问题 那么 fiber 怎么解决了这个问题？任务“大”的问题递…...
【吊打面试官系列-微服务面试题】微服务架构如何运作？
大家好，我是锋哥。今天分享关于【微服务架构如何运作？】面试题，希望对大家有帮助； 微服务架构如何运作？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 微服务架构是一种将单一应用程序构建为一组小型、独…...
Windows系统编程 - 目录操作、磁盘、卷信息
前言 各位师傅大家好，我是qmx_07，今天继续讲解Windows系统编程的相关知识:目录操作 目录 目录操作 创建目录 通过CreateDirectory函数创建目录 原型: BOOL CreateDirectoryA([in] LPCSTR lpPathName,//目录名称[in, opt…...
搭建SaaS知识库：优化教育机构的在线教学效能
随着信息技术的飞速发展，教育领域正经历着前所未有的变革。在线教学已成为教育机构提供灵活学习体验、扩大覆盖范围、提升教学效率的重要手段。然而，如何在海量资源与复杂教学场景中高效管理知识，确保教学质量，成为教育机构面临的…...
CSS中backdrop-filter详解
文章目录 CSS中backdrop-filter详解一、引言二、backdrop-filter基础1、基本概念1.1、基本语法 2、滤镜函数2.1、代码示例 三、实际应用1、创建模糊背景1.1、代码示例 2、结合其他CSS属性2.1、代码示例 四、总结 CSS中backdrop-filter详解 一、引言 在现代网页设计中…...
AI测试入门：理解 LLM 的基准测试（Benchmark）
AI测试入门：理解 LLM 的基准测试（Benchmark） 1. 基准测试的定义2. 基准测试的目的3. 基准测试的常用指标4. 基准测试的流程5. 常用的AI基准测试框架总结1. 基准测试的定义 LLM 的基准测试是一种评估 LLM 的标准化方法，通过使用预定义的数据集、任务和评估指标，对LLM 在特定…...
InternVid：用于多模态视频理解与生成的大规模视频-文本数据集 | ICLR Spotlight
InternVid 是一个开源的大规模视频-文本数据集，旨在促进视频理解和生成任务的发展，由上海人工智能实验室与南京大学、中国科学院等单位联合发布，相关的工作已经被ICLR2024接收。它包含超过 700 万个视频，总时长近 76 万小时&#…...
Hive数仓操作（十）
一、Hive 分页查询 在大数据处理中，分页查询是非常常见的需求。Hive 提供了 LIMIT 和 OFFSET 关键字来方便地进行分页操作。本文将详细介绍它们的用法。 1. 基本用法 LIMIT：用于限制查询结果的行数。OFFSET：用于指定从哪一行开始检索。 2…...
Android 扩大View的点击区域
文章目录 Android 扩大View的点击区域使用padding属性使用TouchDelegate使用getLocationOnScreen监听 Android 扩大View的点击区域 使用padding属性 通过设置 padding 属性扩大点击区域。 使用： <?xml version"1.0" encoding"utf-8"?&…...
[Qt学习笔记] 解决QTextEdit数据过多UI卡死问题
背景问题 在项目中使用QTextEdit显示软件的日志信息，由于在连续输出日志信息，刚开始QTextEdit显示没什么问题，长时间就会出现UI界面卡死，内存占用变高。晚上查了说QTextEdit的append函数如果不释放会累计增加内存，包括…...
OgreNext高级材质中增加线宽，点大小，虚线模式绘制支持
修改Ogre高级材质系统，增加线宽，点大小，虚线模式，虚线参数的支持,效果如下： 需要修改的代码文件如下： 修改如下 代码文本： //范围[0.2 - 51] 0.2 * [0,255];Ogre::uint8 mLineWidth;//范围[…...
STM32中的DMA数据转运——下篇
STM32中的DMA数据转运——上篇-CSDN博客 在上篇文章中，我们讨论了STM32中的DMA（直接存储器访问）及其工作原理、存储器类型和总线设计。接下来，我们将更深入地探讨DMA的具体配置方法、常见应用场景以及一些实际设计中的注意事项。…...
51单片机的智能小区安防系统【proteus仿真+程序+报告+原理图+演示视频】
1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块时钟模块温度传感器烟雾传感器CO传感器红外感应传感器IC卡蓝牙继电器按键、蜂鸣器、LED等模块构成。适用于智能小区安防、智能家居安防等相似项目。 可实现功能: 1、LCD1602实时显示北京时间、温度、烟雾浓度和CO浓…...
数仓建模流程
数仓建模简介 一句话总结 数仓建模中的“建模”是一个将数据有序组织和存储起来的过程，旨在提高数据的使用效率和降低使用成本。 详细描述 在数仓建模中，“建模”指的是构建数据模型，也就是数据的组织和存储方法。数据模型强调从业务、数…...
Neo4j CQL语句 使用教程
CREATE命令 : CREATE (<node-name>:<label-name>{ <Property1-name>:<Property1-Value>........<Propertyn-name>:<Propertyn-Value>} )字段说明 CREATE (dept:Dept { deptno:10,dname:“Accounting”,location:“Hyderabad” })&#…...
STM32-HAL库 驱动DS18B20温度传感器 -- 2024.10.8
目录 一、教程简介 二、驱动理论讲解 三、CubeMX生成底层代码 四、Keil5编写代码 五、实验结果 一、教程简介 本教程面向初学者，只介绍DS18B20的常用功能，但也能满足大部分的运用需求。跟着本教程操作，可在10分钟内解决DS18b20通信难题。…...
HTML 符号
HTML 符号 HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列的标签来描述网页的结构和内容。HTML 符号，通常指的是 HTML 标签，是构成 HTML 文档的基础。本文将详细介绍 HTML 符号的概念、种类、用途以及如何在网页设计中正确使用它们。 HTML 符号的概…...
编译后的MySQL安装
MySQL安装 1.下载网址2.下载方式3.配置配置环境变量修改配置文件初始化安装服务启动服务测试修改 Mysql 默认密码 1.下载网址 https://dev.mysql.com/downloads/mysql/2.下载方式 选择对应版本下载 mysql-xxx-winx64.zip，该压缩包为编译后文件，并非源码…...
Ubuntu安装Apache教程
系统版本：Ubuntu版本 23.04 Ubuntu是一款功能强大且用户友好的操作系统，而Apache是一款广泛使用的Web服务器软件。在Ubuntu上安装Apache可以帮助用户搭建自己的网站或者进行Web开发。为大家介绍如何在Ubuntu上安装Apache，并提供详细的教程和操…...
计算机毕业设计springboot研友帮系统设计与实现 基于SpringBoot的考研互助社区平台开发与实现 SpringBoot框架下研究生学术协作系统的设计与应用
计算机毕业设计springboot研友帮系统设计与实现w2zpm5oh （配套有源码 程序 mysql数据库 论文） 本套源码可以在文本联xi,先看具体系统功能演示视频领取，可分享源码参考。 随着研究生招生规模的持续扩大，考研竞争日益激烈࿰…...
企业必看：致远OA密码重置漏洞修复指南（附官方补丁下载与安装教程）
致远OA密码重置漏洞全面修复指南：从补丁部署到安全加固 1. 漏洞背景与影响范围 近期致远OA协同办公平台曝出的密码重置漏洞，已成为企业IT安全团队亟需应对的高危风险。该漏洞允许攻击者在仅获取用户名的情况下，通过构造特定HTTP请求绕过短信…...
5款Umi-OCR插件全解析：让文字识别效率提升300%的实用指南
5款Umi-OCR插件全解析：让文字识别效率提升300%的实用指南 【免费下载链接】Umi-OCR_plugins Umi-OCR 插件库 项目地址: https://gitcode.com/gh_mirrors/um/Umi-OCR_plugins 为什么你的文字识别总是效率低下？ 还在为图片转文字耗时过长而抓狂&am…...
Dinky 1.2.3实战：手把手教你构建带多数据源Connector的Flink 1.20镜像并推上K8s
Dinky 1.2.3实战：构建多数据源Flink镜像与K8s集成全指南 1. 为什么需要定制Flink基础镜像？ 在实时数据处理领域，Flink已成为事实上的标准计算引擎。但官方镜像往往只包含基础组件，当我们需要连接MySQL、Kafka、Paimon等不同数据源…...
别再乱放菜单了！SolidWorks插件UI设计避坑指南：C#二次开发中13个菜单位置的正确用法
SolidWorks插件UI设计黄金法则：C#二次开发中的13个菜单位置实战解析 当你的SolidWorks插件功能越来越丰富，是否遇到过这样的尴尬：用户反馈"功能藏得太深"、"操作路径太长"？这往往不是功能本身的问题ÿ…...
解决CLI工具接入DeepSeek API流式传输失败的实战指南
最近在对接DeepSeek的API时，遇到了一个挺典型的问题：用CLI工具调用API进行流式传输时，经常中途失败，返回的错误信息又比较模糊，调试起来很头疼。特别是在处理长文本生成或者需要连续对话的场景下，这个问题直…...
2K2000龙芯主板以科技创新为驱动力，赋能产业高质量发展
当前，新一轮科技革命和产业变革深入演进，科技创新已成为引领产业高质量发展的核心引擎，更是实现高水平科技自立自强、掌握产业发展主动权的关键支撑。科技创新作为新质生产力的核心驱动力，早已成为引领产业高质量发展的“第一引擎…...
TrollInstallerX终极指南：一键在iOS设备上安装TrollStore的完整教程
TrollInstallerX终极指南：一键在iOS设备上安装TrollStore的完整教程 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX 您是否一直在寻找一种简单可靠的方法&am…...
Agent相关面试题
你做的多 agent 之间是怎么进行通讯的？中央 agent 是怎么给下面的子 agent 分配任务的？串行？并行？一、多 Agent 通讯与任务分配机制1. 通讯架构：异步消息总线 (MessageBus)Agent 之间通过 MessageBus 进行异步消息通信…...
终极指南：如何使用baidu-wangpan-parse工具免费突破百度网盘限速
终极指南：如何使用baidu-wangpan-parse工具免费突破百度网盘限速 【免费下载链接】baidu-wangpan-parse 获取百度网盘分享文件的下载地址 项目地址: https://gitcode.com/gh_mirrors/ba/baidu-wangpan-parse 百度网盘直链解析工具baidu-wangpan-parse是专为普…...