在之前的前端学习中，我只了解了这句话关于meta标签的内容。
元字符集=\’UTF-8\’
但是当你打开一个网站时，你会在head 标签内看到一串元标签。例如，我的博客。
然而我对它太陌生了，所以我在寒假学习计划之前添加了元标签。
简介
当我查看w3school 时，第一句话“元数据”开启了我的Google 之旅。我在w3school的英文版中找到了想要的结果。 （W3school中文是指元信息，在Google或百度上都没有对应的条目。不过元数据Google有详细解释，所以这里我们就用W3school英文版的解释来做。）
元标记提供有关HTML 文档的元数据。元数据在页面上不可见，但可以由机器解析。
我们知道关键是元数据。元数据中文称为元数据，用于描述数据。它不会出现在页面上，但机器可以识别它。这样一来，meta标签的作用就很容易理解了。
用处
元元素通常用于指定页面描述、关键字、文档作者、上次修改日期和其他元数据。
元数据可由浏览器（内容如何显示或页面重新加载）、搜索引擎（关键字）或其他Web 服务使用。
本文提供了有关使用元标记的简洁明了的介绍。翻译：元通常用于定义页面的描述、关键字、上次修改日期和其他元数据。此元数据提供给浏览器（页面的布局或重新加载方式）、搜索引擎和其他Web 服务。
组成
meta标签有两个属性：http-equiv属性和name属性。
1. name属性
name属性主要用于描述网页，如网页关键词、描述等。对应的属性值为content。 content中的内容是姓名输入类型的具体描述，有利于搜索引擎抓取。元标记名称属性具有以下语法格式：
metaname=\’参数\’ content=\’具体描述\’。
name 属性具有以下参数： （A到C是公共属性）
A. keywords(关键字)
描述：用于告诉搜索引擎您网页的关键字。例子：
metaname=\’keywords\’content=\’Lxxyx，博客，文科生，前端\’
B. description(网站内容的描述)
描述：用于告诉搜索引擎您网站的主要内容。例子：
metaname=\’description\’content=\’文科生，热爱前端和编程。我现在是大学二年级学生，这是一个前端博客。
C. viewport(移动端的窗口)
注：这个概念比较复杂，会在下一篇博文中详细解释。该属性常用于移动端网页设计。在使用Bootstrap、AmazeUI等框架时就已经用到了视口。
示例（常见示例）：
metaname=\’viewport\’content=\’width=设备宽度，初始比例=1\’
D. robots(定义搜索引擎爬虫的索引方式)
描述：机器人用于告诉爬虫哪些页面应该被索引，哪些页面不应该被索引。内容参数包括all、none、index、noindex、follow 和nofollow。默认就是一切。
例子：
元名称=\’机器人\’内容=\’无\’
具体参数为：
1.none : 搜索引擎将忽略此网页。这相当于noindex 和nofollow。
2.noindex : 搜索引擎不会索引该网页。
3.nofollow: 搜索引擎不会通过该网页的链接索引继续搜索其他网页。
4.所有：个搜索引擎已对该网页建立索引，并将继续通过该网页上的链接建立索引。这相当于索引和跟随。
5.index : 搜索引擎将索引此页面。
6.关注：搜索引擎通过该网页的链接索引继续搜索其他网页。
E. author(作者)
描述：用于标记网页的作者。 例子：
metaname=\’作者\’content=\’Lxxyx,841380530@qq.com\’
F. generator(网页制作软件)
说明：示例：用于表示网页是用什么软件制作的（不确定是否可以这样写）：
元名称=\’生成器\’内容=\’Sublime Text3\’
G. copyright(版权)
说明：标注版权信息示例：
meta name=\’copyright\’content=\’Lxxyx\’//表示该网站为Lxxyx个人版权。
H. revisit-after(搜索引擎爬虫重访时间)
注意：如果您的页面更新不频繁，您可以设置爬虫重访时间，以减少搜索引擎爬虫对服务器的负载。如果重访时间太短，爬虫会按照定义的默认时间进行访问。例子：
metaname=\’重访后\’content=\’7 天\’
I. renderer(双核浏览器渲染方式)
描述：渲染器是为双核浏览器提供的，默认用于指定双核浏览器如何渲染页面。例如360浏览器。例子：
meta name=\’renderer\’ content=\’webkit\’ //默认Webkit内核meta name=\’renderer\’ content=\’ie-comp\’ //默认IE兼容模式meta name=\’renderer\’ content=\’ie-stand\’ //默认IE标准模式
2. http-equiv属性
在我介绍自己之前，请允许我先离题一下。当我在文档和博客中阅读http-equiv的介绍时，我遇到了类似以下的句子。
顾名思义，http-equiv对应的是http的文件头功能。
当我第一次看到这句话时，我很困惑。这是因为当我们看到各种技术术语时，我们都会习惯性地记住官方的英文名称。 equal的正式名称是“equivalent”，意思是等于或等于。这时我脑子里出现了一个很大的困惑：“HTTP 是平等的吗？”
之后我就去Segmentfault问问题。结果，在写题的时候，我意识到平等也有等值的意思。这意味着它对应的是http的角色。文件头从哪里来，大概可以从它的功能来分析。顾名思义，我认为并不能得出“相当于http的文件头功能”的结论。
这是我认为http-equiv的含义的介绍。对应HTTP角色，比如定义一些HTTP参数。
元标记http-equiv 属性的语法格式为：
metahttp-equiv=\’参数\’ content=\’具体描述\’
http-equiv属性有以下主要参数：
A. content-Type(设定网页字符集)(推荐使用HTML5的方式)
描述：用于设置网页的字符集，以便浏览器更容易解析和渲染页面。 例子：
meta http-equiv=\’content-Type\’ content=\’text/html;charset=utf-8\’ //旧的HTML，已弃用meta charset=\’utf-8\’ //设置网页字符集HTML5 方法，我们推荐使用UTF-8。
B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)
描述：用于告诉浏览器渲染页面的版本。 （一般设置为现代模式，这种设置在各大框架中也很常见。）例如：
meta http-equiv=\’X-UA-Practical\’content=\’IE=edge,chrome=1\’///指定IE和Chrome使用最新版本渲染当前页面
C. cache-control(指定请求和响应遵循的缓存机制)
用法1.
描述：告诉浏览器如何缓存响应以及缓存响应的时间。我在网上寻找这个内容很长时间，但没有找到满意的内容。最后，我在Google Developers 上找到了我正在寻找的答案。
示例：
metahttp-equiv=\’缓存控制\’content=\’无缓存\’
它有多种用途。
no-cache: 首先发送请求向服务器检查资源是否发生变化。如果没有改变，则使用缓存。
no-store: 不允许缓存。我每次都必须访问服务器并下载完整的响应。 （安全措施）
public : 缓存所有响应，但不是必需的。使用max-age 也能得到同样的效果，所以
专用： 仅为单个用户缓存，因此无法缓存中继。 （例如，CDN 不允许缓存私有响应）
maxage : 指示当前请求的开始以及响应可以缓存和重用多长时间而无需重新请求服务器。例如，max-age=60 表示响应可以缓存并再使用60 秒。
参考链接：HTTP缓存
用法2.(禁止百度自动转码)
描述：用于防止当前页面在移动设备上查看时被百度自动转码。虽然百度的初衷是好的，但转码的效果却往往不尽如人意。因此，您可以在前面添加例句以避免百度自动转码。例子：
metahttp-equiv=\’缓存控制\’content=\’no-siteapp\’/
D. expires(网页到期时间)
描述： 用于设置网页的过期时间。过期后，必须将网页重新提交到服务器。例子：
metahttp-equiv=\’expires\’content=\’2016 年10 月26 日星期日01:00 GMT\’/
E. refresh(自动刷新并指向某页面)
说明：网页将在配置的时间内自动刷新并重定向到配置的URL。示例：
meta http-equiv=\’refresh\’content=\’2; URL=http://www.lxxyx.win/\’//表示2秒后跳转到我的博客
F. Set-Cookie(cookie设定)
描述：如果网页已过期。此网页上的本地cookie 随后将被自动删除。
meta http-equiv=\’Set-Cookie\’ content=\’name, date\’ //格式meta http-equiv=\’Set-Cookie\’ content=\’User=Lxxyx Expires=Sunday, January 10, 2016 10:00:00 GMT\’ //具体例子
最后
目前我在元标记中有太多自定义属性。所以我只寻找常用的和基本上被放弃的属性，如Window-target，并没有添加它们。
最初我以为1-2个小时就可以完成学习，没想到我花了5-6个小时去查找资料、提炼文字。当我打字的时候，我觉得我学到了很多东西。比如基础SEO、重新理解HTTP协议等。
我还没有经验，所以如果我有任何错误，如果你能纠正我，我将不胜感激。最后附上博客地址和原文链接。希望能够和大家有更多的交流。
转发：https://segmentfault.com/a/1190000004279791
#上面关于如何使用HTML元标记和属性的概述非常详细。相关内容源网络的代表性示例仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92608.html
