Web网页设计之HTML_4. HTML 链接 & 注释

在我们日常上网浏览网站的时候，总是能点击一段文字、图片，然后打开一个新的页面。而这个操作里就有本篇博客的内容

一、认识链接

我们先来看看这个点击的时候为啥能够打开一个新的网页

可以看到啊，我们通过谷歌浏览器的开发者工具可看到，这个“超链接_百度百科”外面套着一个 a 标签，而 a 标签中的 href 属性里是一个链接地址，这个就是能够打开一个新的页面的重要点，而这也就是我们今天要学习的东西，a 标签。

我们称 a 标签为 锚点，也就是单词 anchor 。

我们再来点开百度百科来具体看一下超链接

百度百科是这么去定义这个连接的，超链接就是允许我们在其他网页或者站点之间进行连接的一个元素。一个网站是由很多很多的页面组成，不可能就一个页面。（剩下的百科自己去读）

那么问题来了，这个锚点和超链接有啥关系呢？其实这两个是一个东西，超链接就是锚点的地址，而锚点就是超链接的标记。

二、超链接种类

超链接分为三种，内部链接、外部链接、锚点链接，我们一个一个说

1. 内部链接

内部链接就是我们访问同一个项目中其他的 HTML 页面

2. 外部链接

外部链接就是访问不是本项目的连接

3. 锚点链接

锚点链接是指访问当前页面的某一些节点

当然啊，我们一个项目里用的大部分都是内部链接和锚点链接，外部链接也有，但是不是很多。

三、创建超链接

打开 WebStorm ，创建一个 case3 的文件夹，然后创建 class1.html，再来写一个 a 标签

然后我们来介绍几个属性

HREF

这个是一个重要的属性，因为没有这个，我们的 a 标签就失去了意义，href 属性的值就是一个地址，可以是超链接的任何类型

TARGET

这个属性我们也经常用到，它是用来规定在何处打开链接文档，比如说新开一个页面进行打开，或者是就在本页面进行打开

TARGET有4个固定属性，我们来看一下

_blank

这个就是以一个新的网页进行打开

_parent

在父框架集中打开被链接文档。

_self

在相同的框架中打开被链接文档。我们默认就是这个，在同一个页面进行打开

_top

在整个窗口中打开被链接文档。

来尝试一下吧，让这个 a 标签连接到这个百度的主页

我们可以看到啊，什么都没有，这里我要说一下，我们需要给这个 a 标签里面写一些内容啊，不然都没有的点击啊

我们现在来点击一下百度

这个就是外部链接，然后我们再弄个内部链接，我们跳转到

这个 case2 下面的 class3.html 这里我们再让这个网页是从新打开一个新页面

是OK的啊，正常跳转

大家自己多练习一下其他的几个方式。

四、图片链接

然后再说一下图片跳转，这个很简单啊，就是在图片外面加一个 a 标签，我们来看一下

然后点击一下

OK，直接跳转过去了~~~

五、邮件链接

除去上面网页链接，我们还能使用这个邮件链接，使用到关键词是 mailto ，我们来看一下

我们点击一下看看会有什么

OK的啊，收件人是我，然后可以直接编辑信息发送给我的邮箱。

我本地用的是内个 Foxmail 所以直接就打开了，你要是本地没有自己去安装一个。

六、注释

HTML 中注释我记得就一种啊，不像 Java 那么多，样子如下

<!-- 要被注释的内容 -->

这个我们也试一下

可以看到啊，原本要现实的文字，现在却不显示了。

 

大家好好练习一下，有问题加我QQ：2100363119