For a front-end engineer, metalabels are all too familiar. When I was just learning the front end, I wrote the following sentence the most👨🏻💻:
<meta charset="UTF-8" />
But most frontender metathe understanding basically stops there, don't underestimate it, small labels can achieve big functions. This article will take you to re-understand the metatags us💪
what is meta?
Meta is an auxiliary tag in the HEAD section of THE HTML language. It is located in the header of the document and contains no content. Its attributes define the name/value pairs associated with the document.
Meta elements provide meta-information about relevant pages, such as descriptions and keywords for search engines and update frequency.
The meta tag has two properties: HTTP-Equiv and NAME. Each of these properties has a different parameter value. These different parameter values enable different web functions.
In almost any web page, we can see HTML code like this:
<head>
<meta http-equiv="content-Type" content="text/html; charset=gb2312" />
</head>
You may think this code is dispensable. In fact, if you use meta tags well, you can have unexpected effects. For example, when you add keywords, they will be automatically collected by large search sites. You can format the page, refresh it, etc.
The name attribute in meta
The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used for search engine robots to find information and classify information.
Syntax for the name attribute of the meta tag:
<meta name="params" content="value"/>
The name properties mainly have the following parameters:
keywords
Keywords are used to tell search engines what your web page's keywords are.
<meta name="keywords" content="frontend developer，frondend" />
description
Description is used to tell search engines what your site is about.
<meta name="description" content="frontend is a website for web developer"/>
viewport
Description is used to tell search engines what your site is about.
Most front-end engineers would call this viewport, and this property is often used to design mobile web pages, allowing developers to control the size and scaling of the page
The meta ViewPort has six attributes:
Description is used to tell search engines what your site is about.
Most front-end engineers would call this viewport, and this property is often used to design mobile web pages, allowing developers to control the size and scale of the page.
The meta ViewPort has six attributes:
width: Sets the viewport width, the default viewport width
height: Sets the height of the viewport
initial-scale: Sets the initial scale of the page
minimum-scale: The minimum scale allowed by the user
maximum-scale: indicates the maximum scale allowed by the user
user-scalable: Whether to allow users to scale. The value is "no" or "yes", where "no" means no and "yes" means yes
eg：
<meta name="viewport" content="width=device-width, initial-scale=1" />
robots
Robots are used to tell crawlers which pages need indexing and which pages do not
<meta name="robots" content="none" />
Content Specific parameters are as follows:
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.
author
Used to tag page authors
<meta name="author" content="JsTyro" />
generator
What software is used to indicate the web page is made
<meta name="generator" content="vscode" />
revisit-after
If the page is not updated frequently, in order to reduce the pressure of search engine crawler on the server, we can set a crawler revisit time. If the revisit time is too short, the crawlers will visit at the default time they define
<meta name="revisit-after" content="30 days" />
Http-equiv property in meta
Http-equiv is, as the name suggests, the equivalent of HTTP headers.
It can return some useful information to the browser to help display the content of the web page correctly and accurately, corresponding to the property value of content, content is actually the variable value of each parameter.
The syntax for the HTTP-equiv attribute of the meta tag is:
<meta http-equiv="params" content="value" />
The http-equiv attribute has the following parameters:
content-Type
It is used to set the character set of the web page for the browser to parse and render the page
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
Expires
This parameter is used to set the expiration time of a web page. After the expiration time, the web page must be retransmitted to the server. The GMT time format must be used.
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
Pragma
Prevents browsers from accessing page content from the local computer's cache, so that visitors will not be able to browse offline.
<meta http-equiv="pragma" content="no-cache" />
Refresh
The webpage will automatically refresh and redirect to the set URL within the set time
Set-Cookie
If the webpage expires, the local cookies on this webpage will also be automatically deleted
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/" />
Window-target (settings for displaying windows)
Force the page to be displayed as a separate page in the current window
<meta http-equiv="Window-target" content="_top" />
content-Language (display language setting)
<meta http-equiv="Content-Language" content="zh-cn" />
imagetoolbar (image toolbar)
Specifies whether to display the picture toolbar. When false, it means not displayed, and when it is true, it means display.
<meta http-equiv="imagetoolbar" content="false" />
meta animation effect
When it comes to animation, most people will definitely think of css3animation and use js，canvasto achieve animation. If I tell you, metaanimation can also be achieved, do you believe it? ? ?
Using meta tags, we can also animate the moment we enter or leave the page by adding the following code between the head tags in the HTML code:
<meta http-equiv="Page-Enter" content="revealTrans(duration=5.0,transition=20)" />
Once the code has been added to a page, we will see some special effects as we enter and exit the page, but be careful not to add a Frame page.
Page-Enter, Page-Exit, Site-Enter and Site-Exit, as shown in the following code:
<meta http-equiv="Page-Enter" content="Transition effect on site entry" />
<meta http-equiv="Page-Exit" content="Transition effect on exit" />
<meta http-equiv="Site-Enter" content="Transition effect on site entry" />
<meta http-equiv="Site-Exit" content="Transition effect on site exit" />
content Property value:
BlendTrans (Duration= seconds): If used to fade in when entering the page; If used to fade out when exiting the page, you can only set the duration of the transition in seconds
Revealtrans (duration= seconds of transition duration, transition= type of transition effect): Duration: Sets the duration of the transition in seconds, and transition sets what type of transition effect to use, which has 24 types of transition effects.
transition：The transition values range from 0 to 23, and the numbers start at 0 and end at 23. There are 24 transition effects for each number
For example：
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)" />
The above Settings are page-Enter transition effect, so, is the fade transition effect into the web Page.
<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=0" />
So in this code, transition=0 represents a transition into a web page with a shrinking rectangle. duration=2 The transition duration is 2 seconds.
For example, if you use the rectangle expansion transition effect, you only need to set it transition=1. Since the number 1 represents the rectangular expansion transition, the code is as follows:
<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=1" />
You can also use the circle shrink transition effect, which corresponds to the number 2, with the following code:
<meta http-equiv="Page-Enter" content="revealtrans(duration=2，transition=2" />
And so on, whatever transition effect you want to set, just set the corresponding value.
This article is original, without authorization, any media or personal we media and any statement reproduced
Commercial infringement will be investigated, if you need authorization please contact[email protected]
The original link:https://www.jstyro.com/blog/html-meta
Buy me a coffee