This is the 7th day of my participation in the August More Text Challenge

define

HTML elements represent metadata that cannot be represented by other HTML meta-related elements, such as , ,

The most common uses are as follows:

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

The Meta tag supports charset, HTTP-equiv, Name, and Content.

attribute

charset

This property defines the code set for the page. Suggest utf-8.

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

content

This property contains the value of the HTTP-equiv or name property, depending on the value used.

<meta name="aaa" content="bbb">
<meta http-equiv="xxx" content="yyy">
Copy the code

http-equiv

Define instructions for compilation. This property is named http-equiv(alent) because all allowed values are HTTP specific header fields. It defines the header field name, and content defines the field value.

Deprecated properties content-language, Content-Type, and set-cookie are recommended

Normally used properties:

  • Content-security-policy: indicates the content security policy
  • Refresh, timed redirection

The sample

<! -- Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https -->
<meta http-equiv="Content-Security-Policy" content="default-src https:">


<! -- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://www.mozilla.org">
Copy the code

name

This property defines the name of the document-level metadata. This property cannot be set if ItemProp, HTTP-equiv,or Charset are defined.

This data name is associated with the value contained in the Content property.

Common name field

  • Author: Indicates the author of a document
  • Keywords: description of keywords on the page, separated by commas
  • Description: Describes the page content
  • Viewport: provides hints about the size of the viewport initialization, with the following content values for mobile devices only
Value Possible values describe
width A positive integer or string device-width Defines the width of the viewport in pixels.
height A positive integer or the string device-height Define the height of the viewport in pixels.
initial-scale A positive number between 0.0 and 10.0 Defines the scaling ratio between device width (width in portrait mode or height in landscape mode) and viewport size.
maxinum-scale A positive number between 0.0 and 10.0 Define the maximum scale; It must be greater than or equal to the value of minimum-scale. This rule can be ignored in browser Settings and is ignored by default in iOS10+
minimum-scale A positive number between 0.0 and 10.0 Define the minimum value for scaling; It must be less than or equal to the value of maximum-scale. This rule can be ignored in browser Settings and is ignored by default in iOS10+
user-scalable A Boolean value, yes or no Assuming it is set to no, the user cannot zoom the page. The default value is yes. This rule can be ignored in browser Settings and is ignored by default in iOS10+

The following is an example:

<meta name="author" content="Playing the piano to the horse.">
<meta name="keywords" content="Front end">
<meta name="description" content=This is the front end> 
<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

Unusual name value

  • Application-namer: defines the name of the web application running on the web page.
  • Generator: Identifier that contains the software that generated the page.
  • Referrer: Controls the content in the HTTP Referer header of all HTTP requests made from this document
  • Creator: The creator of a document
  • Googlebot: Google’s crawler rules
  • Publisher: The publisher of documents
  • Robots: Define search engine crawler crawling rules, corresponding content value can be:
    • None: the search engine will ignore this page, equivalent to noindex, nofollow.
    • Noindex: Search engines do not index this page.
    • Nofollow: Search engines do not continue to search other pages through the link index of this page.
    • All: the search engine will index the page and continue through the page’s link index, equivalent to index, follow.
    • Index: Search engine indexes this page.
    • Follow: Search engines continue to search other pages through the link index of this page.

Reference thanks

  • Developer.mozilla.org/en-US/docs/…
  • Segmentfault.com/a/119000000…