HTML学习笔记（三）——超链接标签
超链接概述
所谓的超链接是指从网页的一个位置（起点）指向另一个目标（目标点）的连接关系，超链接的起点可以是文字或者图片，目标点可以是另一个网页，也可以是某个网页（包括起点所在的网页）的一个位置，还可以是一个图片、一个文件、一个电子邮件地址，甚至是一个应用程序。其基本语法如下：
<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:aaa@qq.com">联系我们</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>
后记
遗漏之处日后补充，还望指正。
上一篇： HTML 插入图片基本命令
下一篇： 在阿里云服务器ECS部署网页
推荐阅读