When writing a front-end page, the page structure is usually quickly generated by the editor. There is a meta tag in the page header. What does this tag do?

In MDN he defines it like this:

The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

The type of metadata defined by the meta element:

  1. The itemprop attribute is set, and the meta element provides user-defined metadata.

  2. The charset attribute is set, and the meta element is a character set declaration that tells the document which character encoding to use.

  3. The name attribute is set, and the meta element provides document-level metadata that applies to the entire page.

  4. If the hettp-equiv attribute is set, the meta element is a compilation directive, providing the same information as a similarly named HTTP header.

Among them, the values of the name attribute and the http-equiv attribute change a lot, and the following will focus on the introduction of these two:

1. name attribute

name is used together with content, the former indicates the name of the metadata to be represented, and the latter is the value of the metadata.

1. author;

Used to indicate the author’s name of a web page, such as an organization or institution.

2. description;

Is a short and precise description of the content of the page.

3. keywords;

Keywords related to page content, separated by commas. Some search engines use these keywords to classify documents when they encounter them.

4. viewpoint;

Provides an indication of the initial size of the viewport, for mobile devices only.

(1). width is used to set the width of the viewport to the device width;

(2). initial-scale is the zoom ratio between the device width and viewport size;

5. robots;

Indicates the crawler’s processing behavior on this page, which is used for search engine crawling.

(1). All search engines will index this web page, and the index files that continue to pass through the links of this web page will be retrieved;

(2). none The search engine will ignore this page;

(3). index The search engine indexes this web page;

(4). follow The search engine continues to search other web pages through the link index of this web page;

6. renderer;

Used to specify the rendering method of dual-core browsers.

(1). webkit default webkit kernel;

(2). ie-comp The default IE compatibility mode;

(3). ie-stand Default IE standard mode;

2. http-equiv attribute

http-equiv is also used together with content, the former indicates the name of the metadata to be represented, and the latter is the value of the metadata.All allowed values for http-equiv are the names of specific HTTP headers.

1. X-UA-Compatible;

It is used for IE browser adaptation.

(1). IE=edge is rendered with the latest version supported by the current browser. The range supported by this attribute is IE8-IE11;

(2). chrome=1 If the current IE browser has the Goole Chrome Frame plug-in installed, the chrome kernel will be used to render the page;

(3). Both exist. If there is a chrome plug-in, it will be rendered with the chrome core. If not, it will be rendered with the highest version supported by the current browser;

You may have noticed that if this property is also set in our http header and it conflicts with the one set in meta, which one takes precedence?

The answer is: developer preferences take precedence over web server settings, i.e. meta takes precedence.

2. content-type;

Used to declare the document type and charset.

3. x-dns-prefetch-control;

Generally speaking, the a tag in the HTML page will automatically enable DNS early resolution to improve website performance, but it is invalid in websites using the https protocol. We can set this attribute, and then set the value of content to on to open dns Early parsing of a tags.

4. cache-control,Pragma,Expires;

Settings related to caching, but these often do not take effect. We generally set caching policies through http headers.