网页链接详细介绍（上）

网页链接详细介绍（上）
对于链接在HTML中的写法，在这里就不用详述了，大家可以在许多初级教程中找到这方面的介绍。我们着重介绍以下几个方面：

　　一、链接的种类
　　链接有两种，一种是不同页面间的链接，这种最常见。另外一种则是页内链接，我们一般称为页内锚(achor)链。
　　页面之间的链接是用URL(United Resource Location:统一资源定位符)来表示，如果是同一个站点之间页面的链接，则可直接根据目录之间的关系来表达这种链接，而不必用“http://...”这样的形式。如在content目录下有一个HTML文件的链接链接到该站点与content目录同级的目录chat下的index.htm文件，链接则直接表示为:../chat/index.htm。如果你学过DOS命令诸如目录操作命令的话，相信对这种表示方法不会陌生，只不过是将“\”变为“/”。
　　而对于页内锚链，有些朋友可能会疑惑了，什么叫做页内锚链，有什么用呢？对此，我们以一个很实际的例子来看一看其用处：
　　如果一篇文章很长，并分为几个部分，文章前面一般都列有该文章的各要点，如果我们因要择其中一部分阅读而不停地拉动滚动条是不是费时而费神呢？页面锚链可以让你很方便地点击要点链接，从而直接阅读到该部分内容。

　　●定义“锚”
　　要用页内锚链，首先要定义这些所谓的“锚”，即用符号来标识文件中某部分的位置。这要用到HTML标记中一个很常见而又重要的属性:id(Identification：标识符)。用id可以来指代所属标记的HTML内容。其定义形式如下：
　　$#@60;Tag id=″...″$#@62;HTML内容$#@60;/Tag$#@62;
　　如 $#@60;p id=″content″$#@62;.........$#@60;/p$#@62;
　　这样，id content就表示了一个段落。
　　在同一HTML文件中，除了特殊用途外，id最好是唯一的。不然，锚链只会连接到第一个id所标识的内容。

　　●加锚链
　　定义好“锚”以后，将链接指向锚位置的链接形式如下:
　　$#@60;a href=″＃id″$#@62;....$#@60;/a$#@62;‚即以＃再加上id格式。
　　如:
　　$#@60;a href=″＃chapter1″$#@62;第一章$#@60;/a$#@62;
　　$#@60;a hr ″＃chapter2″$#@62;第二章$#@60;/a$#@62;
　　$#@60;a href=″＃chapter3″$#@62;第三章$#@60;/a$#@62;
　　..............
　　$#@60;Div id=″chapter1″$#@62;
　　...第一章内容..
　　$#@60;/Div$#@62;
　　$#@60;Div id=″chapter2″$#@62;
　　...第二章内容..
　　$#@60;/Div$#@62;
　　$#@60;Div id=″chapter3″$#@62;
　　...第三章内容..
　　$#@60;/Div$#@62;

　　●引用不同页面内的“锚”
　　可能有些朋友要问，以上加的锚链都是在同一个页面之间的，如果是一个页面中的锚链接到同站点或另一个网站的另一个页面中的锚怎么办？很简单‚形式为:
　　$#@60;a href=″URL＃id″$#@62;....$#@60;/a$#@62;
　　如 $#@60;a href=″http://netschool.yesky.com/homepage/index.htm＃block1″$#@62;指向地址：http://netschool.yesky.com/homepage/index.htm文件的第一部分$#@60;/a$#@62;

　　二、链接的相关属性
　　●用CSS样式类改变链接外观
　　在与网友们交流过程中，他们问到的有关链接的问题最多大概集中于：一些网站页面当鼠标移动时链接字会变颜色、字体、出现下划线等，看起来很精彩，是怎么做的呢？要用到程序吗？
　　答案：非也，链接的CSS可以解你之惑!
　　CSS（层叠样式单）它主要是用来定义主页内容相关标记的显示风格及排列等，可以针对不同的标记定义不同的样式类，并可以形成样式表文件供整个网站的主页文件调用，或者在某个主页中单独定义，这样，可实现在网站风格统一的前提下，而又各有变化，哲学中物质的统一性与多样性的对立统一之说可谓一语中的。在天极网的网页陶吧栏目(http://homepage.yesky.com)中有很多关于CSS的讲述，这里不再赘述，单讲链接的几个重要的CSS属性:
　　hover:当鼠标悬停在链接上方时
　　active:当点击链接时
　　visited：当点击链后
　　这样就构成点击链接的全过程：移动到链接上→点击→点击后，我们可以在样式表中定义三个不同的阶段链接的外观，形式如下:
　　$#@60;style$#@62;
　　A{
　　.....
　　}
　　A:hover{
　　.....
　　}
　　A:active{
　　.....
　　}
　　A:visited{
　　.....
　　}
　　$#@60;/style$#@62;
　　上面，其中A{...}的定义表示链接在正常状态下的显示，这样，我们就可以用不同的样式表CSS类型来确定一个站点或特定页面的链接显示特性。
　　以下是一个例子:
　　A {
　　font－size : 9pt;font－weight : normal;font－style : normal;color: ＃0066CC;text－decoration : none;
　　}
　　A:Hover {
　　font－size : 9pt;
　　font－weight : normal;
　　font－style : normal;
　　color: ＃0066CC;
　　text－decoration : underline;
　　}
　　A:Active　{
　　font－size : 9pt;
　　font－weight : normal;
　　font－style : normal;
　　color:red;
　　text－decoration : none;
　　}
　　A:Visited {
　　font－size : 9pt;
　　font－weight : normal;
　　font－style : normal;
　　color: ＃0066CC;
　　text－decoration : none;
　　}
　　上面的例子中专门对链接标记定义了相应的样式类，并对链接的几种不同状态对链接字的字体、颜色、修饰(如加下划线)等也作了定义。

网页链接详细介绍（下）2006-4-30

Sql联合查询2006-4-30

sql语句的联合查询(join 用法)2006-4-30

Sql连接查询和联合查询2006-4-30

asp自动将远程页面的文件中的图片下载到本地服务器2006-4-30

网页链接详细介绍（上）2006-4-30

正则表达式高级学习技巧2006-4-30

创建网站的 RSS 内容摘要2006-4-30

ASP实现的具体投票的程序2006-4-30

ASP显示当前网页在线人数和IP地址2006-4-30

目前没有评论!

您的姓名： 匿名发送

电子邮件：

评论内容：
不能超过100个字符

所有留言只代表网友个人观点，不代表本站观点。
请各位遵纪守法并注意语言文明。