常用的 HTML 头部标签 #1

Open
yisibl opened this Issue Dec 17, 2013 · 45 comments

Projects

None yet
@yisibl
Owner
yisibl commented Dec 17, 2013

曾几何时,我们已经不再手写 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 参数:

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

    如果设置为 defaultblack ,网页内容从状态栏底部开始。

    如果设置为 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"><!-- 禁止百度转码 -->

更多

参阅:

@bnuhero
bnuhero commented Dec 17, 2013

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

@GoToBoy
GoToBoy commented Dec 17, 2013

good 虽然是基础的,我缺的

@hax
hax commented Dec 18, 2013

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

@hax
hax commented Dec 18, 2013

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

@hax
hax commented Dec 18, 2013

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

@hax
hax commented Dec 18, 2013

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

@hax
hax commented Dec 18, 2013

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

@hax
hax commented Dec 18, 2013

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

我常用的还有 link rel=canoncial

@hdming
hdming commented Dec 19, 2013

mark

@yisibl
Owner
yisibl commented Dec 21, 2013

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

@antchen
antchen commented Dec 25, 2013

mark

@rogueduola

mark

@wdxiake
wdxiake commented Jan 6, 2014

mark

@markyun
markyun commented Jan 9, 2014

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

@yisibl
Owner
yisibl commented Jan 10, 2014

@markyun 更新啥?(>_<)

@clinx
clinx commented Feb 14, 2014

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

@barretlee

mark, 赞!

@sgsheg
sgsheg commented Apr 9, 2014

mark

@paddingme

mark 赞

@mage3k
mage3k commented Oct 22, 2014

👍

@lixuejiang

@paddingme paddingme referenced this issue in paddingme/Learning-HTML-CSS Oct 30, 2014
Open

HTML head 头标签 #4

@zenoven
zenoven commented Oct 31, 2014

mark~ very nice~

@alanerzhao

好文

@litson
litson commented Nov 18, 2014

viewport miniui IOS 8已经被废弃了

@yisibl
Owner
yisibl commented Nov 18, 2014

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

@wwek
wwek commented Nov 20, 2014

非常感谢~ 用上了`

@firebaby
firebaby commented Dec 2, 2014

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

@yisibl
Owner
yisibl commented Dec 2, 2014

@firebaby 可能要翻墙。

@gafish
gafish commented Apr 24, 2015

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

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

经过测试正确的如下:

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

iPhone/iPod Touch 竖屏 640x920 (Retina)

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

@yisibl
Owner
yisibl commented Apr 24, 2015

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

@yisibl
Owner
yisibl commented Nov 13, 2015

minimal-ui 已被删除

@hax
hax commented Nov 13, 2015

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

@yisibl
Owner
yisibl commented Nov 13, 2015

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

@303182519 303182519 referenced this issue in hoozi/angular-chat Nov 14, 2015
Closed

无聊 #1

@pobing
pobing commented Jan 7, 2016

👍

@sodatea
sodatea commented 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 Jan 10, 2016

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

@sodatea
sodatea commented Jan 13, 2016

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

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

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

@hax
hax commented Jan 13, 2016

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

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

4.1.2节的意思是为了兼容性,可以继续用 zh-HK 表达 yue。但是这不等于鼓励你继续用它。实际上你应该用 yue。我认为 BCP47 在这点上也写得不够好。(毕竟是老外写的,国人参与标准讨论恐怕很少。)因为 zh-HKzh-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

+1

@xbzhs
xbzhs commented May 4, 2016

+1

@zchuhui
zchuhui commented Jun 29, 2016

+2

@boy404
boy404 commented Aug 22, 2016

楼主这篇文章写的很详细,我很喜欢,可以转载吗?

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