Detailed explanation of meta columns in HTML5 WEB interface

This time I will bring you a detailed explanation of the meta column in the HTML5 WEB interface. What are the precautions for using the meta in the HTML5 WEB interface? The following is a practical case, let's take a look.

Introduction

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

meta is often used to define page descriptions, keywords, last modified date, and other metadata. This metadata will serve browsers (how the page is laid out or reloaded), search engines and other web services.

mata tag contains global attributes

charset

Declares the character encoding of the web page:

content

The content of the content attribute is the value of the htp-equiv or name attribute, depending on which one you use.

http-equiv

This attribute can contain the name of the HTTP header. The full English name of the attribute is http-equivalent. It defines directives that can change the behavior of server and user-agent. The value of this directive is defined within the content attribute and can be one of the following:

content-language (obsolete)

Defines the default language for the page. It can be overridden by the lang attribute on any element.

Pragma

Prevents the browser from accessing page content from the local computer's cache. For example:

expires

can be used to set the expiration time of the web page . Once a web page expires, it must be retransmitted to the server.

cache-control

Specifies the caching mechanism that requests and responses follow. There are several usages:

no-cache: Send a request first and confirm with the server whether the resource has been changed. If not, use cache.
no-store: No caching is allowed. You have to go to the server every time and download the complete response. (Security measure)
public : All responses are cached, but are not required. Because max-age can also achieve the same effect
private: only cached for a single user, so no relay is allowed to cache. (For example, CDN does not allow caching of private responses)
max-age: Indicates how long the response can be cached and reused starting from the current request without re-requesting the server. For example: max-age=60 means that the response can be cached and reused for another 60 seconds.

content-security-policy

Allows page authors to define the content policy for the current page. Content policies primarily specify allowed server addresses and scripting endpoints, which help prevent cross-site scripting attacks.

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

CSP greatly enhances the security of web pages. Even if an attacker discovers a vulnerability, he or she cannot inject a script unless he also controls a whitelisted, trusted host. There are two ways to enable CSP. One is through the Content-Security-Policy field of the HTTP header.

Content-Security-Policy: script-src 'self'; object-src 'none';

style-src cdn.example.org third-party.org;child-src https :

##In the above code, CSP has the following configuration:

Script: Only trust the current domain name

Tag: Do not trust any URL, that is, do not load any resources
Style sheet: Only trust cdn.example.org and third-party.org
Framework (frame): Must use HTTPS protocol to load
Other resources: No restrictions
When enabled, external resources that do not comply with CSP will be blocked from loading.

More introductions can be found: Content Security Policy Getting Started Tutorial

content-type (obsolete)

Define the MIME type of the document, followed by its character encoding.

Do not use this value as it is obsolete. It is recommended to use the charset attribute on the element.

Since the document type cannot be changed in XHTML serialization for XHTML or HTML5, do not use the Set MIME type to the XHTML MIME type.
refresh

This directive specifies:

If the content attribute contains only a positive integer, it indicates the number of seconds for the page to be reloaded.

If the content attribute contains a positive integer, followed by the
string '; url =', it means that the current page will be redirected to another valid URL after XX seconds.

robots

Robots are used to tell the crawler which pages need to be indexed and which pages do not need to be indexed.

##Value

Used By

##index Allowed Robot index this page (default) All

noindex Do not allow robot to index this page All

follow Allow search engines to continue to search other web pages through the link index of this page (default) All

nofollow Search engines do not continue to search other web pages through the link index of this web page All

none Equivalent to noindex, nofollow Google

noodp Prohibits the use of Open Directory Project descriptions (if any) ) as a page description in search engine results. Google, Yahoo, Bing

noarchive Requires search engines not to cache page content Google, Yahoo, Bing

nosnippet Prohibits any description of the page from being displayed in search engine results. Google, Bing

noimageindex Requests that this page not be displayed as an index image of the referencing page. Google

nocache Synonymous with noarchive Bing

viewport

Provides hints about the size of the initial size of the viewport. For mobile use only.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to insert a video into an HTML webpage

How to make an HTML text box read-only effect

How to make the front-end interface automatically clear the cache of js and css files

The above is the detailed content of Detailed explanation of meta columns in HTML5 WEB interface. For more information, please follow other related articles on the PHP Chinese website!