1> meta标签
meta 标签提供HTML文档的 元数据(meta-information)，用来表示那些不能由其它HTML相关元素(<base>，<link>， <script>，<style>或者<title>)之一表示的任何元数据信息，放置在文档头部 <head> 中，不会显示在客户端，但会被浏览器解析，我们通过提供 名称/值键值对 来指定网页的描述、关键词、文件的最后修改时间、作者及其它元数据，通常有这些作用：搜索引擎优化(SEO)、定义页面使用语言、自动刷新并指向新的页面、实现网页转换时的动态效果、控制页面缓冲、网页定级评价、控制网页显示的窗口等功能。
meta标签通常有这些属性可设置，例如 charset、content、http-equiv 以及 name 。
charset 属性
该属性是 HTML5 中新属性，用于声明当前文档所使用的字符编码，但该声明可以被任何元素的 lang 特性的值覆盖。该特性的值必须一个符合 IANA 所定义的字符编码首选 MIME (Multipurpose Internet Mail Extensions) 名称 (preferred MIME name)之一，推荐使用值 “UTF-8”
例如
<meta charset="UTF-8">
其与以下meta设置通用
<meta http-equive="Content-Type" content="text/html;charset=IANAcharset">
<!-- IANAcharset设定页面使用的字符集 -->
<!-- 仍然允许使用http-equiv属性来规定字符集，但推荐使用新属性charset，毕竟可以减少代码量 -->
<!-- GB2312 简体中文 -->
<!-- BIG5 繁体中文 -->
<!-- iso-2022-jp 日文 -->
<!-- ks_c_5601 韩文 -->
<!-- ISO-8859-1 英文 -->
<!-- UTF-8 世界通用的语言编码 -->
content 属性
content属性提供 名称/值键值对 中的值，包含 http-equiv 或 name 属性的值，可以是任何有效的字符串，但始终要和 name 属性或 http-equiv 一起使用。
name 属性
name属性用来定义元数据的名称，主要用于描述网页，便于搜索引擎机器人查找信息和分类信息用，如果设置了 http-equiv 或 charset 属性，则不应该设置 name 属性，需要设置 content 属性的值。
name属性的值分为以下几种：
keywords 用逗号分隔关键词列表，规定页面内容关键词，方便搜索引擎页面分类
<meta name="keywords" content="study, meta, JosephBlackWn">
author 用来规定文档作者名称，说明网页版权作者信息
<meta name="name" content="JosephBlackWn">
description 通过简短、精确的描述来形容页面内容，搜索引擎将会获取该信息用以显示，而在一些浏览器中搜索引擎，如Firefox和Opera会将其作为书签页的默认描述。
<meta name="description" content="JosephBlackWn write this page to make who view this article sure how to use these tags in the head">
renderer 用于国产浏览器内核控制，因为现在国内浏览器很多都是双内核，webkit内核告诉浏览，IE内核兼容网页和旧版网站，而通过值renderer可以控制浏览器选择哪种内核渲染
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- webkit 极速内核 -->
<!-- ie-comp IE兼容 -->
<!-- ie-stand IE标准 -->
copyright 用来规定文档copyright，说明网站版权信息
generator 规定用于生成文档的软件包标志符，说明网站采用什么软件制作。
application-name 规定页面上web应用程序的名称
creator 用来规定文档创建者的名称，也可以是机构的名称，如果有多个创建者，应该使用多个 <meta> 元素
publisher 用来规定文档的发行方名称，也可以是机构的名称
**revisit-after ** 用来规定页面重访时间(搜索引擎爬虫搜索时间)，如果页面不常更新，并减少搜索引擎爬虫对服务器带来的压力，可以设置爬虫访问时间
<meta name="revisit-after" content="7 days">
<!-- 7 days 代表7天，设置多久写多久 -->
googlebot 谷歌索引爬虫
slurp Yahoo Search的抓取工具
rebots 用来规定爬虫程序按索引爬取页面数据，以逗号分隔索引值列表
对应content的值有all、none、index、noindex、follow、nofollow，默认是all
| value | 描述 |
|---|---|
| all | 文件将被检索，且页面上的链接可以被查询 |
| none | 文件将不被检索，且页面上的链接不可以被查询 |
| index | 文件将被检索 |
| follow | 页面上的链接可以被查询 |
| noindex | 文件将不被检索，但页面上的链接可以被查询 |
| nofollow | 文件被检索，但页面上的链接不可以被查询 |
移动端常用属性
viewport 优化移动端浏览器视口大小。对于非响应式站点，用户可能需要手动移动页面或者缩放，此时initial-scale不能设置为1、user-scalable不能设置为no、maximun-scale不能设置为1，否则用户就不能放大/缩小网页来查看页面全部内容了。常用值如下：
| Value | 描述 |
|---|---|
| width | 宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素） |
| height | 高度（数值 / device-height）（范围从223 到10,000） |
| initial-scale | 初始的缩放比例 （范围从>0 到10） |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩 (no,yes) |
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
<!-- width设置输出设备的屏幕可见宽度，缩放大小设置为1，最大缩放设置为1，用户缩放设置为no -->
在IOS9以上需要增加 shrink-to-fit=no 使得自适应宽度代码起作用
Viewport meta tags using"width=device-width" cause the page to scale down to fit content that overflows the viewport bounds.
You can override this behavior by adding “shrink-to-fit=no” to your meta tag as shown below.
The added value will prevent the page from scaling to fit the viewport.
apple-mobile-web-app-capable 设置webApp为全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" >
format-detection 设置对应的类型是否忽略，如果telephone、email这些
<meta content="telephone=no" name="format-detection">
<!-- 忽略数字自动识别为电话号码 -->
<meta content="email=no" name="format-detection">
<!-- 忽略识别邮箱 -->
其它用法
<!-- 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
http-equiv 属性
http-equiv 属性为 名称/值键值对 提供名称，相当于 http 的文件头作用，向浏览器的 MIME 文档头部（包含名称/值对）传递页面设置信息，以帮助正确和精确地显示网页内容，而 content 中设置对应的属性值。
http-equiv的值分为以下几种：
content-Type 代表HTTP头部协议，提示浏览器网页的信息，用于设定网页字符集，属于旧的定义网页编码方式的写法，现在可以直接用 charset 属性(HTML5)代替。
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<!-- 推荐使用以下用法 HTML5 -->
<meta charset="utf-8">
X-UA-Compatible 告知浏览器以何种版本渲染当前页面，一般都设置为最新模式，优先使用IE最新版本和Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Cache-Control 用于指定请求和响应遵循的缓存机制，指导浏览器如何缓存某个响应及缓存多长时间
| value | 描述 |
|---|---|
| public | 指示响应可被任何缓存区缓存 |
| private | 指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效 |
| no-cache | 指示请求或响应消息不能缓存 |
| no-store | 用于防止重要的信息被无意的发布，在请求消息中发送将使得请求和响应消息都不使用缓存 |
| max-age | 指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应 |
| min-fresh | 指示客户机可以接收响应时间小于当前时间加上指定时间的响应 |
| max-stale | 指示客户机可以接收超出超时期内的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息 |
另外还有一些自定义的值
<meta http-equiv="Cache-Control" content="no-siteapp">
这个值用于禁止当前页面在移动端浏览时，被百度自动转码，避免转码后不能满足网站设计者实际需要。
expires 用于设定网页的到期时间，一旦网页过期，必须到服务器上重新传输
<meta http-equive="expires" content="Sunday 29 July 2019 18:00 GMT">
<!-- 注意：必须使用GMT的时间格式 -->
Pragma 用于禁止浏览器从本地计算机的缓存中访问页面内容，通过这样设定后访问者将无法脱机浏览
<meta http-equiv="Progma" content="no-cache">
Refresh 用于自动刷新并指向设定网址，如果只包含一个正整数则是重新载入页面的时间间隔(秒)，如果包含一个正整数并且跟着一个字符串，则是重定向到指定链接的时间间隔(秒)
<meta http-equiv="Refresh" content="2;URL=https://blog.csdn.net/wzp20092009/article/details/96834249">
<!-- 2s后跳转到指定URL -->
Set-Cookie 设定网页过期后，将自动删除本地cookie
<meta http-equiv="Set-Cookie" content="User=JosephBlackWn; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
<!-- 注意：必须使用GMT的时间格式 -->
Window-target 用于强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人在框架里(如iframe)调用自己的页面
<meta http-equiv="Window-target" content="_top">
扫一扫
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
