Those who have been ignored or not pay enough attention but its important HTML head tag

Why 80% of the code can not do farming architect? >>>

Basic tab

Use HTML5 doctype, not case-sensitive. In order to project or post-scalability web site, the bold use.

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

Statement document uses the character encoding

<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->

Priority use the latest version of IE and Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO optimization

Page description tag, each page should have a no more than 150 characters and can accurately reflect the content of the page description tag.

<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->

Keywords page

<meta name="keywords" content=""/> <!-- 页面关键词 -->

Define the page title

<title>标题</title>

Defined web search engine indexing, robotterms is set to use a comma "," separated values are usually several values: none, noindex, nofollow, all, index and follow.

<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->

Any website or web-based project search engine should pay attention to the label.

Optional label

Add a viewport for mobile devices

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

`Width = device-width` cause iPhone 5 black bars added to the main screen when the page is opened in full screen mode WebApp. content parameters:

width viewport width (Numerical / device-width)
height viewport height (value / device-height)
initial-scale The initial scale
maximum-scale The maximum zoom ratio
minimum-scale The minimum scale
user-scalable Whether to allow the user zooms (yes / no)
minimal-ui iOS 7.1 beta 2 in new property, you can minimize up and down the status bar when the page loads. This is a Boolean value, you can directly write:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS devices

1, added to the title after the main screen (iOS 6 new)

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

2, whether to enable full-screen mode WebApp

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

3, set the status bar background color

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

Only "apple-mobile-web-app-capable" content="yes" at the commencement content parameters:

default Defaults.
black The status bar background is black.
black-translucent The status bar background is black translucent.

If set to default or black , web content starting from the bottom status bar. If set black-translucent , web content to fill the entire screen, the status bar at the top will be blocked. 4, do not automatically disable the digital identification is a telephone number

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

5, iOS icon rel parameters: apple-touch-icon image radiused automatic processing and high light effects. apple-touch-icon-precomposed prohibited automatically add effects, design of the display picture directly. iPhone and iTouch, default 57x57 pixels, must have

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

iPad, 72x72 pixels, can not, but there are recommended

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

Retina iPhone and Retina iTouch, 114x114 pixels and can not, but there are recommended

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

Retina iPad, 144x144 pixels and can not, but there are recommended

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

iOS splash screen

The official document: https://developer.apple.com/library/ios/qa/qa1686/_index.html Reference article: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad splash screen does not include a status bar area.

iPad vertical screen 768 x 1004 (standard resolution)

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

iPad vertical screen 1536x2008 (Retina)

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

iPad horizontal screen 1024x748 (standard resolution)

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />

iPad horizontal screen 2048x1496 (Retina)

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

iPhone and iPod touch splash screen that contains status bar area.

iPhone / iPod Touch vertical screen 320x480 (standard resolution)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />

iPhone / iPod Touch vertical screen 640x960 (Retina)

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

iPhone 5 / iPod Touch 5 portrait 640x1136 (Retina)

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

other

Adding favicon icon, pc browser address bar icon

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

Reproduced in: https: //my.oschina.net/wzlee/blog/262201