New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

常用的 HTML 头部标签 #1

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

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

This comment has been minimized.

Show comment
Hide comment
@bnuhero

bnuhero Dec 17, 2013

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

bnuhero commented Dec 17, 2013

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

@GoToBoy

This comment has been minimized.

Show comment
Hide comment
@GoToBoy

GoToBoy Dec 17, 2013

good 虽然是基础的,我缺的

GoToBoy commented Dec 17, 2013

good 虽然是基础的,我缺的

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

hax commented Dec 18, 2013

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

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

hax commented Dec 18, 2013

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

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

hax commented Dec 18, 2013

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

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

hax commented Dec 18, 2013

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

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

hax commented Dec 18, 2013

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

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Dec 18, 2013

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

我常用的还有 link rel=canoncial

hax commented Dec 18, 2013

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

我常用的还有 link rel=canoncial

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost commented Dec 19, 2013

mark

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Dec 21, 2013

Owner

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

Owner

yisibl commented Dec 21, 2013

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

@antchen

This comment has been minimized.

Show comment
Hide comment
@antchen

antchen commented Dec 25, 2013

mark

@rogueduola

This comment has been minimized.

Show comment
Hide comment
@rogueduola

rogueduola commented Dec 26, 2013

mark

@wdxiake

This comment has been minimized.

Show comment
Hide comment
@wdxiake

wdxiake commented Jan 6, 2014

mark

@markyun

This comment has been minimized.

Show comment
Hide comment
@markyun

markyun Jan 9, 2014

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

markyun commented Jan 9, 2014

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Jan 10, 2014

Owner

@markyun 更新啥?(>_<)

Owner

yisibl commented Jan 10, 2014

@markyun 更新啥?(>_<)

@clinx

This comment has been minimized.

Show comment
Hide comment
@clinx

clinx Feb 14, 2014

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

clinx commented Feb 14, 2014

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

@barretlee

This comment has been minimized.

Show comment
Hide comment
@barretlee

barretlee Mar 14, 2014

mark, 赞!

barretlee commented Mar 14, 2014

mark, 赞!

@sgsheg

This comment has been minimized.

Show comment
Hide comment
@sgsheg

sgsheg commented Apr 9, 2014

mark

@paddingme

This comment has been minimized.

Show comment
Hide comment
@paddingme

paddingme commented Aug 13, 2014

mark 赞

@0532

This comment has been minimized.

Show comment
Hide comment

0532 commented Sep 11, 2014

@mage3k

This comment has been minimized.

Show comment
Hide comment
@mage3k

mage3k commented Oct 22, 2014

👍

@lixuejiang

This comment has been minimized.

Show comment
Hide comment
@lixuejiang

lixuejiang commented Oct 27, 2014

@zenoven

This comment has been minimized.

Show comment
Hide comment
@zenoven

zenoven Oct 31, 2014

mark~~ very nice~~

zenoven commented Oct 31, 2014

mark~~ very nice~~

@alanerzhao

This comment has been minimized.

Show comment
Hide comment
@alanerzhao

alanerzhao commented Nov 5, 2014

好文

@fankangsong

This comment has been minimized.

Show comment
Hide comment
@litson

This comment has been minimized.

Show comment
Hide comment
@litson

litson Nov 18, 2014

viewport miniui IOS 8已经被废弃了

litson commented Nov 18, 2014

viewport miniui IOS 8已经被废弃了

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Nov 18, 2014

Owner

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

Owner

yisibl commented Nov 18, 2014

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

@wwek

This comment has been minimized.

Show comment
Hide comment
@wwek

wwek Nov 20, 2014

非常感谢~ 用上了`

wwek commented Nov 20, 2014

非常感谢~ 用上了`

@firebaby

This comment has been minimized.

Show comment
Hide comment
@firebaby

firebaby Dec 2, 2014

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

firebaby commented Dec 2, 2014

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Dec 2, 2014

Owner

@firebaby 可能要翻墙。

Owner

yisibl commented Dec 2, 2014

@firebaby 可能要翻墙。

@gafish

This comment has been minimized.

Show comment
Hide comment
@gafish

gafish Apr 24, 2015

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

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

经过测试正确的如下:

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

iPhone/iPod Touch 竖屏 640x920 (Retina)

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

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

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Apr 24, 2015

Owner

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

Owner

yisibl commented Apr 24, 2015

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Nov 13, 2015

Owner

minimal-ui 已被删除

Owner

yisibl commented Nov 13, 2015

minimal-ui 已被删除

@hax

This comment has been minimized.

Show comment
Hide comment
@hax

hax Nov 13, 2015

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

hax commented Nov 13, 2015

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

@yisibl

This comment has been minimized.

Show comment
Hide comment
@yisibl

yisibl Nov 13, 2015

Owner

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

Owner

yisibl commented Nov 13, 2015

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

@303182519 303182519 referenced this issue Nov 14, 2015

Closed

无聊 #1

@pobing

This comment has been minimized.

Show comment
Hide comment
@pobing

pobing commented Jan 7, 2016

👍

@sodatea

This comment has been minimized.

Show comment
Hide comment
@sodatea

sodatea 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

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

This comment has been minimized.

Show comment
Hide comment
@hax

hax Jan 10, 2016

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

hax commented Jan 10, 2016

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

@sodatea

This comment has been minimized.

Show comment
Hide comment
@sodatea

sodatea 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 了。

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

This comment has been minimized.

Show comment
Hide comment
@hax

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

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

This comment has been minimized.

Show comment
Hide comment
@WangXiaoJin

WangXiaoJin commented Mar 4, 2016

+1

@xbzhs

This comment has been minimized.

Show comment
Hide comment
@xbzhs

xbzhs commented May 4, 2016

+1

@zchuhui

This comment has been minimized.

Show comment
Hide comment
@zchuhui

zchuhui commented Jun 29, 2016

+2

@Yee2

This comment has been minimized.

Show comment
Hide comment
@Yee2

Yee2 Aug 22, 2016

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

Yee2 commented Aug 22, 2016

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

@raly

This comment has been minimized.

Show comment
Hide comment
@raly

raly commented Mar 24, 2017

mark

@alexbai01

This comment has been minimized.

Show comment
Hide comment
@alexbai01

alexbai01 May 19, 2017

不手写HTML标签?

alexbai01 commented May 19, 2017

不手写HTML标签?

@liu12fei08fei

This comment has been minimized.

Show comment
Hide comment
@liu12fei08fei

liu12fei08fei commented Jan 14, 2018

👍

@wfzong

This comment has been minimized.

Show comment
Hide comment
@wfzong

wfzong commented Apr 9, 2018

mark

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