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，并提供详细的教程和操…...
Nginx跳转模块之location与rewrite
目录 一、location模块与rewrite模块区别 二、location模块的基本介绍 1. location模块是什么？ 2. 三种匹配类别 3. 常用的匹配规则 4. 匹配优先级 三、location模块使用实例 1.精准匹配优先级小于一般匹配的特殊情况 2 .解决方法 3. 实际网站使用中的三个匹配…...
oracle col命令
oracle col命令可以对列进行进行格式化，格式：col 列名 for(mat) 格式 例如： col owner for a100 设置owner列格式 col 列名：显示当前列的格式 SQL> col owner COLUMN owner ON FORMAT a100 SQL> clear column：清除所有列的格式 SQL> col o…...
ESP32接入扣子(Coze) API使用自定义智能体
使用ESP32接入Coze API实现聊天机器人的教程 本示例将使用ESP32开发板通过WiFi接入 Coze API，实现一个简单的聊天机器人功能。用户可以通过串口向机器人输入问题，ESP32将通过Coze API与智能体进行通信，并返回对应的回复。本文将详细介绍了如…...
【JVM】如何判断对象是否可以被回收
引用计数法： 在对象中添加一个引用计数器，每当有一个地方引用它时，计数器值就加一；当引用失效时，计数器值就减一；任何时刻计数器为零的对象就是不可能再被使用的。 优点：实现简单，判…...
CloseableHttpResponse 类（代表一个可关闭的 HTTP 响应）
CloseableHttpResponse 类是 Apache HttpClient 库中的一个类，代表一个可关闭的 HTTP 响应。当你使用 HttpClient 发送请求时，你会得到一个 CloseableHttpResponse 实例，它包含了服务器的响应数据和状态。处理完响应后，你应该关闭…...
C语言编程规范及命名规则
C语言编程规范及命名规则 编码规范总原则：清晰、简洁、一致头文件函数标识符命名与定义变量宏、常量表达式注释排版与格式代码编辑编译其他设置 命名规则类型命名： 其他编译器配色 参考 编码规范 总原则：清晰、简洁、一致 清晰第一 清晰性是…...
Pika 1.5 - Pika Labs最新推出的AI视频生成工具
Pika 1.5是由Pika Labs最新推出的AI视频生成工具。通过简单易用的界面和强大的”Pikaffects”特效库，用户能通过上传图片或输入文本，快速生成具有专业质感和创意效果的视频内容。新版本强调低门槛创作，让普通用户能轻松制作出有趣、抽象、易于…...
Elon Musk 正式揭晓了特斯拉的Robotaxi和Robovan，这两款自动驾驶新车型成为发布会上的焦点
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
博客摘录「 springboot+netty+mqtt服务端实现」2024年10月11日
try {MqttPublishMessage mqttPublishMessage (MqttPublishMessage) mqttMessage;ByteBuf byteBuf mqttPublishMessage.payload();byteBuf.retainedDuplicate();ctx.writeAndFlush(mqttPublishMessage);} catch (Exception e) {e.printStackTrace();throw e;}...
Docker小白入门笔记
Docker 命令笔记 Docker Desktop 1.构建镜像 无缓存构建: docker build --no-cache -t image_name .普通构建: docker build -t image_name . 2.运行容器 docker run -d --name docker_name -p 9000:9000 --env-file "path\.env" image_name参数说明：…...