网页制作中META标签的作用不可忽视

 更新时间:2016年9月20日 19:02  点击:1416
您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种:

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

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

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

  很多人却忽视了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://">

  注意:其中的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">


  【故障现象】在使用IE浏览网页的过程中,出现“Microsoft Internet Explorer遇到问题需要关闭……”的信息提示。此时,如果单击“发送错误报告”按钮,则会创建错误报告,单击“关闭”按钮之后会引起当前IE窗口关闭;如果单击“不发送”按钮,则会关闭所有IE窗口。

  【故障点评】这是IE为了解用户在使用中的错误而设计的一个小程序,不过我可不想当微软的“免费测试员”,更何况每天它都会面对成千上万的报告,谁知道有没有在意我的报告问题呢?!

  【故障解决】

  针对不同情况,可分别用以下方法关闭IE发送错误报告功能:

  ①对IE 5.x用户,执行“控制面板→添加或删除程序”,在列表中选择“Internet Explorer Error Reporting”选项,然后单击“更改/删除”按钮,将其从系统中删除。

  ②对Windows 9x/Me/NT/2000下的IE 6.0用户,则可打开“注册表编辑器”,找到[HKEY_LOCAL_MACHINE\Software \Microsoft\Internet Explorer\Main],在右侧窗格创建名为IEWatsonEnabled的DWORD双字节值,并将其赋值为0。

  ③对Windows XP的IE 6.0用户,执行“控制面板→系统”,切换到“高级”选项卡,单击“错误报告”按钮,选中“禁用错误报告”选项,并选中“但在发生严重错误时通知我”,最后单击“确定”按钮。

  2.IE发生内部错误,窗口被关闭

  【故障现象】在使用IE浏览一些网页时,出现错误提示对话框:“该程序执行了非法操作,即将关闭……”,单击“确定”按钮后又弹出一个对话框,提示“发生内部错误……”。单击“确定”按钮后,所有打开的IE窗口都被关闭。

  【故障点评】该错误产生原因多种多样,内存资源占用过多、IE安全级别设置与浏览的网站不匹配、与其他软件发生冲突、浏览网站本身含有错误代码……这些情况都有可能,需要耐心加以解决。

  【故障解决】

  ①关闭过多的IE窗口。如果在运行需占大量内存的程序,建议IE窗口打开数不要超过5个。

  ②降低IE安全级别。执行“工具→Internet选项”菜单,选择“安全”选项卡,单击“默认级别”按钮,拖动滑块降低默认的安全级别。

  ③将IE升级到最新版本。IE 6.0 SP1

  可使用以IE为核心的浏览器,如MyIE2。它占用系统资源相对要少,而且当浏览器发生故障关闭时,下次启动它,会有“是否打开上次发生错误时的页面”的提示,尽可能地帮你挽回损失。

  3.出现运行错误

  【故障现象】用IE浏览网页时弹出“出现运行错误,是否纠正错误”对话框,单击“否”按钮后,可以继续上网浏览。

  【故障点评】可能是所浏览网站本身的问题,也可能是由于IE对某些脚本不支持。

  【故障解决】

  ①启动IE,执行“工具→Internet选项”菜单,选择“高级”选项卡,选中“禁止脚本调试”复选框,最后单击“确定”按钮即可。

  ②将IE浏览器升级到最新版本。

  4.IE窗口始终最小化的问题

  【故障现象】每次打开的新窗口都是最小化窗口,即便单击“最大化”按钮后,下次启动IE后新窗口仍旧是最小化的。

  【故障点评】IE具有“自动记忆功能”,它能保存上一次关闭窗口后的状态参数,IE本身没有提供相关设置选项,不过可以借助修改注册表来实现。

  【故障解决】

  ①打开“注册表编辑器”,找到[HKEY_ CURRENT_USER\Software\Microsoft\Internet Explorer\Desktop\Old WorkAreas],然后选中窗口右侧的“OldWorkAreaRects”,将其删除。

  ②同样在“注册表编辑器”中找到[HKEY_CURRENT_USER\Software \Microsoft\Internet Explorer\Main],选择窗口右侧的“Window_Placement”,将其删除。

  ③退出“注册表编辑器”,重启电脑,然后打开IE,将其窗口最大化,并单击“往下还原”按钮将窗口还原,接着再次单击“最大化”按钮,最后关闭IE窗口。以后重新打开IE时,窗口就正常了!

  5.IE无法打开新窗口

  【故障现象】在浏览网页过程中,单击超级链接无任何反应。

  【故障点评】多半是因为IE新建窗口模块被破坏所致。

  【故障解决】单击“开始→运行”,依次运行“regsvr32 actxprxy.dll”和“regsvr32 shdocvw.dll”将这两个DLL文件注册,然后重启系统。如果还不行,则可以将mshtml.dll、urlmon.dll、msjava.dll、browseui.dll、oleaut32.dll、shell32.dll也注册一下

做网页时候为了美化网页,常常把表格边框的拐角处做成圆角,这样可以避免直接使用表格直角的生硬,使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。

  方法一:用图片制作圆角表格

  这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。

  ①先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。  



如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flash动画等,其中, 文本是网页中最为重要的设计元素。对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。

  文字的格式化

  1.字号、字体、行距

  字号大小可以用不同的方式来计算,例如磅#quotel.quoter#或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。

  最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

  从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。

  行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。

  除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。

  行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。

  文字的整体编排

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。

  1.文字的图形化

  字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。

  将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

  2.文字的叠置

  文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。

  3.标题与正文

  在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。

  4.文字编排的四种基本形式

  页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

  两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。

  居中排列:在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。

  左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。

  保护自己的成果,为自己的网页上把锁,今天就让大家了解一下如何给自己的网页加上一把密码锁……

  现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的作品,为自己的网页上把锁,今天就让我带大家了解一下如何给我们的网页加上一把密码锁。

  一、常用JavaScript密码锁

  1. 了解javascript
  JavaScript是一种新的网页描述语言,是由Sun公司以及网景Netscape公司开发的,此一语言可以被嵌入HTML的文件之中,使用它可以让你设计交互性的网页内容。

   2. javascript特点
  使用javascript非常简单,只是一小段代码,就可以让网页发生千奇百怪的效果,而且使用javascript来加密的方法是网络中加密最常用的方法。

  3. 使用javascript加密
  使用javascript加密最简单的结果就是让浏览者不能使用鼠标右键,当他点击右键想对图片进行保存或者复制文字的时候就会弹出一个警告窗口或是弹出收藏夹等。

  实现方法:

  (1)利用弹出窗口封锁鼠标右键
  将下面这段代码放在网页HTML代码的<head></head>标志中,就可以实现封锁右键,给网页加密。
<script language="javascript">
function click() {if (event.button==2) {alert('本站不准使用右键,
使用左键吧!^_^') }}
document.onmousedown=click</script>

  (2)弹出“添加收藏夹”封锁鼠标右键
  将下面这段代码放在网页的HTML代码的<head></head>标志中。实现点击右键出现“添加到收藏夹”选项。
<script language="javascript">
function click() {if (event.button==2) {window.external.addFavorite
('http:///,' 网页教学网')}}
document.onmousedown=click</script>

  (3)彻底封锁鼠标右键
  将下面这段代码放在网页的HTML代码的<head></head>标志中能够实现彻底封锁鼠标右键的效果,由于这个脚本在右键按下时调用一个函数,所以可以改为很多种类型。即使按下左键,再按下右键,放开左键,再放开右键的方法也还是破解不了。

<script>
function DM(e){if(!ns){if(event.button>1)window.external.addFavorite
('http://www.popunet.com/,' 大众网络报')}else{if(e.which>1)return false}}ns=navigator.appName=="Netscape";if(ns)document.captureEvents
(Event.MOUSEMOVE|Event.MOUSEDOWN);document.onmousemove=DM;document.
onmousedown=DM;</script>

  (4)禁止查看源文件
  将下面这段代码放在网页的HTML代码的<head></head>标志中则可以实现禁止利用IE浏览器查看源文件。
<script language="JavaScript">
<!--
document.onmousedown=click
function click() {
if ( event.button==2) {alert('不准查看源文件') }
if ( event.button==3) {alert('不准查看源文件') }
}
//-->
</script>

  (5)用乱码显示链接、调用地址加密。
  利用某些函数把URL字符转换成ASCII码,从而达到隐藏链接Frame页面和*.js,*.asp等脚本的目的。返回ASCII码escape(character),ASCII码为%XX格式,XX是十六进制,如空格键为%20。返回字符unEscape(string)
如:
<!—var Words=" %3Cframeset%20BORDER%3D%220%22%20FRAMEBORDER%3D%220%22
%20FRAMESPACING%3D%220%22%20rows%3D%22100%25%22%3E%0D%0A%20%20%3Cframe
%20SRC%3D%22http%3A//XXX.XXX.COM/XXX/XXX/%22%20NAME%3D%22oos1%22%20"//
-->
</script>

[!--infotagslink--]

相关文章

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

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

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 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
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • 解析C#自定义控件的制作与使用实例的详解

    本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍,需要的朋友参考下...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
  • ps怎么制作人物影子效果

    ps软件是现在很多人比较喜欢的,通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子,具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
  • 用ps制作二寸证件照

    有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法,学会了就能做自己美美的证件照了哈哈! 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
  • PHP正则表达式过滤html标签属性(DEMO)

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

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

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

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25