Meta What do you know exactly?

Recently see Meta in the use of mobile, found a lot of things need to tidy up a bit.

Meta is God horse? The role of Divine horse?

Meta is the response header message used to simulate an HTTP protocol in an HTML document. Meta tags are used in

Name property

1, <meta name= "Generator" contect= "" > To illustrate the Build tool (such as Microsoft FrontPage 4.0), etc.;

2, <meta name= "KEYWords" contect= "" > to the search engine to explain the keywords of your page;

Note: Each keyword is separated by a comma ",". The usual use of meta is to specify keywords that search engines use to improve search quality. When several meta elements provide document language dependency information, search engines use the Lang feature to filter and display search results through the user's language precedence reference. For example:
<meta name= "Kyewords" lang= "EN" content= "Vacation,greece,sunshine" >
<meta name= "Kyewords" lang= "FR" content= "Vacances,grè:ce,soleil" >

3, <meta name= "DEscription" contect= "" > Tell the Search engine the main content of your site;

4, <meta name= "Author" contect= "Your Name" > tell the Search engine the author of your site's production;

5, <meta name= "Robots" contect= "All|none|index|noindex|follow|nofollow" >

Robots is used to tell the search robot which pages need to be indexed and which pages do not need to be indexed

The properties are described as follows:

Set to all: The file will be retrieved and the link on the page can be queried;

Set to None: The file will not be retrieved, and the link on the page cannot be queried;

Set to index: The file will be retrieved;

Set to follow: links on the page can be queried;

Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;

Set to Nofollow: The file will not be retrieved and the link on the page can be queried.

Http-equiv

HTTP-EQUIV is similar to the HTTP header protocol, which responds to the browser with some useful information to help correct and accurately display the content of the Web page. Common types of HTTP-EQUIV are:

1, Content-type and content-language (setting of the display character set)

Description: Sets the character set used by the page to indicate that the text used by the home page is already spoken, and the browser will invoke the corresponding character set to display the page content.

Usage:

The H5 can be simplified to

<meta charset= "Utf-8" >

Note: The META tag defines the character set used by the HTML page as GB2132, which is the GB character code. If you replace "charset=gb2312" with "BIG5", the character set used for this page is the traditional Chinese Big5 code. When you browse some foreign sites, ie browser will prompt you to correctly display the page need to download XX language support. This is done by reading the Content-type property of the META tag of the HTML page and knowing which character set to use to display the page. If the corresponding character set is not installed in the system, ie prompts to download. Other languages also correspond to different charset, such as the Japanese character set is "ISO-2022-JP", the Korean is "ks_c_5601".
　　　　　　
Content-type content 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 and other character sets The Content of Content-language can also be: EN, FR and other language code.

2, Refresh (refreshed)

Description: How long (in seconds) to refresh your Web page, or how long it takes to automatically link pages to other pages.
Usage:

<meta http-equiv= "Refresh" content= "> <meta http-equiv=" Refresh "content=" 5; Url=http://www.xia8.net ">

Note: 5 of these are meant to be automatically refreshed to URL URLs after 5 seconds of stay.

3. Expires (term)

Description: Specifies the expiration time of the page in the cache and must be re-accessed on the server once the page expires.
Usage: <meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "Expires" Content= "Wed, 1997 08:21:57 GMT" >
Note: You must use the time format of GMT, or set directly to 0 (the number indicates how much time expires after).

4, Pragma (Cach mode)

Description: Prevents the browser from accessing the contents of the page from the local machine's cache.
Usage: <meta http-equiv= "Pragma" content= "No-cach" >
Note: pages are not guaranteed to be present in the cache, and each visit refreshes the page. With this setting, visitors will not be able to browse offline.

5. Set-cookie (Cookie setting)

Description: When a browser accesses a page, it is cached and can be read from the cache the next time it is accessed to improve speed. Disable caching when you want visitors to refresh your ad's icon every time, or refresh your counter every time. Usually HTML files do not need to disable caching, for the ASP and other pages, you can use the disable cache, because every time you see the page is dynamically generated on the server, the cache loses meaning. If the page 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 time format of GMT must be used.

6, Window-target (display window settings)

Description: Forces the page to appear on a separate page in the current window.
Usage: <meta http-equiv= "Window-target" content= "_top" >
Note: This property is used to prevent others from calling your page in the frame. Content options: _blank, _top, _self, _parent.

7, Pics-label (page Rsac rating) PS: I didn't know that before.
Description: There is a content setting in Internet Options for IE that prevents you from browsing some restricted sites, and the limits of websites
is set by this parameter.
Usage: <meta http-equiv= "Pics-label" contect=
"(PICS-1.1 ' http://www.rsac.org/ratingsv01.html '
I Gen comment ' RSACi North America Sever ' by '[email protected]'
For ' http://www.microsoft.com ' 1997.06.30t14:21-0500 ' R (n0 s0 v0 l0)) ">

Note: Do not set the level too high. The RSAC evaluation system provides a standard for evaluating Web site content. Users can set up Microsoft Internet Explorer (IE3.0 or more) to exclude sites that contain pornographic and violent content. The HTML in the example above is taken from Microsoft's homepage. The code (n 0 S 0 v 0 L 0) indicates that the site does not contain unhealthy content. Ratings are assessed by RSAC, the rating agency of the American Entertainment Commission, if you want to learn more about the level of RSAC evaluation system, or if you need to evaluate your own website, you can visit the RSAC site: http://www.rsac.org/.

8, Page-enter, Page-exit (Entry and exit)

Description: This is a number of special effects when the page is loaded and paged 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 that produces a 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 (in seconds)
Transition filter type. Indicates which effect to use, with a value of 0-23.

0 Rectangle reduction
1 Rectangle Enlargement
2 Round Zoom Out
3 Circular Enlargement
4 down to top refresh
5 Top to bottom refresh
6 Left to right refresh
7 right-to-left refresh
8 Vertical Blinds
9 Horizontal Blinds
10 Dislocation Horizontal Blinds
11 Dislocation Vertical Blinds
12-point diffusion
13 or so to the middle refresh
14 Middle to left and right refresh
15 middle to upper and lower
16 up and down to the middle
17 right down to top left
18 top right to bottom left
19 top left to bottom right
20 lower left to top right
21 Horizontal Bar
22 Vertical Bar
23 or more 22 random selection of a

9. msthemecompatible (XP theme)
Description: Whether to turn off XP themes in IE
Usage: <meta http-equiv= "msthemecompatible" content= "yes" >
Note: Turn off XP's Blue stereo button system display style, which is much like Win2K.

10. IE6 (Page builder)
Description: Page Builder generator, is IE6
Usage: <meta http-equiv= "IE6" content= "Generator" >
Note: With what things to do, similar products factory manufacturers.

11. Content-script-type (script related)
Description: This is the latest specification of the Web, indicating the type of script in the page.
Usage: <meta http-equiv= "Content-script-type" content= "Text/javascript" >
Attention:

Mobile-specific Properties viewport

Definition of the viewable area, such as screen scaling. Tells the browser how to standardize the rendered Web page.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Format-detection

Identification of the telephone number

<meta name="format-detection" content="telphone=no" />

iOS Private Properties Apple-mobile-web-app-capable

Enabling WebApp mode hides the toolbars and menu bars, and works with other mates.

<meta name="apple-mobile-web-app-capable" content="yes" />

Apple-mobile-web-app-status-bar-style

In WebApp mode, change the color of the top status bar.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Default (white, defaults) | Black | Black-translucent (Translucent)

Note: If the value "Black-translucent" will occupy the page position, floating above the page (will cover the page 20px height, Retina screen is 40px).

In addition, attach some mobile side details about meta usage

1. Title after adding to the home screen (IOS)

<meta name="apple-mobile-web-app-title" content="标题"> 

2. Enable WEBAPP Full screen mode (IOS)

When the site is added to the home screen and then clicked to start, you can hide the address bar (jumping from the browser or entering the link does not have this effect)

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-touch-fullscreen" content="yes" /> 

<!--more-->

3. Baidu prohibits transcoding

Baidu Mobile phone to open the page, Baidu may be on your page transcoding, to your page affixed to its ads, very disgusting. But we can use this META tag to disable it:

<meta http-equiv="Cache-Control" content="no-siteapp" />

Baidu Siteapp transcoding statement

4. Set the background color of the status bar (IOS)

Sets the background color of the status bar, which only "apple-mobile-web-app-capable" content="yes" takes effect when

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

Content parameters:

• Default: The status bar background is white.
• Black: The status bar background is dark.
• Black-translucent: The status bar background is translucent. If set to default or black, the page content starts at the bottom of the status bar. If set to Black-translucent, the page content fills the entire screen, and the top is obscured by the status bar.

5. Mobile phone number recognition (IOS)

In IOS Safari (no other browsers and Android), the numbers that look like phone numbers are treated as phone links, such as:

• 7 digits, shaped like: 1234567
• Numbers with brackets and plus signs, shaped like: (+86) 123456789
• Number of double connection lines, shaped like: 00-00-00111
• 11 digits, shaped like: 13800138000

There may be other types of numbers that are also identified. We can turn off auto-recognition of phone numbers by following meta:

<meta name="format-detection" content="telephone=no" />

Turn on phone function

<a href="tel:123456">123456</a>

To turn on the SMS feature:

<a href="sms:123456">123456</a> 

6. Mobile-side mailbox Recognition (Android)

As with the identification of the phone number, the string that conforms to the mailbox format is recognized on Android, and we can automatically identify the mailbox by using the following meta:

<meta content="email=no" name="format-detection" /> 

Similarly, we can also use the Tag property to turn on the long-by-email address pop-up message sending function:

<a mailto:[email protected].com">[email protected].com</a> 

7. Add Smart App ad bar Smart app Banner (IOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web App Launch animation

Since the ipad splash screen does not include the status bar area. So the start picture needs to subtract the 20px size in the direction corresponding to the status bar area, minus the 40px size on the retina device accordingly

<!--iPhone--><link href= "Apple-touch-startup-image-320x460.png" media= "(device-width:320px)" Rel= " Apple-touch-startup-image "><!--iPhone (Retina)--><link href=" Apple-touch-startup-image-640x960.png " Media= "(device-width:320px) and (-webkit-device-pixel-ratio:2)" rel= "Apple-touch-startup-image" ><!--IPad ( Portrait)--><link href= "Apple-touch-startup-image-768x1004.png" media= "(device-width:768px) and (orientation : Portrait) "Rel=" Apple-touch-startup-image "><!--iPad (Landscape)--><link href=" Apple-touch-startup-image-748x1024.png "Media=" (device-width:768px) and (Orientation:landscape) "Rel=" Apple-touch-startup-image "><!--iPad (Retina, Portrait)--><link href=" Apple-touch-startup-image-1536x2008.png "Media=" (device-width:1536px) and (orientation:portrait) and (- Webkit-device-pixel-ratio:2) "rel=" Apple-touch-startup-image "><!--iPad (Retina, Landscape)--><link Href= "Apple-touch-startup-image-2048x1496.png"Media=" (device-width:1536px) and (Orientation:landscape) and (-webkit-device-pixel-ratio:2) "Rel=" Apple-touch-startup-image ">

（landscape：横屏 | portrait：竖屏）

9. Add the app icon after the main screen

There are two slightly different ways to specify the path to the icon after the Web app is added to the home screen:

<!--design artwork--><link href= "Short_cut_114x114.png" rel= "apple-touch-icon-precomposed" ><!--Add highlight Effects-- <link href= "Short_cut_114x114.png" rel= "Apple-touch-icon" >

* Apple-touch-icon: IOS6 and below will automatically add a layer of highlight to the icon (IOS7 has begun to use a flat design style) * apple-touch-icon-precomposed: Use the "Design original icon"

Effect:

Icon Size:

You can provide different icons for different devices by specifying the Size property (but generally, we only need to provide an icon of x-pixels size)

The official statement is as follows

Create different sizes of your app iconfor different devices, you need to supply app icons in all four Sizes:57 x 57 Pixels114 x 114 pixels  (high Resolution) for IPad :72 x 72 Pixels144 x 144 Span class= "token punctuation" > (high Resolution    

10. Use the latest version of IE and Chrome first

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

11.viewport templates

<! DOCTYPE html>
Meta What do you know exactly?