search

yisibl / blog

CSS大草原（一丝的博客）
https://github.com/yisibl/blog/issues
467 stars 59 forks source link

常用的 HTML 头部标签 #1

Open yisibl opened 10 years ago

yisibl commented 10 years ago

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

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

以下是正文部分：

基本标签

<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 参数：

<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

360 浏览器

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

其他

参阅：

bnuhero commented 10 years ago

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

GoToBoy commented 10 years ago

good 虽然是基础的，我缺的

shawnXiao commented 10 years ago

感觉讲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 commented 10 years ago

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

hax commented 10 years ago

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

hax commented 10 years ago

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

hax commented 10 years ago

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

hax commented 10 years ago

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

hax commented 10 years ago

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

我常用的还有 link rel=canoncial

ghost commented 10 years ago

mark

yisibl commented 10 years ago

@hax 新增的 minimal-ui https://github.com/yisibl/blog/issues/1#minimal-ui

antchen commented 10 years ago

mark

rogueduola commented 10 years ago

mark

wdxiake commented 10 years ago

mark

markyun commented 10 years ago

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

yisibl commented 10 years ago

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

clinx commented 10 years ago

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

barretlee commented 10 years ago

mark, 赞！

sgsheg commented 10 years ago

mark

paddingme commented 10 years ago

mark 赞

0532 commented 10 years ago

占位 http://0532.github.com

tthallos commented 10 years ago

:+1:

lixuejiang commented 10 years ago

赞

zenoven commented 10 years ago

mark~~ very nice~~

alanerzhao commented 10 years ago

好文

fankangsong commented 10 years ago

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

litson commented 9 years ago

viewport miniui IOS 8已经被废弃了

yisibl commented 9 years ago

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

wwek commented 9 years ago

非常感谢~ 用上了`

firebaby commented 9 years ago

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

yisibl commented 9 years ago

@firebaby 可能要翻墙。

leoxoocanada commented 9 years ago

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

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

经过测试正确的如下：

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

iPhone/iPod Touch 竖屏 640x920 (Retina)

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

yisibl commented 9 years ago

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

yisibl commented 9 years ago

minimal-ui 已被删除

hax commented 9 years ago

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

yisibl commented 9 years ago

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

pobing commented 8 years ago

:+1:

haoqunjiang commented 8 years ago

「更加标准的 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 commented 8 years ago

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

haoqunjiang commented 8 years ago

@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 commented 8 years ago

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

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 commented 8 years ago

+1

xbzhs commented 8 years ago

+1

zchuhui commented 8 years ago

+2

raly commented 7 years ago

mark

noobalex commented 7 years ago

不手写HTML标签？

liu12fei08fei commented 6 years ago

棒👍

wfzong commented 6 years ago

mark

danffer2019 commented 4 years ago

none yet

danffer2019 commented 4 years ago

曾几何时，我们已经不再手写 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) -->
        1. 添加智能 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"><!-- 禁止百度转码 -->

更多

参阅：