Refer to the Netpath HTML tutorial for part of this article

A brief introduction to HTML

HTML, whose full name is HyperText Markup Language, was invented in the 1990s by Tim Berners-Lee, a CERN physicist.

1. Understand hypertext Markup Language

“Hypertext” refers to “hyperlinks” that can be clicked to jump to other web pages.

“Tag” refers to a “tag”, which marks a piece of text with a “tag”, so that the text has a special meaning or function.

2. Start with HTML

1. Basic structure

The basic HTML structure generated by CodesandBox:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Static Template</title>
</head>
<body>
  <h1>This is a static template, there is no bundler or bundling involved!</h1>
</body>
</html>
    
Copy the code

Everything in this structure is described next. In actual development, more content will be added based on this structure, and more content will be covered later.

2. <! DOCTYPE html>

, which represents the document type and tells the browser how to parse the web page.

<! DOCTYPEhtml>
Copy the code

Q: Browsers support multiple document types, such as SVG, XML, HTML, etc. How do I tell the browser that this is an HTML document?

A: Declare the document type with docType, tell the browser that this is an HTML document, and the browser will parse the document using HTML syntax.

3. <html>

The HTML tag is the root tag of the web page, and all other tags are its child tags. A web page can have only one HTML tag.

<html>Other labels...</html>
Copy the code

The lang attribute of an HTML tag that represents the default language for web content.

<! -- en for English -->
<html lang="en">
</html>

<! -- zh-cn stands for Chinese -->
<html lang="zh-CN">
</html>
Copy the code

Chrome’s “right-mouse-translate” feature uses this lang attribute as a reference aid.

4. <head>

The head tag is a child tag of an HTML tag and is used to place meta information on a web page. The content inside it will not be displayed on the web page.

<html lang="zh-CN">
  <head></head>
</html>
Copy the code

5. <body>

The body tag is a child of the HTML tag and a sibling of the head tag. Its contents will be displayed on the web page.

<html lang="zh-CN">
  <head></head>
  <body></body>
</html>
Copy the code

6. <meta>

Meta tags are placed in the head tag, which is used to set or describe the metadata of a web page. A web page can have multiple meta tags.

Set the character encoding of the web page

<meta charset="UTF-8">
Copy the code

Use the charset attribute in the meta tag to set the character encoding of the web page to UTF-8. It can also be set to another encoding, such as GBK or GB2312, but utF-8 is always used because UTF-8 supports all characters on earth.

In general, the character encoding is set on the first line of the head tag.

Note that the encoding method used for the web page should be the same as the encoding method used to save the web page file, otherwise it may cause garbled characters.

Adaptive mobile terminal

<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

Above code, you can make your web page on the mobile screen can be viewed normally.

Of course, the full “viewport” looks like this:

<meta name="viewport" content="Width =device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the code

Let IE use the latest kernel

<meta http-equiv="X-UA-Compatible" content="ie=edge">
Copy the code

The above code, you can let your web page in IE run, using the latest IE kernel to parse the web page.

7. <title>

The title tag is used to set the title of the page.

<title>Static Template</title>
Copy the code

8. <h1>

H1 tag, used to set the level 1 title of web page content. Generally, only one H1 tag is set for a web page.

<h1>This is a static template, there is no bundler or bundling involved!</h1>
Copy the code




Reproduced please indicate the source ~ ~