HTML系列之六－链接

izuoyan

浏览: 8951242 次
性别:
来自: 上海

最近访客更多访客>>

GDGZWQZ

morelily

eternal1025

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 32)
2012-05 ( 145)
2012-04 ( 50)
更多存档...

HTML Microsoft 浏览器框架 ASP

HTML链接

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

示例

创建链接：

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

图片作为链接：

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

锚标签和href属性

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

创建一个锚的语法：

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

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

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

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

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

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

Visit W3Schools!

target属性

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

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

<a href="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>

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

尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.w3schools.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href="http://www.w3schools.com/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>

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

跳出框架：

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

创建一个邮件链接：

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

创建一个邮件链接2：

这个例子显示了一个完成度更高的邮件链接。

分享到：

HTML系列之七－框架 | HTML系列之五－实体

2008-03-15 14:44
浏览 761
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论