使用 HTML5 doctype，不区分大小写。
<!DOCTYPE html>更加标准的 lang 属性写法 http://zhi.hu/XyIa
- 简体中文
<html lang="zh-cmn-Hans">- 繁体中文
<html lang="zh-cmn-Hant">很少的情况需要加地区代码，除非为了强调不同地区汉语使用差异，例如：
<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
</p>- 优先使用IE最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />width=device-width会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">- 添加到主屏时的标题
```html <meta name="apple-mobile-web-app-title" content="标题"> ``` - 是否启用 WebAPP 全屏模式
```html <meta name="apple-mobile-web-app-capable" content="yes" /> ``` - 设置状态栏的背景颜色
```html <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ``` `"apple-mobile-web-app-capable" content="yes"` 时生效 参数： * default 默认值。 * black 状态栏背景是黑色。 * black-translucent 状态栏背景是黑色半透明。 如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。 如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 - 忽略数字识自动别为电话号码
```html <meta name="format-detection" content="telephone=no" /> ``` - iOS 图标
参数： `apple-touch-icon` 图片自动处理成圆角和高光等效果。 `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。 * iPhone 和 iTouch，默认 57x57 像素，必须有 ```html <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> ``` * iPad，72x72 像素，可以没有，但推荐有 ```html <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> ``` * Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 ```html <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> ``` * Retina iPad，144x144 像素，可以没有，但推荐有 ```html <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> ``` - iOS 启动画面
官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html 参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/ * iPad的启动画面是不包括状态栏区域的。 * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong> ```html <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> ``` * iPad 竖屏 1536x2008（Retina） ```html <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> ``` * iPad 横屏 1024x748（标准分辨率） ```html <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> ``` * iPad 横屏 2048x1496（Retina） ```html <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> ``` * <strong>iPhone 和 iPod touch的启动画面是包含状态栏区域的。</strong> * iPhone/iPod Touch 竖屏 320x480 (标准分辨率) ```html <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> ``` * iPhone/iPod Touch 竖屏 640x960 (Retina) ```html <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> ``` * iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) ```html <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> ```
-
Windows 8 磁贴颜色
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
-
Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
-
页面描述
<meta name="description" content="" /> <!-- 页面描述 -->
-
页面关键词
<meta name="keywords" content=""/> <!-- 页面关键词 -->
-
页面标题
<title>标题</title>