html5 meta标签的含义和用法-前端撸码笔记

随着HTML5的流行和Web技术的不断演变，Meta标签队伍也越来越壮大，从Windows XP的IE6到如今Windows 7、Windows 8的IE9、IE10、IE11，对Html5的支持越来越好，html meta标签的功能作用也越来越强大。

首先，先说一下最初产生的一些常用meta标签。从Meta标签的定义说起。

Meta标签是HTML语言中HEAD区的一个辅助性标签，它位于HTML文档头部的<head>标记和<title>标记之间，它提供用户不可见的信息。META标签有两个重要的属性：HTTP标题信息(HTTP-EQUIV)和页面描述信息(name)。

name属性是描述网页的，对应于content（网页内容），以便于搜索引擎机器人查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。

Meta标签的name属性语法格式：＜meta name=”参数” content=”具体参数值”＞

1. Keywords (关键字)
说明：告诉搜索引擎你网页的关键字是什么。
用法：<meta name=”keywords” content=”SEO优化,SEO优化教程,网站优化,搜索引擎优化教程”>

2. Description (网页描述)
说明：Description用来告诉搜索引擎你的网页主要内容。
用法：<meta name=”description” content=”学习研究搜索引擎优化网提供专业的SEO优化教程，收集整理SEO优化文章、SEO优化工具，为网络营销贡献出自己的一份力量。” />

3. Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<meta name=”robots” content=”All|None|Index|Noindex|Follow|Nofollow”>
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；（让robot/spider登录）
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

4. Author (作者)
说明：标注网页的作者或制作组
用法：<meta name=”author” content=”mycodewind，mycodewind@qq.com”>
注意：Content可以是：你或你的制作组的名字,或Email

5. Copyright (版权)
说明：标注版权
用法：<meta name=”copyright” content=”本网站版权归CSDN所有”>

6. Generator (编辑器)
说明：编辑器的说明
用法：<meta name=”generator” content=”PCDATA|FrontPage|”>
注意：Content=”你所用编辑器”

7. Revisit-after (重访)
说明：通知搜索引擎多少天访问一次
用法：<meta name=”revisit-after” content=”7 days” >

从IE9开始引入了固定网站功能，对用户来说这是一种只需在任务栏上单击图标即可直接访问网站的简单方式。固定网站还易于实现，仅需要非常少的代码。以下的元数据标签只在IE9+生效。如Windows Vista,Windows 7系统上。官方文档地址http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx 。所有元素都是可选的。包括：

针对安装的元数据：下面的 meta 元素控制如何在“开始”菜单和 Windows 7 任务栏上创建固定站点快捷方式。所有这些元素都是可选的，但是强烈建议对页面起始处、页面名称、更好的辅助或识别功能以及启动时的自定义大小具有更多控制。
安装元数据元素仅在用户固定网站时使用。此后，对这些值的更改将不会对固定网站造成任何影响。因此，以下 meta 元素有时候被称为“安装时”值：

application-name
msapplication-tooltip
msapplication-starturl
msapplication-window

运行时元数据：与安装时值不同，在用户每次启动固定网站时将读取以下元数据。因此，网站开发人员可使用这些值不断修改用户体验。控制对这些值的更改的最佳方法是在固定网站的起始 URL 中定义它们。

msapplication-navbutton-color
msapplication-task
msapplication-task-separator

8.application-name
说明：”application-name” 元数据定义固定网站应用程序实例的名称。当光标悬停在 Windows 7 任务栏的固定网站按钮上时，此名称将出现在工具提示中。该应用程序名称还将附加到固定网站应用程序实例的窗口标题中。
用法：<meta name=”application-name” content=”8783手游网” />

9.msapplication-tooltip
说明：”msapplication-tooltip” 元数据提供其他工具提示文本，当光标悬停在 Windows 的“开始”菜单中或桌面上的固定网站快捷方式上时，将会出现这些文本。
用法：<meta name=”msapplication-tooltip” content=”8783手游网” />

10.msapplication-starturl
说明：”msapplication-starturl” 元数据包含应用程序的根 URL。起始 URL 可以是完全限定或相对于当前文档的。只允许 HTTP 和 HTTPS 协议。如果缺少此元素，则改为使用当前页的地址。
用法：<meta name=”msapplication-starturl” content=”./” />
补充：”msapplication-starturl” 元数据创建你的网站的公共入口点。当存在此元数据时，固定网站会启动起始 URL 而不是最初拖动到任务栏的页面。更重要的是，起始页中声明的运行时元数据将在每次启动网站时重新定义导航按钮颜色和静态跳转列表任务。（有关详细信息，请参阅运行时元数据部分。）

作为如何使用 “msapplication-starturl” 的示例，请考虑一个提供多个类型的计算器仿真器的站点：一个具有标准布局，一个具有科学布局，一个具有统计函数。如果没有起始 URL，用户可能只将科学计算器固定到任务栏，从而无法轻松地访问集合中的其他计算器。通过添加起始 URL，网站开发人员可以声明网站的公共入口点。

通过将安装时元数据添加到仿真程序页面，网站开发人员可控制用户访问网站的方式。通过在起始页中添加跳转列表元数据，网站开发人员可以更轻松地控制用户选择要使用的计算器样式的方式。有关详细信息，请参阅向跳转列表添加任务。
处理服务器重定向

如果你的起始 URL 重定向到其他网页，请确保声明提供给客户端的网页中的所有运行时元数据。如果服务器重定向到新路径，则你的起始 URL 必须包括该路径和结尾反斜杠 (/)。

例如，如果 “http://contoso.com/” 重定向至 “http://www.contoso.com/Home/”，则起始 URL 必须包括新路径和结尾反斜杠，如下所示：

11.msapplication-window
说明：”msapplication-window” 元数据设置固定网站首次启动时的初始窗口大小。但是，如果用户调整了窗口大小，则再次启动固定网站时，该网站将保留新的尺寸。
下表说明了构成 meta 元素的 content 特性的两个部分。这两个部分都是必需的，且必须用分号隔开。
部分   说明
width   以像素表示的窗口宽度。最小值为 800。
height   以像素表示的窗口高度。最小值为 600。
用法：<meta name=”msapplication-window” content=”width=1024;height=768″ />

12.msapplication-navbutton-color
说明：”msapplication-navbutton-color” 元数据定义固定网站浏览器窗口中的“后退”和“前进”按钮的自定义颜色。任何命名颜色或十六进制颜色值均有效。有关颜色名称的完整列表，请参阅颜色表（访问http://msdn.microsoft.com/zh-cn/library/ie/ms531197%28v=vs.85%29.aspx）。
用法：<meta name=”msapplication-navbutton-color” content=”#FF3300″ />
补充：如果没有此 meta 元素，则默认颜色将基于网站图标（即，favicon）的调色板。若要了解如何为你的网站选择自定义图标，请参阅自定义站点图标（访问http://msdn.microsoft.com/zh-cn/library/ie/gg491740%28v=vs.85%29.aspx）。

13.msapplication-task
说明：它能够将一个网站如同程序固定在 Windows Vista 和 Windows 7 的任务栏中，并且在点击图标后显示一个相关网站的列表。与其他网站元数据一样，可使用 meta 元素定义静态任务。下一个任务向跳转列表（访问http://msdn.microsoft.com/zh-cn/library/ie/gg491725%28v=vs.85%29.aspx）添加任务说明了如何执行此操作。
用法：<meta name=”msapplication-task” content=”name=8783手游网;action-uri=http://www.8783.com;icon-uri=../static/8783.ico” />

14.msapplication-task-separator
说明：将此元素放在各个任务之间，以便在跳转列表菜单中放置一条分隔线。如果有多条分隔线，则必须通过声明 content=”[unique value]” 使每条分隔线都具有唯一性。
用法：
<meta name=”msapplication-task” content=”name=Latest HTMLGoodies Articles; action-uri=http://www.htmlgoodies.com/; icon-uri=http://www.htmlgoodies.com/Favicon.ico” />

更多用例：

Bing.com的使用案例：
<meta content=”Bing” name=”application-name” />
<meta content=”Bing” name=”msapplication-tooltip” />
<meta content=”width=1024;height=768″ name=”msapplication-window” />
<meta content=”/” name=”msapplication-starturl” />

BeautyoftheWeb.com的使用案例：
<meta name=”application-name” content=”Beauty Of The Web” />
<meta name=”msapplication-tooltip” content=”Start the Beauty Of The Web” />
<meta name=”msapplication-starturl” content=”http://www.beautyoftheweb.com/” />
<meta name=”msapplication-navbutton-color” content=”#5f6dbd” />

Facebook.com的使用案例：
<meta name=”application-name” content=”Facebook”/>
<meta name=”msapplication-tooltip” content=”Start the Facebook App”/>
<meta name=”msapplication-starturl” content=”/”/>
<meta name=”msapplication-window” content=”width=800;height=600″/>

2012年10月26日，微软发布了Windows8和Microsoft Surface及其默认的IE10，这次不仅增加了对大量HTML5、CSS3特性的支持，而且有一个非常方便用户的功能：固定站点。

Windows 8 通过在“开始”屏幕上使用磁贴来实现固定网站。当用户单击固定网站的磁贴时，该网站将在新 Windows UI 环境中在 Internet Explorer 10 中打开。你将在下面了解到如何在 Windows 8 中实现固定网站通知（访问http://msdn.microsoft.com/zh-cn/library/IE/hh880842%28v=vs.85%29.aspx）。
你必须提供以下几条信息以在 Windows 8 中正确实现固定网站通知：

轮询通知的 Web 服务的位置
反应当前锁屏提醒状态的最新 XML 文件
更新将发生的频率

以下元标签为Windows8/Microsoft Surface(IE10+)新引入的：

15.msapplication-TileImage
说明：在Windows 8上，我们可以将网站固定在开始屏幕上，而且支持个性化自定义色块icon和背景图片。这个标签是用来定义色块的背景图的。色块图应该为144*144像素的png格式图片，背景透明。
用法：<meta name=”msapplication-TileImage” content=”tile.png”>

16.msapplication-TileColor
说明：同前一个元数据msapplication-TileImage类似，这个功能是用来设置颜色值，个性化自定义色块（磁贴）icon。颜色值应该设为logo的主色或者网站视觉的主色调颜色。CSS颜色值可以是16进制的形式（如#333333），命名形式（如red）或者CSS函数（如RGB），如果不设置颜色，IE将默认提取网站icon或色块背景图片的主色来显示为背景色。在IE内的历史检索和其他地方，也会用到这个默认色与icons。
用法：<meta name=”msapplication-TileColor” content=”#ef0303″>
补充：在合并制作固定网站的icons图时，你仅仅需要在一个选定的背景色上放上白色或黑色的小icon图，不要使用色彩复杂的大图片来做。IE10的色块图尺寸144*144与高分辨率的iPad icon一致。不过，在不同的系统平台上使用同一个icon图时，要注意，因为不同系统平台对icon图的渲染呈现是不一样的。Internet Explorer 10将使用当前页面的标题用于磁贴名称。如果我们想定义一个不同的名称，可以使用title meta标签：<meta name=”title” content=”Tile title”>

以下的17-21五个元标签是WINDOWS商店应用集成相关的功能：

17.msApplication-ID
说明：如果你有一款Windows商店应用你可以使用一些meta标签将你的网站与它联系起来。IE将会显示一个菜单让用户可以快速获得这个应用，如果用户还没有安装它的话。如果应用已经安装过了，菜单会变为“切换到xxx应用”。
其实这个特性与IOS6上的智能广告推送功能很相似。不过，微软是在Apple之前发布的这个特性。msApplication-ID为必选项。定义在程序manifest中的id。
用法：<meta name=”msApplication-ID” content=”App”/>

18.msApplication-PackageFamilyName
说明：必选项。Microsoft Visual Studio创建的用于标识应用的Package family。
用法：<meta name=”msApplication-PackageFamilyName” content=”ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj”/>

19.msApplication-Arguments
说明：可选项。要传递给你的应用的字符串。如果我们不定义这个meta信息，IE将自动传递当前的URL。
用法：<meta name=”msApplication-Arguments” content=”http://www.8783.com/gl/27647.shtml”/>

下面的代码片段显示了在使用 JavaScript 的 Windows 应用商店应用中如何处理此参数（更多用法访问http://msdn.microsoft.com/zh-cn/library/ie/hh781489%28v=vs.85%29.aspx）：

[javascript] view plaincopy

// Function available in default.js file in Visual Studio templates provided
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Insert this code to handle incoming argument when Internet Explorer launches the app
if (e.detail.arguments) {
// Parse the value of the msApplication-Arguments string
// Direct incoming user to relevant in-app content
}
}
}

20.msApplication-MinVersion
说明：可选项。强制要求应用的最小版本号。因此，如果你的用户使用一个更旧的版本，要想切换到这个应用的话她会被要求到商店去更新它。
用法：<meta name=”msApplication-MinVersion” content=”V3.0 Build 20140308″/>

21.msApplication-OptOut
说明：可选项。允许我们的HTML文档在一些情况不与应用相关联。要选的值有：install，它将阻止在用户没装应用的情况下提示安装应用；switch将阻止在用户已安装应用的情况下提示用户切换到应用。both，将阻止以上两种情况的提示。

用法：<meta name=”msApplication-OptOut” content=”install”/>

22. MSSmartTagsPreventParsing
说明：在Microsoft IE 6 中有一个 Smart tag 开关，如果您包含下面标记，访问这将看不到某些相关连接，这样可以避免访问者流失到竞争对手的网站上去。
用法：<meta name=”MSSmartTagsPreventParsing” content=”True” />

23.MSThemeCompatible
说明：是否在IE中关闭xp 的主题。<meta http-equiv=”MSThemeCompatible” content=”Yes” />表示打开xp 的蓝色立体按钮系统显示。
用法：<meta http-equiv=”MSThemeCompatible” Content=”No”>

24.msapplication-badge 元标记

说明：固定网站的新的元标记描述轮询 URL。Windows 8 可以轮询“开始”屏幕中固定图块的更新。这对于轻量级的通知，例如，来自其他用户（电子邮件和社交网站）的新消息、购物网站的最新折扣和新闻网站的最新报道等通知来说效果非常明显。使用 Internet Explorer 10 和 Windows 8，您可以直接在您的固定网站图块上提供徽章通知。这意味着无需在浏览器中打开网站即可看到这些网站的更新内容。例如，在 Windows 8 Consumer Preview 中使用 IE10 来固定 Fresh Tweet 演示。固定网站的图块将定期更新并将在出现新的 Tweet 时通知用户。背景通知需要网站提供的组件。这些组件包括：(1) 徽章通知 XML，描述 Windows 徽章通知的 XML 响应，以及 (2) 固定网站元标记，指向 Windows 轮询通知和轮询频率的位置的 Web 页面标记。

用法：

名称值 “msapplication-badge” 是必需的，并指示当锁定到“开始”屏幕时网站支持锁屏提醒通知。

内容值 “frequency” 是可选的，并指示客户端应该检查轮询 URL 的更新的频率（每分钟）。受支持的值包括 30、60、360（6 小时）、720（12 小时）和 1440（1 天）。如果未指定任何值，则使用 1440 小时的默认值。

内容值 “polling-uri” 是必需的，并指示用于轮询 XML 数据文件的 URL。仅支持 “http” 和 “https” URI 方案。

锁屏提醒描述文件

锁屏提醒通知可以使用从 1 至 99 的数字或者 10 个标准标志符号之一来更新你的固定网站磁贴。有关锁屏提醒图像的图解列表，请参阅锁屏提醒图像目录（Windows 应用商店应用，访问http://msdn.microsoft.com/zh-CN/library/windows/apps/Hh761458.aspx）。在下面的 XML 示例中所描述的锁屏提醒指示收到了新消息。

Windows 处理徽章通知的轮询和提取。Windows 轮询描述固定网站图块视觉效果的徽章通知 XML。徽章 XML 架构定义这一简单的 XML 响应。例如，要使用数字锁屏提醒“3”来更新图块，您需要发送以下 XML：

<?xml version=”1.0″ encoding=”utf-8″ ?>

徽章可以是数字或字形（例如，“警报”和“新消息”指示器）。有关徽章可显示内容的全部列表，请参阅 MSDN 上的选择徽章图像（访问http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761458.aspx）。

下面的 XML 添加了字形锁屏提醒。

有关 XML 值、标志符号和示例的完整描述，请参阅 Badge schema（访问http://msdn.microsoft.com/zh-CN/library/windows/apps/br212851.aspx）。

配置了徽章通知 XML文件后，按下来是将徽章通知 XML 与 Web 页面相关联。IE10 使用元标记 “application-name”来确定是否 Web 页面支持固定网站功能，如通知和跳转列表。要支持徽章通知，请将新的元标记添加到包含徽章通知 XML 的 URL 和 Windows 请求频率的标记语言中。IE 将检查在固定时和从固定网站图块后续启动网站时页面中是否存在“msApplication-badge”元标记。

值参加由两部分组成：polling-uri（强制部分）和 frequency（可选部分）。

polling-uri 是 Windows 用来请求上述简单 XML 文档的绝对 URI。

frequency 是两次更新之间的可选分钟数，其必须为下列值之一：

30（Windows 将每 30 分钟轮询一次 URI）
60（Windows 将每 60 分钟轮询一次 URI）
360（Windows 将每 6 小时轮询一次 URI）
360（Windows 将每 12 小时轮询一次 URI）
1440（Windows 将每天轮询一次 URL。该值为默认值。）

如果省略 frequency，或者它的值是不同于上述值的其他值，则默认设置为每天更新一次（1440 分钟）。

更新徽章通知的开发人员 API：

刷新锁屏提醒状态

Internet Explorer 10 引入了你可以根据需要用于请求 Windows 轮询固定网站的通知状态的JavaScript形式 API：window.external.msSiteModeRefreshBadge();例如，当用户积极地浏览你的网站时，你可能要更频繁地更新固定网站的通知锁屏提醒。当网站被打开以刷新锁屏提醒状态时，你可能还要这样做。所以您可以使用此API从 Web 页面直接清除或刷新网站图块，以便确保网站图块的内容是最新的。

当用户通过“开始”屏幕启动固定网站时，Web 网站将在其自有的 SiteMode 会话中运行，并且可使用下列 JavaScript 函数更新徽章。

window.external.msSiteModeClearBadge() 可以清除图块上的徽章通知。在 Fresh Tweet 演示中，当用户收到通知并点击图块启动浏览器时，Web 页面将使用 msSiteModeClearBadge() 从图块上清除通知。这样，当下次图块上显示通知并亮起时，用户便可以意识到有了新内容。

window.external.msSiteModeRefreshBadge() 调用 Windows 来使用轮询 URI 更新网站徽章。例如，当用户看到固定网站图块显示存在三个未读消息并单击该图块返回网站时。如果他/她只阅读了第一个更新，则您可以触发更新以便徽章可以正确反映出已读/未读数量 2。

在 Windows 8 Consumer Preview 中，这两个 API 仅对在本地 Intranet 或受信任的站点区域中运行的网站有效。下一个预览版中将有效地解决该问题。要使用 Consumer Preview 在您的自有网站上测试这些 API，请使用 [Internet Properties]（Internet 属性）对话框中的 [Security]（安全）选项卡将该网站的域添加到受信任站点列表。

桌面任务栏通知

桌面任务栏中显示为图标叠加的固定网站通知将继续适用于桌面上的 Windows 8 和 IE10。Windows 8“开始”屏幕中的固定站点不存在这种通知。Windows 8 不仅可以处理“开始”屏幕中的所有图块的通知，而且可以节电模式来完成这些操作。

25.移动端viewport标签

[html] view plaincopy

<meta name=”viewport”
content=”
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
“
/>

含义如下：

width

控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height

和 width 相对应，指定视窗的高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的取值范围

device-dpi –使用设备原本的 dpi 作为目标 dp。不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。高像素密度设备相应放大，像素密度设备相应缩小。这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

另外，iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时默认隐藏地址栏与导航栏