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

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

<head>

    <!-- 声明文档使用的字符编码 -->

    <meta charset='utf-8'>

    <!-- 优先使用 IE 最新版本和 Chrome -->

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

    <!-- 页面描述 -->

    <meta name="description" content="不超过150个字符"/>

    <!-- 页面关键词 -->

    <meta name="keywords" content=""/>

    <!-- 网页作者 -->

    <meta name="author" content="name, email@gmail.com"/>

    <!-- 搜索引擎抓取 -->

    <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 -->

    <!-- iOS 设备 begin -->

    <meta name="apple-mobile-web-app-title" content="标题">

    <!-- 添加到主屏后的标题（iOS 6 新增） -->

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <!-- 设置苹果工具栏颜色 -->

    <meta name="format-detection" content="telphone=no, email=no"/>

    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->

    <meta name="renderer" content="webkit">

    <!-- 避免IE使用兼容模式 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 不让百度转码 -->

    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

    <meta name="HandheldFriendly" content="true">

    <!-- 微软的老式浏览器 -->

    <meta name="MobileOptimized" content="320">

    <!-- uc强制竖屏 -->

    <meta name="screen-orientation" content="portrait">

    <!-- QQ强制竖屏 -->

    <meta name="x5-orientation" content="portrait">

    <!-- UC强制全屏 -->

    <meta name="full-screen" content="yes">

    <!-- QQ强制全屏 -->

    <meta name="x5-fullscreen" content="true">

    <!-- UC应用模式 -->

    <meta name="browsermode" content="application">

    <!-- QQ应用模式 -->

    <meta name="x5-page-mode" content="app">

    <!-- windows phone 点击无高光 -->

    <meta name="msapplication-tap-highlight" content="no">

    <!-- iOS 图标 begin -->

    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>

    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>

    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>

    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->

    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->

    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>

    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->

    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>

    <!-- iPad 竖屏 1536x2008（Retina） -->

    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>

    <!-- iPad 横屏 1024x748（标准分辨率） -->

    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>

    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>

    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>

    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>

    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->

    <meta name="msapplication-TileColor" content="#000"/>

    <!-- Windows 8 磁贴颜色 -->

    <meta name="msapplication-TileImage" content="icon.png"/>

    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

    <!-- 添加 RSS 订阅 -->

    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->

    <!-- 参考微博API -->

    <meta property="og:type" content="类型" />

    <meta property="og:url" content="URL地址" />

    <meta property="og:title" content="标题" />

    <meta property="og:image" content="图片" />

    <meta property="og:description" content="描述" />

    <!-- sns 社交标签 end -->

    <title>标题</title>

</head>

文章内容来源：http://caibaojian.com/mobile-meta.html

.

HTML5 头部标签定义的更多相关文章

  1. webkit,HTML5头部标签

    大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...

  2. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  3. HTML5头部标签备忘

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

  4. 移动前端头部标签(HTML5 head meta)转载

    移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...

  5. 移动前端头部标签(HTML5 head meta)

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...

  6. 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <he ...

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

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

  8. HTML5 source标签：媒介元素定义媒介资源

    HTML5 source标签是一种媒介元素(比如 <video> 和 <audio>)来定义媒介资源.<source> 标签允许您规定可替换的视频/音频文件供浏览器 ...

  9. HTML5所有标签汇总

    来自lampbrother兄弟连HTML5与CSS3教程.<xmp> 结构标签:(块状元素) 有意义的div<article>     标记定义一篇文章<header&g ...

随机推荐

  1. shutil复制粘贴和压缩

    shutil复制粘贴和压缩 shutil 高级的文件.文件夹.压缩包处理模块 @1).将文件内容拷贝到另一个文件中 import shutil shutil.copyfileobj(open(&quo ...

  2. ecshop常用二次开发修改

    修改ecshop支付宝的支付按钮  http://www.68ecshop.com/article-1081.html 去掉ecshop收货人信息页面的电子邮件必填和电话.手机选填一个  http:/ ...

  3. js框架设计1.3数组化

    这一节从作者哪里学来了[].slice.call([],0,1);这个方法第一个参数可是是字符串可以是数组或其他,第2个是数组截取位置的开始位置,第3个是终止位置. 作者说这个方法不兼容旧版本ie的, ...

  4. js实现四舍六入 奇进偶舍

    function PointFloat(src, pos) { return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos); } // ...

  5. POJ 2337 Catenyms（有向图的欧拉通路）

    题意:给n个字符串(3<=n<=1000),当字符串str[i]的尾字符与str[j]的首字符一样时,可用dot连接.判断用所有字符串一次且仅一次,连接成一串.若可以,输出答案的最小字典序 ...

  6. java学习笔记

    最近在学习JAVA,算得上入门,因为本身是C#程序员,所以也入门也比较快 先打开说一下环境安装吧 下载地址 http://www.oracle.com/technetwork/java/javase/ ...

  7. Git配置姓名和邮箱问题

    今天在安装Git for windows完成后,配置姓名和邮箱.按照廖雪峰老师的步骤,在开始菜单里找到"Git"->"Git Bash",单击后并没有跳出 ...

  8. 转:Autodesk 2017软件下载+注册机+破解方法(持续更新)

    转载自http://blog.sina.com.cn/s/blog_710225790102w03e.html Autodesk 2017安装步骤: 安装Autodesk 2017相关软件 使用序列号 ...

  9. Linux-iptables初识

    Linux-iptables初识 了解 iptables是与Linux内核集成的IP信息包过滤系统.如果Linux系统连接到因特网或LAN.服务器或连接LAN和因特网的代理服务器,则该系统有利于在Li ...

  10. ajax表单提交

    HTML代码: <form id="formCity" action="/SiteMap/Search" method="get" o ...