|
标签是制作网页的基本素材，也是制作网页的手段与技巧。犹如修建房屋、修建大楼，需要有优质的砖瓦、水泥、钢材等等材料，还要有优秀的设计师、高级砖瓦匠。制作网页，就要有各种精美的标签，在各种标签中，把你准备好的材料，对号入座地放置进去，再有机的组合起来，就制作成为五彩缤纷的各具特色的漂亮网页了。 本章旨在为您提供我在学习代码过程中收集整理的各类标签以及我制作的一些优秀网页代码，供您参考，供您使用，使您进一步熟悉代码、熟悉标签，帮助您制作出更多更好的漂亮网页来。 本节为您提供的内容为：文字标签，图片标签和表格标签。 一、文字标签： 1、普通的文字标签：
<FONT color=#ff0000 size=7 face=隶书><STRONG>“春天没来”欢迎您</STRONG></FONT> 效果： “春天没来”欢迎您 解析： 普通的文字标签，不调用css样式。标签中设置文字颜色、字号、字体。 文字颜色，用十六进制颜色代码表示。“＃”符号是十六进制颜色的标识。后面有六位数字，前两位数字是表示红色的代码，中间两位数字是表示绿色的代码，后两位数字是表示蓝色的代码。每一位上的数字，可选择0－15，0－9分别用0－9表示，10用字母a表示，11用字母b表示，12用字母c表示，13用字母d表示，14用字母e表示，15用字母f表示。 字号最大为7号字，如果你设置的字号超过了7号，系统则以7号字显示。 <STRONG>标签是强调的意思，也就是粗体文字。 文字的内容，你可以随便替换。 2、用css样式表示的文字标签： <font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>“春天没来”欢迎您 </strong></font> 效果： “春天没来”欢迎您 用css样式表示的文字标签，样式中设置了多个属性与属值。这些属性与属值，依次为：行高、字号、字体风格、小型大写字母、文本粗细、文字颜色。 行高line-height：可以理解为两行文字的中心线之间的高度。这里选用了默认值，也可以用百分数来表示。 字号font-size：这里选用了pt做单位，也可选用px做单位。属值40可以任意替换。 字体风格font-style：这里选用了默认值。也可以选用斜体等风格的字体。 小型大写字母font-variant：只用于英语、拼音字母，对中文无实在意义。 文本粗细font-weight: normal：是定义文字的粗细的。一般选择默认值即可。 3、滤镜文字： 使用滤镜制作的文字是非常漂亮的文字。调用css滤镜样式制作文字，要把滤镜样式设置在块区标签或者段落标签之中，与文字标签相配合，才能够显示出滤镜效果来。也可以把滤镜样式设置在表格的列标签中，在单元格内输入文字标签与文字内容。 （1）段落标签与文字标签相配合制作滤镜文字： 代码1： <p style="width: 560px; filter: dropshadow(color=#01f000,offX=2,offY=2, Positive=0);"><font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face= "华文行楷"><b>“春天没来”欢迎您</b></font></p> 效果： 代码2： <p style="width: 560px; filter: dropshadow(color=#01f000,offX=2,offY=2, Positive=1);"><font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face=" 华文行楷"><b>“春天没来”欢迎您</b></font></p> 效果： 代码3： <p style="width: 769px; height: 106px; filter: shadow(color= #FF4500, strength=60);"><font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ffff00" face= "宋体">“春天没来”欢迎您 </font></p> 效果：
代码4：
<p style="width: 100%; color: red; line-height: 150%; font-family: 华文行楷; font-size: 40pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2, phrase=30);"><b>我爱北京天安门</b></p> 代码5： <p style="width: 560px; filter: glow(color=#ff００００, strength=0);"> <font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ffff00" face="华文行楷" ><b>“春天没来”欢迎您</b></font></p> 效果： 代码6： <p style="width: 560px; filter: glow(color=#ff００００, strength=0);"> <font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#00ff00" face= "华文行楷"><b>“春天没来”欢迎您</b></font></p> 效果： 代码7： <p style="width: 560px; filter: shadow(color=#000000);"> <font style="line-height: normal; font-size: 35pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ffffff" face="华文行楷"><b>学习代码 先学标签</b></font></p> 效果： （2）表格与文字标签相配合制作滤镜文字： 表格中的滤镜文字，把滤镜样式设置在表格的列标签中，单元格内输入文字标签与文字内容，表格标签中要设置一个闪光的背景图片。 代码1： 12/1920/7793984_52.gif" align="center">
<tbody>
<tr>
<td style="filter: mask(color=#3333ff);" align="center"><font style="font-size: 30pt;" color="#336699" face="隶书"><b>蛇年快乐 万事如意</b></font></td></tr> </tbody></table>
效果： 代码2： 11/0418/30306491_1" align="center">
<tbody>
<tr>
<td style="filter: mask(color=#ab00ff);" align="center"><font style="font-size: 30pt;" color="#006699" face="隶书"><b>蛇年快乐 万事如意</b></font></td></tr></tbody> </table>
效果： 代码3： 07/1017/25421788_2.jpg " align="center">
<tbody>
<tr>
<td style="filter: mask(color=#459908);" align="center"><font style="font-size: 30pt;" color="#33aa99" face="隶书"><b>朋友是最宝贵的财富</b></font></td></tr></tbody></table>
效果： 代码4： 0109/29311567_7.gif" align="center">
<tbody>
<tr>
<td style="filter: mask(color=#000000);" align="center"><font style="font-size: 30pt;" color="#336600" face="隶书"><b>朋友是最宝贵的财富</b></font></td></tr></tbody></table>
效果： 代码5： 1110/25434798_11" align="center">
<tbody>
<tr>
<td style="filter: mask(color=#0f5f00);" align="center"><font style="font-size: 30pt;" color="#ab6699" face="隶书"><b>欢迎您 远方的朋友</b></font></td></tr></tbody></table> 效果： 代码6： 1110/25434798_11" align="center">
<tbody>
<tr>
<td style="filter: glow(color=#ff００００, strength=0);" align="center"><font style= "font-size: 30pt;" color="#000099" face="隶书"><b>欢迎您 远方的朋友</b></font></td> </tr></tbody></table> 效果： 代码7： 代码8： /11/0418/30306491_1" align="center">
<tbody>
<tr>
<td style="filter: shadow(color=#000000);" align="center"><font style="font-size: 30pt;" color="#006699" face="隶书"><b>蛇年快乐 万事如意</b></font></td></tr> </tbody></table>
效果： 二、图片标签： 代码1： width="450"> 上面的代码图片标签中只设置了图片的宽度，没有设置图片的高度，图片的高度系统会根据该图片的比例自动调整。同理，如果图片标签中只设置了图片的高度，图片的宽度系统会根据该图片的比例自动调整。 代码2： 上面的代码设置了图片的高度与宽度，你可以根据自己制作网页的需要，修改图片的规格。如果不设置图片的高度与宽度，则会按照原图片的规格显示该图片。
代码3： dImg/2011/09/0200/16878443_20.gif" > 外边矩的设置方法可以用1 到 4 个值设置： 如果设置四个值（如：margin:10px 5px 15px 20px），其顺序为：上外边距 、右外边距、下外边距、左外边距。 如果设置三个值，其顺序为：上外边距 、右外边距和左外边距、下外边距。 如果设置两个值，其顺序为：上外边距 和下外边距、右外边距和左外边距。 如果设置一个值，是指所有的 4 个外边距。 也可以单独设置一个外边矩。 其方法为：margin-top: 20px;是上外边矩；margin-right: 30px;是右外边矩； margin-bottom: 30px;是下外边矩；margin-left: 20px;是左外边矩。
代码4： <img style="border: 4px solid rgb(153, 153, 255);" src="http://image58.360doc. com/DownloadImg/2013/01/2515/29834659_8.jpg" width="450"> 上面的代码设置了图片的边框线宽度、边框线样式与边框线颜色。设置了边框线的图片标签可以为图片添加一个简单的边框。 这三项属性的属值都可以修改。 边框线的样式：dotted是点虚线型；dashed是线虚线型；solid是实线型；double是双线型；groove是3D沟槽状；ridge是3D脊状；inset是3D内嵌式；outset是3D外嵌式。 代码5： <IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 300px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 448px; mouse015.ani), w-resize" id=albums src="http://image58.360doc.com/Downloa dImg/2013/01/2515/29834659_8.jpg"> 上面的代码设置了图片的多个属性与属值：图片四个边框的宽度、图片的外边距、图片的宽度、图片的高度、自定义鼠标指针样式cursor: url(http://imgup2.poco.cn/mypoco/ani/mouse015.ani),、身份标识码与图片地址。当你用鼠标箭头指向图片时，就会显示出你设置的特殊的鼠标指针图标。要修改此鼠标指针样式，你可以修改括号内的数字015试试，大部分的时候是可以正常显示的。括号后面的代码w-resize，是备用的常规的鼠标指针代码，以防你自定义的鼠标指针不能显示时，就会显示出此鼠标指针图标。 效果： 代码6： <img style="filter: FlipH;" title="雄鹰展翅" alt="“春天没来”欢迎您" width="334" height="122"> 上面的代码设置了“左右翻转滤镜样式”，应用“左右翻转滤镜样式”，可以制作出漂亮的对称图片。应用时，要设置一个一行二列的表格，把原图片与左右翻转的图片分别放入一个单元格中。 代码如下： <table border="0" cellSpacing="0" cellPadding="0" width="668" height="122">
<tbody>
<tr>
<td><img title="雄鹰展翅" alt="“春天没来”欢迎您" src="http://image11.360doc. com/DownloadImg/2010/06/1321/3612606_1.jpg" width="334" height="122"></td>
<td><img style="filter: FlipH;" title="雄鹰展翅" alt="“春天没来”欢迎您" src= width="334" height="122"> </td></tr></tbody></table> 代码7： <img style="filter: FlipV;" title="水中倒影" alt="“春天没来”欢迎您" width="670" height="446"> 上面的代码设置了“上下翻转滤镜样式”，应用“上下翻转滤镜样式”，可以制作出水中倒影般的图片效果。应用时，要设置一个两行一列的表格，把原图片与上下翻转的图片分别放入一个单元格中。 代码如下： <table border="0" cellSpacing="0" cellPadding="0" width="670" height="892">
<tbody>
<tr>
<td><img title="水中倒影" alt="“春天没来”欢迎您" width="670" height="446"></td></tr>
<tr>
<td><img style="filter: FlipV;" title="水中倒影" alt="“春天没来”欢迎您" width="670" height="446"> </td></tr></tbody></table>
代码8： <img style="width: 375px; height: 500px; filter: Alpha(opacity=100,style=2);" 上面的代码设置了羽化滤镜样式，羽化图片有一种朦胧的效果，非常美观。 效果： 三、表格标签： 代码： <table border="1" cellSpacing="1" cellPadding="3" width="650" bgColor="#00f200" height="210">
<tbody>
<tr>
<td>
</td></tr></tbody></table> 这是最基础的一套表格标签。下面的代码中都是只提供了表格标签，表格的其它标签，可从这里复制使用。 代码1： <table border="5" cellSpacing="10" borderColor="#990000" cellPadding="1" width="620" bgColor="#00ff00" height="300"> 上面的代码设置了边框线宽度、间距、边框线颜色、边距、表格宽度、背景图片、背景颜色和表格高度。(如果不想用背景图片，可以把背景图片地址“删除”，输入文字“背景图片”。) 代码2：<table style="border-width: 2px; border-style: solid; border-color: rgb(128, 128, 128) rgb(0, 0, 0) rgb(0, 0, 0) rgb(128, 128, 128); width: 205px; height: 43px;" title="" cellSpacing="9" align="center"> 上面的代码设置了边框线宽度、边框线样式、四条边框线的颜色、表格宽度、表格高度、表格标题、间距、背景图片和对齐方式。
代码３：<table border="1" cellSpacing="2" borderColorLight="#a2875a" borderColorDark="#000000" cellPadding="0" width="570"> 上面的代码设置了边框线宽度、间距、亮边框颜色borderColorLight（指左、上边框和单元格右、下边框颜色）、暗边框颜色（指右、下边框和单元格左、上边框颜色）、边距和表格宽度。（light 是明亮的意思，dark 是暗调的意思。） 代码４： <table border="5" cellSpacing="10" borderColor="#990000" cellPadding="0" width="620" background=http://image52.360doc.com/DownloadImg/2012/06/0415/24605894_3.jpg bgColor="#00ff00" frame="above" height="300">
这是只显示上边框的表格代码，可修改为只显示其它边框的表格代码。（表格的frame 属性控制着表格最外围的四条边框的可见性。frame=above 为只显示顶部边框；frame=below为只显示底部边框；frame=lhs为只显示左侧边框；frame=rhs为只显示右侧边框 ；frame=hsides为只显示水平方向的两条边框 ；frame=vsides为只显示垂直方向的两条边框 ； frame= void 为默认值，表示不显示表格最外围的边框；frame=box和frame=border都为同时显示四条边框。） 代码５： <table style="filter: Alpha(opacity=100,style=2);" border="0" cellSpacing="10" cellPadding="0" width="780" background="图片地址" align="center" height="780"> 上面的代码设置了Alpha滤镜样式。表格中设置的背景图片、单元格中放入的图片、输入的文字都会有渐变效果（文字的效果不大好）。 代码6： <table style="filter: shadow(color:#ADFF2F ,direction:120,strength:30);" border="1" cellSpacing="35" borderColor="#ee0000" cellPadding="0" align="center"> 上面的代码设置了滤镜的投影效果、边框线宽度、边框线颜色、间距、边距和对齐方式。表格中设置的背景图片、单元格中放入的的图片、输入的文字都会有投影效果。 代码７： <table style="border-color: rgb(0, 200, 0); left: 0px; top: 3px; width: 416px; height:550px; position: relative;" id="table1" border="5">
上 面的代码设置了边框颜色、边框线宽度、表格的宽度、表格的高度、相对定位代码、表格的身份。 表格标签中设置了相对定位代码，表格中放入的内容可设置绝对定位代码，给这些内容定位。 作业： 认真阅读上面讲解的各种标签及其说明，在你制作网页的时候，试着应用它们。 
2013年2月21日于北京
本节继续讲解精美标签汇集。下面讲解的内容为：一、表格列标签；二、移动标签；三、块区标签。 一、表格列标签： 表格的列标签中可以设置多种属性与属值。在不同的单元格中设置不同的属性与属值，会使网页效果更加丰富多彩。 代码： 设置了背景图片及其高度： <td background=http://image26.360doc.com/DownloadImg/2011/04/0600/10671896_8.jpg height="100%"> 代码： 单元格中设置了背景图片的起始位置、背景图片高度、背景图片的重复类型（竖向平铺）、背景图片的地址： <td style="background-position: 99% 100%; height: 106px; background-repeat: repeat-y;" background="http://image26.360doc.com/DownloadImg/2011/04/0600/10671896_8.jpg"> 代码： 单元格中设置了背景图片的起始位置、背景图片高度、背景图片的重复类型（横向平铺）、背景图片的地址： <td style="background-position: 99% 100%; height: 106px; background-repeat: repeat-x;" background="http://image26.360doc.com/DownloadImg/2011/04/0600/10671896_8.jpg"> 代码： 单元格中设置了背景图片的起始位置、背景图片高度、背景图片的重复类型（不平铺）、背景图片的地址： <td style="background-position: 99% 100%; height: 106px; background-repeat: 注释： background-position属性设置背景图像的起始位置。background-repeat属性设置是否及如何重复背景图像。no-repeat属值背景图像将仅显示一次。 代码： 单元格中设置了背景图片的雾化样式、背景图片的高度、宽度与地址： 代码： 单元格中设置了背景图片的翻转样式（上下翻转）、高度、宽度与地址： 代码： 单元格中设置了背景图片的翻转样式（左右翻转）、高度、宽度与地址： 代码： 单元格中设置了对齐方式、背景颜色与单元格宽度： <td style="text-align: left;" bgColor="#000000" width="100%"> 代码： 单元格中设置了单元格宽度、高度与背景颜色： <td style="width: 100px; height: 50px; background-color: rgb(0, 205, 0);">
代码： 单元格中设置了对齐方式、高度、列的合并： <td style="text-align: left;" height="0" colSpan="4" align="center"> 代码： 单元格中设置了对齐方式、高度、行的合并： <td style="text-align: left;" height="0" rowSpan="4" align="center"> 代码： 单元格中设置了水平对齐与垂直对齐方式： <td style="text-align: left;" vAlign="middle"> 代码： 单元格中设置了亮边框与暗边框的颜色： <td borderColorLight="#000000" width="125" borderColorDark="#eeeeee> 代码： 设置了标题、高度、表格的亮边框颜色、背景图片、一列跨越多行、宽度、表格的暗边框颜色的表头单元格（th为表头单元格，td为标准单元格）： 代码： 设置了blur（羽化）滤镜： <TD style="FILTER: blur(add=ture,direction=135,strength=10)"> ☆附一套表格标签： <table border="1" cellSpacing="1" cellPadding="3" width="650" bgColor="#00f200" height="210">
<tbody>
<tr>
<td>
</td></tr></tbody></table> 二、移动标签： 1、移动标签中的滤镜文字： 代码： <marquee style="width: 100%; color: rgb(228, 220, 155); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: glow(color=#000000);" behavior= "alternate" scrollAmount="3" FONT=""><b>欢迎浏览 欢迎收藏</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(255, 255, 0); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: glow(color=#0000ff,strength=4);" behavior="alternate" scrollAmount="3" FONT=""><b>欢迎浏览 欢迎收藏 </b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(0, 200, 0); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: glow(color=#000000,strength=4);" behavior="alternate" scrollAmount="3" FONT=""><b>欢迎浏览 欢迎收藏</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(255, 0, 155); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: shadow(color=#000000);" behavior= "alternate" scrollAmount="3"><b>欢迎浏览 欢迎收藏</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(8, 220, 155); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: shadow(color=#AF0530);" behavior= "alternate" scrollAmount="3"><b>欢迎浏览 欢迎收藏</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(8, 220, 155); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: shadow(color=#f4500,strength=4);" behavior="alternate" scrollAmount="3"><b>欢迎浏览 欢迎收藏</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(0, 0, 0); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: dropshadow(color=#ff8B22,offX=5,offY=3,Positive=1); " behavior="alternate" scrollAmount="3"><b>学习代码 贵在坚持</b></marquee> 效果：
代码：
<marquee style="width: 100%; color: rgb(0, 0, 0); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: dropshadow(color=#ff8B22,offX=5,offY=5,Positive=0); " behavior="alternate" scrollAmount="3"><b>学习代码 贵在坚持</b></marquee> 效果： 代码： <marquee style="width: 798px; height: 120px; color: rgb(255, 255, 0); line-height: 150%; font-family: 宋体; font-size: 30pt; filter: shadow(color= #FF4500, strength=60); " behavior="alternate" scrollAmount="3"><b>学习代码 乐趣无穷</b></marquee> 效果： 代码： <marquee style="width: 100%; color: rgb(228, 0, 0); line-height: 150%; font-family: 隶书; font-size: 30pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); " behavior="alternate" scrollAmount="3"><b>花甲老人学代码难不难？不难！</b></marquee> 效果： 代码：
<MARQUEE style="FILTER: glow(color=#ffoooo, strength=0)"><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 30pt; FONT-WEIGHT: normal" color=#ffff00><STRONG>立下愚公志 登上代码山 </STRONG></FONT></MARQUEE> 或者
<MARQUEE style="FILTER: glow(color=#ff００００, strength=0)">
<FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 30pt; FONT-WEIGHT: normal" color=#ffff00><STRONG>立下愚公志 登上代码山 </STRONG></FONT></MARQUEE> （奇怪不？滤镜颜色中的零是英语中的o或者是汉语中的0！） 效果： 代码： <MARQUEE style="FILTER: shadow(color=#000000); LINE-HEIGHT: 150%; WIDTH: 100%; FONT-FAMILY: 华文彩云; COLOR: white; FONT-SIZE: 35pt" scrollAmount=3 FONT=""> <STRONG>学习代码 先学标签</STRONG></MARQUEE>
效果： 三、块区标签： 1、设置了文字颜色与对齐方式： <div style="color: rgb(0, 0, 255);" align="center"> 2、设置对齐方式： <div align="center">
3、设置滚动条： <div style="height: 360px; overflow: auto;"> 4、设置宽度、高度和背景颜色： <DIV style="BACKGROUND-COLOR: #0058ff; WIDTH: 200px; HEIGHT: 200px"></DIV> 或： <div style="width: 800px; height: 100%; background-color: rgb(0, 140, 255);"> 5、设置外边距、宽度、高度和背景颜色： <div style=margin:5px 10px 20px 30px;width:200px; height:200px; background-color:White;> 6、设置四个内边距、宽度、高度和背景颜色： <div style="padding:5px 10px 20px 30px;background-color:Black; width:500px;height:500px;"> 7、设置定位方式：position:relative（定位方式：相对定位) <div style="position:relative; top:10px;left:10px;width:140px; height: 140px; background-color:White;"> 8、设置定位方式：position:absolute（定位方式：绝对定位） <div style="position:absolute; top:60px;left:60px; background-color:Silver; width:100px;height:100px;"> 9、设置了块区缩进： <DIV style="TEXT-INDENT: 2em;">
2013年2月21日于北京
| 
