I am of the view

My learning of HTML is divided into four parts: tags, attributes, semantics, as long as I master these is enough.

Inside the head tag

  • The base tag has two attributes: href target
  • The link tag has three main uses
    • Load the CSS:<link rel="stylesheet" href="./css/a.css">, you can also use the media property to specify device characteristics
    • Preloaded script:<link rel="prefetch" href="./js/hello-world.js">
    • Set the website icon:<link rel="icon" href="favicon.ico">
  • Meta tags, including
    • Set character set:<meta charset="UTF-8">
    • Set redirection:<meta http-equiv="refresh" content="0; url=https://baidu.com">
    • Setting up mobile view:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    • Set author (name=author), website description (name=description), keyword (name=keywords), content security policy (http-equiv=content-security policy)
  • Other common tags: Style title

body

This element shares many event handlers with the Window object, such as onload, onError, onresize, and so on

Content segmentation element

These elements have no special attributes, but are mainly semantically distinguished

  • Address: Provides the contact information of a person or organization
  • Article: Indicates a separate content area
  • Aside: Indicates that the content is not directly related to the main content
  • Footer: Used to provide information about authors, Copyrights, or associated sites
  • Header: Two functions: a header for the overall layout of the page, and a header for the content (no level)
  • H1-h6: Used to classify headings
  • Main: Indicates the main content of a page, usually only one
  • Section: Indicates a section of content, usually consisting of a title + content

Text content block-level elements

The main feature of these elements is semantics, which requires different tags depending on the meaning of the content

  • Blockquote: indicates that the content is a reference, and the cite attribute can be used to indicate the original url of the reference
  • Dl DD DT: Explanatory notes in terms of technical terms
  • Div: represents only block-level elements without concrete semantics
  • Figure out if you want to add a caption to the caption.
  • Hr: Separates the line and indicates the direction of the upper and lower content
  • Ol UL LI: Used to display list data
  • P: Indicates a paragraph of text
  • Pre: used to display text in reserved format

Text content line element

These elements are also semantic and are inline elements

  • A: Indicates hyperlinks and so on
    • Download property: If this property is added, the file should be downloaded after being clicked
    • Href attributes: web page link, file address, tel, mailto
    • Target: Sets the opening mode of the forward link. The usual values are _blank and _self
  • Abbr: The content is the abbreviation of the professional noun. The full name can be set with the title attribute
  • B: The content should be noticed by the user, but it is not important
  • Br: a newline
  • Cite: Content is usually the name of a work and is usually used when there is a reference to the work
  • DFN: Used as a technical term to be interpreted
  • Em: indicates the emphasis on tone of the text
  • I: Used to describe words that should be distinguished from the content of the text, usually names, book titles, etc
  • Mark: Used to indicate text that needs to be highlighted
  • Q: Indicates that the content is a reference, which has the same attribute as blockquote
  • S: Indicates that the content is no longer relevant or accurate
  • Small: Indicates additional content, such as copyright and legal stripes, which are usually smaller
  • Span: A generic text element like div
  • Strong: indicates that the content is important and different from em, B, or Mark
  • Sub sup: subscript and superscript
  • Time: Used to display a text representing the time. The dateTime attribute can be used to provide a machine-readable time string
  • U: Indicates that the content is grammatically incorrect or worded incorrectly, or is not textual
  • Del ins: text to be deleted or inserted, use the cite attribute to set the web address to illustrate the change, and use the datetime attribute to set the time when the change occurred

Multimedia elements

  • Map area: Used to make different parts of an image clickable
    • The map name attribute: # value is used to use the map in the USEMAP of the IMG tag
    • Area uses shape and Coords attributes to define shapes. Other attributes are the same as the a element (href download target).
  • Audio Video Track: Audio video element. Track is used to provide subtitle content
    • Video and Audio have controls SRC Preload fraternal loop autoplay attribute
    • Video also has the poster attribute, which specifies the cover image of the video
    • Track has attributes like kind and SRC
  • Img: image element
    • Common attributes are SRC and Alt
    • The attribute of the map element is USEMAP
    • If you set loading to lazy, you can enable lazy loading of the browser. Browsers that do not support lazy loading can reference itloading-attribute-polyfilllibrary

Embedded content

  • Embed: Uses an extended application (such as a browser plugin) to process resources. It can be used to process PDFS, videos, etc
    • Attributes include type, SCR, and so on
  • Iframe: Used to embed other pages
    • SRC: embedded site url
  • Object: Same as the Embed element, except that this element introduces the resource address with the data attribute
  • Picture: Used to provide different picture resources for different models of devices, with source and IMG elements to use

Table element

  • table thead tbody tfoot tr td th
  • Caption element is the caption of the table, with an exclusive CSS style caption-side
  • Colgroup and COL can be used to add partial styles to columns, such as color, which is not supported

The form elements

  • Common form elements are: Button Form Input Select Option Label Textarea
    • Checkbox Radio Button Submit TEXT Reset File hidden passowrd
    • Input New select control: color date datetime-local month range time week
    • Input New text type: URL tel Search Number Email
  • The common attributes of the form are: Autofocus Disabled Required form name
    • The select element uses the multiple attribute to indicate whether it is multiple
    • Keyboard input text forms have readonly placeholder maxLength minLength attributes
    • The Textarea element has the COLs Rows attribute
  • The datalist and option elements provide options for reference to the input box
  • The Fieldset element is used to group internal form elements together, and fileset can be set on this element to disable all internal forms
  • The Lengend element is used in fileset as a header
  • The meter and progress elements are used to display a range of values. The difference is that progress starts at 0 and cannot be set
  • Optgroup and set the label attribute to set the category name, which is used to group options in select. Disabled disables a group of options.
  • The output element represents the output of the computed result

Interactive elements

  • Details and Summary elements: Used to hide a detailed text, but can be viewed when clicked
  • The menu element represents a series of interactive operations, with Li as a child element like UL