An overview of HTML

HTML concepts:

What is HTML?

HTML is called HyperText Markup Language. HTML is not a programming language; it is a descriptive markup language. It is the language responsible for describing the semantics of a document.

HTML is the language responsible for describing the semantics of a document

The HTML file is a pure text file, with some tags to describe the semantics, these tags are not visible in the browser page, so it is called “hypertext Markup language”.

Next, we need to learn about the many “tag pairs” in HTML that give text different semantics.

For example, if you’re asked in an interview, what’s the use of the < H1 > tag?

  • Correct answer: Add main heading semantics to the text.
  • Wrong answer: Bold, black, and larger text.

The structure of the HTML

Let’s look at a simple HTML structure

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
  <div></div>
  </body>
</html>
Copy the code

As you can see, HTML tags usually come in pairs (bilateral tags), such as

and

, but there are a few single tags (unilateral tags), such as

,

, and .

  1. <! DOCTYPE html>

DOCTYPE tag is a standard common Markup language document type declaration, its purpose is to tell the standard common Markup language parser;

  1. <html></html>:

The largest tag on the page, which we call the root tag, wraps around the entire document

  1. <head></head>:

The head element is a container for all the header elements. Internal elements can contain scripts, direct the browser to a stylesheet, provide meta information, and so on.

  • title: Specifies the title of the entire web page, which is displayed at the top of the browser. It helps SEO search engine optimization.
  • meta: Provides basic information about the page, as in the example abovecharsetThis is code that tells the browser how to encode something that must be written, otherwise it might cause garbled code. If you save and the meta doesn’t match the declared meta, the browser will be garbled.
  • link: Introduces external resources, such ascss
  1. <body></body>:

body

Interview question: “What are common industry elements?” “Or” What are common block-level elements?

A: Common inline elements are: SPAN, a, strong, em, br, label, I, font… Common block-level elements are: div, P, ul, OL, form, H1-H6…

Semantic tag

HTML5 provides new semantic elements to define different parts of a web page, which helps us build the current mainstream web layout, as shown in the figure below:

  1. <header>
  • Present introductory information
  • It usually contains a set of introductory or navigational elements, such as title, Logo, navigation bar, search box, author name, and so on
  • Can’t put<footer>,<address>Or another one<header>Elements of the internal
  1. <nav>
  • Provide navigation links, such as menus, tables of contents, indexes, and so on, in the current document or other documents
  • It is used to place popular links, and less frequently used links are placed at the bottom of the footer
  1. <main>
  • Define the main content of a page. You can only use a page once.
  • If it’s a Web application, cover its main functions.
  1. <article>
  • Define page-independent content
  • Blog posts, newspaper articles, or web articles focused on a single topic
  • An article can be nested with an article, as long as the inside article and the outside article are part and whole.
  1. <section>
  • Define sections in a document
  • Such as a chapter, header, footer, or other part of a document.
  1. <aside>
  • Represents a section that has little to do with the rest of the page, or that does not affect the overall content
  • Usually placed in a sidebar, used to display ads, tips, references, related reading, recommended videos, etc
  1. <footer>
  • Defines the bottom area of the document, usually containing the author of the document, copyright information, terms of use for links, contact information, etc

HTML parsing

Optimizing the critical render path, the process by which the browser requests resource files (HTML, CSS, JS) and renders them to the browser screen, can greatly improve performance

  1. Build a DOM tree
  • The rendering engine parses the HTML document from the top down and converts the tags into DOM nodes in the content tree.
  1. Build CSSOM tree
  • The browser builds the CSSOM tree by parsing the style data from the style elements and external CSS files
  1. Build the Render tree
  • Combine the DOM and CSSOM trees into a Render tree
  1. Calculate the layout
  • Layout according to the render tree to calculate the geometry information of each node
  1. draw
    1. Draw the individual nodes to the screen.

Classic Interview questions

What happens when the browser goes from entering the URL to presenting the page?

3. Establish a TCP connection (three-way handshake) 4. Send HTTP request, find cache (strong cache and negotiated cache) 5. Disconnect TCP connection (wave four times) 6. Parsing resourcesCopy the code