一、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/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定义。