！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！
| 属性 | 值 | 描述 |
| charset( H5 New) | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type、default-style、refresh | 把 content 属性关联到 HTTP 头部。 |
| name | application-name、author、description、generator、keywords | 把 content 属性关联到一个名称。 |
| scheme(H5 删除) | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式。 |
整体来看，HTML5之前，meta标签只有两个主要属性，分别是 name 属性和 http-equiv 属性。 HTML5新添加"charset".
一、name
name属性主要用于描述网页，对应属性是 content ，以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
语法：
<meta name="参数" content="参数值" />
1.Keywords（关键字）
说明：为搜索引擎提供的关键字列表
语法：
<meta name="keywords" content="程序员,程序猿,攻城狮"/>
2.Description（简介）
说明：Description用来告诉搜索引擎你的网站主要内容。
语法：
<meta name="description" content="meta标签是HTML中的一个重要标签，它位于HTML文档头部的<HEAD>标签和<TITL>标签之间。"/>
3.robots（机器人向导）
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
语法：
<meta name="robots" content=""/>
content的参数值有all,none,index,noindex,follow,nofollow，默认值是all。
参数说明：
参数为 all ：文件将被检索，且页面上的链接可以被查询； 参数为 none ：文件将不被检索，且页面上的链接不可以被查询； 参数为 index ：文件将被检索； 参数为 follow ：页面上的链接可以被查询； 参数为 noindex ：文件将不被检索，但页面上的链接可以被查询； 参数为 nofollow ：文件将被检索，但页面上的链接不可以被查询；
4.author（作者）
说明：标注网页的作者
语法：
<meta name="author" content="TG,TG@qq.com"/>
5.copyright（版权）
说明：标注版权
语法：
<meta name="copyright" content="本网站版权归TG所有"/>
6.generator
说明：说明网站采用什么编辑器制作。
语法：
<meta name="generator" content="你所用的编辑器"/>
7.revisit-after（重访）
说明：网站重访
语法：
<meta name="revisit-after" content="7days"/>
二、http-equiv
http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
语法：
<meta http-equiv="参数" content="参数值"/>
参数说明：
1.Expires（期限）
说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新传输。
语法：
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
注意：必须使用GMT的时间格式，或者直接设为0（数字表示多久后过期）
2.Pragma（cache模式）
说明：禁止浏览器从本地计算机的缓存中访问页面内容。
语法：
<meta http-equiv="Pragma" content="no-cache"/>
注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。
3.Refresh（刷新）
说明：自动刷新并指向新页面。
语法：
<meta http-equiv="refresh"content="5; url=http://www.baidu.com/"/>
其中的5表示5秒后自动刷新并调整到URL新页面。
4.Set-Cookie（cookie设定）
说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。
如果网页过期，那么存盘的cookie将被删除。
语法：
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式
5.Window-target（显示窗口的设定）
说明：强制页面在当前窗口以独立页面显示
语法：
<meta http-equiv="Window-target" content="_top"/>
可以用来防止别人在框架里调用你的页面。
6.content-Type（显示字符集的设定）
说明：设定页面使用的字符集
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
其他参数值：
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
在HTML5中，我们一般都是：<meta charset="utf-8"/>
7.content-Language（显示语言的设定）
说明：显示语言
语法：
<meta http-equiv="Content-Language" content="zh-cn"/>
8.http-equiv="imagetoolbar"
<meta http-equiv="imagetoolbar" content="false"/>
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
！！HTML 5新增
一、name
1.viewport
说明：能优化移动浏览器的显示（屏幕的缩放）
语法：
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
参数值：
width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
height – viewport 的高度 （范围从 223 到 10,000 ）
user-scalable [yes | no]是否允许缩放
initial-scale [数值] 初始化比例（范围从 > 0 到 10）
minimum-scale [数值] 允许缩放的最小比例
maximum-scale [数值] 允许缩放的最大比例
2.format-detection（忽略电话号码和邮箱）
说明：忽略电话号码和邮箱
语法：
//忽略页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no">
//忽略页面中的邮箱格式识别为邮箱
<meta name="format-detection" content="email=no"/>
也可以写成：
<meta name="format-detection" content="telphone=no, email=no"/>
3、浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。（仅限360浏览器）
<meta name="renderer" content="webkit|ie-comp|ie-stand">
若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
各渲染内核的技术细节
| 内核 | Webkit | IE兼容 | IE标准 |
| 内核版本 | Chrome 45 | IE6/7 | IE9/IE10/IE11(取决于用户的IE) |
| HTML5支持 | YES | NO | YES |
| ActiveX控件支持 | NO | YES | YES |
4、WebApp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
5、隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
6、不同浏览器
<!-- 针对手持设备优化，主要是针对一些老的不识别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
1、优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 用于在IE8版本浏览器中使用IE7渲染来避免出错 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
2、转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
三、charset
<meta charset="UTF-8">
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码。
文章参考：https://blog.csdn.net/zhangank/article/details/94014629 原文作者：ANKG
分享到：
相关推荐
搜索引擎和 HTML Meta 标签（Meta Tags）
### HTML Meta标签使用方法详解 #### 一、Meta标签简介 HTML中的`<meta>`标签是一种重要的元数据标记，它通常位于文档的`<head>`部分。Meta标签用于定义关于HTML文档的元信息，这些信息不会显示在页面上，但对...
HTML中的<meta>标签是用于描述HTML文档的元信息，这些信息通常不会直接显示给用户，但它们可以告诉浏览器如何解析页面，或者提供关于页面的额外信息。在本文件中，我们看到了<meta>标签的多种属性和使用方式，以及...
HTML `<meta>` 标签是HTML文档中一个非常重要的元素，它用于提供关于网页的元信息，这些信息可能包括描述、关键词、字符编码、作者、更新时间等，这些元信息对于搜索引擎优化（SEO）、浏览器解析以及与其他Web服务的...
HTML Meta标签完整列表的摘要，使您的网站排名第一 用法 只需输入meta的名称即可生成代码示例：为meta视口生成代码 < meta name = " viewport " content = " width = device-width " > 你需要写视口 基本...
### HTML Meta标签详解 在构建网页的过程中，合理运用`<meta>`标签对于网站优化、页面显示及搜索引擎识别等方面具有重要作用。本文将详细解读HTML页面上`<meta>`标签的功能及其应用场景。 #### `<meta>`标签的基本...
这主要依赖于CSS媒体查询（Media Queries）和特定的HTML meta标签。响应式meta标签`<meta name="viewport">`在其中扮演着关键角色。该标签告诉浏览器应该如何调整页面的宽度和缩放，以适应手机、平板电脑等移动设备...
关键字 meta（标签）及 Keywords（关键词），曾经在网页中很重要的，但现在已经被很多搜索引擎完全忽略。但是，如果加上这个标签也对网页的综合表现没有坏处，不过，如果使用不恰当的话，对网页非但没有好处，还有...
### WebApp中的Meta标签详解 #### 一、引言 在Web开发中，尤其是在构建适应移动设备的Web应用(WebApp)时，正确使用HTML中的`<meta>`标签至关重要。它不仅可以帮助开发者控制页面的布局与展示效果，还能优化SEO、...
Meta标签是HTML语言中的一个辅助性标签，位于HTML文档头部的`<HEAD>`区域，并在`<TITLE>`标签之前。虽然用户在浏览网页时无法直接看到这些信息，但对于网页的SEO优化及浏览器的功能设置具有重要作用。好的Meta标签...
下面就为大家带来一篇html meta标签的使用总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML 语言 Meta 标签解析及 SEO 优化 Meta 标签是 HTML 语言 HEAD 区的一个辅助性标签，它位于 HTML 文档头部的 `<HEAD>` 标记和 `<TITLE>` 标记之间，它提供用户不可见的信息。Meta 标签通常用来为搜索引擎 robots...
meta是html语言head中的一个辅助标签，meta标签由http-equlv属性和name属性组成，属性不同参数不同，它的表现形式自然也不同。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看 资源太大，传...
网页HTML代码中Meta标签详解 Meta标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和标记之间，提供用户不可见的信息。Meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的...
meta标签的作用及整理
#### 一、Meta标签概述 在HTML文档中，`<meta>`标签被广泛应用于头部（`<head>`部分），主要用于定义页面的元数据（metadata）。这些元数据通常不直接对用户可见，但对浏览器以及其他网络服务（如搜索引擎）具有重要...
Html中meta标签 一、meta标签 含义 <meta> 元素 可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内容。 <...
Meta标签是HTML文档头部的一个重要组成部分，它提供了关于当前网页的Metadata信息，帮助搜索引擎和浏览器更好地理解和处理网页内容。Meta标签主要有两个属性：name属性和http-equiv属性。 name属性 Name属性主要...