HTML基础2：在Web页面中使用超链接

最新推荐文章于 2023-03-08 19:04:28 发布

彬哥^

最新推荐文章于 2023-03-08 19:04:28 发布

阅读量3.1k

点赞数 2

分类专栏： HTML 文章标签： HTML

原文链接：www.w3school.com.cn

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

不同页面的跳转
使用锚在同一页面或不同页面的不同位置跳转

Web上链接随处可以见，不管这个链接是链接到相同域、另一个域名、或者甚至是同一个页面的确切位置。属性（attribute）是和一个标签相关联的一段额外信息，它提供了关于该标签的更多细节。超链接标签<a>的href属性表明了索要链接的页面地址。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用<a> 标签在 HTML 中创建链接。
有两种使用<a> 标签的方式：

1、通过使用 href 属性 - 创建指向另一个文档的链接
2、通过使用 name 属性 - 创建文档内的书签

不同页面的跳转

如下面例子：

<a href="http://www.w3school.com.cn/">Visit W3School</a>

点击这个超链接会把用户带到 W3School 的首页。开始标签和结束标签之间的文字被作为超级链接提示信息来显示。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School</a>

Target 属性，你可以定义被链接的文档在何处显示，会在新窗口打开网页。

<a href="head.jpg">链接图片</a>

有一张head.jpg图片与该HTML文档处于同一目录下，使用相对路径即可访问到该图片。所以，“链接文本” 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

<a href="/xxxx/head.jpg">链接图片</a>

当然指定绝对路径，第一个’/'表示文档根目录（文档根目录是你在Web服务器上创建的目录结构的起点，Web服务器将从这个位置开始寻找Web浏览器所请求的文件），xxxx文件夹下的head.jpg文件。

使用锚在同一页面或不同页面的不同位置跳转

<a>标签的name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

锚链接分为两步：

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个HTML文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

test1.html

<!DOCTYPE>
<html>
<body>
<p>
	<a href="#C4">查看 Chapter 4。</a><!--第二步-->
</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>
	<h2><a name="C4">Chapter 4</a></h2><!--第一步-->
	<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>
</body>
</html>

浏览器地址栏变为：

http://localhost/test.html#C4

当然，我们也可以创建一个链接，指向另外一个页面的具名锚点。链接的锚点并不仅限相同的页面。可以通过包含地址或者文件名，后面跟着一个#符号和锚点名称，从而链接到另一个页面上的具名锚点。假设有一个test2.html与上面的test1.html处于同一目录。

test2.html

<a href="test1.html#C4">链接到test1.html的C4锚点</a>

彬哥^

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML基础2：在Web页面中使用超链接

Web上链接随处可以见，不管这个链接是链接到相同域、另一个域名、或者甚至是同一个页面的确切位置。属性（attribute）是和一个标签相关联的一段额外信息，它提供了关于该标签的更多细节。超链接标签<a>的href属性表明了索要链接的页面地址。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的...
复制链接

扫一扫