Educoder-HTML入门——文本(一)

HTML链接：带超链接的网页

概念

超链接是网页互连的核心，网页之间通过超链接连接在一起。

我们使用 标签定义超链接。

一个简单的例子如下：

百度搜索

点击a元素内容后打开百度搜索网页。

其中，href属性指定了超链接的目标，本例中即跳转到百度。

---

属性

href 属性;href 属性是超链接最重要的属性，它用于指定超链接目标的 URL。

典型的超链接格式如下：

其中，目标URL有三种类型：

1. 锚 URL (anchor URL)：指向同一页面内某一位置；
2. 相对 URL (relative URL)：指向同一网站的不同文件；
3. 绝对 URL (absolute URL)：指向另一个网站。

提示:

URL:Uniform Resource Locator,统一资源定位器

为什么叫做锚URL呢？

锚的含义取于船上的锚，船把锚沉在水底，如果船随水漂移了，只要一拉锚的锁链就会回到抛锚的位置。同样的，在html中点锚链接就能回到指定位置。

这三种链接实际效果是如何的呢？下面让我们通过三组实例来加深理解。

锚 URL 实例：创建网页内导航

HTML 入门
本页目录

    
简介
    
第1关
    
第2关

简介
HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
    在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。
第1关
初识HTML：简单的Hello World网页
第2关
HTML链接：带超链接的网页

回到顶部

相对 URL 实例：跳转到同一网站的另一个网页

其中第5行：简介

定义了一个指向#toc1目标的锚链接。所以，点击之后会定位到第10行：
简介

id属性值为toc1的位置。

所以，完整的一对页面内导航的写法为：

简介

<开始标签 id="id值内容">内容<结束标签>

此外，当href="#"时，默认回到网页顶部位置。

我们说的相对URL是相对于什么呢？
是相对于当前网页home.html路径的URL。代表当前路径，所以.blog.html代表当前路径下的blog.html网页。

绝对 URL 实例：跳转到另一网页

你可以使用搜索引擎，例如

Google、

Baidu、

Bing等，搜索网络信息。

 

绝对URL即指定了完整的网页路径。

发送电子邮件

我们还可以将href属性值设置为mailto:邮箱地址,这样做可以调起邮箱应用，发送邮件到对应地址。

例如：

发送邮件到someone

target 属性：在何处打开链接

target属性规定了在何处打开超链接。

一个常用的例子如下：

HTML

其中，我们指定了target="_blank"，所以在点击之后，将在新标签中打开链接。