HTML中meta标签的一些分享(name和http-equiv属性）
2017-09-24 19:13
387 查看
看到meta标签，首先是不是表示很懵逼？平常好像一直都在用，用来写个作者是谁，搞定一下乱码，但更多的好像又不太清楚了。
今天，就和大家一起总结一些meta标签的常见用法和一些使用的注意事项。
1.搞清楚meta标签是什么：它是HTML网页源代码（就是人敲的未编译成计算机语言的代码）用来描述一个网页文档属性的标签，例如作者，日期，时间，网页描述，关键字，页面刷新等。一个<head>区的一个辅助标签。
2.搞清楚这个标签的两大属性和它两个属性的作用。
第一，是http-equiv属性，顾名思义（equiv英文可以译为析出，或等同），相当于http协议的文件头作用，（这里要搞清楚http协议是什么，http协议又叫超文本传输协议，负责web网络服务器和web浏览器之间的通信，http用于从客户端<浏览器>向服务器发送请求，并从服务器向客户端返回内容<网页>）。由此来看，http-equiv的作用就在于它可以帮服务器向浏览器传回一些有用的信息，来帮助帮助浏览器更好的显示网页内容。（也就是，帮服务器-----到浏览器）
第二，是name属性，它主要用于描述网页，如网页的内容描述，作者等。是在网页已经加载过后，当我们用搜索引擎搜索的时候告诉他你网页的一些信息，便于它的搜索。（也就是，帮浏览器（客户）-----到服务器或其他的搜索）。
3.搞清楚两者的区别，并且做区分应用。知道了两个属性的信息传递方向之后，正确的使用就能避免很多的问题。比如有一个同行曾经分享过的，对于seo（搜索引擎优化:Search Engine Optimization,对网站进行站内优化修复<web结构调整，内容建设，代码优化和编码>，以达到提高网站的关键词排名以及公司产品的曝光度）来说，由于它搜索的优化，所以很多seo检测工具是无法获得http-equiv属性的，而name属性值则可以获取到。而在了解了他们两个的区别之后，我们可以对这方面早作安排。
4.两大属性的具体内容：
首先是name属性：
name属性语法格式是：name="参数"content="具体的参数值"
其中name属性主要有以下几种参数：
1. keywords关键字：用来告诉搜索引擎你网页的关键字是什么。
举例：<meta name="keywords" content="修仙小说,玄幻小说，言情 小说" />
ps:每个关键字用逗号（英文状态下的半角逗号）隔开。
注意第一点： 1.确信使用的关键词出现在网页文本中
2.不要重复使用关键词
3.每个网页的关键词应该不一样。
4.网页的关键词标签里应该包含3-5个最重要的关键词，不要超过5个
4000
。
一定要客观的使用这个标签，不然会有欺诈的嫌疑。当今这个标签属性有所滥用。
还有搜索引擎技术的提升。现在很多搜索引擎不再观察这个标签，但写了正确的标签，
肯定是百益而无一害。而滥用的话，尤其是有带黑帽（使用作弊或可疑手段，比如说垃圾链
接，隐藏网页，桥页，关键词堆砌等等。最典型的黑帽搜索引擎优化时，用程序从其他分类
目录或搜索引擎抓取大量搜索结果做成网页，然后在这些网页上放上Google Adsense。<Adsense:相关广告>)的想法，
用这个标签属性小心进沙盒（沙盒：网站有作弊嫌疑，百度要将网站放进沙盒进行隔离检测）或被惩罚。
5. 前三点是我copy一位同行的，有兴趣可以去看看：https://zhangzifan.com/meta-and-keywords.html
2.de ion或description关键字：用来告诉搜索引擎你的网站主要内容。
举例：< name="de ion"content="This page is about the meaning of science,education,culture.">
3.robots(机器人向导) ，说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有
all,none,index,noindex,follow,nofollow。默认是all。
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
举例：<meta name="robots"content="none"/>
4.author(作者) ,说明：标注网页的作者,举例：<meta name="author"content="小谢有限公司"/>
然后是http-equiv属性：
http-equiv 属性语法格式是 http-equiv="参数"content="参数变量值"
其中http-equiv属性主要有以下几种参数：
1.content-Type：用于说明网页使用的文字与字符集。
举例： http-equiv="content-Type" content="text/html;charset=gb2312"
也可以分开写：<meta http-equiv="Content-type" content="text/html;" charset="utf-8" />
又如英文是ISO-8859-1字符集，还有BIG5、shift-Jis、Euc等字符集；
（ISO-8859-1字符集：支持部分于欧洲使用的语言；
BIG5：通行于台湾、香港地区的一个繁体字编码方案；
shift-Jis：是一个日本电脑系统常用的编码表；
GB2312：国家标准编码，适用于汉字处理、汉字通信等系统之间的信息交换）
2.content-Language:主页制作所使用的语言。
举例：meta http-equiv="Content-Language" contect="zh-CN"/>
3.Expires(期限）：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
举例：< meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"/>
注意：必须使用GMT时间格式，（GMT：零时区的时间，比北京时间晚8个小时）
4.Pragma(cache模式) ，说明：禁止浏览器从本地计算机的缓存中访问页面内容。你网一断，gameover。。。
举例<meta
http-equiv="Pragma"content="no-cache"/>
5.Refresh(刷新) ：用于自动刷新并指向新页面。
举例< meta http-equiv="refresh"content="2;url=http://www.baidu.com"/>
(注意后面的引号，分别在秒数的前面和网址的后面)
注意：这样设定，访问者将无法脱机浏览。
6.Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。
举例：<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-
200118:18:18GMT；path=“post”/">
注意：必须使用GMT时间格式，（GMT：零时区的时间，比北京时间晚8个小时)
7.Window-target(显示窗口的设定) ：用于页面在当前窗口以独立页面显示
举例：<meta http-equiv="Window-target"content="_top"/>
注意：用来防止别人在框架里调用自己的页面。
Content选项：_blank、_top、_self、_parent。
8.Page-Enter、Page-Exit (进入与退出)：用于在用户进入时显示一些特效
举例：<Meta
http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
blendTrans是css动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），
前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果......
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration:表示滤镜特效的持续时间(单位：秒)
Transition:滤镜类型。表示使用哪种特效，取值为0-23。
网页变换效果只要搭配得当，这些变换效果会给访客留下非常深刻的印象，即使是那些本来对你的站点没兴趣的访客。特别是喜欢学习网页
制作的朋友，很可能就把 你的网页复制下来，以供学习研究之用。其实你不过是加了短短一段代码而已^_^ 网页变换效果（Trans）共分四
大类："进入网页"（Page-Enter）、"离开网页"（Page-Exit）、"进入站点"（Site- Enter）、"离开站点"（Site-Exit）。
注意：http-equiv的第8条（特效）我实验的时候没有成功，之后确认后再详述。因为网上说有可能被禁用了，我查证后再给一个准确的答复。
第三，关于viewport的部分由于涉及到bootstrap，后面再议。
以上，便是我对meta标签的一些总结，借鉴了很多，不足之处请多见谅。
推荐:三篇相关博客：1：http://dwz.cn/6y9jr1
2：http://dwz.cn/6EXGQr
3：http://dwz.cn/6EXICM
今天，就和大家一起总结一些meta标签的常见用法和一些使用的注意事项。
1.搞清楚meta标签是什么：它是HTML网页源代码（就是人敲的未编译成计算机语言的代码）用来描述一个网页文档属性的标签，例如作者，日期，时间，网页描述，关键字，页面刷新等。一个<head>区的一个辅助标签。
2.搞清楚这个标签的两大属性和它两个属性的作用。
第一，是http-equiv属性，顾名思义（equiv英文可以译为析出，或等同），相当于http协议的文件头作用，（这里要搞清楚http协议是什么，http协议又叫超文本传输协议，负责web网络服务器和web浏览器之间的通信，http用于从客户端<浏览器>向服务器发送请求，并从服务器向客户端返回内容<网页>）。由此来看，http-equiv的作用就在于它可以帮服务器向浏览器传回一些有用的信息，来帮助帮助浏览器更好的显示网页内容。（也就是，帮服务器-----到浏览器）
第二，是name属性，它主要用于描述网页，如网页的内容描述，作者等。是在网页已经加载过后，当我们用搜索引擎搜索的时候告诉他你网页的一些信息，便于它的搜索。（也就是，帮浏览器（客户）-----到服务器或其他的搜索）。
3.搞清楚两者的区别，并且做区分应用。知道了两个属性的信息传递方向之后，正确的使用就能避免很多的问题。比如有一个同行曾经分享过的，对于seo（搜索引擎优化:Search Engine Optimization,对网站进行站内优化修复<web结构调整，内容建设，代码优化和编码>，以达到提高网站的关键词排名以及公司产品的曝光度）来说，由于它搜索的优化，所以很多seo检测工具是无法获得http-equiv属性的，而name属性值则可以获取到。而在了解了他们两个的区别之后，我们可以对这方面早作安排。
4.两大属性的具体内容：
首先是name属性：
name属性语法格式是：name="参数"content="具体的参数值"
其中name属性主要有以下几种参数：
1. keywords关键字：用来告诉搜索引擎你网页的关键字是什么。
举例：<meta name="keywords" content="修仙小说,玄幻小说，言情 小说" />
ps:每个关键字用逗号（英文状态下的半角逗号）隔开。
注意第一点： 1.确信使用的关键词出现在网页文本中
2.不要重复使用关键词
3.每个网页的关键词应该不一样。
4.网页的关键词标签里应该包含3-5个最重要的关键词，不要超过5个
4000
。
一定要客观的使用这个标签，不然会有欺诈的嫌疑。当今这个标签属性有所滥用。
还有搜索引擎技术的提升。现在很多搜索引擎不再观察这个标签，但写了正确的标签，
肯定是百益而无一害。而滥用的话，尤其是有带黑帽（使用作弊或可疑手段，比如说垃圾链
接，隐藏网页，桥页，关键词堆砌等等。最典型的黑帽搜索引擎优化时，用程序从其他分类
目录或搜索引擎抓取大量搜索结果做成网页，然后在这些网页上放上Google Adsense。<Adsense:相关广告>)的想法，
用这个标签属性小心进沙盒（沙盒：网站有作弊嫌疑，百度要将网站放进沙盒进行隔离检测）或被惩罚。
5. 前三点是我copy一位同行的，有兴趣可以去看看：https://zhangzifan.com/meta-and-keywords.html
2.de ion或description关键字：用来告诉搜索引擎你的网站主要内容。
举例：< name="de ion"content="This page is about the meaning of science,education,culture.">
3.robots(机器人向导) ，说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有
all,none,index,noindex,follow,nofollow。默认是all。
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
举例：<meta name="robots"content="none"/>
4.author(作者) ,说明：标注网页的作者,举例：<meta name="author"content="小谢有限公司"/>
然后是http-equiv属性：
http-equiv 属性语法格式是 http-equiv="参数"content="参数变量值"
其中http-equiv属性主要有以下几种参数：
1.content-Type：用于说明网页使用的文字与字符集。
举例： http-equiv="content-Type" content="text/html;charset=gb2312"
也可以分开写：<meta http-equiv="Content-type" content="text/html;" charset="utf-8" />
又如英文是ISO-8859-1字符集，还有BIG5、shift-Jis、Euc等字符集；
（ISO-8859-1字符集：支持部分于欧洲使用的语言；
BIG5：通行于台湾、香港地区的一个繁体字编码方案；
shift-Jis：是一个日本电脑系统常用的编码表；
GB2312：国家标准编码，适用于汉字处理、汉字通信等系统之间的信息交换）
2.content-Language:主页制作所使用的语言。
举例：meta http-equiv="Content-Language" contect="zh-CN"/>
3.Expires(期限）：用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
举例：< meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"/>
注意：必须使用GMT时间格式，（GMT：零时区的时间，比北京时间晚8个小时）
4.Pragma(cache模式) ，说明：禁止浏览器从本地计算机的缓存中访问页面内容。你网一断，gameover。。。
举例<meta
http-equiv="Pragma"content="no-cache"/>
5.Refresh(刷新) ：用于自动刷新并指向新页面。
举例< meta http-equiv="refresh"content="2;url=http://www.baidu.com"/>
(注意后面的引号，分别在秒数的前面和网址的后面)
注意：这样设定，访问者将无法脱机浏览。
6.Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。
举例：<meta http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-
200118:18:18GMT；path=“post”/">
注意：必须使用GMT时间格式，（GMT：零时区的时间，比北京时间晚8个小时)
7.Window-target(显示窗口的设定) ：用于页面在当前窗口以独立页面显示
举例：<meta http-equiv="Window-target"content="_top"/>
注意：用来防止别人在框架里调用自己的页面。
Content选项：_blank、_top、_self、_parent。
8.Page-Enter、Page-Exit (进入与退出)：用于在用户进入时显示一些特效
举例：<Meta
http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
blendTrans是css动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果，它可以分为两种blend（混合）和reveal（显示），
前者可以使对象渐渐消失或出现，后者提供了24种图象转化的效果......
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration:表示滤镜特效的持续时间(单位：秒)
Transition:滤镜类型。表示使用哪种特效，取值为0-23。
网页变换效果只要搭配得当，这些变换效果会给访客留下非常深刻的印象，即使是那些本来对你的站点没兴趣的访客。特别是喜欢学习网页
制作的朋友，很可能就把 你的网页复制下来，以供学习研究之用。其实你不过是加了短短一段代码而已^_^ 网页变换效果（Trans）共分四
大类："进入网页"（Page-Enter）、"离开网页"（Page-Exit）、"进入站点"（Site- Enter）、"离开站点"（Site-Exit）。
注意：http-equiv的第8条（特效）我实验的时候没有成功，之后确认后再详述。因为网上说有可能被禁用了，我查证后再给一个准确的答复。
第三，关于viewport的部分由于涉及到bootstrap，后面再议。
以上，便是我对meta标签的一些总结，借鉴了很多，不足之处请多见谅。
推荐:三篇相关博客：1：http://dwz.cn/6y9jr1
2：http://dwz.cn/6EXGQr
3：http://dwz.cn/6EXICM
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML 中的meta标签中的http-equiv与name属性使用介绍
- HTML-meta标签的http-equiv属性
- HTML中Meta标签中http-equiv属性
- HTML文档中的meta标签 name http-equiv
- html meta标签中name和http-equiv的区别
- HTML中Meta标签中http-equiv属性小结
- HTML文档中meta标签的作用 Generator KEYWords DEscription Author http-equiv属性
- html文件中，meta标签中的http-equiv属性使用介绍
- meta标签的name和http-equiv属性
- meta标签中的http-equiv属性使用介绍
- HTML <meta> 标签 和 http-equiv
- meta标签中的http-equiv属性使用介绍
- html中meta标签的http-equiv的典型用法（转）
- HTML <meta> 标签 遇到<meta http-equiv="refresh" content="0; url=">详解
- meta标签中的http-equiv属性使用介绍
- HTML <meta> 标签 遇到<meta http-equiv="refresh" content="0; url="&glt;详解
- HTML <meta> 标签 和 http-equiv
- meta标签中的http-equiv属性使用介绍
- Meta 标签http-equiv属性
- meta标签中的http-equiv属性使用介绍