Skip to content

常用的 HTML 头部标签 #1

New issue
New issue
Open
Open
常用的 HTML 头部标签#1
@yisibl

Description

@yisibl
yisibl
opened on Dec 17, 2013
Owner

曾几何时，我们已经不再手写 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 设备

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

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

  2. 是否启用 WebApp 全屏模式

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

  3. 设置状态栏的背景颜色

    <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. 禁止数字自动识别为电话号码

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

  5. 禁止自动自动识别地址

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

  6. 禁止自动自动识别日期

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

  7. 禁止自动自动识别 Email

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

  8. 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 像素，可以没有，但推荐有 -->

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

  10. 添加智能 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">

theme-color meta tag

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"><!-- 禁止百度转码 -->

更多

参阅：

Activity

bnuhero

bnuhero commented on Dec 17, 2013

@bnuhero
bnuhero
on Dec 17, 2013

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

GoToBoy

GoToBoy commented on Dec 17, 2013

@GoToBoy
GoToBoy
on Dec 17, 2013

good 虽然是基础的，我缺的

shawnXiao

shawnXiao commented on Dec 17, 2013

@shawnXiao
shawnXiao
on Dec 17, 2013

感觉讲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

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

hax

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

hax

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

hax

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

hax

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

hax

hax commented on Dec 18, 2013

@hax
hax
on Dec 18, 2013

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

我常用的还有 link rel=canoncial

ghost

ghost commented on Dec 19, 2013

@ghost
ghost
on Dec 19, 2013

mark

yisibl

yisibl commented on Dec 21, 2013

@yisibl
yisibl
on Dec 21, 2013
OwnerAuthor

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

antchen

antchen commented on Dec 25, 2013

@antchen
antchen
on Dec 25, 2013

mark

rogueduola

rogueduola commented on Dec 26, 2013

@rogueduola
rogueduola
on Dec 26, 2013

mark

wdxiake

wdxiake commented on Jan 6, 2014

@wdxiake
wdxiake
on Jan 6, 2014

mark

markyun

markyun commented on Jan 9, 2014

@markyun
markyun
on Jan 9, 2014

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

23 remaining items

pobing

pobing commented on Jan 7, 2016

@pobing
pobing
on Jan 7, 2016

👍

haoqunjiang

haoqunjiang commented on Jan 7, 2016

@haoqunjiang
haoqunjiang
on Jan 7, 2016

「更加标准的 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

hax commented on Jan 10, 2016

@hax
hax
on Jan 10, 2016

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

haoqunjiang

haoqunjiang commented on Jan 13, 2016

@haoqunjiang
haoqunjiang
on Jan 13, 2016

@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

hax commented on Jan 13, 2016

@hax
hax
on Jan 13, 2016

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

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

WangXiaoJin commented on Mar 4, 2016

@WangXiaoJin
WangXiaoJin
on Mar 4, 2016

+1

xbzhs

xbzhs commented on May 4, 2016

@xbzhs
xbzhs
on May 4, 2016

+1

zchuhui

zchuhui commented on Jun 29, 2016

@zchuhui
zchuhui
on Jun 29, 2016

+2

raly

raly commented on Mar 24, 2017

@raly
raly
on Mar 24, 2017

mark

noobalex

noobalex commented on May 19, 2017

@noobalex
noobalex
on May 19, 2017

不手写HTML标签？

liu12fei08fei

liu12fei08fei commented on Jan 14, 2018

@liu12fei08fei
liu12fei08fei
on Jan 14, 2018

棒👍

wfzong

wfzong commented on Apr 9, 2018

@wfzong
wfzong
on Apr 9, 2018

mark

caoweiju
mentioned this on Feb 21, 2019
danffer2019

danffer2019 commented on Dec 27, 2019

@danffer2019
danffer2019
on Dec 27, 2019

none yet

danffer2019

danffer2019 commented on Dec 27, 2019

@danffer2019
danffer2019
on Dec 27, 2019

曾几何时，我们已经不再手写 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"` 时生效 --> 只有在 "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 像素，可以没有，但推荐有 -->

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

  2. 添加智能 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">

theme-color meta tag

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"><!-- 禁止百度转码 -->

更多

参阅：

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @hax@firebaby@fankangsong@pobing@wwek

        Issue actions
          常用的 HTML 头部标签 · Issue #1 · yisibl/blog