HTML5 Meta tag attribute collation

HTML5 meta tag attribute collation

Preface: Do not know if anyone think, HTML META tag Description of the header information is particularly many, there are targeted to the head of the SEO information, but also for the head of mobile device information, today specifically in the online collection of their own a little on its finishing, and finally find each description of the relatively full site ( Click to enter ) , I have a bit of obsessive-compulsive disorder, just write it into their own blog, of course, this is not the most complete, will slowly change to complete .

Basic Label

Declaring the character encoding used by a document

<charset= ' utf-8 '>

Declaring compatibility Mode for documents

//instructs IE to display content in the highest mode currently available <  http-equiv= "x-ua-compatible"  content= "Ie=edge"/> //instruct IE to use <! The doctype> directive determines how the content is rendered. The standard mode instruction is displayed in IE7 Standard mode, while the Quirks mode instruction is displayed in IE5 mode.  <http-equiv= "x-ua-compatible"  content= "ie= Emulate IE7 "/>

SEO optimization

Page description

<name= "description"  content= "No more than 150 characters"/>

Page keywords

<name= "keywords"  content= "HTML5, CSS3, keywords"/ >

Define page Authors

<name= "Author"  content= "Magic Small stack"/>

Define the page search engine index method, Robotterms is a set of comma, the value of the split, usually have the following values: None,noindex,nofollow,all,index and follow.

<name= "Robots"  content= "Index,follow"/> 

add viewport to a mobile device

<= "Viewport"= "Width=device-width, initial-scale=1, Maximum-scale =1, minimum-scale=1, user-scalable=no ">

Content parameters:

• widthviewport Width (value/device-width)
• heightViewport height (numeric/device-height)
• initial-scaleInitial zoom ratio
• maximum-scaleMaximum zoom ratio
• minimum-scaleMinimum zoom ratio
• user-scalablewhether to allow user scaling (yes/no)
• minimal-uiNew in IOS 7.1 Beta 2, you can minimize the upper and lower status bar when the page loads. This is a Boolean value that can be written directly like this:

• <name= "Viewport"  content= "Width=device-width, initial-scale=1, Minimal-ui ">

IOS Devices

Title added to the home screen (IOS 6 new)

<name= "Apple-mobile-web-app-title"  content= "title" >

Whether to enable WEBAPP full screen mode

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

Set the background color of the status bar

<name= "Apple-mobile-web-app-status-bar-style"  content= " Black-translucent "/>

Only when "apple-mobile-web-app-capable" content="yes" It is in effect

Content parameters:

• • defaultThe default value.

  • blackThe status bar background is black.

  • black-translucentThe status bar background is black 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, the top is obscured by the status bar.

IOS icons

Rel parameter:

apple-touch-iconImages are automatically processed into rounded corners and highlights.

apple-touch-icon-precomposedPrevents the system from automatically adding effects, directly displaying the original design.

IPhone and ITouch, default 57x57 pixels, must have

<rel= "apple-touch-icon-precomposed"  href= "/ Apple-touch-icon-57x57-precomposed.png "/>

ipad,72x72 pixels, can not, but recommended to have

<rel= "apple-touch-icon-precomposed"  sizes= "72x72" href = "/apple-touch-icon-72x72-precomposed.png" />

Retina IPhone and retina itouch,114x114 pixels, can not, but recommended to have

<rel= "apple-touch-icon-precomposed"  sizes= "114x114"  href= "/apple-touch-icon-114x114-precomposed.png"/>

Retina ipad,144x144 pixels, can not, but recommended to have

<rel= "apple-touch-icon-precomposed"  sizes= "144x144"  href= "/apple-touch-icon-144x144-precomposed.png"/>

IOS splash Screen

The IPad splash screen does not include the status bar area.

IPad Vertical screen 768 x 1004 (Standard resolution)

<rel= "Apple-touch-startup-image"  sizes= "768x1004"  href  = "/splash-screen-768x1004.png"/>

IPad Vertical Screen 1536x2008 (Retina)

<rel= "Apple-touch-startup-image"  sizes= "1536x2008"  href= "/splash-screen-1536x2008.png"/>

IPad Horizontal screen 1024x748 (standard resolution)

<rel= "Apple-touch-startup-image"  sizes= "1024x748"  href  = "/default-portrait-1024x748.png"/>

IPad Horizontal screen 2048x1496 (Retina)

<rel= "Apple-touch-startup-image"  sizes= "2048x1496"  href  = "/splash-screen-2048x1496.png"/>

The splash screen for IPhone and IPod touch includes the status bar area.

Iphone/ipod Touch Vertical Screen 320x480 (standard resolution)

<rel= "Apple-touch-startup-image"  href= "/ Splash-screen-320x480.png "/>

Iphone/ipod Touch Vertical Screen 640x960 (Retina)

<rel= "Apple-touch-startup-image"  sizes= "640x960" href = "/splash-screen-640x960.png" />

IPhone 5/ipod Touch 5 Vertical screen 640x1136 (Retina)

<rel= "Apple-touch-startup-image"  sizes= "640x1136"  href  = "/splash-screen-640x1136.png"/>

Windows 8

Windows 8 Tile Color

<name= "Msapplication-tilecolor " content= "#000"/> 

Windows 8 Tile icon

<name= "Msapplication-tileimage"  content= "Icon.png" />

other

Add an RSS Subscription

<rel= "alternate"  type= "Application/rss+xml"  title = "RSS" href = "/rss.xml" />

Add Favicon icon

<rel= "shortcut icon"  type= "Image/ico"  href  = "/favicon.ico"/>

No digital knowledge automatic phone number

<name= "format-detection"  content= "Telephone=no"/> 

Do not allow Android to recognize mailboxes

<name= "format-detection"  content= "Email=no"/ >

HTML5 Meta tag attribute collation