常用的 HTML 头部标签 #1

yisibl · 2013-12-17T09:18:17Z

曾几何时，我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」，但是我们真的了解这些标签了吗？本文着重介绍一些我们容易忽视和用错的头部标签，特别是 iOS 等针对移动设备的一些标签。这是一篇非常基础的标签索引，其中 iOS 设备部分对设计师也有参考作用。

如果是快速开发，可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401

以下是正文部分：

基本标签

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

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

声明文档使用的字符编码

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

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

简体中文

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

繁体中文

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

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

<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"> <!-- 优先使用 IE 最新版本和 Chrome -->

SEO 优化

页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档
```
<meta name="description" content="不超过150个字符"> 
```

页面关键词

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

定义页面标题
```
<title>标题</title>
```

定义网页作者

<meta name="author" content="name, email@gmail.com"> <!-- 网页作者 -->

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档
```
<meta name="robots" content="index,follow"> 
```

可选标签

为移动设备添加 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 -->

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)
minimal-ui _iOS 7.1 beta 2_ 中新增属性（_注意：iOS8 中已经删除_），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

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

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

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 是否启用 WebApp 全屏模式 -->

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

content 参数：
- default 默认值。
- black 状态栏背景是黑色。
- black-translucent 状态栏背景是黑色半透明。
如果设置为 default 或 black ,网页内容从状态栏底部开始。

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

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

<meta name="format-detection" content="telephone=no"> <!-- 禁止数字识自动别为电话号码 -->

禁止自动自动识别地址

<meta name="format-detection" content="address=no"> <!-- 禁止自动自动识别地址 -->

禁止自动自动识别日期

<meta name="format-detection" content="date=no">  <!-- 禁止自动自动识别日期 -->

禁止自动自动识别 Email

<meta name="format-detection" content="email=no">  <!-- 禁止自动自动识别 Email -->

iOS 图标

rel 参数：

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

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

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

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

iPad，72x72 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"> <!-- iPad，72x72 像素，可以没有，但推荐有 -->

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

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

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

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（标准分辨率）

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

iPad 竖屏 1536x2008（Retina）

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

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

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

iPad 横屏 2048x1496（Retina）

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

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

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

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

iPhone/iPod Touch 竖屏 640x960 (Retina)

<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)

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

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

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

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

  <meta name="theme-color" content="#db5945">

Windows 8

Windows 8 磁贴颜色

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

Windows 8 磁贴图标

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

360 浏览器

设置 360 浏览器渲染模式

webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。
```
<meta name="renderer" content="webkit|ie-comp|ie-stand">
```

UC 浏览器

设置屏幕方向

portrait 为横屏，landscape 为竖屏。

<meta name="screen-orientation" content="portrait|landscape">

设置全屏
```
<meta name="full-screen" content="yes">
```
设置适应屏幕排版（缩放是否显示滚动条）

UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。
```
<meta name="viewport" content="uc-fitscreen=no|yes">
```
排版模式

UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。
```
<meta name="layoutmode" content="fitscreen|standard">
```
夜间模式

可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。
```
<meta name="nightmode" content="enable|disable">
```
整页图片强制显示

为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面
```
<meta name="imagemode" content="force">
```

开启应用模式

应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

参数	状态	说明
全屏	生效	可通过 `meta` 或 JS API 调用退出全屏
长按菜单	失效	可通过 JS API 调用重新生效
浏览器默认手势	失效	可通过 JS API 调用重新生效
排版模式	标准模式	可通过 `meta` 或 JS API 调用设置其他排版模式
强制图片显示	生效	/
夜间模式	失效	可通过 `meta` 或 JS API 调用启用夜间模式

<meta name="browsermode" content="application">

QQ 浏览器（X5 内核）

  <!-- 设置横屏、竖屏显示，portrait 横屏，landscape 竖屏-->
  <meta name="x5-orientation" content="portrait|landscape">
  <!-- 设置全屏显示 -->
  <meta name="x5-fullscreen" content="true">
  <!-- 开启应用模式 -->
  <meta name="x5-page-mode" content="app">

其他

添加 RSS 订阅

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

添加 favicon icon

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

禁止 Chrome 浏览器中自动提示翻译

更多：http://www.w3.org/International/questions/qa-translate-flag
```
<meta name="google" value="notranslate">
```

禁止百度转码

<meta http-equiv="Cache-Control" content="no-siteapp"><!-- 禁止百度转码 -->

更多

参阅：

The text was updated successfully, but these errors were encountered:

bnuhero · 2013-12-17T11:48:37Z

favicon小抄比较详细地介绍了favicon的用法。

GoToBoy · 2013-12-17T12:38:44Z

good 虽然是基础的，我缺的

shawnXiao · 2013-12-17T14:20:12Z

感觉讲meta的这三篇文章不错：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
http://wiki.whatwg.org/wiki/MetaExtensions
http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013/

hax · 2013-12-18T10:10:08Z

chrome=1这个现在是否不再需要了？

hax · 2013-12-18T10:10:26Z

description不超过150字的出处在哪里？

hax · 2013-12-18T10:11:05Z

keywords应该怎么写？比如怎么分割？逗号？空格？

hax · 2013-12-18T10:12:11Z

网页作者 name和email逗号分割，这个出处在哪里？其他格式不行吗？

hax · 2013-12-18T10:13:19Z

viewport 参数，iOS 7新加了一个啥。还有android支持targetdpi啥的。

hax · 2013-12-18T10:15:26Z

更多里有点啥？挑点有用的说吧。

我常用的还有 link rel=canoncial

ghost · 2013-12-19T17:24:33Z

mark

yisibl · 2013-12-21T15:45:12Z

@hax 新增的 minimal-ui #1 (comment)

antchen · 2013-12-25T02:29:06Z

mark

rogueduola · 2013-12-26T05:23:57Z

mark

wdxiake · 2014-01-06T09:27:25Z

mark

markyun · 2014-01-09T17:25:43Z

速速更新吧。一丝大美妞。

yisibl · 2014-01-10T08:35:24Z

@markyun 更新啥？~~~~(>_<)~~~~

clinx · 2014-02-14T16:28:35Z

http://www.iyunlu.com/view 不能访问了。本来还想这几天想看上面的一些博文的。

barretlee · 2014-03-14T11:23:30Z

mark, 赞！

sgsheg · 2014-04-09T00:46:56Z

mark

paddingme · 2014-08-13T13:07:57Z

mark 赞

0532 · 2014-09-11T09:08:25Z

占位 http://0532.github.com

tthallos · 2014-10-22T02:50:13Z

👍

codetodamoon · 2014-10-27T09:01:32Z

zenoven · 2014-10-31T06:38:36Z

mark~~ very nice~~

alanerzhao · 2014-11-05T06:53:21Z

好文

fankangsong · 2014-11-11T15:45:56Z

标记一下http://fex.baidu.com/blog/2014/10/html-head-tags/

litson · 2014-11-18T05:25:06Z

viewport miniui IOS 8已经被废弃了

yisibl · 2014-11-18T09:47:06Z

@litson 好的，感谢，已经更新正文。

wwek · 2014-11-20T02:34:02Z

非常感谢~ 用上了`

firebaby · 2014-12-02T08:13:44Z

可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401
链接打不开

yisibl · 2014-12-02T08:40:14Z

@firebaby 可能要翻墙。

leoxoocanada · 2015-04-24T10:43:15Z

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

这一栏里的图片尺寸都错了

经过测试正确的如下：

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

iPhone/iPod Touch 竖屏 640x920 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1096 (Retina)

yisibl · 2015-04-24T11:06:12Z

@gafish 感谢，待测试后修改。

yisibl · 2015-11-13T07:14:11Z

minimal-ui 已被删除

hax · 2015-11-13T08:37:19Z

minimal-ui 被删除的原因有 reference 吗？

yisibl · 2015-11-13T09:59:50Z

@hax 应该主要还是从用户体验角度考虑的，如果用户打开一个全屏的页面，不知道点击顶部可以出现工具栏，那么这个页面就没法关闭了。iOS 8 中改成向上滑动一段距离隐藏工具栏，快速下滑显示工具栏的体验会更好一些。

pobing · 2016-01-07T06:47:26Z

👍

haoqunjiang · 2016-01-07T08:40:24Z

「更加标准的 lang 属性写法」这一节的内容已经过时，请参考知乎上猎奇怪蜀黍的回答，在 IANA Language Subtag Registry 中，zh-cmn-Hans 已经被标记为 Deprecated 了：

%%
Type: redundant
Tag: zh-cmn-Hans
Description: Mandarin Chinese (Simplified)
Added: 2005-07-15
Deprecated: 2009-07-29
Preferred-Value: cmn-Hans

hax · 2016-01-10T07:17:32Z

@sodatea 使用 zh 前缀是为了兼容性。

haoqunjiang · 2016-01-13T07:52:26Z

@hax 今天仔细阅读了下 BCP47，的确，zh-cmn-Hans 是对的……

不过您在知乎上的回答也有些疏漏，根据 BCP47 里的 Language Tag ABNF，zh 以及 zh-CN 是完全符合标准的，尤其是 4.1.2 节特地拿了 zh-HK 作为例子表示标准是兼容这种习惯用法的。

而且后者在实际使用中也确实有对应的使用场景。比如，香港的网络论坛中，帖子内容很有可能是 cmn-Hant-HK 和 yue-Hant-HK 的混合，在没办法逐字加语言标记的情况下，网站只能取两者的公共子集 zh-HK 了。

hax · 2016-01-13T09:12:43Z

我描述的是我推荐的用法。

zh-CN 的问题是，过去标记为 zh-CN 的，实际上99.99%是想表达 zh-Hans。真正需要用 zh-CN 标记的场合完全没有。

4.1.2节的意思是为了兼容性，可以继续用 zh-HK 表达 yue。但是这不等于鼓励你继续用它。实际上你应该用 yue。我认为 BCP47 在这点上也写得不够好。（毕竟是老外写的，国人参与标准讨论恐怕很少。）因为 zh-HK 比 zh-CN 更麻烦点，过去标记为 zh-HK 的，70%是想表达 yue，但还有30%是想表达 zh-Hant（当然这百分比是我拍脑袋得出的，了解意思就好）。

对于你讲的场景，实际上 UGC 是没法标记语言的，除非作者自己给你标。（显然普通用户是不可能的。）比如，香港网络论坛也可能包含内容是英语的帖子，或者完全是用简体书写的文字。

所以一般网页上的 lang tag 表示的是网页自身 UI 是什么语言。那么通常可以明确是 zh-cmn-Hant。

即使你真的想表示这个香港本地论坛 UGC 的主流语言，使用 zh-Hant-HK 也比 zh-HK 好。因为当你使用 zh-HK 时我们根本不清楚你是在哪个意义上使用的（因此通常应用就猜你的意思实际是 yue）。

WangXiaoJin · 2016-03-04T07:27:47Z

+1

xbzhs · 2016-05-04T03:25:33Z

+1

zchuhui · 2016-06-29T05:23:05Z

+2

raly · 2017-03-24T08:23:59Z

mark

noobalex · 2017-05-19T14:33:57Z

不手写HTML标签？

liu12fei08fei · 2018-01-14T19:19:25Z

棒👍

wfzong · 2018-04-09T07:19:02Z

mark

danffer2019 · 2019-12-27T14:24:46Z

none yet

danffer2019 · 2019-12-27T14:26:36Z

曾几何时，我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」，但是我们真的了解这些标签了吗？本文着重介绍一些我们容易忽视和用错的头部标签，特别是 iOS 等针对移动设备的一些标签。这是一篇非常基础的标签索引，其中 iOS 设备部分对设计师也有参考作用。

如果是快速开发，可以直接到 Gist 复制代码：https://gist.github.com/yisibl/7985401

以下是正文部分：

基本标签
使用 HTML5 doctype，不区分大小写。
<!DOCTYPE html> 
声明文档使用的字符编码
<meta charset='utf-8'> 
更加标准的 lang 属性写法 http://zhi.hu/XyIa
简体中文
<html lang="zh-cmn-Hans"> 
繁体中文
<html lang="zh-cmn-Hant"> 
很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

菠萝和鳳梨其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为黄梨。

优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
SEO 优化
页面描述
每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档
<meta name="description" content="不超过150个字符"> 
页面关键词
<meta name="keywords" content=""> 
定义页面标题
<title>标题</title>
定义网页作者
<meta name="author" content="name, email@gmail.com"> 
定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档
<meta name="robots" content="index,follow"> 
可选标签

为移动设备添加 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

content 参数：

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui _iOS 7.1 beta 2_ 中新增属性（_注意：iOS8 中已经删除_），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

添加到主屏后的标题（iOS 6 新增） <meta name="apple-mobile-web-app-title" content="标题">  * 是否启用 WebApp 全屏模式 <meta name="apple-mobile-web-app-capable" content="yes">  * 设置状态栏的背景颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">  只有在 "apple-mobile-web-app-capable" content="yes" 时生效 content 参数： * default 默认值。 * black 状态栏背景是黑色。 * black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 * 禁止数字自动识别为电话号码 <meta name="format-detection" content="telephone=no">  * 禁止自动自动识别地址 <meta name="format-detection" content="address=no">  * 禁止自动自动识别日期 <meta name="format-detection" content="date=no">  * 禁止自动自动识别 Email <meta name="format-detection" content="email=no">  * iOS 图标 rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 * iPhone 和 iTouch，默认 57x57 像素，必须有 <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  * iPad，72x72 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">  * Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">  * Retina iPad，144x144 像素，可以没有，但推荐有 <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 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"> 
iPad 竖屏 1536x2008（Retina）
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"> 
iPad 横屏 1024x748（标准分辨率）
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"> 
iPad 横屏 2048x1496（Retina）
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"> 
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"> 
iPhone/iPod Touch 竖屏 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"> 
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"> 
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。
 <meta name="theme-color" content="#db5945">
Windows 8
Windows 8 磁贴颜色
<meta name="msapplication-TileColor" content="#000"/> 
Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png"/> 
360 浏览器
设置 360 浏览器渲染模式
webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
UC 浏览器
设置屏幕方向
portrait 为横屏，landscape 为竖屏。
<meta name="screen-orientation" content="portrait|landscape">
设置全屏
<meta name="full-screen" content="yes">
设置适应屏幕排版（缩放是否显示滚动条）
UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。
<meta name="viewport" content="uc-fitscreen=no|yes">
排版模式
UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。
<meta name="layoutmode" content="fitscreen|standard">
夜间模式
可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。
注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。
<meta name="nightmode" content="enable|disable">
整页图片强制显示
为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。
**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面
<meta name="imagemode" content="force">
开启应用模式
应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

参数
状态
说明

全屏
生效
可通过 meta 或 JS API 调用退出全屏

长按菜单
失效
可通过 JS API 调用重新生效

浏览器默认手势
失效
可通过 JS API 调用重新生效

排版模式
标准模式
可通过 meta 或 JS API 调用设置其他排版模式

强制图片显示
生效
/

夜间模式
失效
可通过 meta 或 JS API 调用启用夜间模式
<meta name="browsermode" content="application">
QQ 浏览器（X5 内核）
 
 <meta name="x5-orientation" content="portrait|landscape">
 
 <meta name="x5-fullscreen" content="true">
 
 <meta name="x5-page-mode" content="app">
其他
添加 RSS 订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"> 
添加 favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"> 
禁止 Chrome 浏览器中自动提示翻译
更多：http://www.w3.org/International/questions/qa-translate-flag
<meta name="google" value="notranslate">
禁止百度转码
<meta http-equiv="Cache-Control" content="no-siteapp">
更多

参阅：

你需要知道的 HTML META

HTML5 Boilerplate explanations and suggestions of header tags

Complete List of HTML Meta Tags

paddingme mentioned this issue Oct 30, 2014

HTML head 头标签 paddingme/Learning-HTML-CSS#4

Open

303182519 mentioned this issue Nov 14, 2015

无聊 hoozi/angular-chat#1

Closed

caoweiju mentioned this issue Feb 21, 2019

浏览器的meta标签大全 caoweiju/learn_load#2

Open

常用的 HTML 头部标签 #1

常用的 HTML 头部标签 #1

Comments

yisibl commented Dec 17, 2013

基本标签

SEO 优化

可选标签

为移动设备添加 viewport

iOS 设备

Android

Windows 8

360 浏览器

UC 浏览器

QQ 浏览器（X5 内核）

其他

更多

bnuhero commented Dec 17, 2013

GoToBoy commented Dec 17, 2013

shawnXiao commented Dec 17, 2013

hax commented Dec 18, 2013

hax commented Dec 18, 2013

hax commented Dec 18, 2013

hax commented Dec 18, 2013

hax commented Dec 18, 2013

hax commented Dec 18, 2013

ghost commented Dec 19, 2013

yisibl commented Dec 21, 2013

antchen commented Dec 25, 2013

rogueduola commented Dec 26, 2013

wdxiake commented Jan 6, 2014

markyun commented Jan 9, 2014

yisibl commented Jan 10, 2014

clinx commented Feb 14, 2014

barretlee commented Mar 14, 2014

sgsheg commented Apr 9, 2014

paddingme commented Aug 13, 2014

0532 commented Sep 11, 2014

tthallos commented Oct 22, 2014

codetodamoon commented Oct 27, 2014

zenoven commented Oct 31, 2014

alanerzhao commented Nov 5, 2014

fankangsong commented Nov 11, 2014

litson commented Nov 18, 2014

yisibl commented Nov 18, 2014

wwek commented Nov 20, 2014

firebaby commented Dec 2, 2014

yisibl commented Dec 2, 2014

leoxoocanada commented Apr 24, 2015

yisibl commented Apr 24, 2015

yisibl commented Nov 13, 2015

hax commented Nov 13, 2015

yisibl commented Nov 13, 2015

pobing commented Jan 7, 2016

haoqunjiang commented Jan 7, 2016

hax commented Jan 10, 2016

haoqunjiang commented Jan 13, 2016

hax commented Jan 13, 2016

WangXiaoJin commented Mar 4, 2016

xbzhs commented May 4, 2016

zchuhui commented Jun 29, 2016

raly commented Mar 24, 2017

noobalex commented May 19, 2017

liu12fei08fei commented Jan 14, 2018

wfzong commented Apr 9, 2018

danffer2019 commented Dec 27, 2019

danffer2019 commented Dec 27, 2019

基本标签

SEO 优化

可选标签

为移动设备添加 viewport

iOS 设备

Android

Windows 8

360 浏览器

UC 浏览器

QQ 浏览器（X5 内核）

其他

更多