This series will explain the relevant html5 specifications and related technologies one by one in order to improve our knowledge system, which is divided into three phases, respectively

  • HTML Standard (this article)
  • The dom standard
  • Other web API

preface

The definition of HTML5 in this paper refers to MDN and WHATWG Standards. In a narrow sense, HTML5 is the latest HTML Standard, namely, HTML Living Standard. In a broad sense, it also includes other technologies related to modern browsers. Here we define HTML5 SPECIFICATIONS as those directly related to the front end of the three sets of SPECIFICATIONS, in addition to ecMA262 (refer to the ES2021 feature set) and CSS SPECIFICATIONS (refer to the 2020 VERSION of w3c CSS SPECIFICATIONS), This article will supplement the latest HTML specification and other WebAPI-related specifications. Note that WebAPI refers to an interface that is not defined in the ES262 specification but requires the browser to provide, such as XMLHttpRequest.

These specifications are primarily maintained by THE W3C AND WHATWG. Please refer TO THE W3C AND WHATWG TO WORK TOGETHER TO ADVANCE THE OPEN WEB PLATFORM for details on THE division of responsibilities between THE two organizations. In general, the WHATWG maintains most of the HTML5 specification (see WHATWG Standards) and the W3C supplements it (see ALL W3C WEB API Standards).

Here continue to read the specification technology, related specifications and necessary introduction as follows:

  • HTML HtML-related specifications that intersect with other specifications
  • Basic concepts related to Infra and other standards
  • DOM document Object model, which provides apis for manipulating Web pages using JS
  • Compatibility describes the non-standard (usually vendor-prefixed) CSS properties and DOMapis that web browsers need to support to be compatible with the real Web.
  • Console Console used for debug
  • Encoding Encoding correlation
  • Fetch
  • Fullscreen API Fullscreen correlation
  • MIME Sniffing is a content Sniffing standard
  • The Notifications API notify
  • Quirks Mode Quirks Mode
  • Storage Local Storage
  • Streams flow
  • URL
  • XMLHttpRequest

W3c complementary specification, only the APIS recommended by MDN that are worth knowing now will be discussed here.

  • File API File processing
  • Geolocation API geographic
  • Canvas API
  • WebGL graphics library
  • HTML Drag and Drop API Drag
  • IndexedDB indexDB
  • Clipboard API Clipboard
  • Permissions access apis
  • Page Visibility Specifies the Page Visibility
  • Service Worker API service worker
  • The Push API accepts server Push
  • Resize Observer API
  • WebRTC real-time communication
  • Progressive web apps (PWAs)
  • Cooperative Scheduling of Background Tasks
  • Long Tasks API obtains Tasks that take more than 50ms
  • Media Source Extensions Extensions of Media resources

Others, the rest of these only for understanding, temporarily do not discuss

  • The Performance of API Performance
  • MediaStream Image Capture API screenshot
  • Media Capabilities API Media Capabilities
  • Media Capture and Streams API Media Streams
  • Media Session API Media Session
  • MediaStream Recording media
  • Web Crypto API encryption
  • The Encrypted Media Extensions API controls playback of Encrypted content
  • Network Information API Network Information
  • Picture-in-picture API Picture-in-picture
  • Pointer Events Indicates Pointer events
  • Screen Capture API screenshot
  • The Screen Wake Lock API avoids Screen locking
  • Touch Events Touch events
  • Shock Vibration API
  • The Visual Viewport API gets or modifies the Viewport
  • Web Animations API Web Animations
  • Web Audio Audio
  • Web Authentication API Authentication
  • WebVTT Video text track format
  • WebXR Device Used for VR

In order to be consistent with the larger sections of the original specification, some sections will be ignored and may end up incoherent

HTML

1 Introduction

HTML is the core markup language of the World Wide Web. It was originally designed as a semantic scientific document language, and later used to describe other types of documents and even programs.

history

For the first five years (1900-1995), HTML was maintained by CERN and then IETF. Later, the W3C created and carried on, releasing versions 3.0 and 4.0 in 1995 and 1997, respectively. Later, w3c members decided to stop developing HTML in favor of XML-based XHTML, and the later release of XHTML 2 was incompatible with earlier HTML. However, from 1998 to 2004, DOM Level 1, DOM Level 2 Core, DOM Level 2 HTML, DOM Level 3 and other HTML-related API specifications were still released. In 2004, Mozilla and Opera-controlled W3C rejected a proposal to continue reinventing HTML. Apple, Mozilla, and Opera then launched their own portal, the WHATWG, to develop HTML5, including the original HTML4, XHTML1 and DOM2 HTML and more details. In 2006, THE W3C expressed its willingness to participate in the development of HTML5 and set up a working group to maintain it with the WHATWG. However, due to different philosophies (w3c wanted to release the final VERSION of HTML5 and iterate backwards, The two sides published different specifications on their websites, so there were two html5 specifications in the world, and finally in 2019 the W3C caved in and the two organizations signed an agreement to work together on the RELEASE of the VERSION at the WHATWG. That’s the version we’re talking about.

Standard structure

This specification is divided into the following sections, some of which are discussed in other specifications given

  • Introduction, that’s the part we’re looking at now
  • Common Infrastructure, which focuses on terms to help you understand other chapters
  • Semantics, Structure, and APIs of HTML Documents
  • The Elements of HTML, where various HTML elements are introduced
  • Microdata, which introduces a mechanism for adding machine-readable annotations to documents, allows tools to extract trees of key-value pairs from documents
  • User interaction, which provides a mechanism for users to interact and modify content, such as drag and drop, is discussed in the DOM section
  • Loading Web Pages, which defines the environment that affects multiple pages, is discussed in the DOM section
  • Web Application APIs (Web Application APIs), which describes the basic features of HTML scripts
  • Web Workers, which defines apis for background threads
  • The Communication APIs enable applications to communicate with each other
  • Web storage: client storage based on key-value pairs

Introduction of HTML

A basic HTML document looks like this

<! DOCTYPE html> <html lang="en"> <head> <title>Sample page</title> </head> <body> <h1>Sample page</h1> <p>This is a <a href="demo.html">simple</a> sample.</p> <! -- this is a comment --> </body> </html>Copy the code

HTML documents contain a tree of elements and text, with each element having a start tag (such as ) and an end tag (such as ). Tags must be nested within each other, not overlapping. Elements can have attributes that control how they work. Attributes are placed in the start tag and contain a name and a value, connected by =. An attribute value can be unquoted if it does not contain Spaces or “‘ = < > ‘. If the value is an empty string, it can be omitted

<! -- empty attributes --> <input name=address disabled> <input name=address disabled=""> <! -- attributes with a value --> <input name=address maxlength=200> <input name=address maxlength='200'> <input name=address maxlength="200">Copy the code

The HTML user agent parses tags into a DOM tree, which is an in-memory representation of a document. Dom trees can be manipulated by scripts, and scripts (especially JS) can embed or use event handler attributes with script elements. Each element is represented by an object that has a corresponding API to operate on. The content of AN HTML document is media-independent and can be rendered on a screen or through a printer, using a style language such as CSS to accurately influence each rendering.

2 Common infrastructure

CORS settings attributes

Some elements that can embed content can introduce resources across domains, such as

  • Anonymous does not add credentials to CORS requests
  • Use-credentials provides credentials
  • “, same as anonymous

When this property is not specified, cORS will not be used by default. It can be used to enable CORS, for example, using Canvas to edit cross-domain images, refer to MDN

3 Semantics, structure, and APIs of HTML documents

3.1. The document

Each XML and HTML document in the HTML user agent is represented by a Document object. DOM defines the associated Document and DocumentOrShadowRoot interfaces

Resource metadata management
  • Referrer represents the URL to navigate to the current page, default empty string
  • Cookie Applies to the cookie of the current document and defaults to an empty string
  • LastModified time when the document resource file was lastModified
  • ReadyState Document readiness status
Dom tree accessor

Document provides access to various DOM elements, such as document. DocumentElement, or HTML, as well as other elements

Element 3.2.

3.2.1 semantic

Elements, attributes, and attribute values in HTML have specific semantics, such as OL for ordered list

3.2.2 dom elements

Nodes in the DOM that represent HTML elements must implement and expose to Script the interfaces listed in the relevant sections of this specification. The basic interface that all HTML elements inherit from is the HTMLELement interface.

3.2.3 HTML element constructor

To support the custom element feature, all HTML elements have specific constructor behavior.

3.2.4 Element Definition

The following information may be included when discussing each element in detail

  • Categories
  • Contexts in which this Element can be Used
  • Content modal, which content can be used as an element’s children and descendants
  • Tag Omission (Tag Omission in Text/HTML)
  • Content Attributes, attributes specified on an element
  • Accessibility, by aria, etc
  • DOM Interface, which is exposed to Windows by default
3.2.5 Content model

Each element in this specification has a Content Model, the expected content of the element, where ASCII whitespace is always allowed.

3.2.5.1 nothing

When an element’s content model is nothing, no text nodes and element nodes are allowed

3.2.5.2 Content Categories (Seemdn)

The specification classifies elements by the same representation and rules as the following

  • Metadata content, used to set the presentation and behavior of other content, or the relationship between documents and other documents
<base>, <link>, <meta>, <noscript>, <script>, <style> and <title>.
Copy the code
  • Flow content, most elements used in the body can be included
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and Text. There are also elements with specific conditions - area with map child elements - link with ItemProp property - Meta with ItemProp propertyCopy the code
  • The content of these elements creates a section in the current outline, using header, footer, and Heading Content in these areas
<article>, <aside>, <nav> and <section>
Copy the code
  • Heading Content, which defines the section’s title
h1,h2,h3,h4,h5,h6,hgroup
Copy the code
  • Phrasing content, which defines the included text and markup that make up the paragraph
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters). There are also elements with specific conditions - A, Del, INS,map with phrasing content only - Area with map sub-elements - Link,meta with ItemProp attributeCopy the code
  • Embedded Content is used to introduce additional resources
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>
Copy the code
  • Interactive content is specifically designed to be Interactive
<a>, <button>, <details>, <embed>, <iframe>, <label>, <select>, and <textarea>. There are also elements for specific conditions - audio containing controls property,video - IMG containing usemap property,object - input and menu containing Type propertyCopy the code
  • Palpable content represents elements that are neither empty nor hidden, and whose content is rendered.
  • Script-supporting elements do not mean anything by themselves (such as not being rendered) and are used to support the Script
script,template
Copy the code

3.2.5.3 Transparent content models

The content of a transparent element is taken from a parent element, such as ins, and is treated as flow content if there is no parent element.

3.2.5.4 Paragraphs

Paragraph, some phrasing content compose paragraph

3.2.6 Global Properties

The following attributes are common to all elements

  • Accesskey is used to generate shortcut keys
  • Autocapitalize is not automatically capitalized, including not capitalized, the first letter of a sentence, the first letter of a word, or all capitalized
  • Autofocus Boolean that is not automatically focused as soon as the element is loaded
  • Contenteditable Boolean value, editable or not
  • Data -* Nonstandard, used for custom attributes, usedHTMLElement.datasetaccess
  • Dir text order
  • Draggable Whether it can be dragged
  • Enterkeyhint Specifies what label or icon to display on the Enter key of the virtual keyboard
  • Hidden Boolean value: indicates whether to hide
  • Inputmode Indicates the virtual keyboard type when editing element content
  • Is custom element correlation, used in Web Components
  • Itemid Attributes that start with item below are used for microdata
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • Lang language
  • Nonce indicates an encrypted nonce, such as the number used onceContent Security PolicyTo decide whether to allow fetch
  • Spellcheck Boolean value, whether to check for spelling errors
  • Style contains the style declaration applied to the element, and it is recommended that you write the style in a separate file, only for testing purposes, etc
  • Tabindex An integer property that indicates whether the element can get focus and participate in sequential keyboard navigation. It can take the following values
    • Negative value, can get focus, but does not participate in sequential keyboard navigation
    • 0, can get focus and participate in sequential keyboard navigation, the specific order depends on the platform
    • Positive value, can get focus and participate in sequential keyboard navigation, order from small to large. If multiple elements have the same value, the layout order within the document is followed.
  • Title Indicates that the mouse floats over the element
  • Translate specifies whether attribute values and text content should be translated when the page is localized
  • Id defines a unique identifier that can be used for hash links, scripts, or styles
  • Class A space-separated list of classes
  • Slot related, used in Web Components

The following event handler attributes may also be available

  • onabort
  • onauxclick
  • onblur*
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncopy
  • oncuechange
  • oncut
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror*
  • onfocus*
  • onformdata
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload*
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onpaste
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreset
  • onresize*
  • onscroll*
  • onsecuritypolicyviolation
  • onseeked
  • onseeking
  • onselect
  • onslotchange
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • onwaiting
  • onwheel

The one with the asterisk has a special meaning for the body and acts as an event handler for the window. These events can be applied to all elements, but not all of them

3.2.7 Setting and obtaining innerText

Assign and read directly with htmlElement. innerText

4 The elements of HTML

4.1. The document element

html
  • Classification: None
  • Usage scenario: As a Document element of a document
  • Content: A head element followed by a body element
  • Properties: Global properties
  • Interface: HTMLHtmlElement

Represents the root element of the document. Need to specify a lang attribute to help speech synthesizers decide how to pronounce and translation software decide how to translate

4.2. The Document metadata

head
  • Classification: none
  • Usage scenario: the first child of an HTML element
  • Properties: Global properties
  • Interface: HTMLHeadElement

Contains various child elements that provide metadata about the document

title
  • Metadata content
  • Usage scenario: contained in a head element that has no other title child element
  • Content: Text
  • Properties: Global properties
  • HTMLTitleElement

Represents the title or name of a document, which can be used in history, bookmarks, or search results. A document can have at most one title.

base
  • Metadata content
  • Usage scenario: contained in a head element with no other base element
  • Content: No
  • Properties: Global properties
    • Href represents the base URL of the document. The default is document.location.href
    • Target is the default browsing context for hyperlink navigation and form submission and can take the following values
      • _self default value, current browsing context
      • _blank: Loads the result into a new unnamed browsing context
      • _parent: Loads the result into the parent browsing context (if the current page is an inline box). If there is no parent structure, this option behaves like _self
      • _TOP: Loads results into the top-level browse context (which is the top-level context of the current context). If there is no parent, this option behaves like _self
  • Interface HTMLBaseElement

The base element is used to specify the Document base URL, which is used to parse the URL and the default browsing context. There can only be one base element

link
  • Metadata content, if used for body, flow content and phrasing content
  • Content: no
  • Property: Global property, where title has special semantics, namely the title of link and the name of the stylesheet
    • Href hyperlink address
    • How does Crossorigin handle cross-domain requests
    • Rel The relationship between the current document and the linked resource, see below
    • Media Application media
    • Integrity Overall metadata used for integrity checks
    • Hreflang Language of the linked resource
    • Type Indicates the type of the referenced resource
    • referrerpolicy Referrer policy
    • Sizes of Sizes Icon
    • Imagesrcset Images for different scenarios, such as high and low resolution (for rel=”preload”)
    • Imagesizes imagesize under different page layouts (for rel=”preload”)
    • As preload request potential destination (for rel=”preload” and rel=” modulePreload “)
    • Color The color to use when customizing an icon (for rel=”mask-icon”)
    • Disabled Indicates whether links are disabled
  • Interface: HTMLLinkElement

Allows documents to be linked to other resources, with href specified. At least one href and imagesrcset attribute appears

According to the Resource-Hints and Preload specifications, the rel attribute of Link takes the following values

  • Dns-prefetch Parses DNS in advance
  • Preconnect Establishes connections in advance (including DNS queries, TCP connections, and TLS negotiation)
  • Prefetch may be required for the next navigation and should be fetched in advance
  • Prerender next navigation may be required and should be done prerender, such as rendering an HTML
  • Preload has a higher priority than Prefetch and is required in the current navigation
meta
  • Category: Metadata content, if itemProp attribute, flow content and phrasing content.
  • Content: no
  • Properties: Global properties
    • Name Metadata name. Standard metadata names include the following. You can also customize metadata names
      • Application – the name application name
      • The author the author
      • The description described
      • The generator generator
      • Keywords A series of comma-separated keywords
      • The referrer value should be a Referrer policy
      • The theme-color value is a CSS color that is used to customize the display of the page, such as to highlight TAB bars
      • color-scheme
    • Pragma Directive, which is an enumerated property, includes
      • Content-language is not recommended. Use the lang attribute instead
      • Content-type Specifies the mine-type and character encoding of the document. If specified, it must be “text/ HTML; charset=utf-8”
      • Default-style sets the default style sheet name
      • Refresh specifies the
        • If a positive integer, represents the number of seconds to the page reload
        • If the positive integer is followed by; url=And a valid URL to indicate the number of seconds to jump to another page
      • Set-cookie is not standard and will be ignored by the user agent
      • X-ua-compatible if specified, the value must be IE=edge, which the user agent ignores
      • Content-security-policy Specifies the content policy for the current page
    • Content Specifies the content of the element
    • The Charset encoding states that UTF-8 is the only valid encoding for HTML5
  • Interface: HTMLMetaElement

Name, http-equiv, charset, and ItemProp must be at least one of the metadata elements that cannot be represented by other elements

style
  • Metadata content
  • Content: The text that represents the stylesheet
  • Property: Global property, where title has special semantics and represents the name of the stylesheet
    • Media Media of the application. The default value is all
  • Interface: HTMLStyleElement

Used to embed style sheets within a document

4.3. section

body
  • Sectioning root
  • Usage scenario: as the second child of HTML
  • Flow content
  • Properties: Global properties
    • onafterprint
    • onbeforeprint
    • onbeforeunload
    • onhashchange
    • onlanguagechange
    • onmessage
    • onmessageerror
    • onoffline
    • ononline
    • onpagehide
    • onpageshow
    • onpopstate
    • onrejectionhandled
    • onstorage
    • onunhandledrejection
    • onunload
  • Interface: HTMLBodyElement, which also implements the WindowEventHandlers interface and thus has the above event handler properties

Many event handlers on the window object are exposed to the body element, not the HTML element, so the normal bubbling of an event is the current element, body, HTML, document, window, But the events on the window are handled on the body, so the actual order will be HTML first then body. If you want to listen for events on the body normally you use addEventListener()

article
  • Categories: Flow Content, Sectioning Content, Palpable Content
  • Flow content
  • Properties: Global properties
  • Interface: HTMLElement

Note: The categories, contents, attributes, and interfaces of the following elements are not repeated as in article

Represents a separate component of a document, page, application, or website for distribution and reuse. It can be a forum, newspaper, or magazine document in which elements such as header, header, and H [n] represent sections

section

Represents a common part of a document or application

nav

A fragment with navigation links

aside

A section that has little to do with the rest of the page and can be isolated without affecting the whole, usually in the form of a sidebar or tag box.

The h1, h2, h3, h4, h5, and h6 elements
  • Categories: Flow Content, Heading Content, Palpable Content
  • Usage scenario: as a child element of an Hgroup or elsewhere using heading content
  • Phrasing content
  • Properties: Global properties
  • Interface: HTMLHeadingElement

Represents the heading for other sections

hgroup
  • Categories: Flow Content, Heading Content, Palpable Content
  • Contents: H1, H2, H3, H4, H5, H6
  • Properties: Global properties
  • Interface: HTMLElement

A section heading used to group H1-H6

header
  • Categories: Flow Content, Palpable Content
  • Content: Flow content, descendant cannot have header or footer
  • Properties: Global properties
  • Interface: HTMLElement

Represents a set of introductions or navigation that can be used to contain heading, search box, or associated logo

footer
  • Categories: Flow Content, Palpable Content
  • Content: Flow content, descendant cannot have header or footer
  • Properties: Global properties
  • Interface: HTMLElement

A footer that represents the most recent ancestor and can contain authors, related links, copyright, and so on

address
  • Categories: Flow Content, Palpable Content
  • Content: Flow content, descendant cannot have heading content,sectioning content, header, footer, or address
  • Properties: Global properties
  • Interface: HTMLElement

Represents the contact information for the most recent article or body ancestor element

4.4. The Grouping of the content

p
  • Categories: Flow Content, Palpable Content
  • Phrasing content
  • Properties: Global properties
  • Interface: HTMLParagraphElement

Represents a paragraph

hr
  • Flow content
  • Content: no
  • Properties: Global properties
  • Interface: HTMLHRElement

Represents a paragraphlevel topic break, such as a different story scene

pre
  • Categories: Flow Content, Palpable Content.
  • Phrasing content:
  • Properties: Global properties
  • Interface: HTMLPreElement

A block representing text in a predefined format, with the newline immediately following its opening tag omitted

blockquote
  • Categories: Flow Content, Palpable Content, Sectioning Root
  • Flow content
  • Properties: Global properties
    • Cite: A link to a source or more information about editing
  • Interface: HTMLQuoteElement (same as q element)

Represents a reference from another resource

ol
  • Category: Flow Content, Palpable Content if it contains at least one LI child element
  • Content: Li or script-supporting element
  • Properties: Global properties
    • Reversed the list of numbers
    • Start Specifies the start value of the list
    • Type Indicates the type of the marker. Optional keywords include
      • a
      • A
      • i
      • I
      • 1, the default
  • Interface: HTMLOListElement

Represents an ordered list

ul
  • Category: Flow Content, Palpable Content if it contains at least one LI child element
  • Content: Li or script-supporting element
  • Properties: Global properties
  • Interface: HTMLUListElement

Represents a list whose order is not important

menu
  • Category: Flow Content, Palpable Content if it contains at least one LI child element
  • Content: Li or script-supporting element
  • Properties: Global properties
  • Interface: HTMLMenuElement

Represents a toolbar, and the child elements are li elements that represent various commands

li
  • Classification: no
  • Usage scenario: Used in UL, OL,menu
  • Flow content
  • Properties: Global properties
    • If the parent element is OL, there is an attribute of integer type value, indicating the ordinal number
  • Interface: HTMLLIElement

Represents a list item element

dl
  • Category: Flow Content, which can be Palpable Content if the child element contains at least one key value grouping
  • Content: a grouping containing one or more DT, DD elements, and script-Supporting elements
  • Properties: Global properties
  • Interface: HTMLDListElement

Represents zero or more key value groups (descriptive lists), each containing one or more DT and DD.

dt
  • Classification: no
  • Usage scenario: directly inside a DL element or div element inside a DL element
  • Header, footer, sectioning content, or heading content
  • Properties: Global properties
  • Interface: HTMLElement

Represents a term, name, and is part of a term definition group in DL

dd
  • Classification: no
  • Usage scenario: directly inside a DL element or div element inside a DL element
  • Flow content
  • Properties: Global properties
  • Interface: HTMLElement

Represents an explanation, definition, or value that is part of a grouping of terms in DL

<article> <h1>FAQ</h1> <dl> <dt>What do we want? </dt> <dd>Our data.</dd> <dt>When do we want it? </dt> <dd>Now.</dd> <dt>Where is it? </dt> <dd>We are not sure.</dd> </dl> </article>Copy the code
figure
  • Categories: Flow Content, Sectioning Root, Palpable Content
  • Content: Flow Content or optional Figcaption
  • Properties: Global properties
  • Interface: HTMLElement

Represents some flow content, and can have a Figcaption element with caption

figcaption
  • Classification: no
  • Flow content
  • Properties: Global properties
  • Interface: HTMLElement

Used within a figure element as a caption or legend for the rest of the content

main
  • Categories: Flow Content, Palpable Content
  • Flow content
  • Properties: Global properties
  • Interface: HTMLElement

Represents the main part of a document. Do not have more than one main element without the hidden attribute in a document

div
  • Categories: Flow Content, Palpable Content
  • Content: If it is a child of DL, it can contain DD and DT as well as script-Supporting, otherwise it can be any flow content
  • Properties: Global properties
  • Interface: HTMLDivElement

Nothing in particular

4.5. The Text – the level of semantics

a
  • Categories: Flow Content, Phrasing Content, Palpable Content, or Interactive content if there is an href attribute
  • Content: Transparent, cannot have interactive content, a, or descendants with tabIndex property
  • Properties: Global properties
    • Href hyperlink address
    • Target Hyperlink navigation context
    • Download specifies downloading rather than navigation
    • Ping Ping the URL
    • Ref Specifies the relationship between the current document and the hyperlink
    • Hreflang Language for linking resources
    • referrerpolicy Referrer policy
  • Interface: HTMLAnchorElement, including HTMLHyperlinkElementUtils

If there is an href attribute, it represents a hyperlink. If there is no hred attribute, this element is a placeholder placed by other links, and other non-global attributes on a are ignored

em
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content
  • Properties: Global properties
  • Interface: HTMLElement

The following element defaults to the same and represents a content emphasis that can be nested, the deeper the more important

strong

Important (for example, headline), serious (for example, warning), and urgent (for example, seen before other content) are usually in bold

small

To indicate a marginal note or comment, reduce the font size by one

s

Indicates that it is no longer accurate or relevant, and when used for editing a document indicates that the del element is to be removed

cite

The title of a work, such as a book, essay, or poem, used as a citation

q
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content
  • Properties: Global properties
    • Cite A link to a citation or more information
  • Interface: HTMLQuoteElement

That reference

dfn
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content, but can’t have DFN descendants
  • Property: Global property, where title stands for the full abbreviation
  • Interface: HTMLElement

Represents the definition of a term. If the title attribute and an optional abBR child, the exact value of the definition is the attribute value, otherwise the text content is the term value

<abbr title="World-Wide Web">WWW</abbr>

<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>
Copy the code
abbr
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content
  • Property: Global property, where title stands for the full abbreviation
  • Interface: HTMLElement

Used to display abbreviations, and complete descriptions can be provided through the optional title attribute

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
Copy the code
ruby
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Properties: Global properties
  • Interface: HTMLElement

Used for phonetic notations, related elements include the following and will not be discussed separately later

  • Ruby is used to display phonetic or annotated east Asian scripts
  • Rt contains pronunciation
  • Rp is used when Ruby is not supported, usually in parentheses
  • Rb is used to separate the phonetic units
  • RTC contains phonetic elements
< rt > < ruby > Han Han < / rt > keyword < rt > Zi < / rt > < / ruby > < ruby > Han < rp > (< / rp > < rt > Han < / rt > < rp >) < / rp > keyword < rp > (< / rp > < rt > Zi < / rt > < rp >) < / rp > </ruby>Copy the code
data
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content
  • Properties: Global properties
    • Value: machine readable values
  • Interface: HTMLDataElement

Associate a specified content with a machine-readable value, using the time element if the content relates to a time or date

time
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • If there is a datetime attribute, Phrasing content otherwise Text
  • Properties: Global properties
    • Datetime machine-readable values
  • Interface: HTMLTimeElement

Associate a time with a machine-readable value

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
Copy the code
code

Represents a code snippet

var

Represents a variable

samp

Represents a computer output, usually in a monospaced font

kbd

Represents keyboard input, constant width font

Sub and sup

Represents subscripts and superscripts respectively

i

To indicate some different sound or mental activity, use italics

b

Bold, no other meaning

u

Represents some unarticulated text, underlined, for example, for annotation spelling errors

mark

Represents a marked or highlighted reference

bdi
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Phrasing content
  • Attribute: Global attribute, where dir has special semantics and does not inherit from parent element, default value auto
  • Interface: HTMLElement

A piece of text that is independent of its surroundings

span

Nothing in particular

br
  • Category: Flow content, Phrasing content
  • Content: no
  • Properties: Global properties
  • Interface: HTMLBRElement

Represents a carriage return

wbr
  • Category: Flow content, Phrasing content
  • Content: no
  • Properties: Global properties
  • Interface: HTMLBRElement

A place where you can break a line

4.6. The Links

Links are created with a, area, form, and link elements and represent a connection between the current document and another resource. There are two kinds

  • Link to external resources to load into the current document for use
  • Hyperlinks for access or download

4.7. The Edits

Ins and del means to edit a document

ins
  • Categories: Flow Content, Phrasing Content, Palpable Content
  • Content: Transparent
  • Properties: Global properties
    • Cite or a link to more information
    • Datetime Modified time
  • Interface: HTMLModElement

Represents the text of the newly inserted document

del

As in ins, to indicate deleted text

4.8. Embedded content

picture
  • Categories: Flow Content, Phrasing Content, Embedded Content
  • Content: The optional Source element is followed by the IMG element, and the optional script-Supporting element
  • Properties: Global properties
  • Interface: HTMLPictureElement

Provide different image versions for the IMG child element

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Copy the code
source
  • Category: no
  • Use scenarios: as a child of the picture element before the IMG element and as a child of the Media element before any flow content or track elements
  • Content: no
  • Properties: Global properties
    • SRC: indicates the resource address
    • Type: indicates the resource type
    • Srcset: Images for different scenes, such as high resolution and low resolution
    • Sizes: Picture sizes for different layouts
    • Media: Application media
  • Interface: HTMLSourceElement

Specify multiple media resources for picture, Audio, and video

img
  • Categories: Flow content,Phrasing Content,Embedded Content, form-associated Element,If the Element has a USemap attribute: Interactive content,Palpable content.
  • Content: no
  • Properties: Global properties
    • Alt Indicates the text to be displayed when the image is not available
    • SRC Resource address
    • srcset
    • sizes
    • crossorigin
    • Name of the image map used by usEMAP
    • Ismap is part of the server map
    • width
    • height
    • referrerpolicy
    • Decoding mode
    • Loading Loading immediately or loading lazily
  • Interface: HTMLImageElement

Represents an image. Different scenes can load different images and process them differently. See Using images

iframe
  • Categories: Flow Content,Phrasing Content,Embedded Content,Interactive Content,Palpable Content
  • Content: no
  • Properties: Global properties
    • SRC Specifies the embedded page address
    • Srcdoc A piece of HTML code
    • Name The name embedded in the browsing context
    • Security rules for embedded content in the sandbox
    • Allow applies to the Permissions Policy of iframe
    • Allowfullscreen Whether to allow iframe in fullscreen
    • width
    • height
    • referrerpolicy
    • Loading Whether loading is delayed
  • Interface: HTMLIFrameElement

Represents an embedded browsing context

object
  • Categories: Flow content,Phrasing Content,Embedded Content,If the element has a usemap attribute: Interactive content,Listed and submittable form-associated element,Palpable content
  • Content: Optional Param elements, and Transparent.
  • Properties: Global properties
    • Data Resource address
    • Type Resource type
    • Name Specifies the name of the embedded browsing context
    • usemap
    • Form related form elements
    • width
    • height
  • Interface: HTMLObjectElement

Can represent an external resource, either as a picture, child browsing context, or plug-in, depending on the type

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>
Copy the code
param
  • Category: no
  • Content: no
  • Properties: Global properties
    • Name Parameter name
    • The value parameter values
  • Interface: HTMLParamElement

Defining parameters for the object element does not represent anything by itself

video
  • Category: Flow content,Phrasing Content,Embedded Content,If the element has a controls attribute: Interactive content,Palpable content.
  • Content: If there is a SRC attribute, it contains the optional track element, transparent, and no media element. If there is no DRC attribute, it contains the optional source element, transparent, and no media element
  • Properties: Global properties
    • src
    • crossorigin
    • Poster A poster frame, used before the user plays it
    • Preload preload option
    • Autoplay Automatically plays
    • Playsinline is in the element’s play area
    • Loop Whether to play in a loop
    • Muted Indicates whether to switch to the default muted
    • Controls Specifies an explicit user agent control bar
    • width
    • height
  • Interface: HTMLVideoElement

For playing video

audio
  • Categories: Flow Content,Phrasing Content,Embedded Content, or Interactive Content, Palpable Content if you have controls
  • Content: Same as video
  • Attributes: Same as video except no length and width
  • Interface: HTMLAudioElemen

For playing audio

track
  • Category: no
  • Usage scenario: As a child of the Media element before the Flow content
  • Properties: Global properties
    • Kind Type of text caption
    • src
    • Srclang Resource language
    • Label Indicates the label visible to the user
    • Default Set the default value
  • Interface: HTMLTrackElement

Specifies captions for media elements

media element

The HTMLMediaElement object, from which the corresponding interfaces of the video and audio elements inherit

map
  • Categories: Flow Content,Phrasing Content,Palpable Content.
  • Content: Transparent.
  • Properties: Global properties
    • Name: Name of the image map
  • Interface: HTMLMapElement

The map element, combined with the IMG element and its area child, defines an image map (which is a map of the various parts of the image, for example). The name attribute gives the map a name that can be referenced, and the names of the two maps must be different. If an ID is specified, the two attributes must have the same value.

area
  • Category: Flow content, Phrasing Content.
  • Usage scenario: Inside the Map element
  • Content: no
  • Properties: Global properties
    • Alt images fail to load explicit text
    • Coords shape Coordinates created in the image map (Coordinates)
    • Shape Shape type created in the image map
    • Href hyperlink address
    • The browsing context of the target hyperlink
    • Download is to download or navigate
    • ping
    • rel
    • referrerpolicy
  • Interface: HTMLAreaElement

Represents an area in the image map

MathML

Used to describe mathematical formulae, see MathML

SVG

Scalable Vector Graphics (SVG) Scalable Vector Graphics (SVG

4.9. The Tabular data

table
  • Categories: Flow Content, Palpable Content
  • In order, an optional Caption, zero or more ColGroups, an optional Thead element, zero or more Tbody or TR, an optional Tfoot, and an optional script-Supporting
  • Properties: Global properties
  • Interface: HTMLTableElement

Represents more than one dimension of data in the form of a table, with row, column, and cell descendants

caption
  • Category: none
  • Usage scenario: as the first child of the table
  • Content: Flow content, descendant can not have table
  • Properties: Global properties
  • Interface: HTMLTableCaptionElement

Represents the title of the table

colgroup
  • Category: none
  • Use scenario: As a table child, after caption, before anything else
  • Content: Nothing if there is a SPAN attribute, otherwise 0 or more Col or template elements
  • Properties: Global properties
    • Span Number of columns that span. The value is a non-negative integer and cannot exceed 1000
  • Interface: HTMLTableColElement

Represents one or more columns in a group, and the SPAN attribute may be specified if the COL element is not included

col
  • Category: no
  • Usage scenario: As a child of colSPAN without a SPAN attribute
  • Content: no
  • Properties: Global properties
    • Span Number of columns that span
  • HTMLTableColElement

In colgroup represents one or more columns

thead
  • Classification: no
  • Use scenario: Inside the table element after caption, and colGroup
  • Contains zero or more tr, script-supporting
  • Properties: Global properties
  • Interface: HTMLTableSectionElement

Represents a series of rows and is the header of a table

tbody
  • Category: no
  • Use scenario: Inside the table element after Caption, ColGroup, and thead
  • Zero or more tr and script-supporting characters
  • Properties: Global properties
  • Interface: HTMLTableSectionElement

Contains the body of the table, representing a series of rows

tfoot
  • Category: no
  • Usage scenario: the last child of the table
  • Zero or more tr and script-supporting characters
  • Properties: Global properties
  • Interface: HTMLTableSectionElement

Represents a series of rows and is the footer of the table

tr
  • Category: no
  • Use scenario: as a child of thead, tBody, and tfoot, if there is no tbody, can be directly as a child of table
  • Td, TH, and script-supporting
  • Properties: Global properties
  • Interface: HTMLTableRowElement

Represents a row of cells

td
  • Type: Sectioning root
  • Use scenario: child element of TR
  • Flow content
  • Properties: Global properties
    • Colspan across the column number
    • Rowspan across the row number
    • Headers header cell
  • Interface: HTMLTableCellElement

Represents a cell in the table

th
  • Category: no
  • Usage scenario: as a child of TR
  • Header, footer, sectioning content, or heading content
  • Properties: Global properties
    • colspan
    • rowspan
    • headers
    • Scope specifies which cell headers to make
    • Brief introduction to abBR content
  • Interface: HTMLTableCellElement

Represents header cell,

4.10. The Forms

form
  • Categories: Flow Content, Palpable Content
  • Content: Flow content, but no form
  • Properties: Global properties
    • Accept-charset Specifies the character encoding used for submission
    • Action Specifies the URL for submission
    • Autocomplete fills automatically
    • How to encode encType before submission for POST submission
      • Application/x – WWW – form – urlencoded by default
      • Multipart /form-data If the input element has the type=file attribute
      • Text/plain to debug
    • Method Indicates the HTTP method
      • Post form data is submitted as the request body
      • Get form data after loading the URL
      • Dialog Closes dialog submission while the form is in a dialog
    • The name of the form name
    • Whether novalidate bypasses validation at commit time
    • The browsing context for the target submission
    • rel
  • Interface: HTMLFormElement

Submit data by using form-associated elements

label
  • Categories: Flow Content,Phrasing Content,Interactive Content,Palpable Content.
  • Phrasing content, but no label offspring
  • Properties: Global properties
    • For related controls
  • Interface: HTMLLabelElement

Represents a caption that can be associated with a control

input
  • Content: no
  • Properties: global properties, below are additional properties and applicable types, default all
    • Accept: Indicates the accepted file type, used for file
    • Alt is used for image
    • Autoconmplete automatically fills
    • Checked Whether the default checked state is used for radio and checked
    • Dirname Text direction, used for text and search
    • Disabled Specifies whether to enable it.
    • Form related form
    • The url submitted by formAction for image and submit
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • Height is used to image
    • List Indicates the list to be automatically filled
    • Max Indicates the maximum number type
    • Maxlength Specifies the maximum length for password, search, tel, text, and URL
    • min
    • minlength
    • Multiple specifies whether to use multiple options for email and file
    • Name is the key name of the key-value pair in form Data
    • Pattern Authentication mode, used for password, text, tel
    • placeholder
    • readonly
    • required
    • Size Specifies the size for email, password, tel, and text
    • The SRC is used for image
    • Step is used for numeric types
    • Type Indicates the type. For details, see MDN
    • value
    • Width is used for image
  • Interface: HTMLInputElement

The form controls

button
  • Properties: Global properties
    • Disabled Indicates whether the device is unavailable
    • form
    • form*
    • name
    • type
      • submit
      • reset
      • button
    • value
  • Interface: HTMLButtonElement
select
  • Contents: 0 or more options, optGroups
  • Properties: Global properties
    • autocomplete
    • disable
    • form
    • mutiple
    • name
    • required
    • size
  • Interface: HTMLSelectElement

Select box

datalist
  • Either phrasing content or option
  • Properties: Global properties
  • Interface: HTMLDataListElement

Can be paired with input as its possible value

<label>
 Animal:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="Cat">
  <option value="Dog">
 </datalist>
</label>
Copy the code
optgroup
  • Usage scenario: As a child element of select
  • Content: the option
  • Properties: Global properties
    • disabled
    • label
  • Interface: HTMLOptGroupElement

Represents a tagged set of options

option
  • Usage scenario: As a child of SELECT, datalist, and optGroup
  • Properties: Global properties
    • disabled
    • label
    • selected
    • value
  • Interface: HTMLOptionElement

Said options

textarea
  • Content: the text
  • Properties: Global properties
    • autocomplete
    • Cols Maximum number of characters per line
    • dirname
    • disabled
    • form
    • Maxlength Indicates the maximum length
    • minleng
    • name
    • placeholder
    • readonly
    • required
    • Rows of rows
    • How to wrap
  • Interface: HTMLTextAreaElement

Used to represent multi-line text editing

output
  • Properties Global properties
    • For Specifies the ID that affects the calculation result. You can have multiple ids
    • form
    • name
  • Interface: HTMLOutputElement

Represents the calculated result

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>
Copy the code
progress
  • Content: Global properties
    • Max upper bound
    • The value of the current value
  • Interface: HTMLProgressElement

Represents the progress bar

<progress id="file" max="100" value="70"> 70% </progress>
Copy the code
meter
  • Properties: Global properties
    • value
    • Min min
    • Low, low
    • high
    • max
    • The optimum optimal value
  • HTMLMeterElement

A gauge representing a known range

fieldset
  • Content: Optional Legend element followed by Flow content
  • Properties: Global properties
    • disabled
    • form
    • name
  • Interface: HTMLFieldSetElement

Represents a group of controls

legend
  • Use scenario: the first child of the Fieldset
  • Properties: Global properties
  • Interface: HTMLLegendElement

Represents the caption of a fieldset

4.11 Interactive elements

details
  • Content: A summary element, followed by flow content
  • Properties: Global properties
    • Open details are not visible
  • Interface: HTMLDetailsElement

Represents a pendant that displays details when opened

summary
  • Use the first child of scenario: detail
  • Properties: Global properties
  • Interface: HTMLElement

And Details to display the Caption or Legend

dialog
  • Flow content
  • Properties: Global properties
    • The Open dialog box is not displayed
  • Interface: HTMLDialogElement

Represents a dialog box

Scripting

We can use script to add interaction to the document

script
  • Content: If there is no SRC attribute, the content depends on type, and if there is SRC, it is either empty or contains script documentation only
  • Properties: Global properties
    • SRC Specifies the URL of the external script
    • Type Indicates the type of the script
      • Omit or js minetype: indicates that the script is JS, so do not provide this property
      • The Module will treat the script as module and will not be affected by Charset and defer
      • Others are not processed by the browser as data blocks
    • Nomodule should not be executed in browsers that support Module
    • async
    • defer
    • crossorigin
    • integrity
    • referrerpolicy
  • Interface: HTMLScriptElement

Used to dynamically import scripts (classic script and Module Script) and data blocks that are not displayed. Here’s a look at the async and defer properties, which are booleans and specify how the script will be executed. Defer has no effect on Module Script, like this:

  • For a classic script
    • If only async is provided, the fetch is parallel and executed immediately
    • If only defer is provided, fetch is done in parallel and then executed after parsing
    • If none is provided, fetch and execute immediately, blocking parsing
  • For the module script
    • If only async is provided, fetch will be done in parallel with the dependency and executed immediately
    • If it is not provided, the fetch is done in parallel with the dependency and then executed after parsing

noscript

Not expanded when script is not available

The template and slot.

Used in Web Component, discussed in the Web Component section of this article

canvas
  • Properties: Global properties
    • width
    • height
  • Interface: HTMLCanvasElement

Used to draw graphics through scripts, refer to the canvas API section of this article

5 Microdata

Microdata refers to machine-readable data, such as that used by crawlers and search engines, specifically using reference MDN

6 User interaction

6.1. The hidden attribute

Is a global attribute that indicates that an element is hidden

6.2. Inert subtrees

Lazy subtrees, when a node is lazy, are ignored when dealing with user interactions as if it did not exist. Note that this is just a concept, not yet implemented.

6.3 Tracking the user activation

To prevent abuse of intrusive apis such as vibrations and pop-ups, the user agent needs to allow these apis only if the user actively interacts with the page or once.

6.4. Activation behavior of elements

Some elements in HTML have activation behavior, that is, they can be activated by a click event. You can also call element.click() as if clicked

5. focus

Get focus

6.6. Keyboard shortcuts

Use the accesskey attribute to generate a shortcut key for the current element, which must contain a printable character. The use of shortcut keys can be used to activate elements, and different browsers need to press other key combinations at the same time.

6.7. Editing

  • Use the contenteditable property to make document areas (current elements) editable, Boolean values
  • Modify document.DesignMode to make the entire document editable
  • Use spellcheck to check spelling
  • Use autocapitalize automatically
  • The inputMode command is used to specify the virtual keyboard type
  • Use enterKeyHint to specify the label and icon for the enterkey of the virtual keyboard

6.8. In-page search

A mechanism for finding on a page is defined, but there is currently only one non-standard implementation of window.find()

6.9. Drag and drop

See the drag and drop API section for details

7 Loading web pages

7.1. Browsing contexts

A browsing context is the environment in which the Document object is displayed. Each TAB or window or iframe in the browser contains a browsing context. Each browsing context has a specific Origin. The activation document and history of this Origin store all the displayed documents. The communication between browsing contexts is very strict

7.2. The window object

The window interface represents a container containing documents, the document property specifies the document to load, and a document can pass through the document.defaultView property corresponding to the window. The global variable, window, represents the window on which Script is running, and mounts various functions, namespaces, objects, and constructors. Each TAB,frame, or iframe in the browser has its own window.

7.2.1 Constructors

In addition to dom-related constructors, there are

  • DOMParser keeps HTML code parsed into DOM documents
  • Image is used to create the HTMLImageElement
  • Option is used to create HTMLOptionElement
  • StaticRange creates a StaticRange object
  • Worker is used to create web workers
  • XMLSerializer translates the DOM tree into HTML source code
7.2.2 properties

Inherited from EventTarget interface properties and implements WindowOrWorkerGlobalScope and WindowEventHandlers two mixins

  • Window.closed Indicates whether the current Window is closed
  • Window.console
  • Window.customelements returns The CustomElementRegistry, using a custom object
  • Window.crypto is related to encryption
  • Window.devicePixelRatio Ratio of physical pixels to CSS pixels
  • Window.document Contains the document
  • Window.DOMMatrix represents a 4*4 matrix object suitable for both two-dimensional and three-dimensional operations
  • Window.event Returns the current event, nonstandard
  • FrameElement An embedded element, such as iframe or object
  • Window.fullscreen has fullScreen
  • Window.history History object
  • Window.innerHeight Height of the content area of the browser Window, including the scroll bar
  • Window.innerWidth
  • Window.isSecureContext Determines whether a context is a security context
  • Window.length indicates the number of window.frameelements
  • Window.location Reads and writes the location object
  • The window. locationbar checks whether the address bar is visible through its visible property
  • Window.localStorage
  • Window. The menubar menu bar
  • Window.name Read/write Window name
  • Window.navigator is related to user agent information
  • Window.opener opens the Window object of the current Window
  • OuterHeight Returns the height of the entire Window, including the various toolbar of the browser
  • Window.outerWidth
  • Window. PageXOffset/Window. ScrollX horizontal scroll distance of the page
  • Window. PageYOffset/Window. ScrollY vertical scrolling distance of the page The former is the latter’s alias
  • Window.parent returns the parent Window, or itself if not
  • Window.performance is related to performance
  • Window.personalbar
  • Window.screen Screen object
  • Browser Window. ScreenX/Window. ScreenLeft left border to desktop operating system left border of the horizontal distance, the latter introduced by ie at the beginning, later as an alias of the former is generally introduced
  • Window.screenY/Window.screenTop
  • Window.scrollbars Scrollbar visibility
  • Window. The self/Window. The Window itself
  • Window.sessionStorage
  • Window.status The text in the status bar
  • Window.statusbar statusbar visibility
  • Window.toolbar toolbar visibility
  • Window.top The layer above the Window object

Obtained by other objects

  • WindowOrWorkerGlobalScope.caches
  • WindowOrWorkerGlobalScope.indexedDB
  • WindowOrWorkerGlobalScope.isSecureContext
  • WindowOrWorkerGlobalScope.origin
7.2.3 method

From EventTarget inheritance, as well as the realization method of WindowOrWorkerGlobalScope and EventTarget

  • Window.alert()
  • Window.blur()
  • Window.cancelAnimationFrame()
  • Window.cancelIdleCallback()
  • Window.clearImmediate()
  • Window.close()
  • Window.confirm()
  • Window.find()
  • Window.focus()
  • Window.getcomputedstyle () gets the calculation style for a particular element
  • Window.getSelection()
  • Window.matchMedia()
  • Window.moveby () moves the specified distance
  • Window.moveto () moves to the specified coordinate
  • Window.open() opens a new Window
  • Window.postmessage () is used for inter-window communication
  • Window.print()
  • Window.prompt()
  • Window.requestAnimationFrame()
  • Window.requestIdleCallback()
  • Window.resizeBy()
  • Window.resizeTo()
  • Window.scroll()/Window.scrollTo()
  • Window.scrollBy()
  • Window.showOpenFilePicker()
  • Window.showSaveFilePicker()
  • Window.showDirectoryPicker()
  • Window.stop()
  • EventTarget.addEventListener()
  • EventTarget. DispatchEvent () triggering events
  • WindowOrWorkerGlobalScope. Atob () on the base64 decoding
  • WindowOrWorkerGlobalScope. Btoa () encoded in base64
  • WindowOrWorkerGlobalScope.clearInterval()
  • WindowOrWorkerGlobalScope.clearTimeout()
  • WindowOrWorkerGlobalScope. CreateImageBitmap () accepts a variety of image resources, return a ImageBitmap promise
  • WindowOrWorkerGlobalScope.fetch()
  • EventTarget.removeEventListener
  • WindowOrWorkerGlobalScope.setInterval()
  • WindowOrWorkerGlobalScope.setTimeout()
7.2.4 event

Includes WindowEventHandlers inherited and implemented from EventTarget

  • Window.onbeforeinstallprompt
  • Window. onDevicelight Brightness adjustment
  • Window. onDevicemotion Device movement
  • The Window. Turn ondeviceorientation screen
  • Window. Ongamepadconnected console connection
  • Window.ongamepaddisconnected
  • Window.onpaint
  • Window.onrejectionhandled
  • Window. Onvrdisplayconnect/other vr event
  • GlobalEventHandlers onabort cancel the load
  • WindowEventHandlers.onafterprint
  • WindowEventHandlers.onbeforeprint
  • WindowEventHandlers.onbeforeunload
  • GlobalEventHandlers.onblur
  • GlobalEventHandlers. Onchange page changes
  • GlobalEventHandlers.onclick
  • GlobalEventHandlers.ondblclick
  • GlobalEventHandlers.onclose
  • GlobalEventHandlers. Oncontextmenu right click
  • GlobalEventHandlers.onerror
  • GlobalEventHandlers.onfocus
  • WindowEventHandlers.onhashchange
  • GlobalEventHandlers.oninput
  • GlobalEventHandlers.onkeydown
  • GlobalEventHandlers.onkeypress
  • GlobalEventHandlers.onkeyup
  • WindowEventHandlers.onlanguagechange
  • GlobalEventHandlers. Onload loaded in the dom and resources
  • WindowEventHandlers.onmessage
  • GlobalEventHandlers.onmouseout
  • GlobalEventHandlers.onmouseover
  • GlobalEventHandlers.onmouseup
  • WindowEventHandlers.onoffline
  • WindowEventHandlers.ononline
  • WindowEventHandlers.onpagehide
  • WindowEventHandlers.onpageshow
  • WindowEventHandlers.onpopstate
  • GlobalEventHandlers. Onreset form is reset
  • GlobalEventHandlers.onresize
  • GlobalEventHandlers.onscroll
  • GlobalEventHandlers.onwheel
  • GlobalEventHandlers.onselect
  • GlobalEventHandlers.onselectionchange
  • WindowEventHandlers.onstorage
  • GlobalEventHandlers.onsubmit
  • WindowEventHandlers.onunload

7.3. WindowProxy

Wraps a Window object on which most window-related operations are performed

7.4. Origin

Origin is the basis of the Web security model. Two identical Origin on the same Web platform have the same permissions. Different origin are considered to have potential risks, so they will be independent of each other. An Origin has three parts. The host can be a domain and an IP address

Origin: <scheme> "://" <host> [ ":" <port> ]
Copy the code

An about:blank or javascript: URL origin inherits the URL of the document

The same origin policy has some exceptions

  • Embed cross-origin iframes
  • Include cross-origin resources such as images or scripts<script src="..." ></script>, has a related propertycrossOrigin
  • Open cross-origin popup windows with a DOM reference

Cross domain processing

  • Two pages with the same parent domain can passdocument.domainIf the parent domain is set to the same as the parent domain, the port must be set to NULL
  • Cors, see HTTP
  • ContentWindow, window.parent, window.open, and window.opener can be used to reference each other between documents, and window.postMessage can be used to communicate across domains
  • You can also communicate by setting cookies for the parent domain

7.5. Sandboxing

Sandbox limits the ability of potentially untrusted resources, such as a sandbox property of iframe, refer to MDN

7.6. Cross-origin opener policies/Cross-origin embedder policies

Why you need “cross-origin Isolated “for powerful features As mentioned above, there are some exceptions to the same origin policy due to historical reasons. There are two patches for this loose same origin policy. One is the introduction of the new protocol Cross-source Resource Sharing (CORS), which enables servers to allow specific Origin access to resources, and the other is the implicit removal of Script access to resources across domains. This type of resource is called opaque resource. For example, editing a cross-domain resource with CanvasRenderingContext2D will fail. This patch has been effective, until en.wikipedia.org/wiki/Spectr… It can invalidate transparent resources, hence the cross-domain isolation strategy described here, which cannot be loaded into a potentially dangerous browsing context unless explicitly authorized.

7.7. Session history and navigation

7.7.1 Browsing sessions

A browsing session can be likened to a top-level browsing context

7.7.2 The session history of browsing contexts

A series of documents in the same browsing context is a session history, which contains a series of session history records.

7.7.3 History interface

It is used to manipulate the browser session history, that is, the history of the page currently loaded by the TAB or frame.

7.7.3.1 properties
  • Length Number of records
  • ScrollRestoration is used to explicitly set the Restoration behavior that the page navigates through history
  • State Indicates the state at the top of the history stack
7.7.3.2 method
  • back()
  • forward()
  • The go([delta]) parameter indicates the interpolation between the current page and the destination page in the history, or 0 indicates reload
  • PushState (state, title [, URL]) pushState(state, title [, URL]) Adds a piece of data to the session history, but does not jump immediately. State indicates the data object associated with the new history, and URL indicates any url of the same origin
  • ReplaceState (stateObj, title, [URL]) changes the current state or URL without actually requesting the URL
7.7.4 Location interface

Represents the corresponding URL. Both document and window have location attributes. Before detailed introduction, we will look at examples to facilitate understanding of related concepts

var url = document.createElement('a'); url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); // /en-US/search console.log(url.search); / /? q=URL console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org:8080Copy the code
7.7.4.1 properties
  • AncestorOrigins lists the origin of all ancestor browsing contexts
  • The Location. The href the url
  • Location.protocol, including colons
  • Location.host Host containing hostname, colon, and port number
  • Location.hostname Specifies the domain name or IP address
  • The Location. The port port
  • Location. pathName Specifies the first slash and subsequent URL, without hash and search
  • Location.search
  • Location.hash
  • Location.origin
7.7.4.2 method
  • Location.assign() enters a new URL with fewer options than window.open
  • Location.reload()
  • Location.replace()

8. Web application APIs

8.1 Scripting

The content here will be directly related to the ES262 specification, see ES2021

Introduce 8.1.1

There are many ways to run the executable code we write, including but not limited to

  • Script element
  • javascript:URLSnavigation
  • Event handlers in the DOM
  • SVG and other technology processing
8.1.2 Agent and Agent Cluster

These two concepts are defined from es262

8.1.3 Realms and related

Es262 introduces the concept of realm, which represents the global environment in which JS runs. For Web standards, it is often useful to associate values or algorithms with realm/ Global objects. For example, the Window or WorkerGlobalScope interface defines values that span multiple realms, We’ll use the concept of an Environment Settings Object

  • Context is an object that determines the setting of the execution environment, such as the following fields
    • id
    • Top origin
    • Target Browsing environment
    • The active service worker
  • Environment Settings Objects, also an environment, with the following additional algorithms, for example
    • Realm execution context, a JS execution context shared by all scripts (including Classic and Module) currently setting the environment
    • Module map is used to import modules
  • Global Object is the [[Globalobject]] object of a realm. In the current specification all global objects are either on Windows, Either on the WorkerGlobalScope, where the Realm and global Object and environment Settings object (in the [[HostDefined]] field of the Realm) are one-to-one.
8.1.4 host hooks

Es262 contains some abstract operations that are implementation-defined, depending on the hosting environment, which is the corresponding part of the user agent defined as the host. Such as

  • HostEnqueuePromiseJob(Job, realm) is used to schedule promise-related operations, which HTML schedules as microtasks
8.1.5 Event loop

Here is detailed in the article ES2021

8.2 WindowOrWorkerGlobalScope mixin

Window and WorkerGlobalScope mixins implemented by two objects

8.3 Base64 Tool method

The ATOB () and BTOA () methods can be base64 decoding and encoding

8.4 the Dynamic markup insertion

8.4.1 Opening the Input Stream

Document.open() opens the Document for document.write (). This action has some side effects – all event listeners are removed – all existing nodes are removed. The open method with arguments is an alias for window.open

8.4.2 Closing the input stream

Document.close() completes writing to the Document

8.4.3 document. The write ()

Write a text string to the document stream opened with document.open, which is automatically called when the document is loaded

<html> <head> <title>Write example</title> <script> function newContent() { document.open(); document.write("<h1>Out with the old, in with the new! </h1>"); document.close(); } </script> </head> <body onload="newContent();" > <p>Some original document content.</p> </body> </html>Copy the code
8.4.4 document. Writeln ()

Similar to Document.write, but a newline character is automatically added at the end.

8.5 the DOM parsing

The DOMParser interface is used to create document objects by parsing strings

const domparser = new DOMParser()
const doc = domparser.parseFromString(string, mimeType)
Copy the code

8.6 Timers

The setTimeout() and setInterval() methods allow developers to schedule a timer based callback

8.7 Microtask queuing

The queueMicrotask(callback) is used to create a queue of microtasks to trigger a callback that causes the relevant code to execute before the current task completes and the execution context stack is empty but control is not handed back to the Event loop. Note that scheduling a lot of microtasks is like executing a lot of asynchronous code, which prevents the browser from doing its own thing, like rendering and scrolling. In most cases, it’s probably more appropriate to use requestAnimationFrame() or requestIdleCallback(), especially if the goal is to run the code before the next rendering cycle, which is what requestAnimationFrame() does

8.8 the User prompts

  • Simple dialog
    • window.alert(message)
    • window.confirm(message)
    • window.prompt(message [, default] )
  • Print window.print ()

8.9 System state and capabilities

8.9.1 the Navigator object

Window. navigator returns an instance of the Navigator interface to represent the identity and status of the user agent

8.10 Images

ImageBitmap is a bitmap image that can be drawn to the Canvas element without delay. This can be created using the createImageBitmap() factory method, which accepts various map sources and returns a resolve promise to ImageBitmap, where the image is reduced to a rectangular bitmap

const imageBitmapPromise = createImageBitmap(image[, options]);
const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
Copy the code

The ImageBitmap object consists of two attributes: width and height, and a method, imagebitmap.close (), that frees the associated image resources.

8.11 Animation frames

Here are primary window. RequestAnimationFrame (), you can tell the browser want to perform an animation, and required the browser until the next redraw calls the specified callback function update animation, if you want to continue to update before next time to redraw the browser next frame animation, then the callback function must be called again itself

const element = document.getElementById('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // Use 'math.min ()' here to make sure the element stops at exactly 200px. Element.style. transform = 'translateX(' + Elapsed, 200) + 'px '; If (elapsed < 2000) {/ / stop in two seconds animation window. RequestAnimationFrame (step); } } window.requestAnimationFrame(step);Copy the code

9 Communication

9.1 MessageEvent interface

server-sent events, web sockets, cross-document messaging, channel messaging, And broadcast channels all use the MessageEvent interface for their message events. Includes the following attributes

  • Data Indicates the sent data
  • Origin Indicates the origin of the data sender
  • LastEventId event id
  • Source means an event emitter
  • Ports MessagePort array

9.2 Server – sent events

Can be used to enable the server to push data to the Web page at any time, see MDN. The steps can be divided into

  1. Instantiate the EventSource, specifying the URL to receive the event
  2. Adding Event Listeners
  3. The server sends an event stream of type TEXT /event-stream

For specific implementation, please refer to Sse.js

9.3 Web sockets

It can be used by the server and client to send messages to each other, see MDN. The current specification only specifies the use of the client side, which creates a WebSocket instance and then calls the corresponding method to send events to the server and listen for events. The server side can be coupled with WS. Socket.IO can also implement two-way communication, but it is not a Websocket implementation and therefore cannot be connected through a WebSocket client.

9.4 Cross – document messaging

Generally, scripts from different sources cannot communicate due to the same origin policy. Postmessage can communicate across documents if another page Window object (such as one that is another’s iframe or one opened by another through window.open) is obtained. The reference Window. PostMessage (). The sender uses PostMessage to send messages, and the receiver listens for Message events to implement communication.

9.5 the Channel messaging

Channel Messaging can be used for code communication in different browsing contexts, such as two iframes, one iframe for another, two workers, two documents connected via SharedWorker. Refer to the MDN. One party establishes a channel by instantiating MessageChannel and uses port1, and the other party uses Port2. Messageport. postMessage and MessagePort. onMessage are used to send and receive messages. demo

9.6 Broadcasting to other browsing contexts

Used to communicate between workers and different browsing contexts of the same source (Windows, Tabs, Frames, or iframes), refer to MDN. The script with the same parameters under different context to instantiate a BroadcastChannel build a broadcast channel, and then you can through the BroadcastChannel. PostMessage () and BroadcastChannel onmessage send and receive information.

10 Web workers

An API is defined to execute script in the background, independent of the UI, so that lengthy tasks do not affect page interactions. This API is called Workers, which generates an operating system-level thread. Refer to the MDN. Workers are divided into two types, one is dedicated workers(Dicated workers), which is generated through Worker instantiation; the other is Shared workers(Wokers), which is generated through SharedWorker instantiation. The dedicated worker is only used by the script that generates it, and both parties communicate through postMessage and onMessage events. Shared workers are used by multiple scripts, even in different Windows, iframes or even workers (need to be of the same origin).

Finally, notice that some variables are not available in worker.

11 Worklets

It is a lightweight worker, mainly used for high-performance graphics rendering or audio processing. The reference MDN can only be used for specific scenarios, not for any computation.

12 Web storage

Here are two mechanisms for saving key-value pairs (values can only be strings) on the client side, i.e

  • SessionStorage is stored separately for each given Origin, available for the duration of the session (as long as the browser is open, reload and restores included), a copy of the top-level session’s data is copied for the new session when a new TAB is opened, and the same URLS in different tabs maintain their own data.
  • LocalStorage works the same as above, but is persisted, even if the browser is closed, and has no expiration time.

The above two methods instantiate the Storage object. Here are some related concepts

12.1 Storage inteface

Note that the two types of Storage mentioned above are both instances of Storage

12.1.1 properties
  • Length Number of data entries saved
12.1.2 method
  • The storage.key () parameter is a number and returns the saved value
  • Storage.getItem()
  • Storage.setItem()
  • Storage.removeItem()
  • Storage.clear()

12.2 StorageEvent

Raised when a storage area is modified by another document in the same context

  • Key Specifies the key that modifies the value. If clear, null is returned
  • NewValue indicates a newValue, null if deleted
  • OldValue old value
  • StorageArea Current storage object
  • url

This is the end of flower sprinkling