First, front-end development of three sets

The most basic knowledge of front-end development is the starting point for front-end engineers and the partner to accompany us throughout our career.

  • HTML (Hyper Text Markup Language) : Build the basic structure of the page;
  • CSS (Cascading Style Sheet) : Define how the front page should look;
  • JS (JavaScript) : Realize page interaction and other functions.

A brief history of HTML[1]

  • HTML 1.0: Released as an Internet Engineering Task Force (IETF) working draft in June 1993, the first version of the hypertext Markup Language was born.
  • HTML 2.0: released as RFC 1866 in January 1995, HTML 2.0 was declared obsolete after its release in June 2000.
  • HTML 3.2: W3C recommendation dated 14 January 1997.
  • HTML 4.0: December 18, 1997, W3C recommendation.
  • HTML 4.01 (minor improvement) : December 24, 1999 W3C recommendation.
  • HTML5: HTML5 is recognized as the next generation Web language, which greatly improves the ability of the Web in rich media, rich content and rich applications, and is hailed as an important driving force that will eventually change the mobile Internet. October 28, 2014 W3C recommendation.

HTML structure

Let’s start with an example.

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

The HTML file is in a tree structure. The character wrapped in Angle brackets is called a tag. Most tags have an opening tag and a closing tag.

3.1 <! DOCTYPE html>

declaration is not an HTML tag; It is used to tell the Web browser which HTML version of the page is used.

Now that HTML 5 is ubiquitous, we need to declare document types this way when we write HTML during front-end development. This is the only DOCtype specified by HTML 5.

In browsers that support HTML 5, if you do not write this declaration, the browser will automatically supplement it; But for older Versions of Internet Explorer that don’t support HTML 5, if you don’t write this declaration, the display will be biased. For compatibility purposes, this declaration is usually written on web pages.

3.2 <html></html>

This is the root element of the page, and all the other tags are wrapped around this tag.

3.2.1 <head></head>

The head tag mainly contains browser-specific elements and some elements that are not visible to the user.

  • title: The title of the page that is displayed in the browserThe title bar;
  • meta: meta tag, which can hold information such askeywors,descriptionSEO related information, visible in search engines,Not visible in the web page.
  • link: link tag, used to bring in external static resources, for examplefavicon,CSSAs well asJSFile, etc., the labelIt is not restricted by the same origin policy.
  • style,script: CSS, JS code can be directly written in HTML files.

3.2.2 <body></body>

The body tag contains content that is displayed in the browser theme area. Common tags can be divided into three categories:

  • Inline elements
  • Block-level elements
  • Inline block-level elements

The main differences are as follows:

Inline elements Block-level elements Inline block-level elements
The width of the The width of the content cannot be set 100% of the parent container width, configurable Content width, configurable
highly Do not set Can be set up Can be set up
margin Only left and right, not up and down normal normal
padding Only left and right, not up and down normal normal

Common inline elements and block-level elements are sorted as follows: [2]

Inline elements Block-level elements
a address
abbr blockquote
big center
br div
cite dl
code form
em H1 headings such as
font hr
i menu
img ol
input p
kbd table
label ul
select –
small –
span –
strong –
sub –
sup –
textarea –

The left and right columns of the table do not correspond.

Element conversion can be done by setting the display attribute in the element style.

If you set an element to float: left/right; , the element becomes a block-level element and has a float property.

If you set an element to position: Absolute /fixed; , the element will also become a block-level element and comply with the new positioning requirements.

4. Semantic labels

HTML 5 introduced semantic tags. Using semantic tags increases the readability of HTML files. Here is a comparison of two pieces of HTML text using only div tags and using semantic tags.

<! -- Just use div -->
<body>
  <div class="header">
    <div class="nav"></div>
  </div>
  <div class="main">
    <div class="section"></div>
    <div class="section"></div>
    <! -... -->
    <div class="article"></div>
  </div>
  <div class="aside">
    <div class="nav">
  </div>
  <div class="footer"></div>
</body>
Copy the code
<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <section></section>
    <section></section>
    <! -... -->
    <article></article>
  </main>
  <aside>
    <nav></nav>
  </aside>
  <footer></footer>
</body>
Copy the code

Not all semantic tags have a default style, but semantic tags are important for code readability.

Here is a summary of common semantic tags and their meanings in HTML 5.

Tag name meaning
header At the top of the column
nav The navigation bar
article An article or a piece of content
section It appears in the document outline
aside Sidebar, secondary information
footer At the bottom of the column
figure The chart
figcaption Picture, table
blockquote reference
dl/dt Key/value pair
cite reference
time Time (a machine can only read a time or date in a particular format)
address address
mark tag
code code
small Small font for notes
track subtitles

5. HTML parsing

5.1 The seemingly simple “surfing the Internet” has such a deep way

Classic interview question: What happens between typing the url into the browser’s address bar and seeing a web page?

When the user enters a keyboard character, the keyboard controller generates scan code data and buffers it in a keyboard controller register… [3]

Not skin not skin 😂

  • URL parsing[4]
    • Check whether the URL format is valid
    • HSTS enforces HTTPS access
    • Other operations (such as access restrictions)
    • Check the cache
      • Cached – Page loaded successfully
      • No cache – Continue down
  • Resolves the IP address corresponding to the domain name
    • Local DNS cache
      • Browser cache
      • Operating system cache
      • Router cache
      • Local DNS server cache
    • Root DNS server
      • recursive
      • The iteration
  • Requesting HTML files
    • HTTP
      • Build the HTTP request header and request body
    • TCP
      • Construct the TCP request header and request body
      • The three-way handshake establishes a TCP connection
    • IP
      • Add the source IP address and destination IP address
    • Ethernet framing
    • The server receives the request
      • Reverse the process
  • The server processes the request
    • Main process listening
    • The child processes the request
  • Browser receives response
    • Analyzing resources (Response Header)
    • Unpack the
    • The cache
  • Parsing HTML files
    • decoding
    • Preliminary analysis
      • Request a static resource file
    • symbolic
      • Parsing HTML – specific tags
  • Apply colours to a drawing
    • Build the DOM
    • Build VSSOM
    • Merge DOM and CSSOM to build the render tree
    • Calculate the layout
    • draw

Of course, in the beginning of HTML, you can simply understand the final “rendering” part, later through this expansion of learning, broaden the breadth of knowledge, deepen the depth of knowledge.

5.2 Redraw and reflow

There are two other concepts related to HTML rendering, redraw and reflow.

Just look at the concept is too boring, let’s take an example 🌰.

We have now drawn a picture of an apple, a banana and an orange from left to right. The apple on the painting is red, we feel bad, and if we want to change it into deep space gray, we just need to brush the apple with a new color, which is called repainting. When we handed in the painting, the teacher said that our canvas was too big and there was too much white space. He asked us to change a smaller canvas and remove the black apple. So we redrew the picture, made the bananas and oranges smaller, put them on a smaller canvas, and left the apples out, and that’s reflux.

Chestnut 🌰 a fry will “collapse open”, may not be too “rigorous (tight)”, so we still need to see a more authoritative explanation [5] 👇.

  • redraw

When a change in the style of an element in a page does not affect its position in the document flow (e.g., color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it, a process called redraw.

  • Reflux (rearrangement)

When the size, structure, or attributes of some or all of the elements in the Render Tree change, the process by which the browser rerenders some or all of the document is called reflux.

Operations that cause backflow:

  • Page first render
  • The browser window size changed. Procedure
  • The size or position of the element changed
  • Element content changes (number of words or image size, etc.)
  • Element font size changes
  • Add or remove visible DOM elements
  • Activate CSS pseudo-classes (such as: :hover)
  • Query some properties or call some methods

Some common properties and methods that cause backflow:

  • ClientWidth, clientHeight, clientTop, clientLeft
  • OffsetWidth, offsetHeight, offsetTop, offsetLeft
  • ScrollWidth, scrollHeight, scrollTop, scrollLeft
  • ScrollIntoView (), scrollIntoViewIfNeeded ()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

Now that we know the basics of HTML, we can try to tag a piece of text with HTML and open it in a browser.

Practical small projects are linked here [6]

reference

[1] A brief introduction to HTML and the History of The Development process – Like the Masters – Blog Garden

[2] SegmentFault [J]

[3] What happens during the operating system when the A is typed – Bloggarden

[4] What happens when you enter the URL in the browser and press Enter (super detailed version) – Zhihu Column

[5] Reflow & Repaint in browsers — Nuggets

[6] tag letters – learning Web development | MDN