Common elements

Elements in body

Inline element

• Occupies only the space contained by the border of its corresponding label

• Can only hold text or other inline elements

• Dimensions can only be changed by modifying horizontal margins, borders, or row heights

• The commonly used inline elements: < a >, < span >. < br >, < I >, < em >, < strong >, < label >, < q >. < var >, < cite >, < code >

Block-level elements

• The entire row that occupies its parent element always starts on a new row

• Can hold other block elements or inline elements

• You can control width height, line height, margin, border and so on to change its size

• Common block-level elements

  ,

  ,

  –

  ,

  ,

  ,

  ,

  ,

  ,

  ,
  

Inline block-level elements

• Elements are arranged within a row and do not own a row
• You can set the width, height, vertical margin, and border
• Common inline elements:<img> <input> <td>

semantic

Depending on the structure of the content, choosing the right tags builds a more maintainable code structure that developers can read and that machines can parse better.

For example, use button instead of div to define a button

block

header

• Present introductory information
• Usually contains a set of introductory or navigational elements such as a title, Logo, search box, author name, etc
• Can be placed inside, or another element

nav

• Provide navigation links in the current document or other documents, such as menus, directories, indexes, and so on
• This is used to place the most popular links. The less common links are usually placed in the footer at the bottom

article

• Separate documents, pages, applications, sites
• Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, etc

section

• Group content by topic, usually with a title
• It usually appears in the outline of a document
• Do not use it as a normal container, for example to beautify fragment styles
  A more appropriate
• If there are separate chunks of content inside the element that can be published individually, it is more suitable

aside

• Represents a section that has little to do with the rest of the page’s content, or that does not affect the overall content when taken apart
• Usually used in the sidebar to display ads, tips, quotes, etc

footer

• Represents the footer of the most recent chapter
• Usually contains information about the author of the chapter, copyright data, or a link to the document
• Elements within the footer are not part of the section and are not included in the outline

grouping

figure figcaption

• <figure>The contents of the package that are referenced independently: charts, illustrations, code, etc., usually with a title
• <figcaption>The description/title of the chart associated with it, usually located at<figure>The first or last of

blockquote

• Block-level reference elements
• The cite attribute represents the URL of the source

dl ,dt ,dd

• Used to describe – group key – value pairs
• Usually used in metadata, term definition, and other scenarios

The text

cite

• The element is usually used to refer to the title of the work.
• Include citations of papers, documents, books, movies, etc

time

• Machine readable time and date
• Datetime indicates the date and time to which this element is associated. If not specified, the element will not be resolved to a date

• <address>Contact information for a person or organization
• <mark>Used in references to indicate that attention is required
• <code>Code snippet
• <small>Disclaimer, notes, etc

Multimedia elements

The picture

img

1. The SRC attribute is required to embed the image in the file path
2. The Alt attribute contains a text description of the image and is optional. The screen reader will then read these descriptions to the user who wants to use the screen reader to let them know what the image means. When the image fails to load (network error, content blocked, or link expired), the browser displays the text in the Alt attribute on the page
3. Decoding modes: asynchronous and synchronous
4. Loading a lazy loading

picture

1. Elements by containing zero or more elements and aElement to provide versions of images for different display/device scenarios
2. Media properties: render the corresponding image according to the media conditions, similar to media query
3. The TYPE attribute: the MIME type that renders the corresponding image according to what the browser supports

Audio and video

video

• The SRC attribute is required to embed the video file path
• Controls Specifies whether to display browser controls. You can create custom controls
• Autoplay Indicates whether toplay autoplay
• The source element represents alternative resources for the video (different formats, sharpness, and sequence of attempts if reading fails or decoding fails)

HTML parsing

The general steps are as follows

• Build a DOM tree
• Style calculation to build the CSSOM tree
• Combine DOM and CSSOM into a Render tree
• Layout calculation
• draw

DOM(Document Object Model) : A structured representation of nodes and defines a way for programs to access this structure linking Web pages to scripting languages