htm制作

admin · 发表于 2022-4-30 04:34:18

第一部分，基础学习
一，颜色代码：
（绿色）
<font color="#008000">填入文字</font>
（褐色）
<font color="#800000">填入文字</font>
（蓝色）
<font color="#000080">填入文字</font>
（紫色）
<font color="#800080">填入文字</font>
（红色）
<font color="#FF0000">填入文字</font>
二,文字加粗倾斜的代码
文字加粗的代码是: <b>你好</b>
文字倾斜的代码是: <i>你好！</i>
三，文字链接代码：
如果您想点击某处文字会连接到另外一个网页的效果，这是超链接，代码是这样：
<a href="网站地址";>填入文字</a>
如果要点了这个文字以后重新打开一个窗口的话，代码是：
<a href="网站地址";; target="_blank">填入文字</a>
四，在网站上放图片的代码：
如果你看到一个好看的图片想放到网站上，代码是这样的：
<img src="http://www.2000.com/wwwimages/n/163logo.gif"; width="150" height="100">
后面的数字调节图片的尺寸大小。
五，图片链接代码：
如果要点一下图片就能打开一个网站的链接代码是这样的：
<a href="http://www.2000.com";><img src="http://www.2000.com/wwwimages/n/2000logo.gif"; width="150" height="100"></a>
如果要点一下图片就能打开一个网站的链接，并且重新打开一个窗口。代码是这样的：
<a href="http://www.163.com";; target="_blank"><img src="http://www.163.com/wwwimages/n/163logo.gif"; width="150" height="100"></a>
上面的数字都能调节图片尺寸大小。
六，换行代码：
如果你想换行，直接用Enter键是不行的，需要在您想换行的位置输入
，这样就会分成两行显示，整个网站看起来也不会是一大片了，而是段落分明。
七，文字移动的代码是：
<marquee>这里写文字</marquee>
八，移动图片的代码：
<marquee><img src="http://games.tom.com/images/2002/gamemm/0604/s/36.jpg";><img src="http://games.tom.com/images/2002/gamemm/0604/s/13.jpg";><img src="http://games.tom.com/images/2002/gamemm/0604/s/30.jpg";><marquee>
把里面的图片地址换成你的就行想多放一个图片就按照格式在中间插入：
<img src="http://games.tom.com/images/2002/gamemm/0604/s/13.jpg";>
里面的图片地址自己定。
九，背景音乐的代码：
如果想在你的网站上放上一段好听的背景音乐，代码是： <bgsound src="http://xxxxx.com/xxx.mid";loop=10>
<bgsound src="http://www.midifan.com/midi/music.asp?id=3073";loop=30>
里面的背景音乐地址你能自己替换。
前面的是音乐地址，一般都以mid或者mp3的形式结尾后面的数字是播放次数。
http://www.midifan.com/midi/
这个网站都有好的背景音乐
十，在网站中插入一个flash动画的代码是：
<embed width=200 height=200
src="http://flash.shangdu.com/view/2/fff.swf";>
里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。
十一，打开网站时候出现的欢迎词代码：
<body onLoad= alert("你好，欢迎访问本网站！")>
十一，关闭网站的时候出现的话
<body>
十二，打开网站的时候自己做一个弹出窗口的广告：
<script language="javascript">
var TimerID=1;
window.open('http://2000.com','','width=600,height=300,left=100,top=50');
</script>
[tr][td=1,1,14][/td][td]第二部分举例说明：
一个好的帖子是可以给人以美的享受的,学会用Html代码做出自己的作品,能够让你真正体会发贴的乐趣.
　　其实Html代码并不象我们想像的那么难的*^o^*,只要你耐心地看下面的文章,记住一些简单常用的公式,而且能够举一反三,触类旁通,你很容易就可以做出漂亮的帖子.
　　学习之前,先了解一些基本常识,呵呵:
　　首先,要发Html代码的帖子,你所要发贴的地方必须是开放Html标签的如图)
　　[UploadFileDisp=06022516181996_1140855374.jpg]
　　
我们再来看看发贴这里如图)
[UploadFileDisp=06022516181996_1140856293.jpg]
　　
　　其中Design是设计,UBB模式是大家平时发贴常用的代码,VIEW是预览,HTML就是我们要用的Html代码发贴的模式.
　　打开发贴页面，点击 HTML 按钮。取消自动修正的勾，然后在HTML格式栏内粘贴你要发的内容代码,编辑你的贴子，完成后点击返回Design。Design模式的状态下，点击预览，预览效果正常，就可以发表了。预览效果不正常，再点击返回HTML模式，修改代码。
　　编写代码的时候，代码之间只能空一格，如昧嘶爻祷蚴欠中芯突嵛薹ㄕＯ允玖恕Ｈ绻 ⒈硖雍螅鱿郑阂韵履谌莺疟?或可能导致页面不正常的代码的提示，可以试运行代码，如果显示正常，那只要在修改编辑的时候，看看代码之间有没有多了或少了什么东西，把这些都删除修改，就可以正常显示了！
　　ＤＶＢＢＳ7、0的版本不支持网页外挂，所以有些复杂的特效不能使用，象鼠标特效这些等！
　　ＤＶＢＢＳ7、0的版本不支持HTML与UBB合用，所以大家在想换行的时候，要使用换行符
　　，而不能简单的通过回车来实现。其他也一样，不能把UBB与HTML标签合用！
　　HTML代码注重对称性，这点要切记，比如前面有TABLE，后面就一定有一个/TABLE对应.
一个完整的HTML帖子一般包括:
外面的表格框架+文章和图片(包括一些flash和一些特效)+背景音乐
下面我一样样来教大家说明:以下所有举例的代码大家可以边学边试,建议用记事本来编辑修改,要注意的是,用记事本做好代码内容后一定要取消记事本格式里的自动换行,才能复制粘贴到论坛里!!切记!)
一.表格框架的设计:
只有一层的表格代码：
举例:
<TABLE align=center background="背景图片链接" border=10 cellSpacing=2 cellpadding="2" valign="TOP" bgcolor="#0000FF" borderColor=#841A00 bordercolorlight="#00FF00" bordercolordark="#00FFFF"> width=500><TBODY><TR><TD>帖子的文章加图片</TD></TR></TBODY></TABLE>
多层表格的代码:
举个8层的例子大家可以灵活运用)
<TABLE cellSpacing=0 cellPadding=4 width="95%" align=center background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=315 cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=355 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=387 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=365 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=15 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=362 cellSpacing=0 cellPadding=2 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2strip.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=361 cellSpacing=0 cellPadding=4 width="100%" background=http://www.enchantingdesignz.com/linkware/parker/p2background.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE height=204 cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD>
你的帖子内容
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
请注意:HTML代码注重对称性，这点要切记，比如前面有TABLE，后面就一定有一个/TABLE对应!多或少都会出错!
上面例子中的图片链接可以换成你喜欢的图片,我只是举例而已,下同.
代码说明:
表格的基本结构:
<table>...</table> ---　定义表格
<tr> ---　定义表行
<td> ---　定义表元(表格的具体数据)
常用的参数设定及注解：
width="400"
表格宽度，接受绝对值（如 500）及相对值（如 80%）。
border="10"
表格边框的厚度。
cellspacing="2"
表格格线的厚度
cellPadding=5　表格格线内厚度
align="CENTER"
表格的摆放位置（水平），可选值为：左： left,　右： right,　居中： center
valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。　　
background="背景图片网址"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="#0000FF"
表格的底色，与 background 不要同用
bordercolor="#CF0000"
表格边框颜色
bordercolorlight="#00FF00"
表格边框向光部分的颜色
bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
大家可以自己修改层数,颜色,背景,表格数据,也可以照搬我的代码 ,呵呵
二.如何贴图:
首先说明:
几个常用代码：
<BR>代码为换行符，一般在html中不使用回车断行。
段落标签:
文件段落的开始由<>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<>的开始就意味着上一个<>的结束。<>标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。
位置控制:
通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下:<DIV ALIGN=#>　　　#＝left／right／center
居中：<center>....</center>
贴图基本代码：
单幅图片:
<img src=http://www.pic019_jpg.jpg>
IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示：
<IMG SRC="flowers0.jpg" width="200" heigth="100">
一些常用特效:
单幅向右移动图片:
<marquee direction=right><img src=http://www.8000e.cn/8000e/picture/2004-07-6/1089120972.gif></marquee>
单幅向左移动图片:
<marquee direction=left><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>
单幅向上移动图片:
<marquee direction=up><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>
单幅向下移动图片:
<marquee direction=down><img src=http://www.8000e.cn/8000e/picture/2004-07-14/1089801245.gif></marquee>
左右移动的图片:
<marquee scrollamount=2 behavior=alternate><img src=http://www.mjjq.com/photos/sichuan/sichuan_photos_ao.jpg></marquee>
居中移动的图片:
<center><marquee scrollamount=2 behavior=alternate><img src=http://www.mjjq.com/photos/sichuan/sichuan_photos_ao.jpg></marquee></center>
其中scrollamount=2 后面的2代表移动速度
behavior=alternate 来回走
slide 只走一次
scroll 一圈一圈绕着走
给图片加边框：
<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://web.cn898.net/haoran/tp/lu/lu10.jpg width=500 height=375></td></table>
说明：
border="6" 表格边框的厚度，不同浏览器有不同的内定值。
cellspacing="2" 表格格线的厚度
cellPadding=1　表格格线内厚度
borderColor=#841A00　边框色彩
三.怎样加入文字:
基本代码：
<font style=font:50pt face=华文行楷 color=red>文字内容</font>
也可以用：<font size=4 face=华文行楷 color=red>文字内容</font>
其中：50pt和size是字体大小，可以调整数值；华文行楷是字体，也可以调整；red是颜色
一些文字常用特效:
带阴影的文字：
< align=center><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#b1606c); WIDTH: 100%; COLOR: #ff8000; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>祝KKTB的朋友们</B></FONT></P>
移动的文字：
<marquee direction=left>文字内容基本代码</marquee> 说明: left 向左移动
<marquee direction=right>文字内容基本代码</marquee> 说明: right 向右移动
<marquee behavior=scroll>文字内容基本代码</marquee> 说明: scroll 一圈一圈绕着走
<marquee behavior=slide>文字内容基本代码</marquee> 说明: slide 只走一次
<marquee behavior=alternate>文字内容基本代码</marquee> 说明:alternate 来回走
文字上行代码：
<MARQUEE scrollAmount=1 scrollDelay=1 direction=up height=400>
<CENTER><FONT color=#ff0066 size=5>如果有一天　你再也找不到我的身影 <BR><BR>　是否 <BR><BR>你会怪我将思念如此轻易的放逐<BR><BR>在你背转身的时候<BR><BR>悄悄的悄悄的从你身后逃离 <BR><BR>　就此消失在苍茫的尘世间 <BR><BR>再也没有任何的消息与提示<BR><BR></FONT></CENTER></MARQUEE>
文字上行可以加入背景图片：
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=80 width="70%" align=center background=http://61.132.72.53/discuz/attachments/showfile_tYqBlogEkvAH.jpg height=850>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=1 direction=up><B><FONT face=楷体_GB2312 color=#00ffdc size=4>
<CENTER>
< align=center>
<P>如果有一天　你再也找不到我的身影</P>
<P>是否</P>
<P>你会怪我将思念如此轻易的放逐</P>
<P>在你背转身的时候</P>
<P>悄悄的悄悄的从你身后逃离</P>
<P>就此消失在苍茫的尘世间</P>
<P>再也没有任何的消息与提示</P>
</P></CENTER></FONT></B></MARQUEE></TD></TR></TBODY></TABLE>
文字特效：
由中间向两边移动的文字和图片代码如下
<CENTER><FONT face=隶书 color=#44e7a0 size=6>
<MARQUEE width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">向两边移动的文字和图片<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT>
<FONT face=隶书 color=#16ac6b size=6>
<MARQUEE direction=right width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">片图和字文的动移边两向<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT></CENTER>
由两边向中间移动的文字和图片代码如下
<CENTER><FONT face=隶书 color=#44e7a0 size=6>
<MARQUEE direction=right width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">片图和字文的动移间中向<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT>
<FONT face=隶书 color=#16ac6b size=6>
<MARQUEE width=222 height=50><IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif">向中间移动的文字和图片<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></MARQUEE></FONT></CENTER>
百叶窗效果：
<CENTER>
<MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>美 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>图<IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>传 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=80 height=87 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=汉鼎繁中变 color=#ffff00>情 <IMG src="http://love.xaonline.com/upload/2004612/UF488696.gif"></FONT></B></MARQUEE></CENTER>
漂动的图片或文字:
<div style="position:absolute;top:300;left:180"><marquee behavior=alternate scrollamount=5 direction=up height="6600"><marquee direction=left scrollamount=2 behavior=alternate width=588><img src=http://hisen.myrice.com/anibase/mark/welcome/welcome56.gif></marquee></marquee></div>
height="6600"：漂动图片的运行高度其值可自由设定
width=588 ：图片在网页中的运行宽度
其实你仔细看看,文字无非就是字体,大小和颜色而已.大家可以试着用上面的代码玩玩.
四.加入Flash特效:
基本代码：
<embed src=http://hlm.nease.net/swf/red/cloud.swf></embed>
或者：<EMBED SRC=地址 width=275 height=200> (这是加入了大小限制)
常用特效:
在图片上采用透明FLAH：
<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片地址><TBODY><TD><EMBED src=透明Flash网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>
注意：长和宽的设定要根据图片的实际大小来设定.
五.插入背景音乐:
背景音乐（适合　mid wma等格式）
<bgsound src="音乐网址" Loop=-1></bgsound>
音频（适合MP3 WMA RM等很多格式）
代码如下：
<embed src="音乐网址" type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=0 height=0></embed>
视频
<embed src="视频网址" type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400></embed>
说明：
AutoStart=true　表示是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为true,
Loop=true　表示设定播放重复次数，LOOP=3表示重复3次，true表示无限次播放，FALSE播放一次即停止。
width=宽度 height=高度　可以设定控制播放器面板的大小，如果都设置为0就可以把播放器隐藏了
六.经常用的两个特效:
有时候我们发的帖子显示不完全,有的是因为屏幕分辨率的原因,比如800*600或1024*768 但是更多的是没有采用下面的宽屏帖子编辑:
宽屏帖子编辑:
注意:发表前,一定要取消<自动修正>,否则,就没有宽屏了.
其实只要改第一层表格就可以了
<TABLE id=table1 style="LEFT: -220px; WIDTH: 980px; POSITION: relative; TOP: 90px" cellSpacing=30 align=center background=http://bbs.xxjy.net/UploadFile/2004-10/20041015163118872.jpg>
<TBODY>
<TR>
<TD>
WIDTH: 980px; 这是外框尺寸的大小,可以根据需要自由调整数字.
"LEFT: -220px; 增减这个数字,可以调节帖子是否居中.
其中的图片地址是控制边框的颜色,可以根据需要进行更换.
另一个特效是透明flash多层叠加：
<CENTER>
<TABLE cellSpacing=8 cellPadding=1 width=420 align=center background=http://www.cn898.net/bg/x/1/back_78.gif border=1 table>
<TBODY>
<TR>
<TD><EMBED align=right src=http://mailimg-fs.hanmail.net/fl/effect/19/e-fall2.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=http://www.cn898.net/bg/fh/3/1.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"><EMBED align=right src=http://image2.sina.com.cn/dongman/f/2002-05-20/1_55-4-248-235_20020520133331.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"></TD></TR></TBODY></TABLE></CENTER>
上面就是一个HTML帖子的基本内容,以上所写的所有代码中的图片,flash,音乐的链接,大家可以自由替换成自己喜欢的,然后一段代码一段代码自己试试,看着好像很复杂的代码,其实你根本不用专门去学HTML语言,只要简单套用就可以了,不过只是修改其中的链接和文字而已.~~~~~呵呵.~~~~
　　提供大家一个可以在线编辑的地方:
　　在线WEB页制作器:
在线WEB页制作器:
　　http://www.baron.com.cn/javascript/dai/dai7.htm
[/td][/tr][/table]

复制代码

		自动登录	找回密码
密码			立即注册

htm制作

活跃会员

灌水之王

荣誉管理

论坛元老