第 二 章 标 签 应 用
第十九节 链接标签的应用（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 href="http://www./swf/sucai/chunjie/72.swf" target="_blank">
精美动画</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="链接地址" target=_blank><IMG src="图片地址" border=0></A>
图片链接方式举例：
<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>
<div><strong><font style="font-size: 21px;" color="#ff0000">
<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）移动文字链接模块：
代码：
<marquee>
<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>
<marquee direction="up" height="200" width="362" scrollAmount="1">
<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.
shtml" target="_blank"><font style="font-size: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" 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: 24px;" color="#ff0000"><strong>
婆媳相处的秘笈</strong></font></a></div>
<div><a href="http://www.360doc.com/Edit/href=" target="_blank" 4127803_
183020956.shtml?="" 06="" 0131="" 12="" www.360doc.com="" content="">
<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>
<p></p></b></font></marquee></td></tr></tbody></table>
作业：应用上面的3种链接代码，各制作一个模块。
代码入门教程(1) | 代码入门教程(2) | 代码入门教程(3) |
代码入门教程(4) | 代码入门教程(5) | 代码入门教程(6) |
代码入门教程(7) | 代码入门教程(8) | 代码入门教程(9) |
代码入门教程(10) | 代码入门教程(11) | 代码入门教程(12) |
代码入门教程(13) | 代码入门教程(14) | 代码入门教程(15) |
代码入门教程(16) | 代码入门教程(17) | 代码入门教程(18) |
2012年11月18日于北京
