Detailed explanation of html meta

The Meta tag is an auxiliary label in the HEAD area of ​​the HTML language.

Meta is often used to define the instructions, keywords, and finally modify the date, and other metadata. These metadata will serve the browser (how to layout or re -load page), search engines and other network services.

MATA label contains global attributes (https://developer.mozilla.org/en-s/docs/web/global_attributes)

Declaration of the character code of the webpage:

 <meta charset = UTF-8>

The content of the Content attribute is the value of the HTP-Equiv or name property, which depends on which one you use.

This attribute can contain the name of the HTTP header, and the full English name of the attribute is HTTP-EQUIVALENT. It defines instructions that can change the behavior of Server and User-Agent. The value of this instruction is defined in the Content property, which can be one of the following:

Define the default language of the page. It can be covered by the LANG property on any element.

The browser is prohibited from visiting the page content from the cache of the local computer. like:

 <meta http-equiv = Pragma Content = no-Cache>

Can be used to set the expiration time of the webpage. Once the webpage expires, it must be re -transmitted on the server.

Specify the cache mechanism of requests and response to follow. There are the following methods of use:

No-Cache: Send a request first, confirm whether the resource is changed with the server, and if it is not changed, use the cache.

No-Store: Do not allow caches, go to the server every time, download a complete response. (Safety measures)

Public: Caches all responses, but not necessary. Because Max-Age can also achieve the same effect

Private: Only a single user cache, so no relay cache is allowed. (For example, CDN does not allow cache Private response)

Max-Age: The current request begins, how long the response can be cached and reused without going to the server to re-request. For example: max-age = 60 means that the response can be cached and reused for 60 seconds.

Allow the author to define the content strategy of the current page. The content strategy mainly specifies the allowable server address and script endpoint, which helps prevent Cross-SITE Scripting attack.

The essence of CSP is the white list system. Developers clearly tell the client that which external resources can be loaded and executed, which is equivalent to providing a white list. Its implementation and execution are all completed by the browser, and developers only need to provide configuration.

CSP greatly enhances the security of the webpage. Even if the attacker finds the vulnerability, he cannot inject the script, unless he still controls a credible host listed in the whitelist. Two methods can enable CSP. One is a field of Content-Security-Policy through HTTP header information.

 Content-Security-POLICY: Script-SRC 'SELF'; Object-SRC 'None'; Style-SRC CDN.Example.org Third-PARTY.org; Child-SRC HTTPS:

The other is the label of the webpage.

 <meta Http-Equiv = Content-Security-Policy Content = script-src 'seld'; -SRC https:>

In the above code, the CSP made the following configuration:

Script: Trust the current domain name

Tags: No URL, that is, do not load any resources

Style table: only trust cdn.example.org and Third-party.org

Frame: Must be loaded with the HTTPS protocol

Other resources: No restrictions

After opening, the external resources that do not meet the CSP will be prevented from loading.

More introduction: Content Security Policy Getting Started Tutorial

Define the MIME type of document, and then encode it with its characters.

Don't use this value because it is out of date. It is recommended to use the Charset attribute on the element.

Because the type of documentation cannot be changed in the XHTML serialization of XHTML or HTML5, do not use the MIME type to set the MIML MIME type.

This instruction specifies:

If the Content attribute contains only one positive integer, it represents the number of seconds of seconds loaded on the page.

If the conference attribute contains a positive integer, and then the string '; url =', then it means that the current page xx is redirected to another valid URL.

 <meta http-equiv = refresh content = 2; url = http://www.vevb.com/> // meaning to jump to VEVB Wulin.com after 2 seconds

Define the Cookie of the page. The corresponding Content value must follow the IETF HTTP COOKIE Specification (https://tools.itef.org/html/draft- HTTPState-cookie-14)

Do not use this instruction, use the set-cookie of http header (https://developer.mozilla.org/en-s/docs/web/http/headers/set-cookie) instead

It is used to tell the browser to render the page.

 <meta http-equiv = x-ua-composition content = ie = edge, chrome = 1/> specify IE and Chrome to render the current page with the latest version

The definition of the name attribute belongs to the Document-level metadata. It cannot be set at the same time as the following attributes: Itemprop, HTTP-EQUIV, or Charset.

The name of the meta -data data is associated with the value of the Content attribute. The possible value of the name attribute is:

Define the name of the application running on the webpage.

Used to mark the author of the webpage.

Including a description of the thumbnail of page content. Some browsers, such as Firefox and Opera, use this default description as a web bookmark.

It is used to indicate what software is made by the webpage.

Used to tell the search engine, the keywords of your webpage

If the page is not updated frequently, in order to reduce the pressure of search engine crawlers to the server, you can set up a re -visit time for a crawler. If the re -visit time is too short, the crawler will be accessed according to the default time they defined. Example:

 <meta name = Revisit-aFTER Content = 7 Days>

Renderer is prepared for dual -core browsers to specify how the dual -core browser renders the page by default. For example, 360 browser. Example:

 <meta name = renderer content = webkit> // The default webkit kernel <meta name = renderer content = IE-COMP> // The default IE compatibility mode <meta name = Renderer Content = IE-SAND> // default I E standard mode

Referrer controls the referer http header (https://developer.mozilla.org/en-us/docs/web/http/reFerer in the Request request of Docume. The corresponding value is in Content:

Robots use to tell reptiles which pages of pages need indexes and which pages do not require indexes.

Provides a prompt on the size of the initial size of viewport. For mobile devices only.

Common usage

Forbidden scaling:

 <meta name = Viewport Content = Initial-Scale = 1.0, Minimum-SCALE = 1.0, Maximum-SCALE = 1.0, User-SCALABLE = no/>

Automatically refresh the webpage

You can set the page refresh operation after a period of time. Meta HTTP-Equiv = Refresh can specify the browser to delay the automatic refresh page for a period of time. The Meta-TAG specifies the browser below automatically refresh every 5 seconds.

 <meta http-equiv = refresh content = 5 ″ />

Automatic redirection

We can use Refresh Meta tags to redirect the page. The following example will visit www.vevb.com after 5 seconds

 <meta http-equiv = refresh content = 5; url = 'http://www.vevb.com'/>

Forbidden browser cache

When we test the webpage locally, the new content is not updated in time, and there may be a browser cache. At this time, we can solve it as long as we disable the browser cache by using Meta tags. The general code is as follows:

 <meta HTTP-EQUIV = Expires Content = 0> <Meta HTTP-EQUIV = Pragma Content = No-Cache> <Meta HTTP-EQUIV = Cache-CONTROL Content = No-Cache>

Destination of Baidu transcoding

 <meta http-equiv = cache-Control Content = no-sizeApp/>

In mobile development, the code that shields the number as the phone number:

 <meta content = Telephone = no name = format-detection />

refer to

Mdn html element (https://developer.mozilla.org/en-s/docs/web/html/element/meta))