HTML学习笔记（三）链接

来源：互联网发布：c语言exe文件编辑：程序博客网时间：2024/05/10 14:29

HTML 超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

通过使用 <a></a> 标签在 HTML 中创建链接。

有两种使用 <a></a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接（href 属性规定链接的目标）。
通过使用 name 属性 - 创建文档内的书签

超链接小例：

创建超链接：

<html>
<body>

<a href="http://baidu.com">指向百度页面的链接</a>

</body>
</html>

使用图片作为链接：

<html>
<body>

使用图片作为链接
<a href="http://www.youku.com/show_page/id_zcc001f06962411de83b1.html">
<img src="http://img.my.csdn.net/uploads/201603/29/1459237409_6607.jpg"></img>
</a>

</body>
</html>

target属性：定义被链接的文档在何处显示

主要有两个取值：target="_blank" 与 target="_self"

第一种：点击链接，浏览器会重新打开一个页面，用于显示该链接指向的网页。

第二种：当前页面打开链接，显示链接指向的页面。

<html>
<body>
<a href="http://http://baidu.com" target="_blank">链接百度</a>
设置target为"_blank"时，该链接会在新窗口中打开，不会覆盖本窗口
</body>
</html>

name属性：创建 HTML 页面中的书签

name属性经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个name属性，然后把链接到这些name属性的链接放到文档的上部。

使用链接跳转至文档的不同位置。

name的语法：

<a name="label">（显示在页面上的文本）</a>

name的名称可以是任意的。

也可以使用 id 属性来替代 name 属性，与name同样有效。

实例：

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

<a name="tips">链接回来的地方</a>

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

<a href="#tips">链接回去</a>

也可以在其他页面中创建指向该name的链接：

<a href="http://xxxxxxx.xx#tips">链接回去</a>

在上面的代码中，我们将 # 符号和name名称添加到 URL 的末端，就可以直接链接到 tips 这个命名name了。

小栗子：

以test.html和test2.html为例

test.html：

<span style="font-size:12px;"><html>     <body>          <a name="tips">链接回来的地方</a>          <a href="#tips2">链接到...</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>           <a name="tips2">链接回来的地方2</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>           <a href="#tips">链接回去</a>      </body></html></span>

通过#tips直接链接到本页面定义的name=“tips处”。点击可直接跳转到该位置。

test2.html：

<strong><html>     <body>          <a href="file:///C:/Users/Administrator/Desktop/test.html#tips2">链接回去</a>          <br/>          <a href="file:///C:/Users/Administrator/Desktop/test.html">链接回去</a>      </body></html></strong>

通过在链接地址后面添加#tips2，可以直接链接到test.html中的“链接回来的地方2”处。

不加，则直接链接到该test.html页面。

更多例子参w3cschool--html

跳出框架

假如你的页面被固定在框架之内，跳出框架。

创建电子邮件链接

链接到一个邮件。（需安装邮件客户端程序后才能工作。）

创建电子邮件链接 2

更加复杂的邮件链接。

更多属性参见w3cschool <a>标签

0 0