HTML META 元数据标签详解

简介：讲述META元素中的属性（name、http-equiv）有多少种，分别代表什么意思，以及使用场景 欢迎补充

理论知识（理解META）：

<meta>标签必须位于<head> </head>元素中。

参考如下链接
阮一峰老师的元数据（MetaData）
MDN
htmldoctor

实战开发(怎么用，用那些)：

http-equiv
<!--服务器允许的方法-->
<!-- Define methods allowed by server (GET, POST etc)  -->
<meta http-equiv="Allow" content="get" />

<!--指定返回的数据编码   通常是压缩型  对于g压缩文档，请使用<meta http-equiv =" content-encoding "content ="gzip"-->
<!--  Define the the encoding type of the returned data  -->
<meta http-equiv="Content-Encoding" content="zip" />

设定字符集
<!-- 设定网页字符集 html5的方式 -->
<meta charset="utf-8">
<!--已过时，推荐使用<meta>元素上的charset。 理解： Define the MIME type for the content 表示发送到浏览器的数据类型，使浏览器知道如何处理接收的数据 or 设定页面使用的字符集 meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--已过时，推荐使用 <html> 元素上全局的 lang 属性来替代它. 理解： 这个指令定义页面使用的默认语言. --><meta http-equiv="Content-Language"content="zh-cn"/>

<!-- Define the document creation date 包括页面创建的日期和时间。 -->
<meta http-equiv="Date" content="aDate" />
<!-- Define the date when a document was last modified 此内容类型用于页面上次修改的时间和日期设置 -->
<meta http-equiv="Last-Modified" content="aDate" />

缓存设定----禁止浏览器缓存
<!-- Define the date when a document is to be reloaded  用于设定网页的到期时间，过期后网页必须到服务器上重新传输。注意：aDate必须使用GMT的时间格式或者设置为0禁用缓存。aDate表示文档设置为过期的日期和时间。 当达到日期时，即使文档存储在缓存中，文档将被重新加载。 这个<meta>元素用于禁用文档的缓存：只需放置一个在日期中传递的日期，这将导致浏览器获取新文件。 如果您希望缓存页面，请将日期设置大点。 请注意，即使将其设置为缓存，IE6将在打开新的浏览器窗口时仍获取用户主页的内容。 --><meta http-equiv="Expires" content="aDate" />
<!-- 当我们在本地测试网页的时候，没有及时更新新内容，可能就是有浏览器缓存。这个时候，我们只要通过使用Meta标签禁用浏览器缓存，可以解决。通用代码如下： -->
<meta http-equiv="expires" content="0" />
<!-- 这样设定，访问者将无法脱机浏览。 -->
<meta http-equiv="pragma" content="no-cache" />
<!-- Cache-Control指定请求和响应遵循的缓存机制。
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on
ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下Public指示响应可被任何缓存区缓存Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效no-cache指示请求或响应消息不能缓存no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 -->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv ="cache-control"content ="max-age = 0"/>
<meta http-equiv ="cache-control"content ="no-store"/>

 <!-- Define a pages refresh rate (avoid this!)  n是刷新页面的时间间隔：在我们的示例中，页面将每n秒刷新一次。如果包含url，则url2是页面将重定向到的位置--><meta http-equiv="Refresh" content="n;url=url2" />

<!-- 此内容类型用于防止页面出现在另一个框架页面中。 -->
<meta http-equiv="window-target" content="_top" />

<!-- content-security-policy
允许页面作者定义当前页面的内容策略。内容策略主要指定允许的服务器地址和脚本端点，这有助于防止cross-site scripting 攻击。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。
两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
详细参阅：http://www.ruanyifeng.com/blog/2016/09/csp.html

<!-- //指定IE和Chrome使用最新版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
name

name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容。

定义正运行在该网页上的网络应用名称；
<meta name="application-name" content="anmin">

<!-- 这两个meta 元素对于定义你的页面的作者和提供页面的内容描述是很有用的  -->
<meta name="author" content="Chris Mills">
<!-- 用于标明网页是什么软件做的。 -->
<meta name="generator" content="">
<!-- 用于告诉搜索引擎，你网页的关键字 -->
<meta name="keywords" content=""><!-- 指定包含关于页面内容的关键字和页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 (这些行为术语上被称为 Search Engine Optimization, or SEO ..   包括一个关于页面内容的缩略而精准的描述。一些浏览器，如Firefox和Opera，会使用这个当做网页书签的默认描述。 -->
<meta name="description" content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

<!-- 如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例： --><meta name="revisit-after" content="7 days" >

<!-- renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例： --><!-- //默认webkit内核 -->
<meta name="renderer" content="webkit">
<!-- //默认IE兼容模式 -->
<meta name="renderer" content="ie-comp"> <!-- //默认IE标准模式 -->
<meta name="renderer" content="ie-stand">

<!-- 来告诉爬虫哪些页面需要索引，哪些页面不需要索引。 --><meta name="robots"><meta name="robots" content="all"> index    允许robot索引本页面（默认）noindex   不允许robot索引本页面follow 允许搜索引擎继续通过此网页的链接索引搜索其它的网页（默认）nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页none    相当于noindex，nofollownoodp 禁止使用Open Directory Project描述（如果有的话）作为搜索引擎结果中的页面描述。noarchive   要求搜索引擎不缓存页面内容nosnippet  禁止在搜索引擎结果中显示该页面的任何描述。noimageindex   要求此页面不作为引用页面的索引图像的显示。nocache    和noarchive同义

<!--
提供了关于viewport初始大小的大小的提示。仅供移动设备使用。
width:整数或device-width  定义viewport的像素宽度，或允许viewport适应设备的屏幕宽度。
height:整数或device-height
initial-scale, 0.0-10.0 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与viewport大小之间的比例minimum-scale, 定义最小的缩放级别。它必须小于或等于maximum-scale，否则视为未定义。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。maximum-scale定义最大的缩放级别。它必须大于或等于minimum-scale，否则视为未定义。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。user-scalable    yes 或 no    如果设置为no，用户将无法放大网页。默认值为yes。浏览器设置可以忽略此规则，iOS10 +默认情况下忽略它。-->
<meta name="viewport" content="width=500, height=600">
<!-- 禁止缩放： -->
<meta name=”viewport” content=”initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp"/>

<!-- 在移动开发当中，屏蔽数字当作电话号码的代码： -->
<meta name="format-detection" content="telephone=no" />

<meta name="copyright" content="Copyright" />
// 定义页面内容版权信息
<meta name="revised" content="web app V.1.0.0" />
// 页面的最新版本

由于Chrome M31，您可以设置您的网络应用程序，将应用程序快捷方式图标添加到设备的主屏幕，并使用Chrome for Android的“添加到主屏幕”菜单项，以全屏“应用程序模式”启动该应用程序。
有关mobile-web-app-capable元标记的详细信息，请向下滚动到“在M39之前支持主屏幕安装的应用程序”：自M31以来，Chrome将在网页的元素中寻找以下元标记（如果有指定显示的清单，则会被忽略）：<meta name="mobile-web-app-capable" content="yes">name属性必须是“mobile-web-app-capable”，而content属性必须是“yes”（case in-sensitive）。如果content属性中有任何其他值，则Web应用将作为常规书签添加。

Apple 的一些 meta 、 link 效果
[参见APPLE] (https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2)

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- uc强制横屏 -->
<meta name="screen-orientation" content="landscape">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制横屏 -->
<meta name="x5-orientation" content="landscape">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
针对微软的IE or edge 浏览器的一些站点元数据设置
https://msdn.microsoft.com/zh-cn/library/gg491732(v=vs.85).aspx<meta name="msapplication-TileColor" content="#000"/><!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/><!-- Windows 8 磁贴图标 -->

转载于:https://my.oschina.net/anmin/blog/1512558

HTML META 元数据标签详解相关推荐

  1. W3C中meta标签详解

    2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...

  2. SEO技巧：Meta标签详解

    网页设计:Meta标签详解 您的个人网站即使做得再精彩,在"浩瀚如海"的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ●在搜索引擎中 ...

  3. 网页设计：Meta标签详解

    网页设计:Meta标签详解 很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是H ...

  4. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 您的 ...

  5. [Dreamweaver教程]Meta标签详解

    [Dreamweaver教程]Meta标签详解 原作者:indian 出处:5D多媒体 发表时间:2004-12-8 关键词: 版权信息:传统媒体及商业网站禁止擅自转载:个人网站转载需经作者同意,并注 ...

  6. Meta http-equiv属性详解

    Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎  http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...

  7. 前端基础-HTML的的标签详解

    阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...

  8. 什么是Viewport Meta（width详解）及在手机上的应用

    查看视频地址: 什么是Viewport Meta(width详解)及在手机上的应用 viewport 是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米 ...

  9. HTML基本标签详解与运行截图

    Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...

  10. web前端 --- HTML标签详解

    HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...

最新文章

  1. httpd服务相关实验
  2. 武汉科技大学ACM ：1004: C语言程序设计教程（第三版）课后习题6.3
  3. 中安消布局东三省智慧城市市场
  4. What Influences Method Call Performance in Java?--reference
  5. 信息学奥赛C++语言：判断两位数
  6. 生化危机5 / BIOHAZARD5 简直就是一款完美的印钞机?（+2009.4.9）
  7. js正则标志/g,/i,/m说明
  8. 关于公司通过CMMI3级认证
  9. 3.这就是搜索引擎:核心技术详解 --- 搜索引擎索引
  10. linux修改时区不用重启服务,Linux修改时区不用重启的方法
  11. Java数组排序：Java sort()方法
  12. Neo4j清空数据库
  13. 工作网络计算机显示不完全,win10网络共享，计算机显示不全？
  14. mysql explain中的名词解释
  15. python脚本之对文件进行哈希校验
  16. 深度学习——序列模型（笔记）
  17. 【老卫搞机】136期：华为开发者联盟社区2022年度战码先锋2期开源贡献之星
  18. 【迁移学习】特征空间相同、概率分布不同的概念
  19. 存储基础知识 - 传统存储 NAS SAN 和 分布式存储对比
  20. ECPP——利用有限域上的椭圆曲线，精确判定素数的算法

热门文章

  1. 网盘搜索引擎原理大揭秘
  2. 什么是顶级域名、地理域名和个性域名
  3. win10/win11添加本地普通账户/管理员账户/win10修改/禁用pin码
  4. C语言实现16进制到2进制的转换
  5. markdown编辑器和富文本编辑器区别
  6. 游戏公司用IM软件 “颜值”和“手感”一个都不能少
  7. 银河麒麟V10-sp1服务器操作系统桌面环境安装
  8. 小白开始学RTOS 1
  9. 字符处理——大写转小写、小写转大写
  10. 忘记了PDF文件密码，找回密码