The related tags in the head tag are invisible and only correspond to the basic information (meta information) used on the web page.

Open an editor tool you’re good at and create index.html.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>
Copy the code

It provides information that is not visible to the user.

Composition of meta tags

The meta tag has two properties: HTTP-Equiv and NAME. Each of these properties has a different parameter value. These different parameter values enable different web functions.

Common meta tag attributes

HTTP – equiv properties

It is used to convey some useful information to the browser to help the browser correctly display the content of the web page. The corresponding property value is content, and the content in content is actually the variable value of each parameter.

In the HTML4.01 version, we used the following configuration to specify the character encoding of HTML documents.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Copy the code

But in the HTML5 version, we use a more simplified way to specify the character encoding of HTML documents.

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

What is a character set

Movable type printing, all Chinese characters have a small seal, which is needed to take the character. But two people both invented it. Lao Wang invented one, Lao Li invented another. For example, the same Chinese character, “chuan” in Lao Wang’s character library is the second big plate, row 4, column 43. And the Chinese character “pass” in Lao Li’s character library is the fifth big plate, the sixth row, and the thirteenth column.

The computer cannot store Chinese characters directly, but stores codes. Therefore, the computer records the word “pass”, which is recorded in this way:

Lao Wang: 20443 Lao Li 50613 has two character libraries UTF-8 and GB2312.

Utf-8 is an international font that contains all human languages on earth, such as Arabic, Chinese, other languages…

Gb2312 is the NATIONAL standard, is the Chinese character database, which only covers Chinese characters and some commonly used foreign languages, such as Japanese katakana, and common symbols.

Font size: UTF-8 (full characters) > GB2312 (Chinese characters only)

We can use the meta tag to declare the current HTML document font, but must be the same as the saved type, otherwise it is garbled! (key)

When not set, the default type for sublime is UTF-8. When changing to GB2312, be sure to set the save type for sublime: File → Set File Encoding to → Chinese Simplified(GBK)

Note that since UTF-8 contains all the human languages in the world, it takes more code to describe a Chinese character.

Utf-8 ** stores 3 bytes of a Chinese character. Gb2312 stores 2 bytes of a Chinese character. **

Save size: UTF-8** (fatter, slower to load) > GB2312 ** (smaller, faster to load)

Conclusion:

Utf-8 characters, a variety of languages, but save large size, file bloated;

Gb2312 words less, only Chinese and a few foreign languages and symbols, but the size is small, compact file.

List two usage scenarios:

(1) Your company is engaged in Japanese animation, some Japanese animation names often appear, and the web page should use UTF-8. Japanese cannot be displayed if gb2312 is used.

(2) Your company is the Chinese web page, extreme pursuit of the display speed of the web page, to use GB2312. If you use UTF-8, each Chinese character will have an extra byte, so 5000 Chinese characters, an extra 5KB.

  • Qq net, netease, Sohu are using GB2312. These companies, they’re all about display speed.

  • Xinhua Tibetan channel uses UTF-8 to ensure the number of character sets.

The browser uses the meta to determine what character set you are using. For example, if you save the meta and the declared character set do not match, the browser is garbled.

name

Keywords and descriptions are mainly used for pages and are written to search engines. Keywords can be separated by “, “and the corresponding attribute value is content. The content in content is mainly used for search engine robots to find information and classify information.

<meta name="Keywords" content="Netease, email, games, news, Sports, entertainment, women, Asian Games, forums, SMS" />
Copy the code

These keywords, is to tell the search engine, this page is what, can improve the search hit ratio. Make yourself available, searchable.

<meta name="Description" content="Netease is a leading Internet technology company in China. It provides users with free email, games and search engine services, and provides more than 30 content channels, including news, entertainment and sports, as well as interactive exchanges, such as blogs, videos and forums. />
Copy the code

Set the Description page Description, and baidu search results will display these statements, a technique called SEO (Search engine Optimization).

The title tag

It is mainly used to tell users and search engines what the main content of this web page is. Search engines can quickly judge the theme of the current web page through the page title.

Let’s say we open Baidu.