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.
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 :
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.
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
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.
##Value
Used By
##index Allowed Robot index 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
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!