Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this article① Fundamentals of HTML


1. What does DOCTYPE do? How to write? 2. List common labels and briefly describe the scenarios in which these labels are used. 3. Garbled characters appear on the page. Why? How to solve it? 4. What are the functions of the title and Alt attributes respectively? 5. How to write HTML comments? 6. Why only write in HTML5<! DOCTYPEhtml>? 7. Data - What does the attribute do? 8.<img>What's the difference between title and Alt? 9. What are Web standards and W3C standards? What does DOCTYPE do? How to distinguish strict mode from promiscuous mode? What do they mean? 11. What are HTML Global attributes? 12. Which of the following multimedia formats is most widely supported? ❌. M3u8 ✅. Mp4 ❌. WMV ❌. FLV alde.mov 13. Open a page, found the page appeared garbled, the following statement is correct: ✅ English and numbers will not appear garbled, Chinese may appear. ❌ just add the HTML head tag<meta charset="UTF-8">We can definitely solve the problem of garbled code. ✅ add the HTML head tag<meta charset="UTF-8">Does not necessarily solve the problem of garbled characters. Set the meta charset attribute in the HEAD tag of the HTML to the same encoding format used for the ✅ page. 14. What is true about browser garble? ❌ just set it in the HTML head tag<meta charset="UTF-8">We can definitely solve the problem of garbled code. ✅ Editing files with the wrong editor, such as Windows Notepad, often results in garbled characters. ✅ HTML save time need to pay attention to save the encoding format, save what format, set<meta charset="xxx">XXX is the encoding format for saving the file. ❌ If the HTML contains only English and numbers, there will be no garbled characters, so there is no need to set charset in the HTML.Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Foreword: Learning front we have a not very accurate but more vivid metaphor ~

  • Land construction house first — HTML;
  • Then the house is built after hard decoration — CSS;
  • Then install doors, Windows, tap water, light switches, lights, etc. — JavaScript;
  • …

In the next series of articles, we will start to build the house on the ground and then do a hard decoration.


1 know HTML

Cliches (01) input from the URL to the page to show what happened behind | Web front knowledge “, we recognize the network work of the entire process. A quick review of the article:

The process from URL input to page presentation is as follows:

  • Enter the URL in the browser;

  • The browser searches for the IP address corresponding to the domain name.

  • The browser connects to the server based on the IP address.

  • Browser to server communication: The browser requests, and the server processes the request and renders the page.

Then we work backwards:

First, the server handles requests and renders pages: The Web server is an advanced workhorse that is on call 24 hours a day, ready to handle requests from the Web browser. Upon a request, the Web server feeds the HTML file (HyperText Markup Language) that is embedded in its body (each server stores HTML files, images, sounds, and other types of files) back to the Web browser with appropriate processing.

Second, the Web browser gets feedback on how to display the page: HTML is the key to how the browser displays the page. It tells the browser how the page is structured and all the content. When the Web browser reads the HTML file from the server, it translates all the markup in the text (telling the browser where to put headings, where to put paragraphs, which text to emphasize, and so on).


Start writing an HTML

  • ✅ Task: Write the following images in HTML and familiarize yourself with each element.

2.1 Step 1: Open the editor

Open a Notepad/text Editor – The first half of the month strongly recommends typing out code one by one using the simplest text editing tool you can find.

2.2 Step 2: Analyze the structure

2.3 Step 3: Mark the text

<! DOCTYPEhtml> <! -- ❗️
<html> <! -- ❗️

<head> <! -- ❗️
  <meta charset="UTF-8"> <! -- ❗️
  <title>Front 10,000 hours</title> <! -- ❗️
</head> <! -- ❗️

<body> <! -- ❗️
  <img src="HTML image" alt="HTML Home page"> <! -- ❗️

  <! -- Let's write this page --> <! -- ❗️
  <h1>1) HTML based</h1> <! -- ❗️
  <p>Learning time: 2 hours...</p> <! -- ❗️
  <p>Foreword: Learning front end we have a metaphor: lay the foundation first...<br> <! -- ❗️So in the next series of articles, we'll start with our...</p> <! -- ❗️
  <h2>1 know HTML</h2>
  <p>Ten thousand hours in front of Oli's...</p>
</body> <! -- ❗️

</html>
Copy the code
  • Note 1:
<! DOCTYPEhtml>
Copy the code

Each page starts with a DOCTYPE, which specifies the document type of the page for the browser so that the browser can render HTML more correctly. As long as you write in this format and location, the browser will assume that you are using standard HTML.

The advantage of this is that you don’t have to specify both the HTML version number and the standard location of the HTML document, as you did before HTML5 came out. Once and for all, no matter how much HTML is updated, our documents can be displayed in the most correct way by the browser.

  • Note 2.
<html>
Copy the code

We must start our page with a < HTML > tag and end it with a
tag. Note that the closing tag has an extra “/”. The whole thing that contains the opening tag + content + closing tag is called an element. For the < HTML > element, everything in the page is nested within this element.

The so-called “nesting” : it refers to an element can be placed in another element inside (like building a house: the whole house is a whole, after entering the door, there will be a kitchen, toilet, living room, bedroom and other individuals, and there may be a cloakroom, a toilet, etc.);

❗️❗️ port note: in the actual writing of the code, and are generally placed horizontally with < HTML > and do not need to be strictly nested. Throughout my “10,000 hours on the front end” series, I have followed the following structure (which is the default structure for every code editor), except for a few areas where I need to emphasize DOM structures and methods:

💡 Of course, you want to write strictly nested<head> 和 <body> 与 <html>The hierarchy of, can also be:

  • Note 3, Note 7:
<head>

<body>
Copy the code

Only the and elements can be placed directly inside the < HTML > element:

  • <head>In the main put some irrelevant to the current page content, but carry some of the page description tag – you can set its meta, title, you can put CSS, these parts will not be seen by the user;
  • <body>Inside are the elements that relate to the content of the page — the content you want the user to see.





  • Note 4:
<meta charset="UTF-8">
Copy the code

“Meta” refers to something we tell the browser about our page.

“Charset” is an attribute of the
tag, and all of our start tags can have attributes. Here, we specify the character encoding in the Charset property.

“Utf-8” is one of the Unicode encodings, the most widely used implementation of Unicode on the Internet. It is a code designed for transmission and makes the code borderless so that it can display characters from all cultures in the world — whether they are letters, numbers, Chinese, Arabic, etc.

❗️ Garbled characters

  • When we save a written HTML file, the encoding is saved as UTF-8.

  • A file is a pile of data, where what we write becomes a pile of data. So is it 123, or is it 456?

  • Here we use the “encoding”, using different encoding methods, so the state of the data will be different;

  • Then, when we display the properly encoded data again on a browser page (or open it with another editor), the data has to be recovered again;

  • At that point, the browser (or editor) needs to decode the file using the same encoding that corresponds to the file (but the browser can’t do everything; it doesn’t know how to decode it until you tell it).

  • At this point, when encoding is one way and decoding is another, the page will appear “garbled”;

  • The way to solve the problem is to simply know what encoding I’m saving the HTML file in when the editor saves it, and then tell the browser in the header how to decode it.


  • Note 5:
<title>Oli's front end 10,000 hours</title>
Copy the code

The element must contain a

element in the right place:

  • Note 6:
</head>
Copy the code

End tag for the header element.

  • Note 8:
<img src="HTML image" alt="HTML Home page">
Copy the code

Here is an element, img=image image. As we know, AN HTML page is plain text, and images are never directly displayed as part of the page; they are presented externally (by linking).

When our browser sees this element, instead of displaying the content directly on the page, as we would with

or

elements, we need to fetch the image from the Web server and display it.

💡 Common image formats on the Web are JPEG, PNG, and GIF:

  • JPEG: Best for photos and other complex images;
  • PNG or GIF: Best for logos and other simple graphics that contain monochrome, lines, or text.


  • Note 8: has two necessary attributes — SRC and Alt.

    • SRC: short for source, indicating where the image came from (this can be followed by the path to the file or a URL to the file);
    • Alt: This property is mainly used to avoid – for example, if our browser doesn’t display the image well due to external factors such as network speed differences, hardware limitations, etc., the text behind Alt will replace the image to tell the user what to expect (see the final page rendering later).

  • Note 9:

<! -- Let's write this page -->
Copy the code

This is used to write our comments so we can read them, modify them, etc. Nothing in this section is displayed by the browser.

  • Note 10:
<h1>1) HTML based</h1>
Copy the code

There is a

opening tag to indicate that this sentence is a level 1 heading. Our title can go down to < H6 >, but in practice, it usually goes to < H3 >.

  • Note 11:
<p>Learning time: 2 hours...</p>
Copy the code

“P” is the meaning of the “paragraph”. So here

opens a paragraph.

  • Note 12:
  <p>Foreword: Learning front end we have a metaphor: lay the foundation first...<br> <! -- ❗️So in the next series of articles, we'll start with our...</p> <! -- ❗️
Copy the code

The

element, which is our HTML element for line breaks. “Br” = “break”

Notice that if an element doesn’t have any actual content, only a start tag and an end tag. So this element can be simply shortened to a start tag. Such elements are called “void elements” — empty elements, such as

elements, elements, etc.

❗ ️ note:

  • In the SPECIFICATION of HTML5, the self-closing tag does not add a slash, but it is compatible with the writing method of adding a slash;
  • XHTML strictly requires slashes in self-closing tags;
  • The HTML file declares<! DOCTYPE html>After, do not add a slash to the self-closing label.

(🏆 summary: in specific actual combat, it is recommended to add a slash, such as

, , , etc.)

  • Note 13:
</p>
Copy the code

Never forget what tags a complete element contains: element = start tag + content + end tag.

  • Note 14:
  </body>
</html>
Copy the code

End of the entire body element, and end of the entire < HTML > element below. These are indispensable markers.

2.4 Step 4: Save related files

Create a new folder in your favorite location on your computer to store all the relevant files, images, etc from our exercise.

2.5 Step 5: Save

Save the document we wrote above as an.html file and remember to encode it utF-8. Save this file in the folder created in step 4.

2.6 Step 6: Complete and test

Open the HTML document in your browser. Review the comments in step 3 to see what each tag corresponds to on the page (❗️ this step is important!). .

🔗 effect and source link

Postscript: In this tutorial, we learned about the basic structure of HTML and wrote the first page that can be displayed in a browser. In the next article, we’ll take a closer look at the other important elements of HTML (lists, hyperlinks, tables, audio and video, etc.) and their corresponding attributes.

I wish you good, QdyWXS ♥ you!