本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签。

移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta标签显得非常重要。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种
HTML 或者 XHTML 规范。

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

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

charset

声明文档使用的字符编码，

  1. <metacharset="utf-8">

html5 之前网页中会这样写：

  1. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

这两个是等效的，具体可移步阅读：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。

lang属性

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

简体中文

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

繁体中文

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

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

  1. <plang="zh-cmn-Hans">
  2. <stronglang="zh-cmn-Hans-CN">菠萝</strong>和<stronglang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<stronglang="zh-cmn-Hans-SG">黄梨</strong>。
  3. </p>

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。

优先使用 IE 最新版本和 Chrome

  1. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>

360 使用Google Chrome Frame

  1. <metaname="renderer"content="webkit">

360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入

  1. <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

相关链接：浏览器内核控制 Meta 标签说明文档

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

  1. <metahttp-equiv="Cache-Control"content="no-siteapp"/>

相关链接：SiteApp 转码声明

SEO 优化部分

  • 页面标题<title>标签(head 头部必须)
    1. <title>your title</title>
  • 页面关键词 keywords
    1. <metaname="keywords"content="your keywords">
  • 页面描述内容 description
    1. <metaname="description"content="your description">
  • 定义网页作者 author
    1. <metaname="author"content="author,email address">
  • 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
    1. <metaname="robots"content="index,follow">

相关链接：WEB1038 – 标记包含无效的值

为移动设备添加 viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

  1. <metaname="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 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
    1. <metaname="viewport"content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

  1. <metaname="viewport"content="width=device-width,user-scalable=yes">

相关链接：非响应式设计的viewport

适配 iPhone 6 和 iPhone 6plus 则需要写：

  1. <metaname="viewport"content="width=375">
  2. <metaname="viewport"content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

ios 设备

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

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

是否启用 WebApp 全屏模式

  1. <metaname="apple-mobile-web-app-capable"content="yes"/><!-- 是否启用 WebApp 全屏模式 -->

设置状态栏的背景颜色

  1. <metaname="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 ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

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

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

iOS 图标

rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57×57 像素，必须有

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

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

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

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

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

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

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

IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120×120。 适配iPhone 6 plus，则需要在中加上这段

  1. <linkrel="apple-touch-icon-precomposed"sizes="180x180"href="retinahd_icon.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（标准分辨率）

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

iPad 竖屏 1536×2008（Retina）

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

iPad 横屏 1024×748（标准分辨率）

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

iPad 横屏 2048×1496（Retina）

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

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

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

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

iPhone/iPod Touch 竖屏 640×960 (Retina)

  1. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/><!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina)

  1. <linkrel="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）

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

iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

  1. <linkrel="apple-touch-startup-image"href="launch6.png"media="(device-width: 375px)">
  2. <linkrel="apple-touch-startup-image"href="launch6plus.png"media="(device-width: 414px)">

Android

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

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

  1. <metaname="theme-color"content="#db5945">

Windows 8

Windows 8 磁贴颜色

  1. <metaname="msapplication-TileColor"content="#000"/><!-- Windows 8 磁贴颜色 -->

Windows 8 磁贴图标

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

rss订阅

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

favicon icon

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

比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

移动端的头部标签和meta

  1. <!DOCTYPE html><!-- 使用 HTML5 doctype，不区分大小写 -->
  2. <htmllang="zh-cmn-Hans"><!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  3. <head>
  4. <!-- 声明文档使用的字符编码 -->
  5. <metacharset='utf-8'>
  6. <!-- 优先使用 IE 最新版本和 Chrome -->
  7. <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
  8. <!-- 页面描述 -->
  9. <metaname="description"content="不超过150个字符"/>
  10. <!-- 页面关键词 -->
  11. <metaname="keywords"content=""/>
  12. <!-- 网页作者 -->
  13. <metaname="author"content="name, email@gmail.com"/>
  14. <!-- 搜索引擎抓取 -->
  15. <metaname="robots"content="index,follow"/>
  16. <!-- 为移动设备添加 viewport -->
  17. <metaname="viewport"content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  18. <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
  19. <!-- iOS 设备 begin -->
  20. <metaname="apple-mobile-web-app-title"content="标题">
  21. <!-- 添加到主屏后的标题（iOS 6 新增） -->
  22. <metaname="apple-mobile-web-app-capable"content="yes"/>
  23. <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
  24. <metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
  25. <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  26. <metaname="apple-mobile-web-app-status-bar-style"content="black"/>
  27. <!-- 设置苹果工具栏颜色 -->
  28. <metaname="format-detection"content="telphone=no, email=no"/>
  29. <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  30. <!-- 启用360浏览器的极速模式(webkit) -->
  31. <metaname="renderer"content="webkit">
  32. <!-- 避免IE使用兼容模式 -->
  33. <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  34. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  35. <metaname="HandheldFriendly"content="true">
  36. <!-- 微软的老式浏览器 -->
  37. <metaname="MobileOptimized"content="320">
  38. <!-- uc强制竖屏 -->
  39. <metaname="screen-orientation"content="portrait">
  40. <!-- QQ强制竖屏 -->
  41. <metaname="x5-orientation"content="portrait">
  42. <!-- UC强制全屏 -->
  43. <metaname="full-screen"content="yes">
  44. <!-- QQ强制全屏 -->
  45. <metaname="x5-fullscreen"content="true">
  46. <!-- UC应用模式 -->
  47. <metaname="browsermode"content="application">
  48. <!-- QQ应用模式 -->
  49. <metaname="x5-page-mode"content="app">
  50. <!-- windows phone 点击无高光 -->
  51. <metaname="msapplication-tap-highlight"content="no">
  52. <!-- iOS 图标 begin -->
  53. <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>
  54. <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  55. <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>
  56. <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  57. <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>
  58. <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  59. <!-- iOS 图标 end -->
  60. <!-- iOS 启动画面 begin -->
  61. <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>
  62. <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  63. <linkrel="apple-touch-startup-image"sizes="1536x2008"href="/splash-screen-1536x2008.png"/>
  64. <!-- iPad 竖屏 1536x2008（Retina） -->
  65. <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>
  66. <!-- iPad 横屏 1024x748（标准分辨率） -->
  67. <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/>
  68. <!-- iPad 横屏 2048x1496（Retina） -->
  69. <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>
  70. <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  71. <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>
  72. <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  73. <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/>
  74. <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  75. <!-- iOS 启动画面 end -->
  76. <!-- iOS 设备 end -->
  77. <metaname="msapplication-TileColor"content="#000"/>
  78. <!-- Windows 8 磁贴颜色 -->
  79. <metaname="msapplication-TileImage"content="icon.png"/>
  80. <!-- Windows 8 磁贴图标 -->
  81. <linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>
  82. <!-- 添加 RSS 订阅 -->
  83. <linkrel="shortcut icon"type="image/ico"href="/favicon.ico"/>
  84. <!-- 添加 favicon icon -->
  85. <title>标题</title>
  86. </head>

Html5_移动前端不得不了解的html5 head 头标签的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  3. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  4. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  5. 移动前端不得不了解的HTML5 head 头标签（首篇）

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  6. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  7. 移动前端不得不了解的HTML5 head 头标签（中上篇）

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  8. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  9. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. sqlplus 中spool命令的简单用法

    spool基本格式: spool 路径+文件名 select col1||','||col2||','||col3||','||col4||'..' from tablename; spool off ...

  2. Linux环境下使用C/C++编写CGI（httpd）

    step1下载: ftp://ftp.gnu.org/gnu/cgicc/ step2: tar xzf cgicc-X.X.X.tar.gz(用最新版本) cd cgicc-X.X.X ./conf ...

  3. hdu 4278 2012天津赛区网络赛 数学 *

    8进制转为10进制 #include<cstdio> #include<iostream> #include<algorithm> #include<cstr ...

  4. WPF中的依赖项属性

    Form cnblogs 桂素伟 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越多. 只能跟着MSDN来学了,所以想是在这里记录下学习的过程和对知识的理解. 先从最基本的吧,依赖项属性 ...

  5. HDU 5900 QSC and Master 区间DP

    QSC and Master Problem Description   Every school has some legends, Northeastern University is the s ...

  6. 使用yum来安装或卸载CentOS图形界面包

    命令行模式安装图形界面 yum grouplist 检查已安装的组 yum groupinstall "X Window System" yum groupinstall &quo ...

  7. 【设计模式】MVC模式

    MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO.它 ...

  8. jquery.color.js的使用

    Jquery本身不支持变色,Jquery Color.js弥补了这缺陷并为animate动画赋予变色效果,如下红变蓝后执行回调再由蓝变红. <!DOCTYPE html> <html ...

  9. UITextField最大字符数和最大字节数的限制

    UITextView,UITextfield中有很多坑,网上的方法也很多,但是用过之后暂时没有发现一个好用.这里我给大家几组测试用例可以一试,为啥不好用. 限制10个字节,输入2个Emoj之后是8个字 ...

  10. iOS Outlets Referencing Outlets

    一位网友的解释: 原址:http://www.cocoachina.com/bbs/read.php?tid-21295.html