HTML 链接


HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。


尝试一下 - 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="//www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> </body>
</html>

如何在HTML文档中创建链接。


HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接。

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

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

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。


HTML 链接语法

链接的 HTML 代码很简单。它类似这样:

<a href="url">链接文本</a>

href 属性描述了链接的目标。.

实例

<a href="https://www.cnblogs.com/wutaotaosin/">访问涛涛的博客</a>

上面这行代码显示为:访问涛涛的博客

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。


HTML 链接 - target 属性

使用 target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

<a href="https://www.cnblogs.com/wutaotaosin/" target="_blank">访问涛涛的博客!</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>

HTML 链接- id 属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示,在HTML文档中是不显示的,所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips")":

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":

<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

基本的注意事项 - 有用的提示

注释: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"。


更多实例

<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> <p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

如何使用图片链接。

<p>
<a href="#C4">查看章节 4</a>
</p> <h2>章节 1</h2>
<p>这边显示该章节的内容……</p> <h2>章节 2</h2>
<p>这边显示该章节的内容……</p> <h2>章节 3</h2>
<p>这边显示该章节的内容……</p> <h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p> <h2>章节 5</h2>
<p>这边显示该章节的内容……</p> <h2>章节 6</h2>
<p>这边显示该章节的内容……</p> <h2>章节 7</h2>
<p>这边显示该章节的内容……</p> <h2>章节 8</h2>
<p>这边显示该章节的内容……</p> <h2>章节 9</h2>
<p>这边显示该章节的内容……</p> <h2>章节 10</h2>
<p>这边显示该章节的内容……</p> <h2>章节 11</h2>
<p>这边显示该章节的内容……</p> <h2>章节 12</h2>
<p>这边显示该章节的内容……</p> <h2>章节 13</h2>
<p>这边显示该章节的内容……</p> <h2>章节 14</h2>
<p>这边显示该章节的内容……</p> <h2>章节 15</h2>
<p>这边显示该章节的内容……</p> <h2>章节 16</h2>
<p>这边显示该章节的内容……</p> <h2>章节 17</h2>
<p>这边显示该章节的内容……</p>

如何使用书签

<p>跳出框架?</p>
<a href="//www.runoob.com/" target="_top">点击这里!</a>

本例演示如何跳出框架,假如你的页面被固定在框架之内。

<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p> <p>
<b>注意:</b> 单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>

本例演示如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

<p>
这是另一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p> <p>
<b>注意:</b> 单词之间的空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>

本例演示更加复杂的邮件链接。


HTML 链接标签

标签 描述
<a> 定义一个超级链接

初探html-9 链接的更多相关文章

  1. EntityFramework 中的链接研究初探

    很多人用EF的默认链接工厂:System.Data.Entity.Infrastructure.LocalDbConnectionFactory 然后我一开始就不习惯,然后研究了一下,截图如下 然后就 ...

  2. Geotrellis系列文章链接

    本文存放了我在博客园中撰写的Geotrellis系列文章链接,方便查阅! 一.geotrellis使用初探 二.geotrellis使用(二)geotrellis-chatta-demo以及geotr ...

  3. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  4. Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

  5. NoSQL初探之人人都爱Redis:(3)使用Redis作为消息队列服务场景应用案例

    一.消息队列场景简介 “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象.消息被发送到队列中,“消息队列”是在消息的传输过程中保存消息的容器 ...

  6. Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

  7. Unity3D游戏开发初探—2.初步了解3D模型基础

    一.什么是3D模型? 1.1 3D模型概述 简而言之,3D模型就是三维的.立体的模型,D是英文Dimensions的缩写. 3D模型也可以说是用3Ds MAX建造的立体模型,包括各种建筑.人物.植被. ...

  8. Unity3D游戏开发初探—3.初步了解U3D物理引擎

    一.什么是物理引擎? 四个世纪前,物理学家牛顿发现了万有引力,并延伸出三大牛顿定理,为之后的物理学界的发展奠定了强大的理论基础.牛顿有句话是这么说的:“如果说我看得比较远的话,那是因为我站在巨人的肩膀 ...

  9. Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏

    一.预备知识—对象的”生“与”死“ (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的“指 ...

随机推荐

  1. spark streaming 2: DStream

    DStream是类似于RDD概念,是对数据的抽象封装.它是一序列的RDD,事实上,它大部分的操作都是对RDD支持的操作的封装,不同的是,每次DStream都要遍历它内部所有的RDD执行这些操作.它可以 ...

  2. 一、基础篇--1.1Java基础-HTTP请求的GET与POST方式的区别【转】

    http://www.cnblogs.com/logsharing/p/8448446.html 转载的这篇文章,很有意思,说的也很全面,学习下,防丢失,备份记录下 GET和POST是HTTP请求的两 ...

  3. 使用KFold进行训练集和验证集的拆分,使用准确率和召回率来挑选合适的阈值(threshold) 1.KFold(进行交叉验证) 2.np.logical_and(两bool数组都是正即为正) 3.np.logical_not(bool数组为正即为反,为反即为正)

    ---恢复内容开始--- 1. k_fold = KFold(n_split, shuffle) 构造KFold的索引切割器 k_fold.split(indices) 对索引进行切割. 参数说明:n ...

  4. Android 图片内存优化与图片压缩

    1. 对图片本身进行操作 尽量不要使用 setImageBitmap.setImageResource. BitmapFactory.decodeResource 来设置一张大图,因为这些方法在完成 ...

  5. Boston House Price with Scikit-Learn

    Boston House Price with Scikit-Learn Data Description >>> from sklearn.datasets import load ...

  6. 浏览器端-W3School-JavaScript-Browser: Navigator 对象

    ylbtech-浏览器端-W3School-JavaScript-Browser: Navigator 对象 1.返回顶部 1. Navigator 对象 Navigator 对象 Navigator ...

  7. 简单的python下载器

    最近在玩爬虫,有时候会爬下来很多感兴趣文件的连接. 如果自己手动下载它们的话工作量实在太大. 于是,简单写了个下载小脚本: import os, urllib2 os.chdir(r'd:') url ...

  8. nodejs之mongodb操作

    声明: 当查询到数据库数据后,对数据库数据进行遍历,可以采用toArray()函数,具体实现可以看第六点 1.本地安装mongodb 安装包:https://www.mongodb.com/downl ...

  9. PowerDesigner 入门使用

    <转载于--https://www.cnblogs.com/biehongli/p/6025954.html> PowerDesigner最基础的使用方法入门学习   1:入门级使用Pow ...

  10. django 视图常用操作

    获取参数. 类型是QueryDict https://www.cnblogs.com/zhaoyang-1989/p/11989515.html request.POST.get('参数名') req ...