第 二 章 标 签 应 用
第十九节 链接标签的应用（1）
从本节开始讲解链接标签的应用。今天讲解三种链接方式：文字链接方式、图片链接方式和文章地址链接方式。
“链接标签”的重要性，我在代码入门教程（5）中已经讲过了，链接标签是制作网页必不可少的一个标签。学习代码就应该把链接标签学好，学会应用链接标签制作文章的链接标题，学会应用链接标签制作模块。
链接的基本语法为：链接的网址"" target="_blank">页面中要显示的文字或者图片等内容。
常用的“链接标签”有三类表示方式：
1、文字链接方式： 链接地址"" target="_blank">文字内容
文字链接方式举例1：
<a href="http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml"
target="_blank">精美顶图任您选（原创
文字链接方式举例2：
精美动画
文字链接方式举例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、图片链接方式：
链接地址"" target="_blank">地址"" border="0"/>
图片链接方式举例：
<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
<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： 标签的 target 属性规定在何处打开链接文档。target=_blank：链接文件的打开方式是在浏览器的新窗口中打开。（在链接标签中，这个代码相当重要，不能缺少。）
title：（标题的意思）是指鼠标指向图片时显示的文字。（这里可以输入您的“图书馆的名称”，也可以输入图片的名称等内容。）
alt：图片描述。当图片不能显示的时候，显示的内容。（输入的内容，基本上同上。但是，鼠标指向图片时不显示此文字内容，只有当图片不能显示的时候，此内容才会显示出来。）
2、链接文章举例：
http://www.360doc.com/content/12/0531/09/4127803_214898254.shtml
说明：本节的重点为掌握链接标签常用的三类表示方式，并要弄清楚链接标签的属性href和target的意思。
作业：应用三类链接标签各制作一篇文章。
2012年11月18日于北京
第 二 章 标 签 应 用
第二十节 链接标签的应用（2）
本节继续讲解链接标签的应用。先复习一下链接标签的语法，然后讲解三种“文字链接模块”代码。
链接的基本语法：
链接的网址"" target="_blank">页面中要显示的文字或者图片等内容
我们先来认识一下链接标签。：标签名称，链接标签。href： 标签的 href 属性用于指定超链接目标的 URL（路径、地址）。target：目标、靶子。 标签的 target 属性规定在何处打开链接文档。_blank：新窗口。：链接尾标签。
在链接标签中，target=_blank的设置是非常必要的。只有设置了这个属性与属值，才会在新窗口中打开链接的文章；如果不设置这个属性与属值，则会在原来的窗口中显示链接的文章，也就是说，原来的文章在浏览器窗口中就找不到了。
文字链接模块：
（1）纯文字链接模块：
代码：
target="_blank">魂牵梦绕清华园
target="_blank">恩爱夫妻妙在欣赏
target="_blank">如何进行“个人设置”
target="_blank">电脑学习——
图书馆知识
target="_blank">“个人图书馆”操作
方法介绍
target="_blank">“边框”的制作方法
及技巧
target="_blank">图书馆中的几个
数据
target="_blank">美丽的世界
target="_blank">背景动态图片
target="_blank">墓碑的格式
target="_blank">婆媳相处的秘笈
183020956.shtml?="" 06="" 0131="" 12="" www.360doc.com=""><font style="font-size:
21px;" color="#ff0000">美丽的倒影
target="_blank">个人图书馆中的
几个操作技巧
target="_blank">如何把个人图书馆的快捷方式放到桌面上
target="_blank">“个人图书馆”
操作方法介绍（补充版1）
target="_blank">“个人图书馆”操作
方法介绍（补充版2）
target="_blank">“图片中的滚动
文章”制作方法
target="_blank">人间天堂——
上海全景图(底图)
target="_blank">个人图书馆首页
导航
target="_blank">顶图的放置方法
（原创）
target="_blank">精美顶图任您选
com/content/12/0530/09/4127803_214664828.shtml" target="_blank"><font color=
"#ff0000">教您制作图书馆首页顶图（原创）
<a href="http://www.360doc.com/content/11/0903/06/4127803_145390586.shtml"
target="_blank">怎样“添加模块”
（2）移动文字链接模块：
代码：
<a href="http://www.360doc.com/content/12/0315/06/4127803_194439279.shtml"
target="_blank">
“个人图书馆”操作方法介绍
（补充版1）
<a href="http://www.360doc.com/content/12/0315/10/4127803_194467904.shtml"
target="_blank">
“个人图书馆”操作方法介绍（补充版2）
<a href="http://www.360doc.com/content/12/0310/08/4127803_193176548.shtml"
target="_blank">顶图”的
放置方法（原创）
<a href="http://www.360doc.com/content/12/0201/14/4127803_183379540.shtml"
target="_blank">如何把
个人图书馆的快捷方式放置到桌面上
<a href="http://www.360doc.com/content/11/0828/20/4127803_144075423.shtml"
target="_blank"> 个人图书馆
操作方法介绍
<a href="http://www.360doc.com/content/11/0916/21/4127803_148840493.shtml"
target="_blank">
文件夹设置
<a href="http://www.360doc.com/content/11/0907/22/4127803_146585608.shtml"
target="_blank">
献给您的礼物
<a href="http://www.360doc.com/content/11/0910/07/4127803_147194959.shtml"
target="_blank">
添加装饰
<a href="http://www.360doc.com/content/11/0829/06/4127803_144143579.shtml"
target="_blank">
首页换肤
<a href="http://www.360doc.com/content/11/0829/06/4127803_144142190.shtml"
target="_blank">
给文章作“标记和批注”的方法
<a href="http://www.360doc.com/content/11/0829/06/4127803_144142053.shtml"
target="_blank">
认识“目录树”
<a href="http://www.360doc.com/content/11/0821/17/4127803_142204458.shtml"
target="_blank">
如何上传图片
（3）表格中的移动文字链接模块：
代码：
<table border="0" cellPadding="20" width="362" background="
http://userimage2.360doc.com/12/0226/14/8424687_201202261433010349.gif"
height="375">
精品文章展示
shtml" target="_blank">
魂牵梦绕清华园
shtml" target="_blank">
恩爱夫妻妙在欣赏
shtml" target="_blank">
如何进行“个人设置”
shtml" target="_blank">
电脑学习——图书馆知识
shtml" target="_blank">
“个人图书馆”操作方法介绍
shtml" target="_blank">
“边框”的制作方法及技巧
shtml" target="_blank">
图书馆中的几个数据
shtml" target="_blank">
美丽的世界
shtml" target="_blank">
背景动态图片
shtml" target="_blank">
墓碑的格式
shtml" target="_blank">
婆媳相处的秘笈
183020956.shtml?="" 06="" 0131="" 12="" www.360doc.com="" content="">
美丽的倒影
shtml" target="_blank">
个人图书馆中的几个操作技巧
shtml" target="_blank">
如何把个人图书馆的快捷方式放到桌面上
shtml" target="_blank">
“个人图书馆”操作方法介绍（补充版1）
shtml" target="_blank">
“个人图书馆”操作方法介绍（补充版2）
shtml" target="_blank">
“图片中的滚动文章”制作方法
shtml" target="_blank">
人间天堂——上海全景图(底图)
shtml" target="_blank">
个人图书馆首页导航
shtml" target="_blank">
顶图的放置方法（原创）
shtml" target="_blank">
精美顶图任您选
作业：应用上面的3种链接代码，各制作一个模块。
代码入门教程(1)
代码入门教程(2)
代码入门教程(3)
代码入门教程(4)
代码入门教程(5)
代码入门教程(6)
代码入门教程(7)
代码入门教程(8)
代码入门教程(9)
代码入门教程(10)
代码入门教程(11)
代码入门教程(12)
代码入门教程(13)
代码入门教程(14)
代码入门教程(15)
代码入门教程(16)
代码入门教程(17)
代码入门教程(18)
2012年11月18日于北京
