移动前端不得不了解的HTML5 head 头标签（中上篇）
Meta 标签
meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，可是其做用很是强大，特别是当今的前端开发工做中，设置合适的meta标签能够大大提高网站页面的可用性。html
桌面端开发中，meta标签一般用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它能够用于鉴别做者，设定页面格式，标注内容提要和关键字；还能够设置页面使其能够根据你定义的时间间隔刷新本身，以及设置RASC内容等级，等等。前端
移动端开发中，meta标签除了桌面端中的功能设置外，还包括，好比viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体能够看后面详细的介绍。ios
meta标签分类
meta标签根据属性的不一样，可分为两大部分：http-equiv 和 name 属性。git
http-equiv：至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。web
推荐使用的meta标签
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其余任何的 head 内容必须在这些标签的 *后面* -->
<!-- 容许控制资源的过分加载 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 尽早地放置在文档中 -->
<!-- 仅应用于该标签下的内容 -->
<!-- Web 应用的名称（仅当网站被用做为一个应用时才使用）-->
<meta name="application-name" content="应用名称">
<!-- 针对页面的简短描述（限制 150 字符）-->
<!-- 在*某些*状况下，该描述是被用做搜索结果展现片断的一部分 -->
<meta name="description" content="一个页面描述">
<!-- 控制搜索引擎的抓取和索引行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
<!-- 告诉 Google 不显示网站连接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告诉 Google 不提供此页面的翻译 -->
<meta name="google" content="notranslate">
<!-- 验证 Google 搜索控制台的全部权 -->
<meta name="google-site-verification" content="verification_token">
<!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->
<meta name="generator" content="program">
<!-- 关于你的网站主题的简短描述 -->
<meta name="subject" content="你的网站主题">
<!-- 很是简短（少于 10 个字）的描述。主要用于学术论文。-->
<meta name="abstract" content="">
<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 基于网站内容给出通常的年龄分级 -->
<meta name="rating" content="General">
<!-- 容许控制 referrer 信息如何传递 -->
<meta name="referrer" content="never">
<!-- 禁用自动检测和格式化可能的电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 经过设置为 “off” 彻底退出 DNS 预取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要显示在一个特定框架中的页面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">浏览器
为移动设备添加 viewport
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 -->服务器
content 参数：cookie
- 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">app
而若是你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
html 代码:
<meta name="viewport" content="width=device-width,user-scalable=yes">
相关连接：非响应式设计的viewport
适配 iPhone 6 和 iPhone 6plus 则须要写：
html 代码:
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上倒是 375px，大部分 5.5 寸安卓机器（好比说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。
不推荐的 meta 属性
<!-- 用于声明文档语言，但支持得不是很好。最好使用 <html lang=""> -->
<meta name="language" content="en">
<!-- Google 无视 & Bing 认为垃圾的指示器 -->
<meta name="keywords" content="你,关键字,在这里,不使用空格,而用逗号进行分隔">
<!-- 目前没有在任何搜索引擎中使用过的声明 -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
<!-- 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 -->
<meta name="reply-to" content="email@example.com">
<!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
<meta name="owner" content="">
<!-- 告诉搜索机器人一段时间后从新访问该网页。这不支持，由于大多数搜索引擎使用随机时间间隔来从新抓取网页 -->
<meta name="revisit-after" content="7 days">
<!-- 在一段时间后将用户重定向到新的 URL -->
<!-- W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。-->
<meta http-equiv="refresh" content="300; url=https://example.com/">
<!-- 描述网站的主题 -->
<meta name="topic" content="">
<!-- 公司概要或网站目的 -->
<meta name="summary" content="">
<!-- 一个已废弃的标签，和关键词 meta 标签的做用相同 -->
<meta name="classification" content="business">
<!-- 是不是相同的 URL，年代久远且不支持 -->
<meta name="identifier-URL" content="https://example.com/">
<!-- 和关键词标签相似的功能 -->
<meta name="category" content="">
<!-- 确保你的网站在全部国家和语言中都能显示 -->
<meta name="coverage" content="Worldwide">
<!-- 和 coverage 标签相同 -->
<meta name="distribution" content="Global">
<!-- 控制在互联网上哪些用户能够访问 -->
<meta http-equiv="Pics-label" content="value">
<!-- 缓存控制 -->
<!-- 最好在服务器端配置缓存控制 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
- 1. 移动端头部标签(HTML5 Head Meta)
- 2. 移动端头部标签(HTML5 head meta)
- 3. 移动前端头部标签(HTML5 head meta)
- 4. html5 head 标签
- 5. 移动前端头部标签(HTML5 head meta)转载 移动设备对meta的定义
- 6. 移动端的头部标签和meta
- 更多相关文章...
- • Git 标签 - Git 教程
- • C# 不安全代码 - C#教程
- • SpringBoot中properties文件不能自动提示解决方法
- • IntelliJ IDEA中SpringBoot properties文件不能自动提示问题解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。