电脑爱好者,提供IT资讯信息及各类编程知识文章介绍,欢迎大家来本站学习电脑知识。 最近更新 | 联系我们 RSS订阅本站最新文章
电脑爱好者
站内搜索: 
当前位置:首页>> HTML>>HTML基础之HTML链接:

HTML基础之HTML链接

来源:www.cncfan.com | 2006-1-21 | (有2737人读过)

HTML使用超级链接来连接到网络上的其他页面。


--------------------------------------------------------------------------------

示例

创建链接:


<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on this Web site.
</p>
<p>
<a target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.microsoft.com/">
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>


这个例子说明了在HTML文档中如何创建链接。


图片作为链接:


<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src=".\images\next.gif">
</a>
</p>
</body>
</html>


这个例子说明了在HTML文档中如何用图片作为链接。


--------------------------------------------------------------------------------

锚标签和href属性

HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

创建一个锚的语法:


<a href="url">Text to be displayed</a>


锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。

标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。

这个锚定义了一个到W3Schools的链接:


<a target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.w3schools.com/">Visit W3Schools!</a>


上面这段代码在浏览器中显示的效果如下:


Visit W3Schools!



--------------------------------------------------------------------------------

target属性

使用target属性,你可以定义从什么地方打开链接地址。

下面这段代码打开一个新的浏览器窗口来打开链接:


<a target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>



--------------------------------------------------------------------------------

锚标签和name属性

name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。

下面是命名锚的语法:


<a name="label">Text to be displayed</a>


你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚:


<a name="tips">Useful Tips Section</a>


你应该注意到了:命名锚的显示方式并没有什么与众不同的。

想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:


<a name="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>


一个链接到本页面中某章节的命名锚是这样写的:


<a name="#tips">Jump to the Useful Tips Section</a>



--------------------------------------------------------------------------------

基本注意点——有用的技巧

尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.w3schools.com/html/"。

命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。

如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。


--------------------------------------------------------------------------------

更多示例:

在新浏览器窗口中打开链接:

<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
</body>
</html>


这个例子说明了怎样用打开新窗口的方式来链接到其他页面,这样,访问者不用离开你的页面。


链接到本页面的某个位置:

<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>


这个例子说明了如何跳转到一个文档的某部分。


跳出框架:

<html>
<body>
<p>Locked in a frame?</p>
<a target="_blank" href="http://www.cncfan.com/outurl.asp?url=http://www.w3schools.com/" target="_top">Click here!</a>
</body>
</html>


这个例子说明了假如你的页面在框架中,如何跳出框架。


创建一个邮件链接:

<html>
<body>
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>


这个例子说明了如何链接到一个邮件信息(只有安装了邮件程序才有效)。


创建一个邮件链接2:

<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
</body>
</html>


这个例子显示了一个完成度更高的邮件链接。
HTML热门文章排行
网站赞助商
购买此位置

 

关于我们 | 网站地图 | 文档一览 | 友情链接| 联系我们

Copyright © 2003-2024 电脑爱好者 版权所有 备案号:鲁ICP备09059398号