第六节：友情链接模块

我们在前面的小节中，已经使用a锚点标签实现了自动启用系统邮件客户端的功能。在本节中，我们使用a标签来实现页面间的跳转。a标签可以说是最重要的标签，有了a标签，才有了我们的超链接，这使得我们从一个网页跳转至另一个网页成为了可能。

/WebCourse2017/assets/image/chapter2/22.png

初始化

和前面的章节一样，我们在进行开发前，进行一些初始化操作。这将使得我们的代码更易读，界面展示层次感更强。

    <!-- 友情链接 -->
    <h2>友情链接</h2>
    <hr />
    <!-- 友情链接 结束 -->

效果如下：

/WebCourse2017/assets/image/chapter2/23.png

加入链接

增加3个a标签：

    <!-- 友情链接 -->
    <h2>友情链接</h2>
        <a href="">河北工业大学</a>
        <a href="">计算机科学与软件学院</a>
        <a href="">梦云智软件开发团队</a>
    <hr />
    <!-- 友情链接 结束 -->

效果如下：

/WebCourse2017/assets/image/chapter2/24.png

2.增加链接的值

比如河北工业大学的网址为:http://www.hebut.edu.cn,计算机科学与软件学院网址为http://www.scse.hebut.edu.cn, 梦云智软件开发团队的网址为http://www.mengyunzhi.com。

是的，没错，我们需要有http的字样.

大多数的网址都是http打头的，当浏览器看到http打头的网址时，会为我们自动省略http。但也有很多网址是https打头的，比如:https://www.google.com, https://www.baidu.com。而http和https是完全不同的。所以，当我们为链接增加跳转的网址时，必须说明是http还是https。

/WebCourse2017/assets/image/chapter2/26.png

有的同学说，我平常都是输入:www.baidu.com呀，按刚刚的说明，我打开的应该是http://www.baidu.com，但为什么最终访问的却是https://www.baidu.com呢？

这是由于，当我们访问http://www.baidu.com时，它自动（偷偷）的将我们的浏览器的访问地址重新定位于https://www.baidu.com了。

    <!-- 友情链接 -->
    <h2>友情链接</h2>
        <a href="http://www.hebut.edu.cn">河北工业大学</a>
        <a href="http://www.scse.hebut.edu.cn">计算机科学与软件学院</a>
        <a href="http://www.mengyunzhi.com">梦云智软件开发团队</a>
    <hr />
    <!-- 友情链接 结束 -->

此时，当我们再次进行点击时，页面已经可以进行跳转了。

/WebCourse2017/assets/image/chapter2/3.gif

增加图片

我们平常接触到的链接，除了有文字形式的，还有一些是图片形式的。这是怎么做到的呢？

很简单，这是因为a标签，不但可以是文字，还可以是图片。为此，我们找到了三个相关的图片，并使用QQ的截图功能，将其大小处理为长150像素，高40像素。如下：

/WebCourse2017/assets/image/chapter2/27.png

然后将其放置到index.html的同级文件夹中。最终，此文件夹中的内容如下：

/WebCourse2017/assets/image/chapter2/30.png

接下来，我们使用图片替换原来的文字，这和我们在第二节插入图片的操作基本相同。

    <!-- 友情链接 -->
    <h2>友情链接</h2>
        <a href="http://www.hebut.edu.cn"><img src="hebut.png" /></a>
        <a href="http://www.scse.hebut.edu.cn"><img src="scse.png" /></a>
        <a href="http://www.mengyunzhi.com"><img src="mengyunzhi.png" /></a>
    <hr />
    <!-- 友情链接 结束 -->

此时，我们再刷新页面，发现以前的文字已经变成我们想要的图片了。

/WebCourse2017/assets/image/chapter2/31.png

同样的，由于a标签的作用，当我们将鼠标移动到a标签中的图片上时，鼠标将变成手状。以示该图片是一个链接。

问题：a标签中，除了可以是图片标签外，还可以是其它标签吗？

新标签打开链接

有时候，特别是在设置友情链接时，我们希望用户点击链接时，能够在一个新的窗口中打开，这时候就需要用到a标签的target属性了, 我们将其设置为_blank，即在新的窗口打口。

    <!-- 友情链接 -->
    <h2>友情链接</h2>
        <a href="http://www.hebut.edu.cn"><img src="hebut.png" /></a>
        <a target="_blank" href="http://www.scse.hebut.edu.cn"><img src="scse.png" /></a>
        <a href="http://www.mengyunzhi.com" target="_blank"><img src="mengyunzhi.png" /></a>
    <hr />
    <!-- 友情链接 结束 -->

此时，当我们点击第二个和第三个链接时，浏览器将会启动一个新个窗口，并在这个新窗口中显示网页的内容。

总结

本节中，我们扩充了a标签的知识，在a标签中加入了图片标签，以实现点击图片进行跳转的目标。最后，我们加入了target属性，来告诉浏览器，将页面需要在一个新的窗口中打开。

参考： http://www.runoob.com/html/html-links.html http://www.runoob.com/tags/tag-a.html

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>

<body>
    <h1>Hello World!</h1>

    <!-- 导航 -->
    <table>
        <tr>
            <td>自我介绍</td>
            <td>所学课程</td>
            <td>我的建议</td>
            <td>友情链接</td>
            <td>生活中的我</td>
        </tr>
    </table>
    <hr />
    <!-- 导航 结束 -->

    <!-- 基本信息 -->
    <img src="duolaiameng.png" />
    <p>梦云智软件开发团队. 2014.12.20. <a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
    <hr />
    <!-- 基本信息 结束 -->

    <!-- 所学课程 -->
    <h2>所学课程</h2>
    <ol>
        <li>软件工程</li>
        <li>数据库</li>
        <li>C语言程序设计</li>
        <li>面向对象的编程思想</li>
    </ol>
    <hr />
    <!-- 所学课程 结束 -->

    <!-- 我的建议 -->
    <h2>我的建议</h2>
    <ul>
        <li>乐于帮助他人，善于向他人寻求帮助。</li>
        <li>充分接触计算机工程，进一步的了解它是否适合于自己</li>
        <li>如果有梦想，就要敢于付出。因为只有这样，才能自信满满地来取悦自己。</li>
        <li>如果你愿意，我愿意与你共同进度。</li>
    </ul>
    <hr />
    <!-- 我的建议 结束 -->

    <!-- 友情链接 -->
    <h2>友情链接</h2>
        <a href="http://www.hebut.edu.cn"><img src="hebut.png" /></a>
        <a target="_blank" href="http://www.scse.hebut.edu.cn"><img src="scse.png" /></a>
        <a href="http://www.mengyunzhi.com" target="_blank"><img src="mengyunzhi.png" /></a>
    <hr />
    <!-- 友情链接 结束 -->
</body>

</html>

商业网站开发入门上机指导

技术支持：河北工业大学梦云智软件开发团队

第六节：友情链接模块

初始化

加入链接

增加图片

新标签打开链接

总结

完整代码