目录
前言
html的meta总结
1、name属性
2、http-equiv属性
首页 web前端 html教程 html的meta总结,html标签中meta属性使用介绍

html的meta总结,html标签中meta属性使用介绍

Aug 27, 2016 am 08:53 AM

引用:http://www.haorooms.com/post/html_meta_ds

前言

meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! 

html的meta总结

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

1、name属性

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

meta标签的name属性语法格式是:

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"参数"<span class="atn">content<span class="pun">=<span class="atv">"具体的参数值"<span class="tag">><span class="pln">。 </span></span></span></span></span></span></span></span></span></span></code>
登录后复制

其中name属性主要有以下几种参数: 

A、Keywords(关键字) 

说明:keywords用来告诉搜索引擎你网页的关键字是什么。

举例:

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"keywords"<span class="atn">content<span class="pun">=<span class="atv">"meta总结,html meta,meta属性,meta跳转"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

B、description(网站内容描述)

说明:description用来告诉搜索引擎你的网站主要内容。

举例:

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"description"<span class="atn">content<span class="pun">=<span class="atv">"haorooms博客,html的meta总结,meta是html语言head区的一个辅助性标签。"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

C、robots(机器人向导)

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例:

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"robots"<span class="atn">content<span class="pun">=<span class="atv">"none"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

具体参数如下:

信息参数为all:文件将被检索,且页面上的链接可以被查询;

信息参数为none:文件将不被检索,且页面上的链接不可以被查询;

信息参数为index:文件将被检索;

信息参数为follow:页面上的链接可以被查询;

信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;

信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

D、author(作者)

说明:标注网页的作者

举例:

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"author"<span class="atn">content<span class="pun">=<span class="atv">"root,root@xxxx.com"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

E、generator

<code><span class="tag"><meta<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"generator"<span class="atn">content<span class="pun">=<span class="atv">"信息参数"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
登录后复制

meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

F、COPYRIGHT

<code><span class="tag"><META<span class="pln"> <span class="atn">NAME<span class="pun">=<span class="atv">"COPYRIGHT"<span class="atn">CONTENT<span class="pun">=<span class="atv">"信息参数"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

G、revisit-after

<code><span class="tag"><META<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"revisit-after"<span class="atn">CONTENT<span class="pun">=<span class="atv">"7days"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

revisit-after代表网站重访,7days代表7天,依此类推。

2、http-equiv属性

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"参数"<span class="atn">content<span class="pun">=<span class="atv">"参数变量值"<span class="tag">><span class="pln">; </span></span></span></span></span></span></span></span></span></span></code>
登录后复制

其中http-equiv属性主要有以下几种参数:

A、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"expires"<span class="atn">content<span class="pun">=<span class="atv">"Fri,12Jan200118:18:18GMT"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

注意:必须使用GMT的时间格式。

B、Pragma(cache模式)

说明:禁止浏览器从本地计算机的缓存中访问页面内容。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Pragma"<span class="atn">content<span class="pun">=<span class="atv">"no-cache"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

注意:这样设定,访问者将无法脱机浏览。

C、Refresh(刷新)

说明:自动刷新并指向新页面。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Refresh"<span class="atn">content<span class="pun">=<span class="atv">"2;URL=http://www.haorooms.com"<span class="tag">><span class="pln"> //(注意后面的引号,分别在秒数的前面和网址的后面) </span></span></span></span></span></span></span></span></span></span></code>
登录后复制

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Set-Cookie"<span class="atn">content<span class="pun">=<span class="atv">"cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

注意:必须使用GMT的时间格式。

E、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Window-target"<span class="atn">content<span class="pun">=<span class="atv">"_top"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

注意:用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明:设定页面使用的字符集。

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"content-Type"<span class="atn">content<span class="pun">=<span class="atv">"text/html;charset=gb2312"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

具体如下:

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时,代表世界通用的语言编码;

G、content-Language(显示语言的设定)

用法:

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Content-Language"<span class="atn">content<span class="pun">=<span class="atv">"zh-cn"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
登录后复制

H、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消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

J、http-equiv="imagetoolbar"

<code><span class="tag"><meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"imagetoolbar"<span class="atn">content<span class="pun">=<span class="atv">"false"<span class="tag">/></span></span></span></span></span></span></span></span></span></code>
登录后复制

指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

K、Content-Script-Type

<code><span class="tag"><Meta<span class="pln"> <span class="atn">http-equiv<span class="pun">=<span class="atv">"Content-Script-Type"<span class="atn">Content<span class="pun">=<span class="atv">"text/javascript"<span class="tag">></span></span></span></span></span></span></span></span></span></code>
登录后复制

W3C网页规范,指明页面中脚本的类型。

L 页面跳转,只用于IE

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? 我如何使用html5&lt; time&gt; 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles