HTML学习笔记(三)——超链接标签

标签: html  html5

超链接概述

所谓的超链接是指从网页的一个位置(起点)指向另一个目标(目标点)的连接关系,超链接的起点可以是文字或者图片,目标点可以是另一个网页,也可以是某个网页(包括起点所在的网页)的一个位置,还可以是一个图片、一个文件、一个电子邮件地址,甚至是一个应用程序。其基本语法如下:

		<a href="index.html">链接起点</a>

超链接的默认样式为蓝色字体并带下划线,如果希望去除下划线并更改颜色字体可在CSS中添加以下样式:

		a{
			text-decoration:none;
			color: white;
		}

基本链接

外部链接

如果链接的目标点位于Web上而不是网站内部,一般要使用外部链接,创建外部链接通常要使用绝对路径。最常用的外部链接格式如下:

		<a href="http://www.baidu.com">百度一下</a>

注意:网址中的“http://”不可省略。

内部链接

如果链接的目标点位于网站内部,则常常是本地机器上的一个文件,这种链接就是内部链接,创建内部链接通常采用相对路径。最常用的内部链接格式如下:

		<a href="index.html">链接起点</a>

图片链接

如果链接的起点需要为图片时,其基本语法如下:

		<a href="http://www.taobao.com"><img src="images/taobao.jpg" /></a>

当然,也可以同时使用图片和文字,其基本语法如下:

		<a href="5-1.html">
			<img src="images/hand.jpg" /> 
			链接到本节案例5-1.html
		</a>

显示效果如下所示:
在这里插入图片描述

相关属性

下图摘自w3school
在这里插入图片描述

target属性

“target属性”用于指定打开链接的目标窗口,其默认方式是原窗口,它的属性值可以是:
_self: 默认值,被链接的目标加载到与该链接文字相同的窗口中。
_blank: 将被链接的目标加载到新的浏览器窗口中。
_parent: 将被链接的目标加载到父框架窗口中。
_top: 被链接的目标加载到整个浏览器窗口中并删除所有框架。
浏览器窗口名称:在某个已经指定名称的浏览器窗口中打开链接。
其基本语法如下:

		<a href="URL" target="目标窗口的打开方式">链接元素</a>
type属性

“type属性”规定目标URL的 MIME 类型,默认值为all。MIME类型类似于文件扩展名,在不同操作系统中被广泛接受,例如HTML页面的MIME类型是text/HTML,GIF图像的MIME类型是image/gif,CSS文件的MIME类型是text/css。
其基本语法如下:

		<a href="images/flower.jpg" target="_blank"  type="image/jpeg">春花秋月</a>
		<a href="index.html" type="text/html">首页</a>
media属性

“media属性”规定目标URL是为什么类型的媒介/设备进行优化的,一般情况该属性用于规定目标URL是为特殊设备(比如iPhone)、语音或打印媒介设计的。
其基本语法如下:

		<a href="http://myleaf.com" media="handheld">移动设备</a>
hreflang属性

“hreflang属性”规定目标URL的基准语言,用于当链接的目标页面与当前页面语言不同的情况,其取值是一个双字符语言代码。
其基本语法如下:

		<a href="http://myleaf.com" hreflang="EN">目标英语</a>
rel属性

“rel属性”指明当前文档与href特性指定资源间的关系。主流浏览器目前对此特性没有任何实际使用,不做详细描述。
其基本语法如下:

		<a href="http://myleaf.com" rel="help">目标网页</a>
title属性

“title属性”是HTML5的全局属性,规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段提示文本。一般来说,以图像为起点的超链接都应该使用“title属性”以达到提示的效果。
其基本语法如下:

		<a href="http://myleaf.com" title="回到首页">首页</a>

Email链接

Email链接是一种目标为电子邮件地址的特殊链接,点击电子邮件链接后,将启动机器上的电子邮件管理软件,并解析出电子邮件地址。
其基本语法如下:

		<a href="mailto:[email protected]">联系我们</a>

当用户单击了“联系我们”这个链接后,将自动启动本机上的电子邮件管理软件的写信功能,并已经把收件人的邮箱地址写入收件人地址栏中

锚记链接

锚记链接是超链接的一种,又被称为书签链接,常常用于那些内容庞大繁琐的网页,通过锚记链接,能够指向某个页面的特定位置(锚记)。a元素的name属性用于定义锚记的名称,一个页面可以定义0到多个锚记,通过a的href属性可以根据name跳转到相应的锚记位置。
锚记链接的目标锚记位置可以在同一页面中,也可以在不同页面中,在同一页面中只需指定锚记位置,在不同页面中需要指定好目标的页面地址和锚记位置,回到顶部等功能即为此链接
其基本语法如下:

		<a name="锚记名称"></a>              <!-- 命名锚记名称-->
		<a href="#锚记名称">链接元素内容</a>  <!-- 同一页面锚记链接 -->

		<a name="锚记名称"></a>              <!-- 命名锚记名称-->
		<a href="URL#锚记名称">链接元素内容</a><!-- 不同页面间锚记链接 -->

设置图像映射

有时候需要在图像上的某个区域或多个区域设置链接,这就需要用到图像映射。图像映射是一个能对链接指示做出反应的图形,单击该图像的已定义区域,可转到与该区域相链接的目标。图像映射也被称为热区链接,也就是在图像上设置一到多个热点区域(热区),然后在每个热区上都可以设置超级链接。手动进行图片的热区设置较为繁琐,可以使用相关的热区制作工具完成。
其基本语法如下:

		<img src="图像路径" usemap="#图像映射名称" />
		<map name="图像映射名称"  id="图像映射名称">
			<area shape="形状" coords="坐标" href="URL" />
			<area shape="形状" coords="坐标" href="URL" />
			......
		</map>

其中area标签的属性如下所示,图片摘自w3school
在这里插入图片描述

内联框架

HTML4中,布局可以使用框架frame和frameset,由于框架对网页可用性存在负面影响,在HTML5中不再支持frame和frameset,但保留了内联框架iframe。
iframe元素可以用来创建包含在另外一个文档中的浮动窗口,被称为内联框架或内嵌窗口等。简单讲就是在一个页面上开辟一个窗口,在这个窗口中可以嵌入显示其它的HTML文档,类似于“画中画”的感觉。
其基本语法如下:

		<iframe src="URL">……</iframe>

内联框架相关的链接

内联框架的页面转换可以使用a标签的target属性和iframe标签的name属性来进行内联框架的跳转。
其基本语法如下:

		<p>
			父窗体界面<br />
			<a href="5-9-3.html" target="in" >链接到5-9-3.html</a> <br />
			<a href="images/ar.jpg" target="in" >链接到图片ar.jpg</a>
		</p>
		<iframe src="5-9-2.html" name="in"></iframe>

关于内联框架iframe的相关属性如下所示,图片源自w3school
在这里插入图片描述

定义基准地址

base元素用来为当前页面中的所有相对URL规定一个默认地址或默认目标。通常情况下,浏览器会从当前文档的URL中提取相应的元素来填写相对的URL,使用base可以改变这一点,浏览器将不再使用当前文档的URL,而使用由base标记指定的基准URL来解析所有的相对URL。base标记位于网页的head部分,影响到的相对URL包括a、img、link和form标记。
其基本语法如下:

		<head>
			<base href="url" target="值" />
		</head>

后记

遗漏之处日后补充,还望指正。

版权声明:本文为weixin_44122062原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44122062/article/details/104755819