第 二 章 标 签 应 用
第十九节 链接标签的应用(1)
![“春天没来”欢迎您](http://image26.360doc.com/DownloadImg/2011/04/0523/10671873_161.gif)
从本节开始讲解链接标签的应用。今天讲解三种链接方式:文字链接方式、图片链接方式和文章地址链接方式。
“链接标签”的重要性,我在代码入门教程(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
![“春天没来”欢迎您](http://image12.360doc.com/DownloadImg/2010/07/1711/4090480_2.jpg)
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
![“春天没来”欢迎您](http://image12.360doc.com/DownloadImg/2010/07/1711/4090480_2.jpg)
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)
![点击鼠标左键查看原图](http://image7.360doc.com/DownloadImg/2010/01/1117/2148846_33.gif)
本节继续讲解链接标签的应用。先复习一下链接标签的语法,然后讲解三种“文字链接模块”代码。
链接的基本语法:
<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>
![飞驰的小汽车 =“春天没来”欢迎您](http://image55.360doc.com/DownloadImg/2012/11/1118/28154121_1.jpg)
![“春天没来”欢迎您 =“春天没来”欢迎您](http://image55.360doc.com/DownloadImg/2012/11/1118/28154121_1.jpg)
(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日于北京