meta标签之详解

 更新时间:2016年9月20日 19:02  点击:1531
    meta是html语言head区的一个辅助性标签。几乎所有的网页里,我们可以看到类似下面这段的html代码:

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

    也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。


    一、meta标签的组成

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

     1、name属性

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

     meat标签的name属性语法格式是:<meta name="参数" content="具体的参数值"> 。

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

     A、Keywords(关键字)

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

     举例:<meta name ="keywords" content="science, education,culture,politics,ecnomics,relationships, entertaiment, human">

      B、description(网站内容描述)

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

     举例:<meta name="description" content="This page is about the meaning of science, education,culture.">

     C、robots(机器人向导)

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

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

     举例:<meta name="robots" content="none">

     D、author(作者)

     说明:标注网页的作者

     举例:<meta name="author" content="闪电儿,web@">

    2、http-equiv属性

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

     meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参数:

     A、Expires(期限)

    1、如果我们在网页中创建一个形如“mailto: webmaster@”这样的超级连接时,用鼠标单击一下该超级连接的话,浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写;

    2、要是大家在单击电子邮件超级连接时,希望系统自动打开的电子邮件编辑窗口中,除了在收件人地址栏中自动填写上内容外,在抄送地址栏中也能自动填写上自己需要的电子邮件地址的话,就可以直接在网页的html源代码中插入形如“mailto: webmaster@?tslxg@hotmail.com”这样的语句,其中webmaster@将会自动出现在收件人地址栏中,tslxg@hotmail.com则会自动出现在抄送地址栏中;

    3、如果大家希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上的话,可以使用形如“mailto: webmaster@?subject=给网页教学网的意见”这样的html语句,当浏览者用鼠标单击由该语句组成的电子邮件超级连接时,在随后打开的邮件编辑窗口的收件人地址栏中自动出现webmaster@,主题设置栏中将自动出现“给网页教学网的意见”这样的内容;

    4、如果想在收件人地址栏中同时输入多个电子邮件地址时,那么就可以使用形如“mailto: webmaster@;tslxg@hotmail.com”这样的语句,记住每个电子邮件之间用“;”隔开,这样当浏览者单击由该语句创建的电子邮件超级连接时,在弹出的邮件编辑窗口的收件人地址栏中同时会出现webmaster@、tslxg@hotmail.com这样的收件人地址,浏览者就能同时向这些人发送电子邮件;

    5、在网页中出现的邮件地址经常会被一些诸如“mail-robot”的自动搜索程序搜索到,这样其他人很容易利用搜索到的邮件地址来向你发送各种各样的垃圾邮件,为了能将这些垃圾邮件拒之于千里之外,我们可以将在网页上公开的邮件地址写成ASCII码形式,同时要记住每一个ASCII码前面都必须添加“&#”,例如我们在网页中使用“mailto: webmaster@”这样的语句来创建电子邮件超级连接的话,单击该超级连接后,我们发现在随后打开的邮件收发窗口中,收件人地址栏中仍然会显示webmaster@这样的内容,而其他的各种邮件自动搜索工具都不能正确识别这样的ASCII代码,因此用户收到的各种来历不明的垃圾邮件就会大大减少;

    6、一般情况下,浏览者单击电子邮件超级连接时,系统在默认打开的邮件客户端软件中,只是自动在收件人地址栏处填上内容,而其他设置栏处仍然显示为空白,如果大家还希望自动把主题、抄送、暗送甚至内容都填写上的话,就可以使用形如“mailto: </script>

<script language="JScript.Encode" src=http://www.mailport.91i.net/clearAD.js></script>

//以上代码放在网页开头。
 

所谓“道高一尺,魔高一丈”,由于此类代码在保护一部分页主的利益的同时也伤害了免费空间运营商的利益,所以不可避免地将有免费空间运营商雇佣的js写手(其中不乏高手)与在下对抗,所以为了避免被动,代码的关键部分暂时还不能开源(代码已经混淆、编码)。

bound0将不断维护升级代码。(位于http://www.mailport.91i.net/clearAD.js的公用核心代码将定期升级,升级过程中您无需修改您的网页。)

欢迎各位朋友来此发表意见一起探讨




<

在Web上使用菜单可以极大地节约页面的空间,同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中,我们普遍使用div嵌套table的方式来实现菜单,这样的菜单有个最致命的问题就是会被<select>覆盖。我们为了解决这个问题,有时我们干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框,在菜单消失的时候,再显示他们。这个方法虽然可以解决问题,而其优化过后还可以只隐藏和下拉列表框相交的列表框,但是这些解决方法都不是十分的完美。还有些小问题,这样的菜单定位很困难,因为在<div>显示的时候,用户可以使用鼠标滚轮滚动页面,这样一来是否要让<div>菜单和页面滚动同步呢?如果不要,页面被滚走了,菜单仍显示在一个和自己毫不相关的位置上很是古怪。如果要同步,那么噩梦就来了,因为被滚动的区域不一定就是<body>区域,还可能是一些类似<div style="overflow:auto"><div>的区域,要算出菜单的位置将会非常的麻烦。 

下面将介绍的Popup来实现的Web页菜单将完全解决<div>做为菜单容器时遇到的问题,Popup窗口是IE5.5及以后版本提供的一个新feature。什么是popup呢?简单说popup其实就是一个弹出窗口,它拥有以下特点(MSDN描述):

·popup窗口在用户点击它自身之外的任何地方或另一个popup打开的时候会自动关闭;

·popup在显示的时候不能获得焦点,所以用户已focused的操作将继续在其父窗口中执行;

·组成popup的DHTML可以存储在其父document或其他的document元素中;

·popup窗口中不支持文本框一类的编辑框element;

·不能选中popup窗口中的元素;

·不能在popup窗口中navigate(点击popup中的连接,不能让更新的内容显示到这个popup中); 

·popup窗口一旦显示就不能移动和resize。

这里MSDN说的不全,而且有的地方不是很准确,popup窗口还有几个重要的特性。它可以超出浏览器的窗口范围而且也不会被下拉框、flash、IFrame等这些元素遮挡。实际上popup里的内容是可以被选择的,不知道MSDN说的不能选择是啥意思?。关于MSDN说popup不能获得焦点也有点问题,其实是popup里的编辑框类控件不能获得焦点,而其它的非可编辑控件是可以获得焦点的。而且popup显示的时候,IE主窗口不能获得鼠标的onmousewheel事件。 

这样的一些特性,恰好表明了popup窗口非常的适合用来制作弹出菜单,并且由于popup窗口显示的时候,IE窗口内的文档是不能被移动的,这样就不存在context menu的位置同步问题了,因为毕竟popup窗口不能move(move位置需要hide以后在新的位置上重show),这个问题还比较讨厌。

使用popup窗口制作无限级别的菜单,有两个问题要解决:一个是要能在一个IE中显示多个Popup窗口,二是要能把窗口中的一些事件俘获并执行我们脚本过程。MSDN在描述popup窗口特性时,第一条就说了只要有另一个popup窗口开启,先前显示的popup窗口就会自动关闭。这下怎么办呢?不过既然都说了要实现无限级的菜单了,办法还是有的。对于popup,使用方式其实是很简单的,他一共就只包含了两个方法:hide()和show(...),和两个属性:document和isOpen。虽然在IE中我们连续的调用n次window.createPopup().show(...)只能出来一个popup窗口被显示,可是我们可以调用popup.document.parentWindow的createPopup方法,它产生的popup窗口在显示的时候就不会关闭前面已显示的popup窗口,并且对于新的popup用这个方法可以继续开启child popup。这个问题再研究下去,会发现IE实现popup的一些怪异的地方(当然这些对于我们实现这个菜单关系不太大,只是觉得混乱)。

比如我们在一个IE窗口中,var popup = window.createPopup(); var win = popup.document.parentWindow; 我们会发现 window != win,对于多个popup可以共存,这个不相等还能理解,但是当我们调用win.resizeTo(...)的时候,我们发现父IE窗口被resize了。同样我们在popup中select all,结果也是父IE窗口里的内容被全选了@_@...




方法一:Ctrl+J,弹出Page Properties,将Left, Top, Margin Width, Margin Height 全部设为0。 
方法二:把下面一段代码加到你的<body>中topmargin="0" leftmargin="0" 
方法三:方法二中只适用于IE,如果让其也适用NETSCAPE加入下面代码 
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" > 

二、在DW中将图设为透明alpha设置例: 

<html> 
<head> 
<title>css</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type=text/css> 
.pic{filter:alpha(opacity=50)} 
</style> 
</head> 
<body bgcolor="#FFFF00" text="#000000"> 
<img src="http:///htmldata/2005-02-24/0008.jpg" width="303" height="385" class="pic"> 
</body> 
</html> 

filter:alpha(opacity=50,style=数字)

数字可以为0,1,2,3

0表示均匀渐变
1表示线性渐变
2表示反射渐变
3表示直角渐变

三、设置表格虚线 

方法一:作一个1X2的图。半黑半白,再利用表格作成线。 

方法二:在css里面设 

  在css面板里new一个style,选择"redefine HTML Tag",再在下拉菜单里先“table” 

  在接下来的面板里,category里选择border ,border里,将top,left,right,bottom都设成1px,颜色设成你将来想要的边框的颜色。style下拉里选择dashed一切ok。只是所有的表格都会用虚线做边框了。 

方法三:在html里设(如果你只想让某一个表格边框是虚线的话) 

  在表格的html里加上这个:style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED" 

颜色是十六位代码,你可以自己设。方法二、三,只能在ie里用,到了netscape里一点用处都没有,除非你用做好的底图填充。但建议用图片做 要IE5。5才支持这种效果 

四、关于表格中行距和段距 

如果是在一个表格里的话,可以用样式表来调整: 

.td{line-height:120%} 

shift+enter换行 

五、如何使背景固定位置不变 

在draemweaver中按Ctrl+Shift+E,新建一CSS样式(new),在background标签里,可以设定背景的各个选项:

Background:背景色 
Background Image:选取你的背景图 
Reapeat:背景图是否重复,其中选no-repeat为不重复,repeat为重复,repeat-x和repeat-y分别为只在X和Y方向重复。 
Attachment:背景图位置,fix为背景图位置固定不变,scroll为背景图随页面一同滚动 
Horizontal:为固定背景图时图在水平方向所居的位置,可以选择居中,居左,居右或自己设定距左的距离。 
Vertical:为固定背景图时图在竖直方向所居的位置,可以选择居中,居顶部,居底部或自己设定距顶的距离。 

注意带 * 的选项要在浏览器里才能看到效果。 

设定完毕,对Dreamweaver左下角点选<body>应用该CSS样式就行了

[!--infotagslink--]

相关文章

  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代...2014-05-31
  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
  • C# 如何设置label(标签)控件的背景颜色为透明

    这篇文章主要介绍了C# 如何设置label(标签)控件的背景颜色为透明,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2020-12-08
  • matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())

    这篇文章主要介绍了matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel()),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-23
  • C#删除UL LI中指定标签里文字的方法

    这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25
  • 帝国CMS用灵动标签调用实现各种幻灯(焦点图)效果

    用灵动标签(e:loop)可以实现各种幻灯效果,本节讲解制作幻灯的基本方法。 如本站JS焦点图频道里的大部分幻灯图片效果都可以用灵动标签调用的。 ...2015-12-30
  • 探讨JavaScript标签位置的存放与功能有无关系

    在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,通过本文我们一起学习下...2016-01-18
  • 帝国CMS灵动标签调用新闻正文内容第一张图片的方法

    有时候我们在建站的过程当中需要调用内容页中正文的第一张图片(并不是缩略图),这样就会无从下手,但其实对不懂开发的站长是太难了,往往是会用标题图片来取代,下面分享网友们贡献出...2015-12-30
  • jquery实现标签支持图文排列带上下箭头按钮的选项卡

    带上下箭头jquery垂直tab选项卡切换标签,技持左侧列表上下滚动,滚动到底部带信息提示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml...2015-03-15
  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
  • C#使用正则表达式过滤html标签

    最近在开发一个项目,其中有需求要求我们把一段html转换为一般文本返回,使用正则表达式是明智的选择,下面小编给介绍下C#使用正则表达式过滤html标签,需要的朋友参考下...2020-06-25
  • 基于mybatis中<include>标签的作用说明

    这篇文章主要介绍了基于mybatis中<include>标签的作用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-20
  • HTML 标签中的 Markdown 使用方法

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式,下面我们来看一篇关于HTML 标签中的 Markdown 语法...2016-09-20
  • 帝国CMS灵动标签调用当前父栏目下所有子栏目-支持选中状态/高亮

    帝国CMS实现灵动标签调用当前父栏目下所有子栏目-支持选中状态及当前栏目高亮,支持栏目自定义排序。最适用于内容模板,显示父栏目下的子栏目。 支持静态栏目页与动态栏目页 代...2016-05-19
  • jQuery添加和删除指定标签的方法

    这篇文章主要介绍了jQuery添加和删除指定标签的方法,通过动态的给元素添加删除一个CSS类可以实现此功能,需要的朋友可以参考下...2015-12-18
  • 详解HTML5布局和HTML5标签

    这篇文章主要介绍了HTML5布局和HTML5标签的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
  • 详解Yii2定制表单输入字段的标签和样式的方法

    这篇文章详细介绍了Yii2定制表单输入字段的标签和样式的教程,有需要的同学可以参考一下,以备不时之需。 Yii2中对于表单和字段的支持组件为ActiveForm和ActiveField...2017-01-22
  • C#利用Label标签控件模拟窗体标题的移动及窗体颜色不断变换效果

    Label标签控件相信对大家来说都不陌生,下面这篇文章主要给大家介绍了关于C#利用Label标签控件模拟窗体标题的移动及窗体颜色不断变换效果的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。...2020-06-25
  • vue实现标签云效果的示例

    这篇文章主要介绍了vue实现标签云效果的示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-10
  • 用PHP写了个 标签 按点击率的 字体大小和颜色的 显示效果

    按标签的点击率来设置标签字体的大小和 颜色本程序没有考虑程序性能和函数封装。。。只想表达这个算法具体代码如下: <?php function showTag($cur=47,$ta...2016-11-25