htlm基础教程.docx
《htlm基础教程.docx》由会员分享，可在线阅读，更多相关《htlm基础教程.docx（13页珍藏版）》请在冰豆网上搜索。
htlm基础教程
htlm基础教程
html语言教程文字代码
一、一般的文字代码：
<*Palign=center><*FONTcolor=颜色face=隶书size=5>插入文字<*/FONT><*/P>
二、文字向左移动代码：
<*marqueedirectio=left><*fontface=华文楷体size=4color==#ff0000>海阔天空<*/font><*/marquee>
三、文字向上滚动代码：
<*marqueedirection=upscrollamount=2><*center><*fontcolor="#ff0000"size="5"face="华文楷体">欢迎您来到海阔天空<*/font><*/marquee>
四、文字向下滚动代码：
<*marqueedirection=downscrollamount=2><*center><*fontcolor="#ff0000"size="5"face="华文楷体">希望大家认真看教程<*/font><*/marquee>
五、有背景的文字：
<*TABLEcellSpacing=0cellPadding=0align=centerbackground=
<*TBODY>
<*TR>
<*TDstyle="FILTER:
chroma（color=#336699）">
<*TABLEalign=centerbgColor=red>
<*TBODY>
<*TR>
<*TDalign=middle>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>我<*/B><*/FONT><*/P>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>爱<*/B><*/FONT><*/P>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>海<*/B><*/FONT><*/P>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>阔<*/B><*/FONT><*/P>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>天<*/B><*/FONT><*/P>
<*P><*FONTstyle="FONT-SIZE:
100pt"face=文鼎花瓣体color=#336699><*B>空<*/B><*/FONT><*/P>
<*/TD><*/TR><*/TBODY><*/TABLE><*/FONT><*/TD><*/TR><*/TBODY><*/TABLE>
六、有阴影的文字：
1.<*Palign=center><*FONTstyle="FONT-SIZE:
30pt;FILTER:
glow（color=#00FFFF）;WIDTH:
100%;COLOR:
#f8f8ff;LINE-HEIGHT:
150%;FONT-FAMILY:
华文彩云"><*B>文字<*/B><*/FONT><*/P>
2.<*CENTER><*FONTstyle="FONT-SIZE:
20pt;FILTER:
glow（color=#7CFC00）;WIDTH:
100%;COLOR:
yellow;LINE-HEIGHT:
150%;FONT-FAMILY:
华文彩云"><*B>文字<*/B><*/FONT><*/CENTER>
3.<*CENTER><*FONTcolor=redstyle="FILTER:
blur（add=1,direction=40,strength=10）;FONT-SIZE:
30px;FONT-WEIGHT:
bolder;POSITION:
relative;WIDTH:
500px">海阔天空<*/FONT><*/CENTER>
4.<*DIValign=center><*DIVstyle="FILTER:
shadow（color=#c299ff,strength=60）;WIDTH:
530px"><*FONTcolor=#FFFF00face=隶书size=7><*center><*BR>海阔天空<*BR>学习制作休闲娱乐<*BR><*BR><*BR><*BR><*/div><*/div>
七、空心字的代码：
<*CENTER><*FONTstyle="COLOR:
red;FILTER:
shadow（color=black）;FONT-FAMILY:
华文彩云;FONT-SIZE:
30pt;LINE-HEIGHT:
150%;WIDTH:
100%">海阔天空<*/FONT><*/CENTER>
八、突出边框的代码：
1.<*CENTER><*FONTstyle="COLOR:
red;FILTER:
glow（color=black）;FONT-FAMILY:
华文彩云;FONT-SIZE:
30pt;LINE-HEIGHT:
150%;WIDTH:
100%">海阔天空<*/FONT><*/CENTER>
2.<*center><*SPANstyle='width:
400;filter:
glow（color=red,strength=2）;color:
white;font-size:
20pt'><*FONTcolor=#000000face=隶书size=7>海阔天空文字教程<*/FONT><*/SPAN><*/center>
九、五颜六色的字：
<*fontcolor="#FF0000">海<*/font><*fontcolor="#D52A00">阔<*/font><*fontcolor="#AB5400">天<*/font><*fontcolor="#817E00">空<*/font><*fontcolor="#57A800">真<*/font><*fontcolor="#2DD200">好<*/font>
十、环绕字：
<*SCRIPTlanguage=javascript>functionlib2bwcheck（）{this.ver=navigator.appVersion;this.agent=navigator.userAgent;this.dom=document.getElementById?
1:
0;this.opera5=this.agent.indexOf（"Opera5"）>-1;this.ie5=（this.ver.indexOf（"MSIE5"）>-1&&this.dom&&!
this.opera5）?
1:
0;this.ie6=（this.ver.indexOf（"MSIE6"）>-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（"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）;returnthis;}varbw=newlib2bwcheck（）;varpx=bw.ns4||window.opera?
"":
"px";functionrun（）{varcx,cy,a;varcss,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（vari=0;isdto||oy<*sdfrom）{yspeed=-yspeed;oy+=yspeed;}ox+=xspeed;setTimeout（"run（）",tpause）;}varsxfrom=50;varsxto=40;varsyfrom=50;varsyto=20;varsdfrom=50;varsdto=100;varyspeed=1;varxspeed=4;varpcol=Number（255）.toString（16）;vartpause=20;varschar="欢迎光临海阔天空☆望大家学习愉快☆";varmaxitems=schar.length;vart=0;t=pcol.length;for（vari=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;}varox,oy;ox=Math.PI;oy=sdfrom;xspeed=xspeed*Math.PI/180;pa=newArray（）;for（vari=0;i<*maxitems;i++）{document.writeln（"<*divid=s"+i+"style=position:
absolute;top:
280;z-index>"）;document.writeln（"<*tablestyle=filter:
glow（color=redstrength=1）><*th><*fontcolor=#00ffffface=华文楷体style=font:
39pt>"+schar.substr（i,1）+"<*/font><*/th><*/table>"）;document.writeln（"<*/div>"）;}setTimeout（"run（）",tpause）;<*/SCRIPT>
十一、上下左右移动：
<*center><*tablewidth=500><*tr><*td><*fontcolor=#991144&><*marqueebehavior=alternate><*MARQUEEbehavior=alternate><*FONTface=宋体color=redsize=4><*MARQUEEdirection=upbehavior=alternatewidth=60height=120>欢<*/MARQUEE><*FONTcolor=orange><*MARQUEEdirection=upbehavior=alternatewidth=60height=80>迎<*/MARQUEE><*FONTcolor=#FF8CA9><*MARQUEEdirection=upbehavior=alternatewidth=60height=120>学<*/MARQUEE><*FONTcolor=green><*MARQUEEdirection=upbehavior=alternatewidth=60height=80>习<*/MARQUEE><*FONTcolor=blue><*MARQUEEdirection=upbehavior=alternatewidth=60height=120>指<*/MARQUEE><*FONTcolor=lime><*MARQUEEdirection=upbehavior=alternatewidth=60height=80>导<*/MARQUEE><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/FONT><*/marquee><*/font><*/td><*/tr><*/table><*/center>
十二、向两边扩展的代码：
<*FONTcolor=#FFFF00face=隶书size=7><*MARQUEEheight=50width=240>海阔天空期待你的浪漫之旅！
<*/FONT><*/MARQUEE><*FONTcolor=#00FF00face=隶书size=7><*MARQUEEdirection=rightheight=50width=240>！
旅之漫浪的你待期空天阔海<*/MARQUEE><*/FONT>
十三、向上循环的代码：
<*marqueedirection=upheight=200scrollamount=1scrolldelay=90<*CENTER><*FONTstyle="COLOR:
#FFFF00;FILTER:
shadow（color=black）;FONT-FAMILY:
华文彩云;FONT-SIZE:
30pt;LINE-HEIGHT:
150%;WIDTH:
100%">海阔天空期待你的浪漫之旅！
<*/FONT><*/CENTER><*/marquee>
十四、向左移动（乎隐乎现）的代码：
<*CENTER><*MARQUEEheight=87scrollAmount=2width=80scrolldely="10"align="center"><*B><*FONTcolor=#FFFF00face=汉鼎繁中变style="FONT-SIZE:
30pt;FONT-STYLE:
normal;FONT-VARIANT:
normal;FONT-WEIGHT:
normal;LINE-HEIGHT:
normal">海<*IMGsrc="bbs.mz99./UploadFile/2004-6/802.gif";><*/FONT><*/B><*/MARQUEE><*MARQUEEheight=87scrollAmount=2width=80scrolldely="10"align="center"><*B><*FONTcolor=#FFFF00face=汉鼎繁中变style="FONT-SIZE:
30pt;FONT-STYLE:
normal;FONT-VARIANT:
normal;FONT-WEIGHT:
normal;LINE-HEIGHT:
normal">阔<*IMGsrc="bbs.mz99./UploadFile/2004-6/802.gif";><*/FONT><*/B><*/MARQUEE><*MARQUEEheight=87scrollAmount=2width=80scrolldely="10"align="center"><*B><*FONTcolor=#FFFF00face=汉鼎繁中变style="FONT-SIZE:
30pt;FONT-STYLE:
normal;FONT-VARIANT:
normal;FONT-WEIGHT:
normal;LINE-HEIGHT:
normal">天<*IMGsrc="bbs.mz99./UploadFile/2004-6/802.gif";><*/FONT><*/B><*/MARQUEE><*MARQUEEheight=87scrollAmount=2width=80scrolldely="10"align="center"><*B><*FONTcolor=#FFFF00face=汉鼎繁中变style="FONT-SIZE:
30pt;FONT-STYLE:
normal;FONT-VARIANT:
normal;FONT-WEIGHT:
normal;LINE-HEIGHT:
normal">空<*IMGsrc="bbs.mz99./UploadFile/2004-6/802.gif";><*/FONT><*/B><*/MARQUEE><*/CENTER>
十五、图上做字效果：
<*center><*tableborder="5"width="365"height="320"background="图片地址"><*tr><*td><*br><*br><*br><*br><*br><*br><*br><*br><*br><*br><*br><*br><*br><*palign="center"><*fontcolor="#FFFF00">海阔天空<*/font><*/p><*/td><*/tr><*/table>
十六、文字代码说明：
1.align=center：
表示字体居中，可选值为居右（right）、居左（left）。
2.color=颜色代码。
字体属性是：
face颜色的属性是color。
3.face=字体。
常用字体为：
文鼎花瓣体、宋体、黑体、楷体、仿宋、幻缘、新宋体、细明体、隶书、幼圆、华文琥珀、华文行楷、华文彩云（用做题目）、华文细黑、华文新、华文中宋、方正舒体、方正体、仿宋.楷体、宋体-方正超大字符集、汉鼎繁中变、华文楷体。
4.size=字体大小，这里的最大值为7,取值越大文字就越大。
5.文字标记是“<*font>”可以用“<*font>”标记的不同属性来分别设置文本中文字的大小，字体，字型，字色等。
<*Font>标记的格式是:
<*font属性＝属性值>被设置的字<*/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：
向下。
十八、让你的文字动起来——marquee用法详解：
A.参数一：
direction
<*marqueedirection=up>向上移动<*/marquee>
direction的英文意思就是方向。
这个参数的取值有四个：
left（左）、right（右）、up（上）、down（下）。
B.参数二：
behavior
<*marqueedirection=leftbehavior=alternate>哈哈，我来回走！
<*/marquee>
scroll（循环移动）、slide（只移动一个回合）、alternate（来回移动）。
C.参数三：
loop
循环。
若未指定则循环不止（infinite），其值取数值。
例：
<*marqueeloop=3>我只走三次哦<*/marquee>
D.参数四：
scrollamount
移动速度。
值取正整数。
数值越大，速度越快。
例：
<*marqueescrollamount=25>看，我走多快！
<*/marquee>
E.参数五：
scrolldelay
延时。
数值。
例：
<*marqueescrolldelay=1000>我走一走，停一停<*/marquee>
F.参数六：
bgcolor
底色。
例：
<*marqueebgcolor=pink>看到了吧？
有底色！
<*/marquee>
G.参数七：
width和height
就是移动的宽度与高度了。
例：
<*marqueewidth=200height=200bgcolor=pinkdirection=down><*center>这个面积不够我移动！
<*/center><*/marquee>
H.其他参数：
空白（Margins）<*hspace=数值vspace=数值>
对齐方式（Align）<*align=top/middle/bottom>
十九、用CSS滤镜修饰文字：
1.Alpha滤镜
代码：
<*FONTstyle="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属性：
设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
而width:
100%则表示参与渐变的对象的宽度，通常都设置为100%。
2.MotionBlur滤镜
MotionBlur滤镜表现的是一种模糊效果。
其ADD属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；Direction属性是模糊移动的角度，其值为0至360度；Strength属性是模糊移动的距离。
以下是代码：
<*FONTstyle="FONT-SIZE:
30pt;filter:
blur（add=1,direction=30,strength=5）;WIDTH:
100%;COLOR:
red;LINE-HEIGHT:
150%;FONT-FAMILY:
华文行楷"><*B>我爱海阔天空<*/B><*/FONT>
3.DropShadow滤镜
DropShadow滤镜主要产生重叠效果。
其属性为：
color属性：
设置影子文本的颜色；
offX和offY属性：
影子文本下落的位移值；
Positive属性：
指定透明象素阴影，布尔型，0为是，1为否。
代码：
<*FONTstyle="FONT-SIZE:
30pt;filter:
dropshadow（color=lightgreen,offX=5,offY=3,Positive=1）;WIDTH:
100%;COLOR:
red;
升级会员 