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，并提供详细的教程和操…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的，根据Excel列的需求预估的工时直接打骨折，不要问我为什么，主要…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...