|
常用标签代码及其应用 代码是由标签组成的。HTML语言标签代码，可以巧妙的将多种元素组合在一起，制作成各种漂亮的网页。因此电脑操作必须掌握一定的标签代码知识。学代码必须从学标签开始。现将我重点学习的几个最最常用的标签及常用代码小结如下。
一、区段标签 <DIV> <div>标签是区段标签，称为区隔标记 ，是大块头，是最常用的标签之一，它与尾标签之间可以包含表格、移动、图片、段落等不同的内容。它的作用是设定表格、画、字等的摆放位置。 在<div>区段标签中，可以添加许多属性。添加属性的方式，大部分是以“样式”（style）的方式添加的。现举例如下： （1）设置对齐方式：
<div align="center"> 居中
（2）设置宽度、高度和背景颜色：
<div width=200px;height=200px bg=ffff00> 或用css样式表示属性如下： <div style="width:200px;height:200px;background-color:Black;"> background-color:Black---背景色为Black色即黑色。 （3）设置外边距、宽度、高度和背景颜色：
<div style="margin:5px 10px 20px 30px;width:200px; height:200px;
background-color:White;"> background-color:White---背景色为White色即白色 （4）设置定位方式： 相对定位：<DIV style="POSITION: relative" class=divBorderStyleRelative> 绝对定位： <DIV style="POSITION: absolute; TEXT-ALIGN: right; TOP: 50px; LEFT: 300px" class=divBorderStyle> 意思是绝对定位在 ： 距顶边50，距左边300处。 二、表格标签 <TABLE> 表格标签是常用标签之一。边框也是表格，是添加了装饰的表格。表格标签可以理解成它是为布展东西而设的一个展台。大表格里还可以设小表格以方便使用。
表格标签，是一套4个标签。它包括表格标签<TABLE>、 主体标签<TBODY>、行标签
<TR>、列标签<TD>，在使用的时候，相互配合，缺一不可。首标签 <TABLE>至尾标签</TABLE>之间所有内容都在该表格上展示。 表格标签常用属性及表示方法：
border=0 边框线的宽度 （数值0时为隐性表格）
bordercolor 边框颜色 cellspacing =0 单元格之间的距离 （数值0时为隐性表格）
cellpadding=0 内容与边线之间的距离 （数值0时为隐性表格）
background=图片地址 表格的背景图片
（或bgColor=#00ff00 是表格的背景颜色） WIDTH: 1000px 表格的宽度 height=165 px 表格的高度 例、 <TABLE border=0 cellSpacing=0 cellPadding=0 background= http://userimage5.360doc.com/13/1225/15/2904667_201312251547000215.jpg WIDTH: 1000px height=165><TBODY><TR><TD></TABLE> 注：上例中边框线宽度为0，故未再列边框颜色；是图片背景故
不能再列背景颜色 。 三、移动标签 <marquee>
移动标签，是很重要的一个标签。文字、图片、边框、音画，甚至整个网页，都可以应用移动标签让它们动起来，其效果真是变幻莫测，这里只做初步探讨。
移动标签的移动对象在首尾标签之间。 移动标签常用属性及表示方法：
width=600px 移动范围宽度为600
height=50px 移动范围高度为50 scrollAmount="3" 移动速度为3
behavior="alternate" 移动方式为来回移动 direction=？ 移动方向=向上（或向下左右）：
direction=up 向上 ； direction=down 向下 direction= left 向左； direction=right 向右
例、<marquee width=600px height=50px scrollAmount="3" behavior="alternate" >
四、贴图标签<img> 在制作网页的时候，我们常常会用到图片，按着我们的要求大小用贴 图标签把它粘贴在需要的地方。常用的属性是图片的宽度、高度、地址及 四边距。如果不设宽度高度，则按原图粘贴。 例1、设宽度高度的贴图标签：
<img style="width: 300px; height: 400px;" src="http://
image4.360doc.com/DownloadImg/2009/9/21/88761_6265622_7.jpg"> 分析：1、先用CSS样式设置了图片的宽度和高度 ： width: 300px; height: 400px 然后是图片地址 src="图片地址"
2、贴图中，有时需要把图片翻转贴，所以有的贴图标签中加了一个
“ style="FILTER: FlipH"” ，它是图片水平翻转属性。如下贴图标签：
<img style="FILTER: FlipH" src=" 图片地址" height=150>
但其翻转属性对有些图片不适用！！！
例2、设四边距的贴图标签： 分析：margin 是边缘的意思。该代码用CSS样式设置了图片四个外边距
（margin：0px 10px 0px 0px）（即至上边距0px，右边距10px ， 下边距0px 左边距0px）。 然后是图片地址。 例3、设边框、四边距、宽度、高度的贴图标签：
分析：用CSS样式设置了图片的边框宽度（border-width：0px）、
图片外边距（margin：0px）、即四边均为0px。 图片的宽度（width：1000）和高度（heigght:305 若：margin:10px 5px ;（设置了两个值）则指上外边距和下外边距为10px、 左外边矩和右外边距为5px。 若：margin:10px （设置了一个值）则是所有 4 个外边距都是10px
五、文字标签<FONT>
制作网页离不开文字，这就必须用文字标签。文字标签常常与移动等标签
结合使用。 文字标签常用的属性有：字体（face）、字号（size）、颜色（color）。 例1、普通文字标签： <font face="宋" size="6" color="#ffff00">“清泉书馆欢迎您” </font>
分析： 上例中，字体 为宋（实为仿宋体）字号为 6，颜色 黄色，
字号size=6 的表示方法还可以用css样式设置如例2.
例2、用css样式表示字号和字体的文字标签： <FONT style="FONT: 28pt 楷体, 楷体_GB2312, SimKai" color=#ff0000 > <b>
“清泉书馆欢迎您 ” </b></FONT> 需换行时，写完前句后接加换行标签<br> 有时需用空格： 分析： css样式 字号 28；字体 楷体-GB2312；字色 红色。 例3、特殊表示法---少用
<font face='楷体_gb2312' color='blue' size='+2'><b> “清泉书馆欢迎您 ” </b></FONT> 分析： 字体 楷体-GB2312 的另种表示法，但不是css样式，且 gb必须小写，颜色必须用字母。 六、其它 1、<EMBED> 多媒体标签，多用于嵌入flash 动画 2、 <A> 链接标签。 如：<A href="要链接的网址" target=_blank>内容</A>。 <A>是链接标签名称。
href：指定链接目标。href 等号后面的内容即“要链接的网址”。链
接对象可以是您的图书馆内的任何文章、图片的地址，也可以 是其它网站的任何文章图片的地址。 target=_blank ：是指在浏览器的新窗口中打开链接。这个属性相当重 要，不能缺少。 内容：一般是文章的题目，当然包括文字标签以及标题文字。
3、 <p>是在区段内分小段落时使用的段落标签。小段落结束时用尾标签 </p>小封口。 4、<SPAN> 它不会制作什么。只是定义一个小区域内的某些属性数值。 如果把区段大块头<div>比作块级大容器，那么<span>可以说是行级 小容器。如 <SPAN style="COLOR: #ff0000"> 5 、 style="FILTER: FlipH" 它是图片水平翻转属性。在贴图标签中有了它即可 实现图片水平翻转。 七、应用代码 例1、图片并列代码 <DIV> <TABLE style="WIDTH: 1000px" border=0 cellSpacing=0 cellPadding=0 height=180> <TBODY><TR><TD> <IMG src="图片地址" width=300 height=180> <IMG src="图片地址" width=300 height=180> <IMG src="图片地址" width=300 height=180> </TD></TR></TBODY></TABLE> </DIV> 分析：①、这是最简单的一个代码。只有表格和贴图两种主要标签。这里开头设了一个 <div>，最后是</div>。表示全代码为一个区段。 ②、为了把多幅图片贴在一张图片上，设置了一个透明表格标签<TABLE>及配套的<TBODY> <TR><TD>（4个标签成套一个不少）。以便在表格中布置图片。 ③、几个贴图标签<IMG>，连排即可，每幅图片的宽度和高度值都是自己设定的。但 注意连排的总宽度不要超过表格的宽度。 ④、若想使并列的图片移动，则在前面加个移动标签即可。 例2、并列图片移动代码 <DIV align=left> <MARQUEE style="WIDTH: 1000px; HEIGHT: 165px" behavior=alternate scrollAmount=1> <TABLE style="WIDTH: 1000px" border=0 cellSpacing=0 cellPadding=0 height=165> <TBODY><TR><TD> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> </TD> </TR></TBODY></TABLE></MARQUEE> </DIV> 分析：1、该代码主要由移动标签、表格标签、贴图标签三部分组成。 2、移动标签 用style设置了移动范围：宽1000，高165；来回移动、速度为1。 移动对象为贴在表格中的多幅图片。 表格标签： 表格标签中 用style设置了表格的宽度，而后设 置了边框宽度为0，各间距为0，高度为165 接着贴图：4个贴图标签<IMG>。 <IMG>标签中用style设置了边框（BORDER）样式：底（BOTTOM）、左（CEFT）、 上（TOP）、右（RIGHT）均为0，边框宽度border为0。然后是图片地址和自定 的图片宽度与高度。 3、从尾到头的各尾标签。从</DIV><DIV>可知全部内容都抱在此区段中。 4、补充说一下，这里开头设了一个<DIV align=left>（左对齐），最后是</div>。表示全代 码为一个区段。 参考图片地址： http://userimage6.360doc.com/15/0707/13/3459959_201507071310500643.gif http://userimage2.360doc.com/11/0623/21/3459959_201106232154240670.gif http://image18.360doc.com/DownloadImg/2010/11/2814/7176269_1.jpg http://image18.360doc.com/DownloadImg/2010/11/2814/7176389_10.jpg http://image14.360doc.com/DownloadImg/2010/08/2810/4898234_8.jpg 附：图片并列移动无缝连接代码
<marquee height="165" behavior="alternate" width="1000" scrollamount="2" style="height: 165px; width: 1000px;">
<table style="WIDTH: 1000px" border="0" cellspacing="0" cellpadding="0" height="165">
<tbody>
<tr>
<td><img src="http://userimage8.360doc.com/17/0325/14/3459959_201703251409130945888868.gif" width="1200" height="165"></td>
<td><img src="http://userimage8.360doc.com/17/0325/20/3459959_201703252026450195164773.gif" width="1200" height="165"></td>
</tr></tbody></table></marquee>
<div></div></marquee> 例3、并列图片滚动加移动字代码 <DIV style="POSITION: relative" class=divBorderStyleRelative align=left> <MARQUEE style="WIDTH: 1000px; HEIGHT: 170px" height=170 behavior=alternate width=1000 scrollAmount=1> <TABLE border=0 cellSpacing=0 cellPadding=0 height=165 WIDTH: 1000px> <TBODY> <TR> <TD> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> <IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" border=0 src="图片地址" width=1000 height=165> <DIV style="POSITION: absolute; TOP: 20px; LEFT: 300px" class=divBorderStyle> <MARQUEE direction=up height=120 width=300 scrollAmount=3> <FONT style="FONT: 24pt 楷体, 楷体_GB2312, SimKai" color=#ff0000> <B>恭祝朋友 节日愉快<BR>阖家欢乐 幸福安康 </B></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE></MARQUEE> </DIV> 分析： 该代码由区段标签、移动、表格、贴图、移动字组成。 ①、前面区段标签<div>中用relative设置了相对定位可以防止后面的移动文字在 某些情况下飘移到别处。最后</div>封口表示全代码为一个区段。 ②、第一个移动标签：移动图片用。 ③、表格标签：透明表格，给显示建一个展台。 ④、贴图标签：<IMG>若干。 ⑤、移动字部分由绝对定位标签、移动标签、文字标签、加粗标签和文字组成。 绝对定位标签<div>：POSITION 定位属性；absolute 绝对定位； TOP: 20px 距顶部垂直启点，值越大越靠下部，必要时可设负值； LEFT: 300px 是距左边启点，值越大越靠右，必要时也可设负值。 第二个移动标签：移动文字用。移动方向、范围、速度等。 文字标签中：FONT: 24pt 楷体--是字号；楷体_GB2312, SimKai--是字体； color=#ff0000--是字的颜色。 ⑥、若把文字标签和文字有关换成贴图标签，则可成为小图片在大图片中移动。 参考图片地址： http://userimage2.360doc.com/11/0102/20/328003_20110102201530214.jpg http://userimage2.360doc.com/11/0623/21/3459959_201106232154240670.gif
http://image18.360doc.com/DownloadImg/2010/11/2814/7176269_1.jpg http://image18.360doc.com/DownloadImg/2010/11/2814/7176389_10.jpg 例4、小图片在大图片上飘飞代码 <DIV align=center> <TABLE style="WIDTH: 620px; HEIGHT: 450px" border=0 cellPadding=0 background= 背景图片地址 align=center> <TBODY><TR><TD> <MARQUEE style="WIDTH: 620px; HEIGHT: 450px" direction=down scrollAmount=2> <MARQUEE direction=right behavior=alternate> <IMG style="FILTER: FlipH" src=" 小图片地址" height=150> </MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></DIV> 分析： ①、该代码的结构特点：表格标签（图片背景）+两个移动标签+贴图标签 表格标签<table>是图片背景。 ②、移动部分有两个移动标签。 第一个移动标签规定了图片的移动范围WIDTH: 620px; HEIGHT: 450px、 图片移动速度； 垂直移动向下direction=down（或向上direction=up） 第二个移动标签规定了水平移动向右direction=right（或向左direction=ceft） 及来回移动 behavior=alternate 。 ③、下面才是贴图标签<IMG>，是移动对象。 贴图标签中有一个 style="FILTER: FlipH" ，它是图片水平翻转属性（但其 翻转属性对有些图片不适用）。不需要时可把它删除；小图片地址和图片
高度height=150都由自己选定。
④、如果小图片是透明flash图片，则必须把<IMG>标签全部删除，全部换成多媒体
标签如下： <EMBED height=200 type=application/x-shockwave-flash width=400 src=透明flash小图片地址 wmode="transparent"> 有关数值大小可进行适当调整。 参考背景图片地址：
http://image21.360doc.com/DownloadImg/2011/01/0714/8296724_15.jpg 参考小图片地址： http://userimage6.360doc.com/15/0902/20/3459959_201509022059160347889894.gif http://image49.360doc.com/DownloadImg/2012/02/2016/21665632_8 http://xuanfei./2009fla/yanhua/6.swf 例5、定位嵌入透明slash动画代码 <div style="POSITION: relative"> <TABLE border=0 cellSpacing=0 borderColorLight=#000000 borderColorDark=#000000 cellPadding=0 background=背景图片地址 align=center width=1000 height=165> <TBODY><TR><TD> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 0px" height=170 type=application/x-shockwave-flash align=right width=220 src=透明slash动画地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent"> <EMBED style="POSITION: absolute; DISPLAY: block; TOP: 5px" height=170 type=application/x-shockwave-flash align=right width=690 src=透明slash动画地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent">
<EMBED style="POSITION: absolute; DISPLAY: block; TOP: 5px" height=140 type=application/x-shockwave-flash align=right width=850 src=透明slash动画地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent">
<EMBED style="POSITION: absolute; DISPLAY: block; TOP: 63px" height=100 type=application/x-shockwave-flash align=right width=1500 src=透明slash动画地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent">
<EMBED style="POSITION: absolute; DISPLAY: block; TOP: 45px" height=150 type=application/x-shockwave-flash align=right width=1000 src=透明slash动画地址 allowscriptaccess="never" allownetworking="internal" loop="0" autostart="0" wmode="transparent">
</TD></TR></TBODY></TABLE> </div> 分析：①、先以区段标签设置了相对定位属性。全部标签都在一个区段中。 ②、表格标签是图片背景。一个显示舞台。 ③、 <EMBED>五个嵌入多媒体标签， 绝对定位嵌入flash动画： display:block----显示； TOP: 0px" height=170 ----绝对定位位置； type=application/x-shockwave-flash --表示类型是flash 类型；align=right --- 右对齐 ； width=690 --图片的宽度；透明flash动画地址；allowscriptaccess="never" allownetworking= "internal"---永远接受脚本访问 ；loop="0"--自由循环；autostart="0"--- 从0开始； wmode="transparent"--- wmode是透明的意思；transparent意思是背景透明。 有 wmode="transparent 各种背景色的flash动画就透明，其它图片无效， 如果它出了问题flash就不透明了。 ③、本代码只适用于定位嵌入透明flash动画, 其他动画图片不适用。 参考背景图片地址： http://userimage6.360doc.com/15/0608/12/3459959_201506081249460910.gif
参考透明slash动画地址： http://pendant.360doc.com/1/3.swf 花瓣飘落（湖蓝色底） http://webdisk./dllc/1常用flash/鸟横飞.swf http://pendant.360doc.com/1/72.swf 鸭子浮水（黑色底） http://pendant.360doc.com/1/5.swf 郁金香（湖蓝色底） http://webdisk./dllc/1常用flash/男女背影.swf 例6、定位粘贴各种动画及移动字代码（flash动画不适用） <DIV style="POSITION: relative" >
<TABLE style="TEXT-ALIGN: left; WIDTH: 1000px; HEIGHT: 165px" title=清泉书馆 border=0 cellSpacing=0 cellPadding=0 background=背景图片地址 align=center >
<TBODY><TR ><TD > <IMG style="POSITION: absolute; WIDTH: 120px; HEIGHT: 100px; TOP: 0px; LEFT: 140px" class=divBorderStyle border=0 src="透明动画地址">
<IMG style="POSITION: absolute; WIDTH: 100px; HEIGHT: 100px; TOP: 0px; LEFT: 230px" class=divBorderStyle border=0 src="透明动画地址">
<IMG style="POSITION: absolute; WIDTH: 105px; HEIGHT: 105px; TOP: 0px; LEFT: 800px" class=divBorderStyle border=0 src="透明动画地址">
<IMG style="POSITION: absolute; WIDTH: 95px; HEIGHT: 95px; TOP: 0px; LEFT: 880px" class=divBorderStyle border=0 src="透明动画地址">
<DIV style="POSITION: absolute; TEXT-ALIGN: right; TOP: 80px; LEFT: 200px" class=divBorderStyle> <MARQUEE style="WIDTH: 600px" scrollAmount=3> <FONT style="FONT-SIZE: 33px" color=#ffff00> <STRONG> 您想写的字 </STRONG></FONT></MARQUEE></DIV></TD></TR</TBODY></TABLE> </div> 分析：①、全部标签都在一个区段中。 先用<div>设置了相对定位。 表格标签（设置了图片背景、标题显示“title=清泉书馆”等 ）。四个表格标签 成套出现一个不缺。 ②、绝对定位贴图标签<IMG>。。其数值根据需要调整。适用于一般动画图片。 ③、绝对定位标签及移动文字 ：移动标签、文字、加粗共4个标签。 从末至首，尾标签一个不缺。 参考背景图片地址：
http://userimage5.360doc.com/14/0704/21/3459959_201407042102400429.jpg 参考透明动画地址： http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_30.jpg http://image86.360doc.com/DownloadImg/2013/09/2413/55242674_1.gif http://image58.360doc.com/DownloadImg/2013/01/2123/29756826_41.jpg http://image51.360doc.com/DownloadImg/2012/04/2400/23445801_73 http://userimage3.360doc.com/12/1222/20/3459959_201212222003340478.gif 综合上述六例可见： 1、前边的<div> 开始至后边</div>结束, 期间的所有内容都属这个区段， 这个标签都把它们抱进去了。同样道理，表格标签<table>开始至后边 </table>结束, 期间的所有内容都抱在此表格中了。 2、多个<IMG>（或多个<EMBED>）连排时，可直接连排。 3、需要定位的比如移动文字或粘贴的动画等，则必须设置定位属性。 为确保其位置确定而不飘动，必须采取以下措施： ①、在最前边以区段标签设置相对定位属性的标签<DIV style="POSITION: relative" > ②、定位对象处再以区段标签设置绝对定位属性及TOP值、CEFT值，如： <DIV style="POSITION: ;absolute TEXT-ALIGN: right; TOP: 50px; LEFT: 280px"
class=divBorderStyle> 必要时如TOP值可设负值。 4、小图片在大图片上飘飞。必须设置两个移动标签，除必须设置移动范围、 移动速度外，还必须设置向上、向下、来回移动属性。 5、多行文字滚动。移动字代码中，移动标签中加入向上属性direction=up （或向下direction=down）和所写文字之间加换行标签<br>，调整文字大小， 可实现多行文字向上（或向下）滚动。 6、两种贴图标签各显其能： ①、普通贴图标签<IMG>适用于粘贴一般图片或一般动画。flash图片无效。
②、多媒体嵌入标签<EMBED>只适用于嵌入flash图片或动画，其它图片无效。 上述例码都是一个区段结构，比较简单。下面是一个多区 段综合应用代码。 例7、多区段综合应用代码--我的空间导航 <DIV align=center> <TABLE style="TEXT-ALIGN: left; BACKGROUND-COLOR: #fff68f; WIDTH: 300px; HEIGHT: 380px" border=1 cellSpacing=1 cellPadding=0 bgColor=#fff68f align=center> <TBODY><TR><TD> <DIV> <IMG style="WIDTH: 230px; HEIGHT: 110px" src="小图片地址"> <IMG style="WIDTH: 30px; HEIGHT: 44px" src="小图片地址"> </DIV> <DIV align=center> <TABLE style="WIDTH: 280px; BORDER-COLLAPSE: collapse" border=1 cellSpacing=0 borderColor=#ff6600 cellPadding=2> <TBODY><TR><TD> <MARQUEE style="WIDTH: 300px; HEIGHT: 18px" behavior=alternate scrollAmount=3> <IMG style="WIDTH: 12px; HEIGHT: 12px" src="小图片地址"> <FONT style="FONT-FAMILY: 隶书,SimLi" color=#00ff00 size=3> <STRONG>我的空间导航 <IMG style="WIDTH: 12px; HEIGHT: 12px" src="小图片地址"> </STRONG></FONT></MARQUEE></TD></TR></TBODY></TABLE></DIV> <DIV align=center> <MARQUEE direction=up height=80 width=300 scrollAmount=1 scrollDelay=1> <FONT style="FONT-SIZE: 16px" color=#800000> <STRONG> 【清 泉 书 馆 推 荐】 </STRONG></FONT> <BR> <FONT style="FONT-SIZE: 12px" color=#ff0000> 【精选】 </FONT> <A href="链接文章地址" target=_blank > <FONT style="FONT-SIZE: 12px" color=#0000ff> 链接文章标题 </FONT></A> <BR> <FONT style="FONT-SIZE: 12px" color=#ff0000> 【精选】 </FONT> <A href="链接文章地址" target=_blank > <FONT style="FONT-SIZE: 12px" color=#0000ff> 链接文章标题 </FONT></A> </MARQUEE></DIV> <DIV align=center><IMG style="WIDTH: 270px; HEIGHT: 40px" src="图片地址"> </DIV> </TD></TR></TBODY></TABLE></DIV> 参考链接文章地址和标题
http://www.360doc.com/showWeb/0/0/499052077.aspx 常用标签代码及其应用 http://www.360doc.com/content/10/1123/13/3459959_71688391.shtml 养成良好习惯 http://www.360doc.com/showWeb/0/0/254147672.aspx 神奇念力威力无穷 分析：上码中 <A href="链接文章地址" target=_blank ><FONT style="FONT-SIZE: 12px"
color=#0000ff> 链接文章标题 </FONT></A> <A>是链接标签名称。
href：指定链接目标。href 等号后面即要链接的网址。链
接对象可以是您的图书馆内的任何文章、图片的地址，也可以 是其它网站的任何文章图片的地址。 target=_blank ：是指在浏览器的新窗口中打开链接。这个属性相当重 要，不能缺少。 后面是要链接文章的标题和文字标签。 下面我们重点分析该代码的结构： 1、最前面先以<DIV align=center>水平居中和<TABLE ><TBODY><TR><TD> 设了一个大表格，它是个布置东西的大展显示台，五个标签统管全局，全部布置完后最后才以这五个尾标签总封口。我们看到在大表格中先后布展了四个从<div>到</div>也就是四大块。 2、第一大块是<div>后贴了两幅小图片，完成后立即以</div>区段封口。 3、第二大块是从<DIV align=center>水平居中开始，在大表格中布置东西。这里用四个一套的表格标签设置了一个小表格。在小表格中为了水平移动图片、文字、图片三项内容，具体设置了移动标签、贴图标签、文字标签、文字“我的空间导航”、贴图标签。然后是该区段的尾标签 </STRONG></FONT></MARQUEE></TD></TR></TBODY></TABLE></DIV> 区段封口。至此，小表格内布置完毕。 4、第三大块是从<DIV align=center>水平居中开始，先设了一个移动标签，这个移动标签移动本区段各项内容，都是垂直向上。然后继续在大表格中布置东西。这里要解决多行文字移动问题，而且文字大小、颜色不同，又分行。所以可分为几个小段落。 ①、“清泉书馆推荐”几个字的移动为第一小段。包括文字标签、加粗标签、文字“清泉书馆推荐”，然后段落小封口</STRONG></FONT>。 ②、换行<BR>后“ 【精选】”二字的移动为第二小段。包括文字标签、文字“精选”，然后段落小封口</FONT>。 ③、链接第一篇文章为第三小段。包括链接标签<A>（含链接文章的地址）、文字标签、“文章标题”。然后段落小封口</FONT></A>。 ④、重复②③再链接第二篇文章，第三篇文章…… ⑤、区段封口。以</MARQUEE></DIV>实现区段封口。 5、最后一个区段<DIV align=center>开始，水平居中粘贴了一幅图片而后区段尾标签 </DIV>区段封口。 6、总封口。全部布置完之后，以尾标签</TD></TR></TBODY></TABLE></DIV>总封口全部结束。 |
|
|
