怎样使用特效代码

当你看到一个用HTML语做出的漂亮的贴子时，一定很想知道是怎么做的，但当你一看到那些密密麻麻的代码时，头又晕了。怎么办呢？先学习和熟悉如何加代码、怎么识别代码标识吧。我也仅仅在自我摸索中学到了一点点东西，仅供大家参考，多提宝贵意见。

标记类型译名或意义作用备注

文件标记

<HTML>●文件声明让浏览器知道这是 HTML 文件

<HEAD>●开头提供文件整体资讯

<TITLE>●标题定义文件标题，将显示于浏览顶端

<BODY>●本文设计文件格式及内文所在

排版标记

○说明标记为文件加上说明，但不被显示

<P>○段落标记为字、画、表格等之间留一空白行

<BR>○换行标记令字、画、表格等显示于下一行

<HR>○水平线插入一条水平线

<CENTER>●居中令字、画、表格等显示于中间反对

<PRE>●预设格式令文件按照原始码的排列方式显示

<DIV>●区隔标记设定字、画、表格等的摆放位置

<NOBR>●不折行令文字不因太长而绕行

<WBR>●建议折行预设折行部位

字体标记

<STRONG>●加重语气产生字体加粗 Bold 的效果

<B>●粗体标记产生字体加粗的效果

<EM>●强调标记字体出现斜体效果

<I>●斜体标记字体出现斜体效果

<TT>●打字字体Courier字体，字母宽度相同

<U>●加上底线加上底线反对

<H1>●一级标题标记变粗变大加宽，程度与级数反比

<H2>●二级标题标记将字体变粗变大加宽

<H3>●三级标题标记将字体变粗变大加宽

<H4>●四级标题标记将字体变粗变大加宽

<H5>●五级标题标记将字体变粗变大加宽

<H6>●六级标题标记将字体变粗变大加宽

<FONT>●字形标记设定字形、大小、颜色反对

<BASEFONT>○基准字形标记设定所有字形、大小、颜色反对

<BIG>●字体加大令字体稍为加大

<SMALL>●字体缩细令字体稍为缩细

<STRIKE>●画线删除为字体加一删除线反对

<CODE>●程式码字体稍为加宽如<TT>

<KBD>●键盘字字体稍为加宽，单一空白

<SAMP>●范例字体稍为加宽如<TT>

<VAR>●变数斜体效果

<CITE>●传记引述斜体效果

<BLOCKQUOTE>●引述文字区块缩排字体

<DFN>●述语定义斜体效果

<ADDRESS>●地址标记斜体效果

<SUB>●下标字下标字

<SUP>●上标字指数（平方、立方等）

清单标记

<OL>●顺序清单清单项目将以数字、字母顺序排列

<UL>●无序清单清单项目将以圆点排列

<LI>○清单项目每一标记标示一项清单项目

<MENU>●选单清单清单项目将以圆点排列，如<UL>反对

<DIR>●目录清单清单项目将以圆点排列，如<UL>反对

<DL>●定义清单清单分两层出现

<DT>○定义条目标示该项定义的标题

<DD>○定义内容标示定义内容

表格标记

<TABLE>●表格标记设定该表格的各项参数

<CAPTION>●表格标题做成一打通列以填入表格标题

<TR>●表格列设定该表格的列

<TD>●表格栏设定该表格的栏

<TH>●表格标头相等于<TD>，但其内之字体会变粗

表单标记

<FORM>●表单标记决定单一表单的运作模式

<TEXTAREA>●文字区块提供文字方盒以输入较大量文字

<INPUT>○输入标记决定输入形式

<SELECT>●选择标记建立 pop-up 卷动清单

<OPTION>○选项每一标记标示一个选项

图形标记

<IMG>○图形标记用以插入图形及设定图形属性

连结标记

<A>●连结标记加入连结

<BASE>○基准标记可将相对 URL 转绝对及指定连结目标

框架标记

<FRAMESET>●框架设定设定框架

<FRAME>○框窗设定设定框窗

<IFRAME>○页内框架于网页中间插入框架IE

<NOFRAMES>●不支援框架设定当浏览器不支援框架时的提示

影像地图

<MAP>●影像地图名称设定影像地图名称

<AREA>○连结区域设定各连结区域

多媒体

<BGSOUND>○背景声音于背景播放声音或音乐IE

<EMBED>○多媒体加入声音、音乐或影像

其他标记

<MARQUEE>●走动文字令文字左右走动IE

<BLINK>●闪烁文字闪烁文字NC

<ISINDEX>○页内寻找器可输入关键字寻找于该一页反对

<META>○开头定义让浏览器知道这是 HTML 文件

<LINK>○关系定义定义该文件与其他 URL 的关系

StyleSheet

<STYLE>●样式表控制网页版面

<span>●自订标记独立使用或与样式表同用

注：

表示该标记属围堵标记，即需要关闭标记如 </标记>。表示该标记属空标记，即不需要关闭标记。 IE 表示该标记只适用于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。反对表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支持，只是 HTML 标准中有其它同功能或更好的选择。弃用表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特性，不用担心新浏览器不支援旧标记。新表示该标记是 HTML 4.0 中新增的。

在图片上添加文字代码

作者：发布时间：2010-01-17 14:01:55 浏览次数：670

如何在图片中加入文字？

<TBODY>

<TR>

<TD>

<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff>如何在图片中加入文字？</EMBED></FONT></FONT></FONT></DIV></TD></TR></TBODY></TABLE>

如何在图片中加入文字？

<TBODY>

<TR>

<TD>

<DIV align=center><FONT face=楷体_GB2312 color=#c709f7 size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#1ae66b size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312 color=#ffff00 size=4>如何在图片中加入文字？</FONT></DIV>

<DIV align=center><FONT face=楷体_GB2312><FONT size=4><FONT color=#ffffff>如何在图片中加入文字？</FONT></FONT></FONT></DIV></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>

左右移动的字！

左右移去的字！

谢谢！

<TBODY>

<TR>

<P align=center><FONT face=隶书 color=#0000ff size=5>左右移动的字！</FONT></P>

<P align=center><FONT face=隶书 color=#ff0000 size=5><B>左右移去的字！</B></FONT></P>

<P align=center><FONT face=隶书 color=#00ffff size=5>左右移去的字！</FONT></P>

在图片或者动画上面加动画的代码

一张背景图片上定位加入flash的完整代码：

<TBODY>

<TR>

<TR>

<TR>

有关说明：

1、有关代码说明：

博客代码用红色标明的“图片地址”是背景图片的地址，你把你喜欢的图片地址输入到“图片地址”里。图片的尺寸不能太小，可选宽度700到800的图片，高是随宽的比例而增减的。用作背景的图片可以是静态的，亦可是动态的（动画），可以是jpg格式的，也可以是gif格式的。当然也可以用flash作背景，其方法下面还要介绍。

博客代码用红色标明的“flash地址”就是我们要定位的flash地址，把你选择的flash输入到“flash地址”里。

2、边框(表格)代码说明：

1)、大边框(表格)。

<TBODY>

<TR>

<TD>

这是一篇日志内容的大边框(表格)，它把一篇日志的所有内容都框在了里面。

2)、小边框(表格)。

<TD width="34%">这是小边框(表格)，就是用它给每一个flash定位。

3)、边框(表格)颜色代码。

borderColor=#ff0000这是边框(表格)右边的颜色代码。borderColorLight=#ffff00这是边框(表格)左边的颜色代码。也可不用颜色代码，系统默认的是透明色

4)、控制边框(表格)之间、文字与边框(表格)之间距离的代码：

cellSpacing=0这是控制边框之间、文字与边框之间距离的代码。注意：它在边框（以下省略表格二字）的最外层可以调整最外一层边框的宽度，我们可以在1以上的数字进行调整，0为无效数字。它在边框的中间层，可以调整边框之间的间距。它在最下层（日志内容的背景层），可以调整文字与边框的间距。（英雄在此只介绍了有关代码的作用，具体到实际中的运用，还要靠自己的摸索、研究、实践）。

5)、边框线隐藏、显示的代码：

border=0这是让边框线隐藏、显示的代码。想要边框线就把它设为有效数字（1以上的数字），不想要边框线，就把它设为0。

6)、小边框百分比宽的代码：

<width="34%">这是控制每一个小边框百分比宽的代码。

给flash定位的具体位置：

1)、位置。

我把背景图片(包括flash背景图片)从横向、纵向按上、中、下都平均分成三等份，既是三个区域，每个等份(区域)又分成三个小方形边框(表格)，共9个小方形边框(表格)。这9个小方形边框(表格)就是固定flash的边框(表格)("容器")。大家看到了我用粉红色标注的上左、上中、上右；中左、中中、中右；下左、下中、下右。是以横向排列说明的，也是方便我们输入flash地址，便于我们记忆。

2)、每个小方形边框(表格)的大小：

每个小方形边框(表格)的大小也既是每一个flash的大小，就是它们的宽、高。大家需要注意的是：一定要根据背景图片的宽、高进行设置。其方法就是：把背景图片的宽，平均分成三等份，就是每一个flash的宽，把背景图片的高，同样平均分成三等份，就是每一个flash的高了。比如：我下面演示效果的背景图片的宽是780，那么每一个flash的宽就是260；背景图片的高是720，那么每一个flash的高就是240。这样设置，每一个flash就不会变形。

被定位的flash的层数：

9个小方形边框(表格)里面的flash需要几层flash？这可根据你要表现的日志内容和你的喜好而自己定夺，想添几层你就添几层，但一定不要忘了在每层flash里添加align=right居右这个代码，否则flash就变形。

用flash做背景：用flash做背景的完整代码：

<TBODY>

<TR>

<TD>用flash做背景，要用两层边框。这是最上面的一层边框，把背景flash代码添加在它的下面。

<TBODY>

<TR>

<TD width="33%">这是第二层边框，它的下面是被定位了的flash。

<TR>

<TR>

如何给图片增加透明FLASH动画效果的代码：

<TABLE height=393 cellSpacing=0 cellPadding=0 width=524 background=图片地址 border=1

bortercolor="#000000"><TBODY><TR><TD><P align=center><EMBED src=【透明FLASH地址】 width=524

height=393 type=application/x-shockwave-flash wmode="transparent" menu="false" quality="high"

tybe="application/x-shockwave-flash"> </P></TD></TR></TBODY></TABLE>

代码说明：

width=宽度 height=高度的数值可根据自己需要调整；但上面有两组宽度和高度的数值，更改时要注意大小统一；

制作方法如下：

1，先要找到背景图片的图片网络地址及透明FLASH动画地址，否则做了一半才去找背景图片地址，FLASH动画地址就麻烦了；

2，点击发表文章窗口；

3，勾选“显示源代码”——至关重要；

4，在编辑栏内原有代码后面添加上列代码（代码里应先加好背景图片网络地址和FLASH动画地址）；

5，取消勾选“显示源代码”，你就会在编辑栏里看到背景图片和透明FLASH动画效果了。

6，满意之后点击“发表文章”就可以了；

【透明FLASH地址】在

http://hi.baidu.com/kxyhj66/blog/item/94360af7553f3523720eece1.html 自己挑选。。。。。。。。

各种跑马灯代码：

2010-12-10 17:19:46

各种跑马灯代码：

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

滚动的文字

适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

1、左右弹来弹去的跑马灯

弹来弹去跑马灯!

实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

源码粘贴框：

<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

２、跑的很快的跑马灯

跑的很快跑马灯!

只要在<marquee>标签内加上“scrollamount=30”参数即可。

３、带有超级链接的跑马灯

带有超链接的跑马灯!点我试试？　　　　　　　　　　还有一条呢!点我试试？

其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

源码粘贴框：

<a href=http://www.22.tc/　target=_blank>带有超链接的跑马灯!点我试试？</a>

<a href=http://www.22.tc/　target=_blank>还有一条呢!点我试试？</a>

</marquee>

以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数用法介绍

behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动

direction=left,right ,up,down 跑马方向：从左向右，从右向左

loop=100 跑马次数：循环100次，如不写默认为一直循环

width=100%,height=200 跑马范围：宽为100%，高为200像素

scrollamount=20 跑马速度：数越大越快

scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动

hspace=20，vspace=20 跑马区域与其它区域间的空白大小

bgcolor=#00FFCC 跑马区域的背景颜色

id=gonggao 指定Id

onmouseout=gonggao.start() 鼠标离开时重新滚动

onmouseover=gonggao.stop() 鼠标放上去时停止

4、超链接的跑马灯式提示信息

把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

源码粘贴框：

1）将下面代码放在<body>标签下：

if (!document.layers&&!document.all)

event="test"

function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){

document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

document.all.tooltip2.style.visibility="visible"

}

else if (document.layers){

document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')

document.tooltip2.document.nstip.document.close()

document.tooltip2.document.nstip.left=0

currentscroll=setInterval("scrolltip()",100)

document.tooltip2.left=e.pageX+10

document.tooltip2.top=e.pageY+10

document.tooltip2.visibility="show"

}

function hidetip2(){

if (document.all)

document.all.tooltip2.style.visibility="hidden"

else if (document.layers){

clearInterval(currentscroll)

document.tooltip2.visibility="hidden"

}

function scrolltip(){

if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)

document.tooltip2.document.nstip.left-=5

else

document.tooltip2.document.nstip.left=150

}

</script>

2）然后在要出现提示信息的链接中，添加onMouseover语句：

<a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a>

<a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a>

<a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧技巧</a>

实现步骤：

(1)先在<body>标签下面插入一段JavaScript代码；

(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。