html5 head头标签

桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类

meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。

http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

pc端：

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

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

    <meta charset="UTF-8">

<!--设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->

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

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

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

<!--Google Chrome浏览器 -->

<!--关闭chrome浏览器下翻译插件； -->

　　<meta name="google" value="notranslate" />

<!-- Internet Explorer浏览器 -->

<!--IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页： -->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">

    <title>Title</title>

</head>

<body>

</body>

</html>

移动端：

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
注意，先前width=device-width或=320的时候在 iPhone5 下有这个黑边，所以按照上面来写

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. <meta name="viewport" content=" initial-scale=1, minimal-ui">

meta与浏览器：

-百度禁止转码：

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

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

-QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。

<meta name="x5-orientation" content="portrait|landscape">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">

-360

　　设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。

<meta name="renderer" content="webkit|ie-comp|ie-stand">

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

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

-UC

　　1.设置屏幕方向：portrait为横屏，landscape为竖屏；

　　2.设置全屏；

　　3.设置适应屏幕排版（缩放是否显示滚动条）；

　　UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

　　4.排版模式；

　　UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

　　5.夜间模式；

　　可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

　　注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

　　6.整页图片强制显示；

　　为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面。

　　7.开启应用模式；

　　应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

　　8.缩放字体；禁用的 UC 浏览器的字体缩放功能

-Apple IOS原生浏览器；

　　1.添加智能App广告条：http://36kr.com/p/155243.html

　　2.忽略数字自动识别为电话号码；

　　3.忽略数字自动识别为邮箱

　　4.启动WebApp全屏模式；

　　5.添加到主屏后设置状态栏的背景颜色；

　　只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

如果设置为 default 或 black ，网页内容从状态栏底部开始。
如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。

　　6.添加到主屏后到标题（ios6新增）

　　7.ios图标；

　　图片自动处理成圆角和高光等效果。

　　禁止系统自动添加效果，直接显示设计原图。

　　8.启动画面（不赞成使用）

　　iPad 的启动画面是不包括状态栏区域的，iPhone 和 iPod touch 的启动画面是包含状态栏区域的；

　　9.IOS应用深度链接；

<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android原生浏览器

　　1.标签页选项卡色；

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

　　2.添加到主屏；

　　3.安卓应用深度链接（网页上唤起应用）　

<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

-Apple Safari浏览器

　　Safari 10开始支持固定书签页的SVG favicons了，你可以这样使用：

<link rel="mask-icon" href="path/to/icon.svg" color="red">

-Google Chrome浏览器

　　1.关闭chrome浏览器下翻译插件；

　　2.chrome浏览器插件安装；

　　有时候，你需要在你的页面上点击某个安卓，直接安卓你的chrome浏览器插件，而不是链接到Chrome webstore 的详细地址再安装，那么你可以使用：

-Internet Explorer浏览器

　　模式设置　　

//IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
//如果安装了GCF，则使用GCF来渲染页面（"chrome=1"），
//如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"）
<meta http-equiv="x-ua-compatible" content="ie=edge">

总结，移动端常用的meta基本就这些了，筛选了常用的mata，如下，如有需要，可看上面的详解，再做添加。

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

    <meta charset="utf-8">

    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- Apple IOS原生浏览器 -->

<!-- 添加到主屏后设置状态栏的背景颜色； -->

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

<!-- 忽略数字自动识别为电话号码； -->

    <meta name="format-detection" content="telephone=no" />

<!-- 忽略数字自动识别为邮箱 -->

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

<!-- 启动WebApp全屏模式； -->

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

<!-- 百度 -->

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

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

<!-- QQ -->

<!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->

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

<!-- 设置全屏显示页面 -->

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

<!-- 360 -->

<!-- 设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。 -->

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

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

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

<!-- uc -->

<!-- 1.设置屏幕方向：portrait为横屏，landscape为竖屏； -->

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

<!-- 2.设置全屏； -->

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

    <title>Document</title>

</head>

<body>

</body>

</html>

补充：

<meta http-equiv="Refresh" content="5;url=http://blog.csdn.net/yc123h/article/details/51356143">

参考地址：

http://www.css88.com/archives/6410?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

http://ooxx.me/ios-webapp-viewport-meta.orz

html5 head头标签的更多相关文章

[转] 移动前端不得不了解的HTML5 head 头标签
HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...
Html5_移动前端不得不了解的html5 head 头标签
移动前端不得不了解的html5 head 头标签本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...
移动前端不得不了解的HTML5 head 头标签（2016最新版）
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
【转】移动前端不得不了解的html5 head 头标签
来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...
移动前端不得不了解的HTML5 head 头标签（首篇）
HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...
移动前端的html5 head 头标签
DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范. 使用 HTML5 ...
移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签
HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...
移动前端不得不了解的HTML5 head 头标签（中下篇）
SEO 优化部分页面标题<title>标签(head 头部必须) <title>your title</title> 页面关键词 keywor ...

随机推荐

delphi的取整函数round、trunc、ceil和floor
delphi的取整函数round.trunc.ceil和floor 首先引入math单元 uses math; 1.Round(四舍六入五留双) 功能说明:对一个实数进行四舍五入.(按照银行家算法) ...
perl Can't use string Cxxx) as a symbol ref while "strict refs" in use at XXXX.pl错误
今天写脚本遇到Can't use string ("bond2 Link encap:InfiniBand ") as a symbol ref while "s ...
BestCoder27 1001.Jump and Jump... （hdu 5162）解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5162 题目意思:有 n 个 kid,每个 kid 有三个成绩 a, b, c.选最大的一个成绩作为这个 ...
【leetcode】House Robber & House Robber II（middle）
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
NEFU 84 五指山 (扩展欧几里得)
五指山 Problem:84 Time Limit:1000ms Memory Limit:65536K Description 西游记中孙吾空大闹天宫,如来佛祖前来降伏他,说道:"我与你打 ...
C#复制、粘贴文本信息到剪贴板
复制:private void button1_Click(object sender, System.EventArgs e) { // Takes the selected text from a ...
chrome shortcutkey
按下Shift并点击链接 – 在新窗口打开链接. Ctrl+ – 切换到最后一个标签. Ctrl+Shift+V – 将剪切板中的内容无格式粘贴(举个例子,将你从网页中复制的HTML格式内容粘贴为纯文 ...
microsofr visual studio编写c语言
过程: 1.创建win32 控制台项目文件->新建->项目->Visual C++ ->Win32 输入项目名称选择项目保存位置 2.添加->新建如图
php 注册审核
注册界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
数据结构和算法 – 6.构建字典： DictionaryBase 类和 SortedList 类
6.1.DictionaryBase 类的基础方法和属性大家可以把字典数据结构看成是一种计算机化的词典.要查找的词就是关键字,而词的定义就是值. DictionaryBase 类是一种用作专有字 ...

html5 head头标签

meta标签分类

html5 head头标签的更多相关文章

随机推荐

热门专题