Skip to content

Instantly share code, notes, and snippets.

@ZSX-JOJO

ZSX-JOJO/HTML-tags.md

Forked from yisibl/HTML-tags.md
Created August 27, 2021 02:49
Show Gist options
  • Save ZSX-JOJO/91c02d882dfe32f03ed3073effdd266d to your computer and use it in GitHub Desktop.
Save ZSX-JOJO/91c02d882dfe32f03ed3073effdd266d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # 常用 HTML 头部标签
    # 常用的 HTML 头部标签

    详细介绍参见原文：https://github.com/yisibl/blog/issues/1

  2. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 30 additions and 227 deletions.
    257 changes: 30 additions & 227 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,249 +1,52 @@
    # 常用 HTML 头部标签

    ## 基本标签

    使用 HTML5 doctype，不区分大小写。
    详细介绍参见原文：https://github.com/yisibl/blog/issues/1

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

    声明文档使用的字符编码

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

    更加标准的 lang 属性写法 http://zhi.hu/XyIa

    * 简体中文

    ```html
    <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
    ```

    * 繁体中文

    ```html
    <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
    ```

    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    ```html
    <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

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

    ### SEO 优化

    * 页面描述

    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

    ```html
    <head>
    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
    ```

    * 页面关键词

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

    * 页面标题

    ```html
    <title>标题</title>
    ```

    * 网页作者

    ```html
    <meta name="author" content="name, [email protected]" /> <!-- 网页作者 -->
    ```

    * 搜索引擎抓取

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

    ## 可选标签

    ### 为移动设备添加 viewport

    ```html
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    ```

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

    content 参数：

    * `width` viewport 宽度(数值/device-width)
    * `height` viewport 高度(数值/device-height)
    * `initial-scale` 初始缩放比例
    * `maximum-scale` 最大缩放比例
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)

    ### iOS 设备

    1. 添加到主屏后的标题（iOS 6 新增）

    ```html

    <!-- 为移动设备添加 viewport -->
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    ```

    2. 是否启用 WebApp 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
    ```
    3. 设置状态栏的背景颜色

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
    ```

    只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效

    content 参数：

    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。

    如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    4. 禁止数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
    ```
    5. iOS 图标

    rel 参数：

    `apple-touch-icon` 图片自动处理成圆角和高光等效果。

    `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。

    * iPhone 和 iTouch，默认 57x57 像素，必须有

    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    ```
    * iPad，72x72 像素，可以没有，但推荐有

    ```html
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
    ```
    * Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

    ```html
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    ```
    * Retina iPad，144x144 像素，可以没有，但推荐有

    ```html
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    ```
    6. 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 竖屏 768 x 1004（标准分辨率） -->
    ```

    * iPad 竖屏 1536x2008（Retina）

    ```html
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->
    ```

    * iPad 横屏 1024x748（标准分辨率）

    ```html
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->
    ```
    * iPad 横屏 2048x1496（Retina）

    ```html
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->
    ```

    * <strong>iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</strong>
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    * iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

    ```html
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    ```
    * iPhone/iPod Touch 竖屏 640x960 (Retina)

    ```html
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    ```
    * iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    ```
    7. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

    [文档](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)

    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    ```

    ### Windows 8

    * Windows 8 磁贴颜色

    ```html
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    ```
    * Windows 8 磁贴图标

    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```

    ### 其他

    * 添加 RSS 订阅

    ```html

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->
    ```

    * 添加 favicon icon

    ```html
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
    ```

    ## 更多

    参阅：
    * [你需要知道的 HTML META](http://blog.liming.it/?p=27)
    * [Complete List of HTML Meta Tags](http://code.lancepollard.com/complete-list-of-html-meta-tags/)

    <title>标题</title>
    </head>
    ```
  3. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -209,7 +209,7 @@ content 参数：
    ```
    7. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

    文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
    [文档](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)

    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  4. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 33 additions and 37 deletions.
    70 changes: 33 additions & 37 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,27 +5,27 @@
    使用 HTML5 doctype，不区分大小写。

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

    声明文档使用的字符编码

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

    更加标准的 lang 属性写法 http://zhi.hu/XyIa

    * 简体中文

    ```html
    <html lang="zh-cmn-Hans">
    <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
    ```

    * 繁体中文

    ```html
    <html lang="zh-cmn-Hant">
    <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
    ```

    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：
    @@ -36,17 +36,17 @@
    </p>
    ```

    * 优先使用IE最新版本和 Chrome
    * 优先使用 IE 最新版本和 Chrome

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

    ### SEO 优化

    * 页面描述

    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的唯一描述。
    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

    ```html
    <meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
    @@ -64,24 +64,24 @@
    <title>标题</title>
    ```

    * 定义网页作者
    * 网页作者

    ```html
    <meta name="author" content="name, [email protected]" />
    <meta name="author" content="name, [email protected]" /> <!-- 网页作者 -->
    ```

    * 定义是否被搜索引擎抓取
    * 搜索引擎抓取

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

    ## 可选标签

    ### 为移动设备添加 viewport

    ```html
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    ```

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz
    @@ -100,18 +100,18 @@ content 参数：
    1. 添加到主屏后的标题（iOS 6 新增）

    ```html
    <meta name="apple-mobile-web-app-title" content="标题">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    ```

    2. 是否启用 WebApp 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
    ```
    3. 设置状态栏的背景颜色

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
    ```

    只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效
    @@ -129,7 +129,7 @@ content 参数：
    4. 禁止数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
    ```
    5. iOS 图标

    @@ -142,81 +142,77 @@ content 参数：
    * 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" />
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    ```
    * 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" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
    ```
    * 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" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    ```
    * 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" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    ```
    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。
    * iPad 的启动画面是不包括状态栏区域的。

    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>

    ```html
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    ```

    * iPad 竖屏 1536x2008（Retina）

    ```html
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->
    ```

    * iPad 横屏 1024x748（标准分辨率）

    ```html
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->
    ```
    * iPad 横屏 2048x1496（Retina）

    ```html
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->
    ```

    * <strong>iPhone 和 iPod touch的启动画面是包含状态栏区域的。</strong>
    * <strong>iPhone 和 iPod touch 的启动画面是包含状态栏区域的。</strong>

    * iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

    ```html
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    ```
    * iPhone/iPod Touch 竖屏 640x960 (Retina)

    ```html
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    ```
    * iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    ```
    7. 添加智能 App 广告条 Smart App Banner（iOS 6+）
    7. 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

    文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    ```

    ### Windows 8
    @@ -237,13 +233,13 @@ content 参数：
    * 添加 RSS 订阅

    ```html
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->
    ```

    * 添加 favicon icon

    ```html
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
    ```

    ## 更多
  5. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -218,6 +218,7 @@ content 参数：
    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    ```

    ### Windows 8

    * Windows 8 磁贴颜色
    @@ -230,6 +231,7 @@ content 参数：
    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```

    ### 其他

    * 添加 RSS 订阅
  6. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -234,15 +234,15 @@ content 参数：

    * 添加 RSS 订阅

    ```html
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    ```
    ```html
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    ```

    * 添加 favicon icon

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

    ## 更多

  7. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 45 additions and 4 deletions.
    49 changes: 45 additions & 4 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,20 +45,37 @@
    ### SEO 优化

    * 页面描述

    每个网页都应有一个不超过 150 个字符且能准确反映网页内容的唯一描述。

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

    * 页面关键词

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

    * 页面标题

    ```html
    <title>标题</title>
    ```

    * 定义网页作者

    ```html
    <meta name="author" content="name, [email protected]" />
    ```

    * 定义是否被搜索引擎抓取

    ```html
    <meta name="robots" content="index,follow" />
    ```

    ## 可选标签

    ### 为移动设备添加 viewport
    @@ -67,7 +84,7 @@
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    ```

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz
    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

    content 参数：

    @@ -80,13 +97,13 @@ content 参数：

    ### iOS 设备

    1. 添加到主屏后的标题
    1. 添加到主屏后的标题（iOS 6 新增）

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

    2. 是否启用 WebAPP 全屏模式
    2. 是否启用 WebApp 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    @@ -100,7 +117,7 @@ content 参数：
    只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效

    content 参数：

    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。
    @@ -194,7 +211,13 @@ content 参数：
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```
    7. 添加智能 App 广告条 Smart App Banner（iOS 6+）

    文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

    ```html
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    ```
    ### Windows 8

    * Windows 8 磁贴颜色
    @@ -207,4 +230,22 @@ content 参数：
    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```
    ### 其他

    * 添加 RSS 订阅

    ```html
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    ```

    * 添加 favicon icon

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

    ## 更多

    参阅：
    * [你需要知道的 HTML META](http://blog.liming.it/?p=27)
    * [Complete List of HTML Meta Tags](http://code.lancepollard.com/complete-list-of-html-meta-tags/)
  8. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -100,7 +100,7 @@ content 参数：
    只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效

    content 参数：

    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。
    @@ -118,9 +118,9 @@ content 参数：

    rel 参数：

    * `apple-touch-icon` 图片自动处理成圆角和高光等效果。
    `apple-touch-icon` 图片自动处理成圆角和高光等效果。

    * `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。
    `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。

    * iPhone 和 iTouch，默认 57x57 像素，必须有

  9. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -80,7 +80,7 @@ content 参数：

    ### iOS 设备

    1. 添加到主屏时的标题
    1. 添加到主屏后的标题

    ```html
    <meta name="apple-mobile-web-app-title" content="标题">
    @@ -96,9 +96,11 @@ content 参数：
    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    ```
    `"apple-mobile-web-app-capable" content="yes"` 时生效

    只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效

    content 参数：

    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。
    @@ -116,9 +118,9 @@ content 参数：

    rel 参数：

    `apple-touch-icon` 图片自动处理成圆角和高光等效果。
    * `apple-touch-icon` 图片自动处理成圆角和高光等效果。

    `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。
    * `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。

    * iPhone 和 iTouch，默认 57x57 像素，必须有

  10. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 12 additions and 12 deletions.
    24 changes: 12 additions & 12 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -63,20 +63,20 @@

    ### 为移动设备添加 viewport

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

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz
    content 参数：
    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

    content 参数：

    * `width` viewport 宽度(数值/device-width)
    * `height` viewport 高度(数值/device-height)
    * `initial-scale` 初始缩放比例
    * `maximum-scale` 最大缩放比例
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)
    * `width` viewport 宽度(数值/device-width)
    * `height` viewport 高度(数值/device-height)
    * `initial-scale` 初始缩放比例
    * `maximum-scale` 最大缩放比例
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)

    ### iOS 设备

  11. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 32 additions and 21 deletions.
    53 changes: 32 additions & 21 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,21 @@
    # 常用 HTML 头部标签

    ## 基本标签

    使用 HTML5 doctype，不区分大小写。

    ```html
    <!DOCTYPE html>
    ```

    声明文档使用的字符编码

    ```html
    <meta charset='utf-8'>
    ```

    更加标准的 lang 属性写法 http://zhi.hu/XyIa

    * 简体中文

    ```html
    @@ -19,7 +28,7 @@
    <html lang="zh-cmn-Hant">
    ```

    很少的情况需要加地区代码，除非为了强调不同地区汉语使用差异，例如：
    很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

    ```html
    <p lang="zh-cmn-Hans">
    @@ -33,7 +42,26 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    ```

    * 为移动设备添加 viewport
    ### SEO 优化

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

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

    * 页面标题
    ```html
    <title>标题</title>
    ```

    ## 可选标签

    ### 为移动设备添加 viewport

    ```html
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    @@ -50,7 +78,7 @@
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)

    ## iOS 设备
    ### iOS 设备

    1. 添加到主屏时的标题

    @@ -165,7 +193,7 @@
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```

    ## Windows 8
    ### Windows 8

    * Windows 8 磁贴颜色

    @@ -178,20 +206,3 @@
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```

    ## SEO 优化

    * 页面描述
    ```html
    <meta name="description" content="" /> <!-- 页面描述 -->
    ```

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

    * 页面标题
    ```html
    <title>标题</title>
    ```

  12. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -35,21 +35,21 @@

    * 为移动设备添加 viewport

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

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

    参数：
    content 参数：

    * width: viewport宽度(数值/device-width)
    * height: viewport高度(数值/device-height)
    * `width` viewport 宽度(数值/device-width)
    * `height` viewport 高度(数值/device-height)
    * `initial-scale` 初始缩放比例
    * `maximum-scale` 最大缩放比例
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)

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

    ## iOS 设备

    1. 添加到主屏时的标题
    @@ -70,7 +70,7 @@
    ```
    `"apple-mobile-web-app-capable" content="yes"` 时生效

    参数：
    content 参数：
    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。
    @@ -86,7 +86,7 @@
    ```
    5. iOS 图标

    参数：
    rel 参数：

    `apple-touch-icon` 图片自动处理成圆角和高光等效果。

  13. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 13 additions and 2 deletions.
    15 changes: 13 additions & 2 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -33,10 +33,21 @@
    <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
    * 为移动设备添加 viewport

    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz

    参数：

    * width: viewport宽度(数值/device-width)
    * height: viewport高度(数值/device-height)
    * `initial-scale` 初始缩放比例
    * `maximum-scale` 最大缩放比例
    * `minimum-scale` 最小缩放比例
    * `user-scalable` 是否允许用户缩放(yes/no)

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

    ## iOS 设备
  14. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -60,15 +60,15 @@
    `"apple-mobile-web-app-capable" content="yes"` 时生效

    参数：
    * default 默认值。
    * black 状态栏背景是黑色。
    * black-translucent 状态栏背景是黑色半透明。
    * `default` 默认值。
    * `black` 状态栏背景是黑色。
    * `black-translucent` 状态栏背景是黑色半透明。

    如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    4. 忽略数字识自动别为电话号码
    4. 禁止数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" />
    @@ -105,7 +105,6 @@
    <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" />
    ```

    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
  15. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 34 additions and 33 deletions.
    67 changes: 34 additions & 33 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -105,54 +105,55 @@
    <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" />
    ```

    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。
    * iPad的启动画面是不包括状态栏区域的。

    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>
    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>

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

    * iPad 竖屏 1536x2008（Retina）
    * iPad 竖屏 1536x2008（Retina）

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

    * iPad 横屏 1024x748（标准分辨率）
    * 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="1024x748" href="/Default-Portrait-1024x748.png" />
    ```
    * iPad 横屏 2048x1496（Retina）

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

    * <strong>iPhone 和 iPod touch的启动画面是包含状态栏区域的。</strong>
    * iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
    * <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" 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="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" />
    ```
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```

    ## Windows 8

  16. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 33 additions and 33 deletions.
    66 changes: 33 additions & 33 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -107,52 +107,52 @@
    ```
    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。
    * iPad的启动画面是不包括状态栏区域的。

    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>
    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>

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

    * iPad 竖屏 1536x2008（Retina）
    * iPad 竖屏 1536x2008（Retina）

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

    * iPad 横屏 1024x748（标准分辨率）
    * 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="1024x748" href="/Default-Portrait-1024x748.png" />
    ```
    * iPad 横屏 2048x1496（Retina）

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

    * <strong>iPhone 和 iPod touch的启动画面是包含状态栏区域的。</strong>

    * iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
    * <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" 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="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" />
    ```
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```

    ## Windows 8

  17. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 7 additions and 8 deletions.
    15 changes: 7 additions & 8 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -41,19 +41,18 @@

    ## iOS 设备

    <ol>
    <li> 添加到主屏时的标题
    1. 添加到主屏时的标题

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

    <li> 是否启用 WebAPP 全屏模式
    2. 是否启用 WebAPP 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    <li> 设置状态栏的背景颜色
    3. 设置状态栏的背景颜色

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    @@ -69,12 +68,12 @@

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    <li> 忽略数字识自动别为电话号码
    4. 忽略数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" />
    ```
    <li> iOS 图标
    5. iOS 图标

    参数：

    @@ -106,7 +105,7 @@
    <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" />
    ```
    <li> iOS 启动画面
    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    @@ -154,7 +153,7 @@
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```
    </ol>

    ## Windows 8

    * Windows 8 磁贴颜色
  18. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 9 additions and 7 deletions.
    16 changes: 9 additions & 7 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -41,18 +41,19 @@

    ## iOS 设备

    1. 添加到主屏时的标题
    <ol>
    <li> 添加到主屏时的标题

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

    2. 是否启用 WebAPP 全屏模式
    <li> 是否启用 WebAPP 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    3. 设置状态栏的背景颜色
    <li> 设置状态栏的背景颜色

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    @@ -68,12 +69,13 @@

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    4. 忽略数字识自动别为电话号码
    <li> 忽略数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" />
    ```
    5. iOS 图标
    <li> iOS 图标

    参数：

    `apple-touch-icon` 图片自动处理成圆角和高光等效果。
    @@ -104,7 +106,7 @@
    <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" />
    ```
    6. iOS 启动画面
    <li> iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    @@ -152,7 +154,7 @@
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```

    </ol>
    ## Windows 8

    * Windows 8 磁贴颜色
  19. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -112,7 +112,7 @@

    * iPad的启动画面是不包括状态栏区域的。

    * iPad 竖屏 768 x 1004（标准分辨率）
    * <strong>iPad 竖屏 768 x 1004（标准分辨率）</strong>

    ```html
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
    @@ -135,7 +135,7 @@
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
    ```

    * iPhone 和 iPod touch的启动画面是包含状态栏区域的。
    * <strong>iPhone 和 iPod touch的启动画面是包含状态栏区域的。</strong>

    * iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

  20. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -48,6 +48,7 @@
    ```

    2. 是否启用 WebAPP 全屏模式

    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    @@ -112,35 +113,42 @@
    * iPad的启动画面是不包括状态栏区域的。

    * iPad 竖屏 768 x 1004（标准分辨率）

    ```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" />
    ```

    * iPhone 和 iPod touch的启动画面是包含状态栏区域的。

    * 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" />
    ```
  21. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -148,10 +148,12 @@
    ## Windows 8

    * Windows 8 磁贴颜色

    ```html
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    ```
    * Windows 8 磁贴图标

    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```
  22. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 23 additions and 18 deletions.
    41 changes: 23 additions & 18 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -47,11 +47,11 @@
    <meta name="apple-mobile-web-app-title" content="标题">
    ```

    是否启用 WebAPP 全屏模式
    2. 是否启用 WebAPP 全屏模式
    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    2. 设置状态栏的背景颜色
    3. 设置状态栏的背景颜色

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    @@ -67,12 +67,12 @@

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    3. 忽略数字识自动别为电话号码
    4. 忽略数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" />
    ```
    4. iOS 图标
    5. iOS 图标
    参数：

    `apple-touch-icon` 图片自动处理成圆角和高光等效果。
    @@ -103,8 +103,10 @@
    <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" />
    ```
    5. iOS 启动画面
    6. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。
    @@ -142,29 +144,32 @@
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```

    ## Windows 8

    * Windows 8 磁贴颜色

    ```html
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    ```
    ```html
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    ```
    * Windows 8 磁贴图标
    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```

    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```
    ## SEO 优化

    * 页面描述

    <meta name="description" content="" /> <!-- 页面描述 -->
    ```html
    <meta name="description" content="" /> <!-- 页面描述 -->
    ```

    * 页面关键词

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

    * 页面标题

    <title>标题</title>
    ```html
    <title>标题</title>
    ```

  23. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 26 additions and 12 deletions.
    38 changes: 26 additions & 12 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -27,18 +27,17 @@
    </p>
    ```

    * 优先使用IE最新版本和 Chrome

    ```html
    <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



    <head>
    <meta charset="UTF-8">

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

    <!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    ```html
    <meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
    ```

    ## iOS 设备

    @@ -143,14 +142,29 @@
    ```html
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    ```
    ## Windows 8

    * Windows 8 磁贴颜色

    ```html
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    ```
    * Windows 8 磁贴图标

    ```html
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    ```
    ## SEO 优化

    * 页面描述

    <!-- SEO 优化 -->
    <meta name="description" content="" /> <!-- 页面描述 -->

    * 页面关键词

    <meta name="keywords" content=""/> <!-- 页面关键词 -->
    <title>页面标题</title>
    </head>
    ```

    * 页面标题

    <title>标题</title>

  24. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 30 additions and 30 deletions.
    60 changes: 30 additions & 30 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -110,39 +110,39 @@

    * iPad的启动画面是不包括状态栏区域的。

    iPad 竖屏 768 x 1004（标准分辨率）
    ```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" />
    ```
    * iPad 竖屏 768 x 1004（标准分辨率）
    ```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" />
    ```

    * iPhone 和 iPod touch的启动画面是包含状态栏区域的。

    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" />
    ```
    * 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" />
    ```


    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  25. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 20 additions and 21 deletions.
    41 changes: 20 additions & 21 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -82,50 +82,49 @@

    * 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" />
    ```
    ```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" />
    ```
    ```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" />
    ```
    ```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" />
    ```
    ```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" />
    ```
    5. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。

    iPad 竖屏 768 x 1004 标准分辨率
    iPad 竖屏 768 x 1004（标准分辨率）
    ```html
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
    ```

    iPad 竖屏 1536x2008 Retina
    iPad 竖屏 1536x2008（Retina）
    ```html
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
    ```

    iPad 横屏 1024x748 标准分辨率
    iPad 横屏 1024x748（标准分辨率）
    ```html
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
    ```
    iPad 横屏 2048x1496 Retina
    iPad 横屏 2048x1496（Retina）
    ```html
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
    ```
  26. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 37 additions and 33 deletions.
    70 changes: 37 additions & 33 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -77,69 +77,73 @@
    参数：

    `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" />
    ```
    5. [iOS 启动画面](http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/)
    5. iOS 启动画面

    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html
    参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    * iPad的启动画面是不包括状态栏区域的。

    iPad 竖屏 768 x 1004 标准分辨率
    ```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" />
    ```
    iPad 竖屏 768 x 1004 标准分辨率
    ```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" />
    ```

    * iPhone 和 iPod touch的启动画面是包含状态栏区域的。

    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" />
    ```


    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" />
    ```


    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  27. @yisibl yisibl revised this gist Dec 17, 2013. No changes.
  28. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -80,22 +80,22 @@
    `apple-touch-icon-precomposed` 禁止系统自动添加效果，直接显示设计原图。

    * iPhone 和 iTouch，默认 57x57 像素，必须有
    ``html
    ```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
    ```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
    ```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
    ```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" />
    ```
  29. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 69 additions and 12 deletions.
    81 changes: 69 additions & 12 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -60,9 +60,9 @@
    `"apple-mobile-web-app-capable" content="yes"` 时生效

    参数：
    * default 默认值，
    * black 状态栏背景是黑色
    * black-translucent 状态栏背景是黑色半透明
    * default 默认值。
    * black 状态栏背景是黑色。
    * black-translucent 状态栏背景是黑色半透明。

    如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。

    @@ -73,16 +73,73 @@
    ```html
    <meta name="format-detection" content="telephone=no" />
    ```
    4. 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" />
    ```
    5. [iOS 启动画面](http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/)

    <!-- iOS 图标 begin -->
    <!--默认 57x57 像素-->
    <link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
    <!--iPad 1 72x72 像素-->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
    <!--iPhone 4 114x114 像素-->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
    <!-- iOS 图标 end -->
    ```
    官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

    * iPad的启动画面是不包括状态栏区域的。

    iPad 竖屏 768 x 1004 标准分辨率
    ```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" />
    ```

    * iPhone 和 iPod touch的启动画面是包含状态栏区域的。

    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" />
    ```




    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  30. @yisibl yisibl revised this gist Dec 17, 2013. 1 changed file with 24 additions and 21 deletions.
    45 changes: 24 additions & 21 deletions HTML-tags.md
    View file
    Original file line number Diff line number Diff line change
    @@ -42,35 +42,38 @@

    ## iOS 设备

    添加到主屏时的标题
    1. 添加到主屏时的标题

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

    是否启用 WebAPP 全屏模式
    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    是否启用 WebAPP 全屏模式
    ```html
    <meta name="apple-mobile-web-app-capable" content="yes" />
    ```
    2. 设置状态栏的背景颜色

    `"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 状态栏背景是黑色半透明

    如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。
    如果设置为 `default` 或 `black` ,网页内容从状态栏底部开始。

    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
    如果设置为 `black-translucent` ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

    ```html
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    ```
    3. 忽略数字识自动别为电话号码

    ```html
    <meta name="format-detection" content="telephone=no" /> <!-- 忽略数字识自动别为电话号码 -->
    ```
    ```html
    <meta name="format-detection" content="telephone=no" />
    ```

    <!-- iOS 图标 begin -->
    <!--默认 57x57 像素-->
    <link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />