代码入门教程
⇨⇦
第 二 章 标 签 应 用
第十九节 链接标签的应用（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＂>精美顶图任您选（原创
文字链接方式举例2：
<a href=＂＂http://www.flash1890.com/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＂>阴茎的秘密（可消除链接文字的下划线）
文字链接方式解析：
例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 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＂>
图片链接方式解析：
上面的例子，页面显示的是一个小图片，链接的地址是这个小图片的地址（链接的地址，也可以是其它图片的地址）。点击这个小图片，就可欣赏这个小图片的原图（大图片）。
用图片链接方式制作的模块举例：
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
文章地址链接方式解析：
上面的例子，页面显示的是一个文章地址，链接的地址还是这个文章的地址。点击这个地址，就会进入打开这篇文章的页面中。如果这个地址是图片的地址，点击这个地址，就可欣赏原图。
用文章地址链接方式制作的模块举例：
http://www.360doc.com/content/12/1112/06/4127803_247317430.shtml
1、代码注释：
href：用于指定超链接目标的地址。href 属性的值（即等号后面的内容），就是点击链接文字或者链接图片以后进入的那个页面的地址，可以是任何有效文档的相对或绝对 URL（地址）。也就是说，＂链接地址＂可以是您的图书馆内的任何一篇文章、任何一个图片的地址，也可以是您的图书馆的地址、您的朋友的图书馆地址，还可以是其它网站的任何文章等内容的地址。
target：<a> 标签的 target 属性规定在何处打开链接文档。target=_blank：链接文件的打开方式是在浏览器的新窗口中打开。（在链接标签中，这个代码相当重要，不能缺少。）</a>
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><a> 标签的 href 属性用于指定超链接目标的 URL（路径、地址）。target：目标、靶子。</a><a> 标签的 target 属性规定在何处打开链接文档。_blank：新窗口。</a>：链接尾标签。
在链接标签中，target=_blank的设置是非常必要的。只有设置了这个属性与属值，才会在新窗口中打开链接的文章；如果不设置这个属性与属值，则会在原来的窗口中显示链接的文章，也就是说，原来的文章在浏览器窗口中就找不到了。
文字链接模块：
（1）纯文字链接模块：
代码：
<div><a href=＂http://www.360doc.com/content/11/0417/17/4127803_110314555.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>魂牵梦绕清华园</strong></span>
<div><a href=＂http://www.360doc.com/content/11/0609/21/4127803_122774254.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>恩爱夫妻妙在欣赏</strong></span>
<div><a href=＂http://www.360doc.com/content/11/0824/20/4127803_143025181.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>如何进行＂个人设置＂</strong></span>
<div><a href=＂http://www.360doc.com/content/11/0824/20/4127803_143025181.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>电脑学习——</strong></span>
图书馆知识
<div><a href=＂http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂个人图书馆＂操作</strong></span>
方法介绍
<div><a href=＂http://www.360doc.com/content/11/0902/18/4127803_145306148.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂边框＂的制作方法</strong></span>
及技巧
<div><a href=＂http://www.360doc.com/content/11/0905/07/4127803_145855661.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>图书馆中的几个</strong></span>
数据
<div><a href=＂http://www.360doc.com/content/11/0905/11/4127803_145894513.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>美丽的世界</strong></span>
<div><a href=＂http://www.360doc.com/content/11/0915/15/4127803_148459944.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>背景动态图片</strong></span>
<div><a href=＂http://www.360doc.com/content/12/0110/19/4127803_178586687.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>墓碑的格式</strong></span>
<div><a href=＂http://www.360doc.com/content/12/0131/06/4127803_183020956.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>婆媳相处的秘笈</strong></span>
<div><a href=＂http://www.360doc.com/Edit/href=＂ target=＂_blank＂ content=＂＂ 4127803_</div>
183020956.shtml?=＂＂ 06=＂＂ 0131=＂＂ 12=＂＂ www.360doc.com=＂＂><font style=＂font-size:
21px;＂ color=＂#ff0000＂><strong>美丽的倒影</strong>
<div><a href=＂http://www.360doc.com/content/12/0215/17/4127803_186864949.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>个人图书馆中的</strong></span>
几个操作技巧
<div><a href=＂http://www.360doc.com/content/12/0131/21/4127803_183225358.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>如何把个人图书馆的快捷方式放到桌面上</strong></span>
<div><a href=＂http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂个人图书馆＂</strong></span>
操作方法介绍（补充版1）
<div><a href=＂http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂个人图书馆＂操作</strong></span>
方法介绍（补充版2）
<div><a href=＂http://www.360doc.com/content/12/0524/08/4127803_213280073.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂图片中的滚动</strong></span>
文章＂制作方法
<div><a href=＂http://www.360doc.com/content/12/0528/07/4127803_214168931.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>人间天堂——</strong></span>
上海全景图(底图)
<div><a href=＂http://www.360doc.com/content/11/0823/08/4127803_142573526.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>个人图书馆首页</strong></span>
导航
<div><a href=＂http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>顶图的放置方法</strong></span>
（原创）
<div><a href=＂http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml＂</div>
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>精美顶图任您选</strong></span>
<div><span style=＂＂font-size:;color:＂#ff0000＂＂><strong><a href=＂http://www.360doc.</strong></span></div>
com/content/12/0530/09/4127803_214664828.shtml＂ target=＂_blank＂><font color=
＂#ff0000＂>教您制作图书馆首<span style=＂color:＂#ff0000＂＂>页顶图（原创）</span>
<div><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong></div>
<a href=＂http://www.360doc.com/content/11/0903/06/4127803_145390586.shtml＂
target=＂_blank＂><span style=＂color:＂#ff0000＂＂>怎样＂</span><span style=＂color:＂#ff0000＂＂>添加模块＂</span>
（2）移动文字链接模块：
代码：
<marquee></marquee>
<a href=＂http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml＂
target=＂_blank＂>
<span style=＂＂font-size:;color:＂#ff0000＂＂><strong>＂个人图书馆＂操作方法介绍</strong></span>
（补充版1）
<a href=＂http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml＂
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂个人图书馆＂操作方法介绍（补充版2）
<a href=＂http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml＂
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>顶图＂的</strong></span>
放置方法（原创）
<a href=＂http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml＂
target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂><strong>如何把</strong></span>
个人图书馆的快捷方式放置到桌面上
<a href=＂http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml＂
target=＂_blank＂> <span style=＂＂font-size:;color:＂#ff0000＂＂> <strong>个人图书馆</strong></span>
操作方法介绍
<a href=＂http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
文件夹设置
<a href=＂http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
献给您的礼物
<a href=＂http://www.360doc.com/content/11/0910/07/4127803_147194959.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
添加装饰
<a href=＂http://www.360doc.com/content/11/0829/06/4127803_144143579.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
首页换肤
<a href=＂http://www.360doc.com/content/11/0829/06/4127803_144142190.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
给文章作＂标记和批注＂的方法
<a href=＂http://www.360doc.com/content/11/0829/06/4127803_144142053.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
认识＂目录树＂
<a href=＂http://www.360doc.com/content/11/0821/17/4127803_142204458.shtml＂
target=＂_blank＂><strong><span style=＂＂font-size:;color:＂#ff0000＂＂></span></strong>
如何上传图片
（3）表格中的移动文字链接模块：
代码：
<table border=＂0＂ cellPadding=＂20＂ width=＂362＂ background=＂
http://userimage2.360doc.com/12/0226/14/8424687_201202261433010349.gif＂
height=＂375＂>
<table><tbody><tr class=＂firstRow＂></tr></tbody></table>
<table><tbody><tr class=＂firstRow＂></tr></tbody></table>
<table><tbody><tr class=＂firstRow＂><td>
</td></tr></tbody></table>
<marquee direction=＂＂up＂＂ height=＂＂200＂＂ width=＂＂362＂＂ scrollamount=＂＂1＂＂></marquee>
<span style=＂color:＂rgb(255,0,0)＂;font-size:＂5＂px;font-family:＂华文行楷＂＂><strong>精品文章展示</strong></span>
<span style=＂color:＂rgb(255,0,0)＂;font-size:＂5＂px;font-family:＂华文行楷＂＂></span>
<div><a href=＂http://www.360doc.com/content/11/0417/17/4127803_110314555.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
魂牵梦绕清华园
<div><a href=＂http://www.360doc.com/content/11/0609/21/4127803_122774254.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
恩爱夫妻妙在欣赏
<div><a href=＂http://www.360doc.com/content/11/0824/20/4127803_143025181.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
如何进行＂个人设置＂
<div><a href=＂http://www.360doc.com/content/11/0824/20/4127803_143025181.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
电脑学习——图书馆知识
<div><a href=＂http://www.360doc.com/content/11/0828/20/4127803_144075423.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂个人图书馆＂操作方法介绍
<div><a href=＂http://www.360doc.com/content/11/0902/18/4127803_145306148.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂边框＂的制作方法及技巧
<div><a href=＂http://www.360doc.com/content/11/0905/07/4127803_145855661.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
图书馆中的几个数据
<div><a href=＂http://www.360doc.com/content/11/0905/11/4127803_145894513.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
美丽的世界
<div><a href=＂http://www.360doc.com/content/11/0915/15/4127803_148459944.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
背景动态图片
<div><a href=＂http://www.360doc.com/content/12/0110/19/4127803_178586687.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
墓碑的格式
<div><a href=＂http://www.360doc.com/content/12/0131/06/4127803_183020956.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
婆媳相处的秘笈
<div><a href=＂http://www.360doc.com/Edit/href=＂ target=＂_blank＂ 4127803_</div>
183020956.shtml?=＂＂ 06=＂＂ 0131=＂＂ 12=＂＂ www.360doc.com=＂＂ content=＂＂>
<span style=＂＂font-size:;color:＂#ff0000＂＂><strong>美丽的倒影</strong></span>
<div><a href=＂http://www.360doc.com/content/12/0215/17/4127803_186864949.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
个人图书馆中的几个操作技巧
<div><a href=＂http://www.360doc.com/content/12/0131/21/4127803_183225358.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
如何把个人图书馆的快捷方式放到桌面上
<div><a href=＂http://www.360doc.com/content/12/0315/06/4127803_194439279.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂个人图书馆＂操作方法介绍（补充版1）
<div><a href=＂http://www.360doc.com/content/12/0315/10/4127803_194467904.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂个人图书馆＂操作方法介绍（补充版2）
<div><a href=＂http://www.360doc.com/content/12/0524/08/4127803_213280073.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
＂图片中的滚动文章＂制作方法
<div><a href=＂http://www.360doc.com/content/12/0528/07/4127803_214168931.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
人间天堂——上海全景图(底图)
<div><a href=＂http://www.360doc.com/content/11/0823/08/4127803_142573526.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
个人图书馆首页导航
<div><a href=＂http://www.360doc.com/content/12/0310/08/4127803_193176548.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
顶图的放置方法（原创）
<div><a href=＂http://www.360doc.com/content/12/0531/09/4127803_214898254.</div>
shtml＂ target=＂_blank＂><span style=＂＂font-size:;color:＂#ff0000＂＂></span>
精美顶图任您选
作业：应用上面的3种链接代码，各制作一个模块。
代码入门教程(1)
代码入门教程(2)
代码入门教程(3)
代码入门教程(4)
代码入门教程(5)
代码入门教程(6)
代码入门教程(7)
代码入门教程(8)
代码入门教程(9)
代码入门教程(10)
代码入门教程(11)
代码入门教程(12)
代码入门教程(13)
代码入门教程(14)
代码入门教程(15)
代码入门教程(16)
代码入门教程(17)
代码入门教程(18)
2012年11月18日于北京