代码入门教程（17）

第二章标签应用

第十九节链接标签的应用（1）

从本节开始讲解链接标签的应用。今天讲解三种链接方式：文字链接方式、图片链接方式和文章地址链接方式。

“链接标签”的重要性，我在代码入门教程（5）中已经讲过了，链接标签是制作网页必不可少的一个标签。学习代码就应该把链接标签学好，学会应用链接标签制作文章的链接标题，学会应用链接标签制作模块。

链接的基本语法为：<a href="要链接的网址" target=_blank>页面中要显示的文字或者图片等内容</a>。

常用的“链接标签”有三类表示方式：

1、文字链接方式： <a href="链接地址" target=_blank>文字内容</a>

文字链接方式举例1：

<a href="http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml"

target="_blank">精美顶图任您选（原创</a>

文字链接方式举例2：

精美动画</a>

文字链接方式举例3：

<a style="text-decoration: none;"

href="http://www.360doc.com/content/12/0113/21/4127803_179236277.shtml"

target="_blank">阴茎的秘密</a>（可消除链接文字的下划线）

文字链接方式解析：

例1页面显示的内容是: 精美顶图任您选(原创),链接的地址是：“精美顶图任您选（原创）”这篇文章的地址。例2页面显示的内容是： “精美动画”，链接的地址是一个动画图片的地址。例3页面显示的内容是:“阴茎的秘密”，此链接文字消除了下划线。链接的地址是：“阴茎的秘密”这篇文章的地址。

用文字链接方式制作的模块举例：

http://www.360doc.com/content/12/0606/19/4127803_216458035.shtml

2、图片链接方式：

图片链接方式举例：

<a href=http://image34.360doc.com/DownloadImg/2011/08/1221/15711392_4.jpg

target="_blank">

<img src=http://image15.360doc.com/DownloadImg/2010/09/2622/5565813_1.jpg

border=0></a>

图片标签中，还可以添加图片的宽度、高度等属性与属值。例如：

<a href=http://image34.360doc.com/DownloadImg/2011/08/1221/15711392_4.jpg

target="_blank"><img title=" 春天没来的图书馆" border="0" alt=" 春天没来的图书馆"

src=http://image34.360doc.com/DownloadImg/2011/08/1221/15711392_4.jpg

width="200" height="150"></a>

图片链接方式解析：

上面的例子，页面显示的是一个小图片，链接的地址是这个小图片的地址（链接的地址，也可以是其它图片的地址）。点击这个小图片，就可欣赏这个小图片的原图（大图片）。

用图片链接方式制作的模块举例：

http://www.360doc.com/content/12/1103/09/4127803_245429703.shtml

3、文章地址链接方式：

<a href=http://www.360doc.com/content/12/0710/20/4127803_223447531.shtml

target="_blank">

http://www.360doc.com/content/12/0710/20/4127803_223447531.shtml</a>

文章地址链接方式解析：

上面的例子，页面显示的是一个文章地址，链接的地址还是这个文章的地址。点击这个地址，就会进入打开这篇文章的页面中。如果这个地址是图片的地址，点击这个地址，就可欣赏原图。

用文章地址链接方式制作的模块举例：

http://www.360doc.com/content/12/1112/06/4127803_247317430.shtml

1、代码注释：

href：用于指定超链接目标的地址。href 属性的值（即等号后面的内容），就是点击链接文字或者链接图片以后进入的那个页面的地址，可以是任何有效文档的相对或绝对 URL（地址）。也就是说，“链接地址”可以是您的图书馆内的任何一篇文章、任何一个图片的地址，也可以是您的图书馆的地址、您的朋友的图书馆地址，还可以是其它网站的任何文章等内容的地址。

target：<a> 标签的 target 属性规定在何处打开链接文档。target=_blank：链接文件的打开方式是在浏览器的新窗口中打开。（在链接标签中，这个代码相当重要，不能缺少。）

title：（标题的意思）是指鼠标指向图片时显示的文字。（这里可以输入您的“图书馆的名称”，也可以输入图片的名称等内容。）

alt：图片描述。当图片不能显示的时候，显示的内容。（输入的内容，基本上同上。但是，鼠标指向图片时不显示此文字内容，只有当图片不能显示的时候，此内容才会显示出来。）

2、链接文章举例：

http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml

说明：本节的重点为掌握链接标签常用的三类表示方式，并要弄清楚链接标签的属性href和target的意思。

作业：应用三类链接标签各制作一篇文章。

2012年11月18日于北京

第二章标签应用

第二十节链接标签的应用（2）

本节继续讲解链接标签的应用。先复习一下链接标签的语法，然后讲解三种“文字链接模块”代码。

链接的基本语法：

<a href="要链接的网址" target=_blank>页面中要显示的文字或者图片等内容</a>

我们先来认识一下链接标签。<a>：标签名称，链接标签。href：<a> 标签的 href 属性用于指定超链接目标的 URL（路径、地址）。target：目标、靶子。<a> 标签的 target 属性规定在何处打开链接文档。_blank：新窗口。</a>：链接尾标签。

在链接标签中，target=_blank的设置是非常必要的。只有设置了这个属性与属值，才会在新窗口中打开链接的文章；如果不设置这个属性与属值，则会在原来的窗口中显示链接的文章，也就是说，原来的文章在浏览器窗口中就找不到了。

文字链接模块：

（1）纯文字链接模块：

代码：

<div><a href="http://www.360doc.com/content/11/0417/17/4127803_110314555.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>魂牵梦绕清华园

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0609/21/4127803_122774254.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>恩爱夫妻妙在欣赏

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0824/20/4127803_143025181.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>如何进行“个人设置”

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0824/20/4127803_143025181.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>电脑学习——

图书馆知识</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>“个人图书馆”操作

方法介绍</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0902/18/4127803_145306148.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>“边框”的制作方法

及技巧</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0905/07/4127803_145855661.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>图书馆中的几个

数据</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0905/11/4127803_145894513.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>美丽的世界

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0915/15/4127803_148459944.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>背景动态图片

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0110/19/4127803_178586687.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>墓碑的格式

</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0131/06/4127803_183020956.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>婆媳相处的秘笈

</strong></font></a></div>

<div><a href="http://www.360doc.com/Edit/href=" target="_blank" content="" 4127803_

183020956.shtml?="" 06="" 0131="" 12="" www.360doc.com=""><font style="font-size:

21px;" color="#ff0000"><strong>美丽的倒影</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0215/17/4127803_186864949.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>个人图书馆中的

几个操作技巧</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0131/21/4127803_183225358.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>如何把个人图书馆的快捷方式放到桌面上</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>“个人图书馆”

操作方法介绍（补充版1）</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>“个人图书馆”操作

方法介绍（补充版2）</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0524/08/4127803_213280073.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>“图片中的滚动

文章”制作方法</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0528/07/4127803_214168931.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>人间天堂——

上海全景图(底图)</strong></font></a></div>

<div><a href="http://www.360doc.com/content/11/0823/08/4127803_142573526.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>个人图书馆首页

导航</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>顶图的放置方法

（原创）</strong></font></a></div>

<div><a href="http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml"

target="_blank"><font style="font-size: 21px;" color="#ff0000"><strong>精美顶图任您选

</strong></font></a></div>

<div><font style="font-size: 21px;" color="#ff0000"><strong><a href="http://www.360doc.

com/content/12/0530/09/4127803_214664828.shtml" target="_blank"><font color=

"#ff0000">教您制作图书馆首</font><font color="#ff0000">页顶图（原创）</font></a>

</strong></font></div>

<a href="http://www.360doc.com/content/11/0903/06/4127803_145390586.shtml"

target="_blank"><font color="#ff0000">怎样“</font><font color="#ff0000">添加模块”

</font></a></font></strong></div>

（2）移动文字链接模块：

代码：

<a href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml"

target="_blank">

<font style="font-size: 24px;" color="#ff0000"><strong>“个人图书馆”操作方法介绍

（补充版1）</strong></font></a>

<a href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml"

target="_blank"><font style="font-size: 24px;" color="#ff0000"><strong>

“个人图书馆”操作方法介绍（补充版2）</strong></font></a>

<a href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml"

target="_blank"><font style="font-size: 24px;" color="#ff0000"><strong>顶图”的

放置方法（原创）</strong></font></a>

<a href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml"

target="_blank"><font style="font-size: 24px;" color="#ff0000"><strong>如何把

个人图书馆的快捷方式放置到桌面上</strong></font></a>

<a href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml"

target="_blank"> <font style="font-size: 24px;" color="#ff0000"> <strong>个人图书馆

操作方法介绍</strong></font></a>

<a href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

文件夹设置</font></strong></a>

<a href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

献给您的礼物</font></strong></a>

<a href="http://www.360doc.com/content/11/0910/07/4127803_147194959.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

添加装饰</font></strong></a>

<a href="http://www.360doc.com/content/11/0829/06/4127803_144143579.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

首页换肤</font></strong></a>

<a href="http://www.360doc.com/content/11/0829/06/4127803_144142190.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

给文章作“标记和批注”的方法

</font></strong></a>

<a href="http://www.360doc.com/content/11/0829/06/4127803_144142053.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

认识“目录树”</font></strong></a>

<a href="http://www.360doc.com/content/11/0821/17/4127803_142204458.shtml"

target="_blank"><strong><font style="font-size: 24px;" color="#ff0000">

如何上传图片</font></strong></a>

</marquee>

（3）表格中的移动文字链接模块：

代码：

<table border="0" cellPadding="20" width="362" background="

http://userimage2.360doc.com/12/0226/14/8424687_201202261433010349.gif"

height="375">

<tbody>

<tr>

<td>

<p><font color="rgb(255,0,0)" size="5" face="华文行楷"><b>精品文章展示

</b></font></p><font color="rgb(255,0,0)" size="5" face="华文行楷"><b>

<div><a href="http://www.360doc.com/content/11/0417/17/4127803_110314555.