Meta is an auxiliary tag in the head area of html language. In almost all web pages, we can see the following html code:
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
Maybe you think these codes are optional. In fact, if you can use meta tags well, it will bring you unexpected results. For example, adding keywords will be automatically collected by large search websites; You can set the page format and refresh.
1、 Composition of meta tags
The meta tag has two attributes: http equiv attribute and name attribute. Different attributes have different parameter values. These different parameter values realize different web page functions.
1. Name attribute
The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used to facilitate search engine robots to find information and classify information.
The syntax format of the name attribute of the meat tag is:< Meta name="Parameter" content="Specific parameter value">.
The name attribute mainly has the following parameters:
A. Keywords
Notes: keywords is used to tell the search engine what the keywords of your web page are.
For example:< meta name ="keywords" content="science, education,culture,politics,ecnomics,relationships, entertaiment, human">
B. Description
Description is used to tell search engines the main content of your website.
For example:< meta name="description" content="This page is about the meaning of science, education,culture.">
C. Robots
Note: robots are used to tell the search robot which pages need to be indexed and which pages do not need to be indexed.
The parameters of content include all, none,index,noindex,follow,nofollow。 The default is all.
For example:< meta name="robots" content="none">
D. Author
Description: Mark the author of the page
For example:< meta name="author" content="zys666, zys666@21cn.com ">
2. Http equiv attribute
Http equiv, as its name implies, is equivalent to http file header. It can browser Some useful information is returned to help correctly and accurately display the page content. The corresponding attribute value is content, and the content in content is actually the variable value of each parameter.
The http equiv attribute syntax format of the meat tag is:< Meta http equiv="parameter" content="parameter variable value">; the http equiv attribute mainly includes the following parameters:
E. Window target
Note: force the page to display as a separate page in the current window.
Usage: meta http-equiv="Window-target" content="_top">
Note: It is used to prevent others from calling their own pages in the framework.
F. Content Type (display character set settings)
Note: Set the character set used by the page.
Usage: meta http-equiv="content-Type" content="text/html; charset=gb2312">
2、 Functions of meta tags
Above, we introduced some basic components of meta tags, and then let's take a look at the common functions of meta tags:
1. Help homepage is logged in by major search engines
A very important function of the meta tag is to set keywords to help your home page be logged in by major search engines and increase the number of visits to the website. In this function, the most important is the setting of keywords and description. Because according to the working principle of search engines, search engines first send robots to automatically retrieve keywords and descriptions on the page, and add them to their own data base , and then sort websites according to the density of keywords. Therefore, we must set keywords to improve the search click rate of the page. Let's give an example for your reference:
<meta name="keywords" content="Politics, economy, science and technology, culture, health, emotion, soul, entertainment, life , Sociology , enterprise, transportation ">
< meta name="description" content="politics, economy, technology, culture, health, emotion, soul, entertainment, life, society, enterprise, transportation" >
Note: It can be used to set the expiration time of the webpage. Once the page expires, you must go to The server Retransmit on.
Usage: meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
Note: The GMT time format must be used.
B. Pragma (cache mode)
Note: browser is prohibited from being local computer The page content is accessed in the cache of.
Usage: meta http-equiv="Pragma" content="no-cache">
Note: With this setting, visitors will not be able to browse offline.
C. Refresh
Note: Automatically refresh and point to a new page.
Usage: meta http-equiv="Refresh" content="2;URL= https://www.toyean.com/ ">
Note: 2 refers to automatically refreshing to the URL after staying for 2 seconds.
D. Set Cookie
Note: If the webpage expires, the saved cookie will be deleted.
Usage: meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/">
Note: The GMT time format must be used.
After setting these keywords, the search engine will automatically add these keywords to the database and sort them appropriately according to their density.
2. Define the language of the page
This is the most common function of the meta tag. When creating a web page, we will see it in pure HTML code. Its role is to define the language of your web page. When visitors visit your web page, the browser will automatically identify and set the language in the web page. If your web page is set with a GB code and the browser does not install the GB code, At this time, the web page will only display the browser default language set by the browser. Similarly, if the page is English , then charset=en. The following is a representative example:
<meta http-equiv=″ content-Type″ content=″ text/html; charset=gb2312″〉
This code means that the language of the webpage is set to the national standard code.
3. Automatically refresh and point to a new page
If you want to make your web page automatically visit the specified web page at the specified time without control, you can use the meta tag's function of automatically refreshing the web page. Let's look at a piece of code:
〈meta http-equiv=″ refresh″ content=″ 2; URL= https://www.toyean.com/ 〉
This code can make the current page automatically go to https://www.toyean.com/ This is the refresh function of meta. In content, 2 represents the set time (in seconds), and URL is the web address automatically connected after the specified time.
4. Animation effect when realizing webpage conversion
Using meta tags, we can also achieve animation effects at the moment of entering or leaving the web page. We just need to add the following code between the<head></head>tags in the html code of the page:
<meta http-equiv="Page-Enter" content="revealTrans(duration=5. 0, transition=20)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=5. 0, transition=20)">
Once the above code is added to a page, we will see some special effects when entering and exiting the page. This function is actually the same as the Format/Page Transition in FrontPage2000, but we should note that the added page cannot be a Frame page;
5. Web page rating and evaluation
Browsers of IE4.0 and above can prevent browsing some restricted websites. The reason why the browser will automatically identify whether certain websites are restricted is that the level of the website has been set in the website meta tag, and the rating of this level is assessed by the U.S. RSAC, the rating agency of the Entertainment Commission. If you need to evaluate your website, you can connect to the website https://www.toyean.com/ , submit the form as required, and RSAC will provide you with a meta code, which can be copied to your own web page. The following is an example code:
〈meta http-equiv=″ PICS-Label″
content=′ (PICS-1.1 ″ https://www.toyean.com/
l gen true comment ″ RSACi North America Server″
for ″ https://www.toyean.com/
on ″ 2001.08.16T08:15-0500″
r (n 0 s 0 v 0 l 0))′〉
6. Control Page Buffering
The meta tag can set the expiration time of web pages. That is to say, when you set up a browser in Internet Explorer to browse a web page, you should first view the page in the local buffer. When you browse a web page and the local buffer is sometimes, the browser will automatically browse the page in the buffer until the time set in the meta expires. At this time, the browser will not get a new page. For example, the following code indicates that the expiration time of the web page is 18:18:18 on January 12, 2001.
〈meta http-equiv=″ expires″ content=″ Friday, 12-Jan-2001 18:18:18 GMT″〉
7. Windows that control the display of web pages
We can also use the meta tag to control the window displayed on the web page. Just add the following code to the web page: metahttp-equiv="window-target" content="_top">, This code can prevent the web page from being called as a Frame by others.
---------------------------
Meta Tag Details The META tag is an auxiliary tag in the HEAD area of the HTML language. It is located between the<HEAD>tag and the<TITLE>tag in the header of the HTML document. It provides information that is not visible to the user. Here are some examples and explanations of marks.
META tags are divided into two parts: HTTP header information (HTTP-EQUIV) and page description information (NAME).
★HTTP-EQUIV
HTTP-EQUIV is similar to the HTTP header protocol. It responds to the browser with some useful information to help correctly and accurately display web content. Common HTTP-EQUIV types are:
1. Content Type and Content Language (display character set settings)
Description: Set the character set used for the page to indicate the text and language used for making the home page. The browser will call the corresponding character set to display the page content according to this.
Usage:< Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
<Meta http-equiv="Content-Language" Content="zh-CN">
Note: This META tag defines the character set used by the HTML page as GB2132, which is the national standard Chinese character code. If "charset=GB2312" is replaced with "BIG5", the character set used in this page is the traditional Chinese Big5 code. When you browse some foreign sites, IE browser will prompt you to download xx language support to correctly display the page. This function is to read the Content Type attribute of the META tag of an HTML page to know which character set to use to display the page. If there is no corresponding character set installed in the system, IE will prompt to download. Other languages also correspond to different charsets. For example, the Japanese character set is "iso-2022-jp", and the Korean character set is "ks_c_5601".
Content of Content Type can also be: text/xml and other document types;
Charset options: ISO-8859-1 (English) BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2 Equal character set; Content of Content Language can also be: EN, FR and other language codes.
2. Refresh
Note: How long (seconds) to refresh the page, or how long after the page automatically links to other pages.
Usage:< Meta http-equiv="Refresh" Content="30">
<Meta http-equiv="Refresh" Content="5; Url= https://www.toyean.com/ ">
Note: 5 refers to automatically refreshing to the URL after staying for 5 seconds.
3. Expires
Note: Specify the expiration time of the page in the cache. Once the page expires, it must be recalled on the server.
Usage:< Meta http-equiv="Expires" Content="0">
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
Note: You must use the GMT time format, or set it to 0 directly (the number indicates the expiration time).
4. Pragma (cach mode)
Note: The browser is prohibited from accessing page content from the cache of the local machine.
Usage:< Meta http-equiv="Pragma" Content="No-cach">
Note: The web page is not saved in the cache. The page is refreshed every time you visit it. With this setting, visitors will not be able to browse offline.
5. Set Cookie
Note: When the browser accesses a page, it will store it in the cache, and it can be read from the cache the next time it is accessed to improve the speed. When you want visitors to refresh your ads every time Icon , or refresh your counter every time, you will disable the cache. It is not necessary to disable caching for HTML files ASP You can disable caching when you see a page. Because every page you see is dynamically generated on the server, caching will lose its meaning. If the webpage expires, the saved cookie will be deleted.
Usage:< Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
21-Oct-98 16:14:21 GMT; path=/">
Note: The GMT time format must be used.
6. Window target
Note: force the page to display as a separate page in the current window.
Usage:< Meta http-equiv="Widow-target" Content="_top">
Note: This property is used to prevent others from calling your page in the framework. Content options:_ blank、_top、_self、_parent。
7. Pics label (web RSAC rating)
Note: There is a content setting in Internet Options of IE, which can prevent browsing some restricted websites
It is set through this parameter.
Usage:< META http-equiv="Pics-label" Contect=
"(PICS-1.1' https://www.toyean.com/ '
I gen comment 'RSACi North America Sever' by ' inet@microsoft.com '
for ' https://www.toyean.com/ ' on '1997.06.30T14:21-0500' r(n0 s0 v0 l0))">
Note: Do not set the level too high.
8. Page Enter, Page Exit
Note: This is some special effects when the page is loaded and called out.
Usage:< Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
Note: blendTrans is a kind of dynamic filter, which produces fade effect. Another dynamic filter, RevealTrans, can also be used for page entry and exit effects:
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration indicates the duration of the filter effect (unit: seconds)
Transition filter type. It indicates which special effect to use, and the value is 0-23.
0 Rectangle Zoom Out
1 Rectangular expansion
2 Circle reduction
3 Circular expansion
4 Refresh from bottom to top
5 Refresh from top to bottom
6 Refresh from left to right
7 Refresh from right to left
8 Vertical shutter
9 Horizontal shutter
10 Staggered horizontal shutter
11 Staggered vertical shutter
12 point diffusion
13 Refresh from left to right to middle
14 Refresh from middle to left and right
15 Middle to top and bottom
16 Top to bottom to middle
17 Bottom right to top left
18 Top right to bottom left
19 Top left to bottom right
20 Bottom left to top right
21 Horizontal bar
22 Vertical bar
Choose one of the above 22 at random
9、 MSThemeCompatible (XP theme )
Note: Whether to close the theme of xp in IE
Usage:< Meta http-equiv="MSThemeCompatible" Content="Yes">
Note: The system display style of the blue stereo button for closing xp is very similar to that of win2k.
10、 IE6 (Page Builder)
Note: Page generator, ie6
Usage:< Meta http-equiv="IE6" Content="Generator">
Note: It is made of something similar to a factory manufacturer.
11、 Content-Script-Type ( script Related)
Note: This is a recent W3C specification, indicating the type of script in the page.
Usage:< Meta http-equiv="Content-Script-Type" Content="text/javascript">
12、 MSSmartTagsPreventParsing()
Note: In a word, it is to prevent Microsoft The page editing software automatically adds labels on the page to ensure the original code
Usage:< meta name="MSSmartTagsPreventParsing" content="TRUE">
★ NAME variable
The name describes the web page and corresponds to the Content to facilitate search engine robots to search and classify (at present, almost all search engines use online robots to automatically find meta values to classify web pages).
The value value of name (name="") specifies the type of information provided. Some values are already defined. For example, description, keyword, refresh, etc. You can also specify any other value, such as creationdate
Document ID, level, etc.
The content of name specifies the actual content. For example, if level is specified as value, Content may be beginner, intermediate, or advanced.
1. Keywords
Description: keyword list provided for search engines
Usage:< Meta name="Keywords" Content="Keyword 1, Keyword 2, Keyword 3, Keyword 4& hellip;& hellip; ">
Note: The keywords are separated by the English comma ",". META is often used to specify keywords that search engines use to improve search quality. When several META elements provide document language dependency information, the search engine will use the lang feature to filter and display the search results through the user's language priority reference. For example:
<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">
2. Description
Description is used to tell search engines the main content of your website.
Usage:< Meta name="Description" Content="Brief description of your web page">
3. Robots
Description: Robots is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed. The parameters of Content include all none、index、noindex、follow、nofollow。 The default is all.
Usage:< Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
Note: Many search engines log in to the website by releasing robot/spider search. These robot/spider will use some features of the meta element to decide how to log in.
All: The file will be retrieved and the links on the page can be queried;
None: the file will not be retrieved, and the links on the page cannot be queried; (Same as "noindex, no follow")
Index: the file will be retrieved; (Let the robot/spider log in)
Follow: the links on the page can be queried;
Noindex: The file will not be retrieved, but the links on the page can be queried; (Do not allow robot/spider to log in)
Nofollow: the file will not be retrieved, and the links on the page can be queried. (The robot/spider is not allowed to follow the link on this page)
4. Author
Note: Mark the author or production group of the page
Usage:< Meta name="Author" Content="Zhang San, abc@sina.com ">
Note: Content can be: the name of you or your production team, or Email
5. Copyright
Note: Label copyright
Usage:< Meta name="Copyright" Content="The copyright of this page belongs to Zerospace. All Rights Reserved">
6. Generator
Description: Description of the editor
Usage:< Meta name="Generator" Content="PCDATA|FrontPage|">
Note: Content="Your editor"
7. Revisit after
explain:
Usage:< META name="revisit-after" CONTENT="7 days" >
★ Other usages in Head
1. Scheme
Description: scheme can be used when name is used to specify how the value of content should
be interpreted.
Usage:< meta scheme="ISBN" name="identifier" content="0-14-043205-1" />
2. Link
Description: Link to file
Usage:< Link href="soim.ico" rel="Shortcut Icon">
Note: For many websites, if you save it in the inbox, you will find a small icon associated with it. If you click again to enter, you will also find a small icon in the address bar. Now you can easily implement this function by adding this paragraph to your page header< LINK>is used to link the current file with other URLs, but there is no link button. It is used between<HEAD>tags. The format is as follows:
<link href="URL" rel="relationship">
<link href="URL" rev="relationship">
3. Base
Description: Insert the base link property of the page
Usage:< Base href=" https://www.toyean.com/ " target="_blank">
Note: All relative paths on your page will be prefixed when linking“ https://www.toyean.com/ ”。 Where target="_blank" means that the linked file is opened in a new window, and you can make other settings. Changing "_blank" to "_parent" means that the linked file will be opened in the parent window of the current window; Change to "_self" link file to open in the current window (frame); Change to "_top" link file full screen display.
Detailed explanation of http equiv attribute of Meta in w3c standard
Http equiv, as its name implies, is equivalent to http file header. It can return some useful information to the browser to help correctly and accurately display the page content. The corresponding attribute value is content, and the content in content is actually the variable value of each parameter.
The http equiv attribute syntax format of the meat tag is:; The http equiv attribute mainly has the following parameters:
1. Expires
Note: It can be used to set the expiration time of the webpage. Once the page expires, it must be retransmitted to the server.
Usage:
Note: The GMT time format must be used.
2. Pragma (cache mode)
Note: browser offline browsing is prohibited
Usage:
Note: With this setting, visitors will not be able to browse offline.
3. Refresh
Note: Automatically refresh and point to a new page.
Usage:
Note: 2 refers to automatically refreshing to the URL after staying for 2 seconds.
4. Set Cookie
Note: If the webpage expires, the saved cookie will be deleted.
Usage:
Note: The GMT time format must be used.
5. Window target
Note: force the page to display as a separate page in the current window.
Usage:
Note: It is used to prevent others from calling their own pages in the framework.
6. Content Type (display character set settings)
Note: Set the character set used by the page.
Usage:
7. Pics label (web page rating)
Usage: Web page rating
Note: There is a content setting in Internet option of IE, which can prevent browsing some restricted websites, and the restriction level of websites is set through meta attribute.
And Page_Enter Page_Exit…& hellip;
Supplement:
Set special effects when entering the page
Set special effects when leaving the page
The value of Duration is the dynamic transition time of the web page, in seconds.
Transition is a transition mode. Its values are 0 to 23, corresponding to 24 transition modes. The following table:
0 Box shrinkage
1 Box radiation
2 Circular shrinkage
3 Circular radiation
4 From bottom to top
5 From top to bottom
6 From left to right
7 From right to left
8 Vertical shutter
9 Horizontal shutter
10 Horizontal lattice shutter
11 Vertical lattice louver
12 Dissolve at will
13 Unfold from the left and right ends to the middle
14 Unfold from the middle to the left and right ends
15 Unfold from the upper and lower ends to the middle
16 Unfold from the middle to both ends
17 Expand from the top right corner to the bottom left corner
18 Expand from lower right corner to upper left corner
19 Unfold from top left corner to bottom right corner
20 Expand from lower left corner to upper right corner
21 Horizontal linear expansion
22 Vertical linear expansion
23 Random generation of a transition mode