htlm 基础教程参考模板

1、htlm 基础教程1 / 13html语言教程文字代码一、一般的文字代码：<*P align=center><*FONT color=颜色 face=隶书 size=5>插入文字<*/FONT><*/P>二、文字向左移动代码：<*marquee directio=left><*font face=华文楷体 size=4 color=#ff0000>海阔天空<*/font><*/marquee>三、文字向上滚动代码：<*marquee direction=up scrollamount=2>

2、;<*center><*font color="#ff0000" size="5" face="华文楷体">欢迎您来到海阔天空<*/font><*/marquee>四、文字向下滚动代码：<*marquee direction=down scrollamount=2><*center><*font color="#ff0000" size="5" face="华文楷体">希望大家认真看教程<

3、;*/font><*/marquee>五、有背景的文字：<*TABLE cellSpacing=0 cellPadding=0 align=center background=<*TBODY><*TR><*TD style="FILTER: chroma(color=#336699)"><*TABLE align=center bgColor=red><*TBODY><*TR><*TD align=middle><*P><*FONT style=&q

4、uot;FONT-SIZE: 100pt" face=文鼎花瓣体 color=#336699><*B>我<*/B><*/FONT><*/P><*P><*FONT style="FONT-SIZE: 100pt" face=文鼎花瓣体 color=#336699><*B>爱<*/B><*/FONT><*/P><*P><*FONT style="FONT-SIZE: 100pt" face=文鼎花瓣体 co

5、lor=#336699><*B>海<*/B><*/FONT><*/P><*P><*FONT style="FONT-SIZE: 100pt" face=文鼎花瓣体 color=#336699><*B>阔<*/B><*/FONT><*/P><*P><*FONT style="FONT-SIZE: 100pt" face=文鼎花瓣体 color=#336699><*B>天<*/B><

6、;*/FONT><*/P><*P><*FONT style="FONT-SIZE: 100pt" face=文鼎花瓣体 color=#336699><*B>空<*/B><*/FONT><*/P><*/TD><*/TR><*/TBODY><*/TABLE><*/FONT><*/TD><*/TR><*/TBODY><*/TABLE>六、有阴影的文字：1.<*P align=ce

7、nter><*FONT style="FONT-SIZE: 30pt; FILTER: glow(color=#00FFFF); WIDTH: 100%; COLOR: #f8f8ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><*B>文字<*/B><*/FONT><*/P>2.<*CENTER><*FONT style="FONT-SIZE: 20pt; FILTER: glow(color=#7CFC00); WIDTH: 100%; COL

8、OR: yellow; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><*B>文字<*/B><*/FONT><*/CENTER>3.<*CENTER><*FONT color=red style="FILTER: blur(add=1,direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; WIDTH: 500px">海阔天空<*/FONT

9、><*/CENTER>4.<*DIV align=center><*DIV style="FILTER: shadow(color=#c299ff, strength=60); WIDTH: 530px"> <*FONT color=#FFFF00 face=隶书 size=7><*center><*BR> 海阔天空<*BR> 学习制作 休闲娱乐<*BR><*BR> <*BR><*BR> <*/div><*/div>

10、;七、空心字的代码：<*CENTER><*FONT style="COLOR: red; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%">海阔天空<*/FONT><*/CENTER>八、突出边框的代码：1.<*CENTER><*FONT style="COLOR: red; FILTER: glow(color=black); FONT-FAMILY: 华

11、文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%">海阔天空<*/FONT><*/CENTER>2.<*center><*SPAN style='width:400;filter:glow(color=red,strength=2);color:white;font-size:20pt'><*FONT color=#000000 face=隶书 size=7>海阔天空 文字教程<*/FONT><*/SPAN><*/ce

12、nter>九、五颜六色的字：<*font color="#FF0000">海<*/font><*font color="#D52A00">阔<*/font><*font color="#AB5400">天<*/font><*font color="#817E00">空<*/font><*font color="#57A800">真<*/font><*font col

13、or="#2DD200">好<*/font>十、环绕字：<*SCRIPT language=javascript>function lib2bwcheck()this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=document.getElementById?1:0;this.opera5=this.agent.indexOf("Opera 5")>-1;this.ie5=(this.ver.indexOf("MSIE 5&

14、quot;)>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;this.ie4=(document.all && !this.dom && !this.opera5)?1:0;this.ie=this.ie4|this.ie5|this.ie6;this.mac=this.agent.indexOf

15、("Mac")>-1;this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0;this.bw=(this.ie6 | this.ie5 | this.ie4 | this.ns4 | this.ns6 | this.opera5);return this;var bw=new lib2bwcheck();var px = bw.ns4|window.opera?"":&quo

16、t;px"function run() var cx, cy, a;var css, obj, nest, ooo;if (document.all) && (!bw.opera5) movy = document.body.clientHeight-64;movx = document.body.clientWidth-50; else movx = window.innerWidth-50; movy = window.innerHeight-64;for (var i=0; isdto | oy<*sdfrom) yspeed=-yspeed; oy+=y

17、speed;ox+=xspeed;setTimeout("run()",tpause);var sxfrom=50;var sxto=40;var syfrom=50;var syto=20;var sdfrom=50;var sdto=100;var yspeed=1;var xspeed=4;var pcol=Number(255).toString(16);var tpause=20;var schar="欢迎光临海阔天空望大家学习愉快"var maxitems = schar.length;var t=0;t = pcol.length;for

18、(var i=0; i<6-t; i+) pcol = "0"+pcol;if (document.all) movy = document.body.clientHeight-64;movx = document.body.clientWidth-50; else movx = window.innerWidth-50;movy = window.innerHeight-64;var ox, oy;ox=Math.PI; oy=sdfrom;xspeed = xspeed*Math.PI/180;pa = new Array();for (var i=0; i<

19、;*maxitems; i+) document.writeln("<*div id=s"+i+" style=position:absolute;top:280;z-index>");document.writeln("<*table style=filter:glow(color=red strength=1)><*th><*font color=#00ffff face=华文楷体 style=font:39pt>"+schar.substr(i,1)+"<*/fon

20、t><*/th><*/table>");document.writeln("<*/div>");setTimeout("run()",tpause);<*/SCRIPT>十一、上下左右移动：<*center><*table width=500><*tr><*td><*font color=#991144&><*marquee behavior=alternate><*MARQUEE behavior=alt

21、ernate><*FONT face=宋体 color=red size=4><*MARQUEE direction=up behavior=alternate width=60 height=120>欢<*/MARQUEE><*FONT color=orange> <*MARQUEE direction=up behavior=alternate width=60 height=80>迎<*/MARQUEE><*FONT color=#FF8CA9><*MARQUEE direction=up b

22、ehavior=alternate width=60 height=120>学<*/MARQUEE><*FONT color=green> <*MARQUEE direction=up behavior=alternate width=60 height=80>习<*/MARQUEE><*FONT color=blue><*MARQUEE direction=up behavior=alternate width=60 height=120>指<*/MARQUEE><*FONT color=lime

23、> <*MARQUEE direction=up behavior=alternate width=60 height=80>导<*/MARQUEE><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/marquee><*/font><*/td><*/tr><*/table><*/center>十二、向两边扩展的代码：<*FONT color=#FFFF00 face

24、=隶书 size=7><*MARQUEE height=50 width=240>海阔天空期待你的浪漫之旅！<*/FONT><*/MARQUEE><*FONT color=#00FF00 face=隶书 size=7><*MARQUEE direction=right height=50 width=240>！旅之漫浪的你待期空天阔海<*/MARQUEE><*/FONT>十三、向上循环的代码：<*marquee direction=up height=200 scrollamount=1 scrol

25、ldelay=90 <*CENTER><*FONT style="COLOR: #FFFF00; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%">海阔天空期待你的浪漫之旅！<*/FONT><*/CENTER><*/marquee>十四、向左移动(乎隐乎现)的代码：<*CENTER><*MARQUEE height=87 scrollAmount=2 wi

26、dth=80 scrolldely="10" align="center"><*B><*FONT color=#FFFF00 face=汉鼎繁中变 style="FONT-SIZE: 30pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal">海<*IMG src=" <*MARQUEE height=87 scrollAmount=2 width=80 scrol

27、ldely="10" align="center"><*B><*FONT color=#FFFF00 face=汉鼎繁中变 style="FONT-SIZE: 30pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal">阔<*IMG src=" ;><*/FONT><*/B><*/MARQUEE> <*MARQUEE hei

28、ght=87 scrollAmount=2 width=80 scrolldely="10" align="center"><*B><*FONT color=#FFFF00 face=汉鼎繁中变 style="FONT-SIZE: 30pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal">天<*IMG src=" ;><*/FONT><*/B&g

29、t;<*/MARQUEE> <*MARQUEE height=87 scrollAmount=2 width=80 scrolldely="10" align="center"><*B><*FONT color=#FFFF00 face=汉鼎繁中变 style="FONT-SIZE: 30pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal">空<*IMG src

30、=" ;><*/FONT><*/B><*/MARQUEE><*/CENTER>十五、图上做字效果：<*center><*table border="5" width="365" height="320" background="图片链接地址"> <*tr> <*td> <*br> <*br><*br><*br><*br><*br>&l

31、t;*br><*br><*br><*br><*br><*br><*br> <*p align="center"><*font color="#FFFF00">海阔天空<*/font><*/p><*/td> <*/tr> <*/table>十六、文字代码说明：1.align=center：表示字体居中，可选值为居右(right)、居左(left)。2.color=颜色代码。字体属性是：face 颜

32、色的属性是color。3.face=字体。常用字体为：文鼎花瓣体、宋体、黑体、楷体、仿宋、幻缘、新宋体、细明体、隶书、幼圆、华文琥珀、华文行楷、华文彩云(用做题目)、华文细黑、华文新魏、华文中宋、方正舒体、方正姚体、仿宋_GB2312.楷体_GB2312、宋体-方正超大字符集、汉鼎繁中变、华文楷体。4.size=字体大小，这里的最大值为7,取值越大文字就越大。5.文字标记是“<*font>”可以用“<*font>”标记的不同属性来分别设置文本中文字的大小，字体，字型，字色等。<*Font>标记的格式是:<*font 属性属性值>被设置的字<

33、*/font>。6.<*BR>是文字换行7.<*P>是段控制。标记是<*p>放在文字后，使得其后文字空一行后换行显示。<*p>的属性align用来设置文字的对齐方式。属性值是center(居中对齐)，left(向左对齐)，right(向右对齐)。8.下划线：<*U><*/U>十七、移动文字代码说明：1.left：向右移动。right：向左移动。alternate：来回走。2.scrollamount：移动速度。scrolldelay：停停走走。direction=up：向上。direction=down：向下。十八、

34、让你的文字动起来marquee用法详解：A.参数一：direction<*marquee direction=up>向上移动<*/marquee>direction的英文意思就是方向。这个参数的取值有四个：left(左)、right(右)、up(上)、down(下)。B.参数二：behavior<*marquee direction=left behavior=alternate>哈哈，我来回走！<*/marquee>scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。C.参数三：loop循环。若未指定则循环不

35、止(infinite)，其值取数值。例：<*marquee loop=3>我只走三次哦<*/marquee>D.参数四：scrollamount移动速度。值取正整数。数值越大，速度越快。例：<*marquee scrollamount=25>看，我走多快！<*/marquee>E.参数五：scrolldelay延时。数值。例：<*marquee scrolldelay=1000>我走一走，停一停<*/marquee>F.参数六：bgcolor底色。例：<*marquee bgcolor=pink>看到了吧？有底

36、色！<*/marquee>G.参数七：width和height就是移动的宽度与高度了。例：<*marquee width=200 height=200 bgcolor=pink direction=down><*center>这个面积不够我移动！<*/center><*/marquee>H.其他参数：空白(Margins)<*hspace=数值 vspace=数值>对齐方式(Align) <*align=top/ middle/bottom>十九、用CSS滤镜修饰文字：1.Alpha滤镜代码：<*FONT

37、 style="FONT-SIZE:30pt;filter:alpha(opacity=100,style=3);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><*B>我爱海阔天空<*/B><*/FONT>从效果中我们可以看出，Alpha滤镜使对象呈渐变透明的效果，其效果是由脚本中的filter:alpha(opacity=100,style=3)来决定的。其中：opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明； style属性：设

38、置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。而width:100%则表示参与渐变的对象的宽度，通常都设置为100%。2.Motion Blur滤镜Motion Blur滤镜表现的是一种模糊效果。其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。以下是代码：<*FONT style="FONT-SIZE:30pt;filter:blur(add=1,direction=30,strengt

39、h=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><*B>我爱海阔天空<*/B><*/FONT>3.Drop Shadow滤镜Drop Shadow滤镜主要产生重叠效果。其属性为：color属性：设置影子文本的颜色；offX和offY属性：影子文本下落的位移值；Positive属性：指定透明象素阴影，布尔型，0为是，1为否。代码：<*FONT style="FONT-SIZE:30pt;filter:dropshadow(color=lightgreen

40、,offX=5,offY=3,Positive=1);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><*B>我爱海阔天空<*B><*/FONT>4.Shadow滤镜与Drop Shadow的影子特性不同，Shadow滤镜产生一种阴影效果，它的属性比较简单：color属性：阴影颜色；direction属性：阴影角度，值取0至360度。代码：<*FONT style="FONT-SIZE:30pt;filter:shadow(color=black,directi

41、on=180);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><*B>我爱海阔天空<*/B><*/FONT>5.Wave滤镜此滤镜对过滤对象生成正弦波变形，造成一种变幻效果。内嵌属性：add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；freq属性：决定显示的频率，即应出现多少个波形；phrase属性：决定波形的形状，值取0至360之间；strength属性：决定波形的振幅。代码：<*FONT style="FONT-SIZE:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><*B>我爱海阔天空<*/B>&l