Meta标签的作用（网上转）

来源：互联网发布：mmd动作数据在哪配布编辑：程序博客网时间：2024/04/30 00:14

网页制作中META标签的作用(1)

引言

　　您的个人网站即使做得再精彩，在“浩瀚如海”的网络空间中，也如一叶扁舟不易为人发现，如何推广个人网站，人们首先想到的方法无外乎以下几种：

　　l 在搜索引擎中登录自己的个人网站

　　l 在知名网站加入你个人网站的链接

　　l 在论坛中发帖子宣传你的个人网站

　　很多人却忽视了HTML标签META的强大功效，一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性，有兴趣吗，谁我来重新认识一下META标签吧！

　　META标签，是HTML语言HEAD区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码：

　　＜head＞

　　＜meta http-equiv="Content-Type" content="text/html; charset=gb2312"＞

　　＜/head＞

　　这就是META标签的典型应用，标识page所采用的编码类型。根据HTML语言标准注释：META标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。

　　详细介绍

　　META标签分两大部分：HTTP-EQUIV和NAME变量。

　　参数HTTP-EQUIV

　　HTTP-EQUIV类似于HTTP的头部协议，它给浏览器回应一些有用的信息，以帮助正确地显示网页内容。常用的HTTP-EQUIV类型有：

　　A. Expires(期限)

　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

　　用法：＜META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"＞

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

　　B. Pragma(cache模式)

　　说明：禁止浏览器从本地机的缓存中调阅页面内容。

　　用法：＜META HTTP-EQUIV="Pragma" CONTENT="no-cache"＞

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

C. Refresh(刷新)

　　说明：需要定时让网页自动链接到其它网页的话，就用这句了。

　　用法：＜META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"＞

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

　　D. Set-Cookie(cookie设定)

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

　　用法：＜META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;

　　expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/"＞

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

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

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

　　用法：＜META HTTP-EQUIV="Window-target" CONTENT="_top"＞

　　注意：用来防止别人在框架里调用你的页面。

　　F. Content-Type(显示字符集的设定)

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

　　用法：＜META http-equiv="Content-Type" content="text/html; charset=gb2312"＞

　　注意：游览器会根据此来调用相应的字符集显示page内容

　　G. Pics-label(网页等级评定)

　　说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。

　　用法：＜META http-equiv=”Pics-label” contect=””＞

　　注意：不要将级别设置的太高。

　　参数NAME

　　META标签的NAME变量语法格式是：

　　＜META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx"＞

　　其中xxx主要有下面几种参数：

　　1. Keywords(关键字)

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

　　举例：＜META NAME ="keywords" CONTENT="life, universe, mankind, plants,

　　relationships, the meaning of life, science"＞

　　2. Description(简介)

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

　　举例：＜META NAME="Description" CONTENT="主要介绍程序设计语言JAVA、C等"＞
3. Robots(机器人向导)

　　说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all、none、index、noindex、follow、nofollow。默认是all。

　　举例：＜META NAME="Robots" CONTENT="none"＞

　　4. Author(作者)

　　说明：标注网页的作者

　　举例：＜META name="AUTHOR" content="张三，abc@sina.com”＞

　　用例分析

　　以上是META标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？

　　道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!根据现在流行搜索引擎(Google，Lycos，AltaVista等)的工作原理，搜索引擎先派机器人自动在WWW上搜索，当发现新的网站时，便检索页面中的Keywords和Description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

　　由此看来，我们必须记住添加Keywords和Description的META标签，并尽可能写好关键字和简介。否则，后果就会是：

　　2 如果你的页面中根本没有Keywords和Description的META标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。

　　2 如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。

　　写好Keywords(关键字)要注意以下几点：

　　l 不要用常见词汇。例如www、homepage、net、web等。

　　l 不要用形容词，副词。例如最好的，最大的等。

　　l 不要用笼统的词汇，要尽量精确。例如“爱立信手机”，改用“T28SC”会更好。

　　“三人之行，必有我师”，寻找合适关键词的技巧是：到Google、Lycos、Alta等著名搜索引擎，搜索与你的网站内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。

　　小窍门

　　为了提高搜索点击率，这里还有一些“捷径”可以帮得到你：

　　ü 为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。

　　ü 在图像的ALT注释语句中加入关键字。

　　如：＜IMG SRC="xxx.gif" Alt="Keywords"＞

　　ü 利用HTML的注释语句，在页面代码里加入大量关键字。

　　用法：＜!-- 这里插入关键字 --＞

常用特效代码以及META标签的作用
嗯，嗯，再把html的也来复习复习！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1.镶入整个网页的代码:
<IFRAME align=center name=smsbrowse_18121_17 src="你的网址" frameborder=0 width="宽度" height="高度"
scrolling="no"></IFRAME>

2.下雨的代码:
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.cn898.net
/bg/6.swf width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high"
;></center>

3.片片绿叶飞动的代码:
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.cn898.net
/bg/fh/2/700.swf width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality=
"high" ;></center>

4.把图片设置为背景:
<body background="图片地址">

5.水滴特效代码：
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://scount.jahee.com/model/fishandwaterflash/drip.swf width=700 height=400 type=application/
x-shockwave-flash wmode="transparent" quality="high" ;></center>

6.金鱼特效代码：
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.52flash.net/upfile/fla/20043/200433118563782902.swf width=700 height=400 type=application
/x-shockwave-flash wmode="transparent" quality="high" ;></center>

7.在网站中插入mediaplay视频
<EMBED src="http://diy.china001.com/telecom2/business.wmv"; width="499" height="356" type="audio/x-wav"
loop="true" autostart="true"></EMBED>
注：如插文件档中，记住要在"html源码编辑器"中插入。上述代码中：src="视频地址" ，width="视频宽度" ，height
="视频高度" ,loop="true" 表示循环播放。

8.添加背景音乐
第一种：先下载，鼠标指向你喜欢的歌名（如：缘分天空），单击右键，选择目标另存为，单击左键，选择存储的位置
（如：我的文档）点保存。再上传，在网页制作系统里，点击浏览，选择你保存的歌曲文件名（如：yftk),点打开，
要上传的文件在浏览中出现，再点上传，点确定。（完成了下载上传）在网页编辑器中插入音乐：先将下面的代码
<bgsound src="wmdsh[1].rmi" loop="-1"> 复制并粘贴到插入Script代码中,在修改歌曲文件名，（将wmdsh[1]改为
yftk或其他你已经上传的歌曲文件名。注意，小点（.）不能去掉。）

第二种：直接将现成的代码 <bgsound src="******"; loop="-1"> 复制并粘贴到插入自定义区块中。

9.FLAHS动态主页代码
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.cn898.net/
bg/5.swf width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;>
</center>

高度height,宽度width随图大小可调 src= FLASH地址

10.网页中加入Flash的代码
<embed src="http://cartoonfile.163.com/source/47192/ai2.swf";width="400" height="400"> </embed>

11.聊天室代码
<script language="javascript"> <br>  <script> function xsetcookie(name,
value){ documents.cookie=name+"="+escape(value); } function EnterRoom(){ if ( this.document.loginform.
UserID.value == ""){ alert('用户代号不能为空'); return; } window.open('','vpchat','fullscreen=0,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable
=1'); this.document.loginform.submit(); } function xGetCookie(Name) { var search = Name + "=" var return
Value = ""; if (documents.cookie.length > 0) { var offSet = documents.cookie.indexOf(search); if (offSet
!= -1) { // if cookie exists offSet += search.length; // set index of beginning of value end = document.
cookie.indexOf(";", offSet); // set index of end of cookie value if (end == -1)end = documents.cookie.length; returnValue=unescape(documents.cookie.substring(offSet, end)); } } return returnValue; } </script><form
name="loginform" target="vpchat" id="Form1" method="post" action = "http://vchat.xihai.net/login.aspx";>
<p> 昵称： <input type="text" name="UserID" size="20" > <br> 密码(可无)： <input type="password" name=
"UserPass" size="20" > <br> <input type="hidden" name="RoomID" value='zh918' size="20" > <br> <input
type="button" value= '进入房间' onclick=javascript:EnterRoom()></p> </p> </form>

12.一款顶部动态图代码
<CENTER> <EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.cn898.net
/bg/10.swf width=600 height=250 type=application/x-shockwave-flash wmode="transparent" quality="high" ;>
</CENTER>
<center><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=http://www.cn898.net/
bg/9.swf width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high" ;>
</center>

13.在背景图片上写字代码
<table background="图片" width=100% height=100%>
<tr>
<td>
文字内容
</td>
</tr>
</table>

14.阴影文字的特殊效果
1、第一种效果[修改要显示的文字即可]

<div style="left:290;width:350; font-size:15pt; font-family: Arial ; color: red; position: relative; filter:
blur(add=1, direction=45, strength=3)">网页制作特效百宝箱</div>

2.第二种效果[修改要显示的文字即可]

<div style="left:290; width:350; font-size:15pt; font-family: Arial ; color: red; position: relative; filter:
glow(color=ffff00, strength=5)">网页制作特效百宝箱</div>

3.第三种效果[修改要显示的文字即可]

<div style="left:290;width: 350; font-size:15pt; font-family: Arial ; color: red; position: relative; filter:
dropshadow(color=000000, offx=3, offy=3, positive=1)"> 网页制作特效百宝箱</div>

15.改变IE地址栏的IE图标
要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞
之间加上如下代码：

　　＜link REL = "Shortcut Icon" href="index.ico"＞

16.邮箱登陆代码
<form name="loginmail" onsubmit="return chkinput2(this);" action="http://2000x.com/send_mail.asp"; method
="post" target=_blank>
<table align="center" width="100" border="0">
<tr>
<td align="center">
账号：<BR> <input type="text" name="user" size="12" class="input1"> <BR>
密码：<BR> <input type="password" name="pass" size="12" class="input1"> <BR>
请选择您的邮局：<BR><select name="site"> <BR>
<option value="" selected>选择信箱</option>
<option value="21cn.com">@21cn.com</option>
<option value="163.net">@163.net</option>
<option value="tom.com">@tom.com</option>
<option value="163.com">@163.com</option>
<option value="vip.163.com">@vip.163.com</option>
<option value="sohu.com">@sohu.com</option>
<option value="263.net">@263.net</option>
<option value="sina.com">@sina.com</option>
<option value="vip.sina.com">@vip.sina.com</option>
<option value="mail.china.com">@mail.china.com</option>
<option value="china.com">@china.com</option>
<option value="263.net">@netease.com</option>
<option value="yeah.net">@yeah.net</option>
<option value="etang.com">@etang.com</option>
<option value="fm365.com">@fm365.com</option>
<option value="yahoo.com.cn">@yahoo.com.cn</option>
<option value="xinhuanet.com">@xinhuanet.com</option>
<option value="126.com">@126.com</option>
<option value="qs163.com">@qs163.com</option>
</select> <BR>
<input type="submit" name="s1" class="button1" value=" 登陆邮箱 ">
</td>
</tr>
</table>
</form>

17.网页防复制代码
<SCRIPT LANGUAGE=javascript>
function click() {
alert('需要复制，请与站长联系！') }
function click1() {
if (event.button==2) {alert('需要复制，请与站长联系！') }}
function CtrlKeyDown(){
if (event.ctrlKey) {alert('不当的拷贝将损害您的系统！') }}
document.onkeydown=CtrlKeyDown;
document.onselectstart=click;
document.onmousedown=click1;
</SCRIPT>

18.IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">

说明：关于favicon.ico文件的制作。你可以先在FW中做一个图片，属于你自己站点一个小图标。然后在ACD see将文件
属性改为*.ico，然后将你做的*.ICO文件传到你的服务器目录中，然后就可以使用以上代码来实现，当别人登陆你的站
点时，地址栏里使用的就是你自定义的图标了。

19.可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">

说明：制作方法和上面的一样。只是显示的方式不同，这个是在别人收藏你的网页地址时显示的个性图标。

*********************************************************************************************

网页制作中META标签的作用

引言

　　l 在搜索引擎中登录自己的个人网站

　　l 在知名网站加入你个人网站的链接

　　l 在论坛中发帖子宣传你的个人网站

　　很多人却忽视了HTML标签META的强大功效，一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性，
有兴趣吗，谁我来重新认识一下META标签吧！

　　META标签，是HTML语言HEAD区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码：

　　＜head＞

　　＜meta http-equiv=Content-Type content=texthtml; charset=gb2312＞

　　＜head＞

　　这就是META标签的典型应用，标识page所采用的编码类型。根据HTML语言标准注释：META标签是对网站发展非常重
要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。

　　详细介绍

　　 META标签分两大部分：HTTP-EQUIV和NAME变量。

　　参数HTTP-EQUIV

　　HTTP-EQUIV类似于HTTP的头部协议，它给浏览器回应一些有用的信息，以帮助正确地显示网页内容。常用的HTTP-
EQUIV类型有：

　　A. Expires(期限)

　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。

　　用法：＜META HTTP-EQUIV=expires CONTENT=Wed, 26 Feb 1997 082157 GMT＞

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

　　B. Pragma(cache模式)

　　说明：禁止浏览器从本地机的缓存中调阅页面内容。

　　用法：＜META HTTP-EQUIV=Pragma CONTENT=no-cache＞

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

　　C. Refresh(刷新)

　　说明：需要定时让网页自动链接到其它网页的话，就用这句了。

　　用法：＜META HTTP-EQUIV=Refresh CONTENT=5;URL=httpwww.yahoo.com＞

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

　　D. Set-Cookie(cookie设定)

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

　　用法：＜META HTTP-EQUIV=Set-Cookie CONTENT=cookievalue=xxx;

　　expires=Wednesday, 21-Oct-98 161421 GMT; path=＞

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

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

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

　　用法：＜META HTTP-EQUIV=Window-target CONTENT=_top＞

　　注意：用来防止别人在框架里调用你的页面。

　　F. Content-Type(显示字符集的设定)

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

　　用法：＜META http-equiv=Content-Type content=texthtml; charset=gb2312＞

　　注意：游览器会根据此来调用相应的字符集显示page内容

　　G. Pics-label(网页等级评定)

　　说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参
数来设置的。

　　用法：＜META http-equiv=”Pics-label” contect=””＞

　　注意：不要将级别设置的太高。

　　参数NAME

　　META标签的NAME变量语法格式是：

　　＜META NAME=xxx CONTENT=xxxxxxxxxxxxxxxxxx＞

　　其中xxx主要有下面几种参数：

　　1. Keywords(关键字)

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

　　举例：＜META NAME =keywords CONTENT=life, universe, mankind, plants,

　　relationships, the meaning of life, science＞

　　2. Description(简介)

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

　　举例：＜META NAME=Description CONTENT=主要介绍程序设计语言JAVA、C等＞

　　3. Robots(机器人向导)

　　说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。CONTENT的参数有all、none、index、
noindex、follow、nofollow。默认是all。

　　举例：＜META NAME=Robots CONTENT=none＞

　　4. Author(作者)

　　说明：标注网页的作者

　　举例：＜META name=AUTHOR content=张三，abc@sina.com”＞

　　用例分析

　　以上是META标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？

　　道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!根据现在流行搜索引擎
(Google，Lycos，AltaVista等)的工作原理，搜索引擎先派机器人自动在WWW上搜索，当发现新的网站时，便检索页
面中的Keywords和Description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

　　由此看来，我们必须记住添加Keywords和Description的META标签，并尽可能写好关键字和简介。否则，后果就
会是：

　　2 如果你的页面中根本没有Keywords和Description的META标签，那么机器人是无法将你的站点加入数据库，网
友也就不可能搜索到你的站点。

　　2 如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非
常小的。

　　写好Keywords(关键字)要注意以下几点：

　　l 不要用常见词汇。例如www、homepage、net、web等。

　　l 不要用形容词，副词。例如最好的，最大的等。

　　l 不要用笼统的词汇，要尽量精确。例如“爱立信手机”，改用“T28SC”会更好。

　　“三人之行，必有我师”，寻找合适关键词的技巧是：到Google、yahoo、百度、Lycos、Alta等著名搜索引擎，搜索与你的网站
内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。

　　小窍门

　　为了提高搜索点击率，这里还有一些“捷径”可以帮得到你：

　　ü 为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。

　　ü 在图像的ALT注释语句中加入关键字。

　　如：＜IMG SRC=xxx.gif Alt=Keywords＞

　　ü 利用HTML的注释语句，在页面代码里加入大量关键字。

　　用法：＜!-- 这里插入关键字 --＞

META标签，是HTML语言head区的一个辅助性标签。在几乎所有的page里，我们都可以看
到类似下面这段html代码：

-----------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
-----------------------------------------------

根据HTML语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，
设定页面格式，标注内容提要和关键字，以及刷新页面等等。

meta标签分两大部分：HTTP-EQUIV和NAME变量。

●HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确
地显示网页内容。常用的HTTP-EQUIV类型有：

1.expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
用法：<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式。

2.Pragma(cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
注意：这样设定，访问者将无法脱机浏览。

3.Refresh(刷新)
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法：<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.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">
注意：用来防止别人在框架里调用你的页面。

5.Content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

●meat标签的NAME变量语法格式是：
<META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx">
其中xxx主要有下面几种参数：

1.Keywords(关键字)
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：<META NAME ="keywords" CONTENT="life, universe, mankind, plants,
relationships, the meaning of life, science">

2.description(简介)
说明：description用来告诉搜索引擎你的网站主要内容。
举例：<META NAME="description" CONTENT="This page is about the meaning of
life, the universe, mankind and plants.">

3.robots(机器人向导)
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：<META NAME="robots" CONTENT="none">

4.author(作者)
说明：标注网页的作者
举例：<META name="AUTHOR" content="ajie,ajie@netease.com">