Chromium HTML Tags与c++接口对应关系分析

一、HTML 标签(HTML Tags)

<a> <head> <img>等等这些标签在c++中的接口是如何定义和查找的呢？

更多标签参考：

二、html_tag_names.json5

(third_party\blink\renderer\core\html\html_tag_names.json5)

此文件里面是c++用来生成前端对应HTML Tags。

cpp 复制代码

{
  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/1512345
  data: [
    {
      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定义。