分享］HTML教程[用源代码插入背景音乐、背景图片]

汉唐书道

不少朋友们问关于HTML代码的使用方法，现在网上搜集了一些，供大家参考。


载入音乐
基本语法：
<*EMBED SRC="音乐文件地址">
常用属性如下：
SRC="FILENAME" 设定音乐文件的路径
AUTOSTART=TRUE/FALSE 是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE
LOOP=TRUE/FALSE 设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。
STARTIME="分:秒" 设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20
VOLUME=0-100 设定音量的大小。如果没设定的话，就用系统的音量。
WIDTH HEIGHT 设定控制面板的大小
HIDDEN=TRUE 隐藏控制面板
CONTROLS=CONSOLE/SMALLCONSOLE 设定控制面板的样子
例一：
<*EMBED SRC="midi.mid" autostart=true hidden=true loop=true>
作为背景音乐来播放，隐藏了播放器。
例二：
<*EMBED SRC="midi.mid" loop=true width=145 height=60>
出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。
注明：mp3 rm ra ram asf mid等音乐都用这个播放器
IE中的的背景音乐
代码如下：
&#35;=循环数
注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid等格试的音乐。
一拌格试如下：
播放器3
<*embed width="100" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">
大播放器不直接放
<*center>  
播放器直接放 中
<*embed width="426" height="20" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="歌曲链接地址">
仿真播放器rm
<*embed src="歌曲链接地址" width="280，80%" height="60，80%" autostart="true">
视频点击播放
<*object id=videowindow1 width=480 height=330 classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6">
使用的时候把*号去掉

汉唐书道

&#35;2  
说明：一般用来插入mp3 rm ra ram asf mid等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。
二：
<bgsound src="音乐文件地址" loop=3>
说明：一般用来插入wav wma mid等格试的音乐文件。
<EMBED src=http://www.lonelytebit.org/music/alone.wma volume="100" width=0 height=0 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton"></EMBED>
插入背景图片
原代码如下：
<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=&#35;ffff00 width="100%"><TBODY><TR><TD>
帖子内容，文字或图片.....
</TD></TR></TBODY></TABLE>
<TABLE> 的参数设定（常用）：
<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="&#35;0000FF" bordercolor="&#35;CF0000" bordercolorlight="&#35;00FF00" bordercolordark="&#35;00FFFF" cols="2">
注解：
width="400"
表格宽度，接受绝对值（如 80）及相对值（如 80%）。
border="1"
表格边框的厚度，不同浏览器有不同的内定值，故请指明。
cellspacing="2"
表格格线的厚度
align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center
valign="TOP".
表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。 　　
background="myweb.gif"
表格的背景图片，与 bgcolor 不要同用。
bgcolor="&#35;0000FF"
表格的底色，与 background 不要同用
bordercolor="&#35;CF0000"
表格边框颜色
bordercolorlight="&#35;00FF00"
表格边框向光部分的颜色
bordercolordark="&#35;00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。
符：HTML基本语法教程
1，http://www.gzsums.edu.cn/webclass/html/html_design.html
2，http://www.shanxiwindow.net/teaching/htmlbook/
在线编辑器：
http://http://www.shufa.org/762.com898.net/bg/mx/
二，帖图格式
帖图基本格式如下：
<IMG src="图片连接URL地址"><*IMG> 称图形标记，主要用来插入图形标记。
<IMG> 的一般参数设定：
　例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
src="logo.gif"
图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展， 于未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称，否则 必须加上正确的路径，相对或绝对均可。
width=100 height=100
设定图片大小，此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小，以免失真，若需要改图片大小最好使用图像编辑工具。（改变大小的宽和高与原图的宽和高要成正比例，图片最好是改小不改大，以免失真。）
hspace=5 vspace=5
设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间， 是设定图片上下的空间，高度采用 pixels 作单位。
border=2
图片边框厚度
align="top"
调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom，
texttop 表示图片和文字依顶线对齐，
baseline 表示图片对齐到目前文字行底线值，
absmiddle 表示图片对齐到目前文字行绝对中央，
absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字 将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。
lowsrc="pre_logo.gif"
设定先显示低解析度的图片，若加入的是一张很大的图片，下载要很长的时间，这张低 解析度的图片会先被显示以免浏览者失去兴趣，通常是原图的黑白版本。
例1：
原代码：
" width=130>　普通插入
普通插入
例2：
" width=130 height=92 border=0 hspace=10 vspace=20"> 设定上下左右空白位置
设定上下左右空白位置
例3：
" width=130 height=92 border=4 align=middle>设定图片中间对齐，边框厚度为 4
设定图片中间对齐，边框厚度为 4
例4：
" width=180 height=152 border=0> 放大了的图片
放大了的图片
例5：
" width=130 height=92 border=0 align=right>设定图片靠右

文字设制
一，文字基本设制
基本代码如下：
<P align=center><FONT color=&#35;0066ff face=隶书 size=5>插入文字</FONT></P>
align=center　表示字体居中，可选值为居右（right）居左（left）
color=颜色代码　具体颜色代码可参照：颜色选取＜＜点击查看
face=字体　常用字体为：宋体.黑体.楷体.仿宋.幻缘.新宋体.细明体等
size=字体大小，这里的最大值为7　取值越大文字就越大
二，大字体文字
代码：
<font style=font:40pt face=新宋体 color=&#35;ff0000>插入文字</font>
font:40pt　数值越大文字就越大。
三，移动文字设置：
基本代码1：
<marquee direction=移动方向 scrollamount=移动速度数值>插入文字</marquee>
说明：direction=移动方向　可选值为向上(up)　向下(down)　向左(left)　向右(right)
基本代码2：
<marquee behavior=移动效果>插入文字</marquee>
说明：
behavior=scroll 一圈一圈绕着走　
behavior=slide
只走一次　behavior=alternate 来回走
停停走走：
代码如下：
<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>
四，文字特效显示：
效果一、<CENTER><FONT style="COLOR: &#35;e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>
效果二、<CENTER><FONT style="COLOR: &#35;e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>欢迎光临中年贴图</B></FONT></CENTER>
效果三、<CENTER><FONT color=&#35;0099ff style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; POSITION: relative; LINE-HEIGHT: 150%; WIDTH: 450px">欢迎光临中年贴图</FONT></CENTER>
效果四：
原代码：
"><FONT color=red face=楷体_gb2312 size=7>欢迎光临中年贴图</FONT></MARQUEE></MARQUE></MARQUEE>
效果五：
原代码：
<FONT color=&#35;0096ff face=隶书 size=7><MARQUEE height=50 width=240>欢迎你朋友</FONT></MARQUEE><FONT color=&#35;0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=240>友朋你迎欢</MARQUEE></FONT></FONT>
注明：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width的取值。

汉唐书道

[&#35;3  
在线音乐播放器代码
<IFRAME marginWidth=0 marginHeight=0 src="http://ztx_sinr.go.nease.net/index2.htm" frameBorder=0 width=620 height=20></IFRAME>
在线MTV欣赏代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://ztxsinr.02835.com/mymtv.htm" frameBorder=0 width=800 height=600></IFRAME>
网络电视台代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://ztxsinr.02835.com/tv.htm" frameBorder=0 width=310 height=340></IFRAME>
在线电台代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://free2.e-168.cn/zhangtx/radio.htm" frameBorder=0 width=310 height=266></IFRAME>
12星座精美代码:
<IFRAME marginWidth=0 marginHeight=0 src="http://free2.e-168.cn/zhangtx/star/star.htm" frameBorder=0 width=730 height=340></IFRAME>  
通用全页引用代码:
<IFRAME marginWidth=0 marginHeight=0 src="你要引用的网址" frameBorder=0 width=300 height=120></IFRAME>
游动的金鱼代码!
</SPAN><EMBED style="LEFT: 10px; POSITION: absolute; TOP: 0px; absolute: " align=right src=http://chaozsq.home.sunbo.net/xfile.php?xname=13GI401&fname=yu.swf width=800 height=768 type=application/x-shockwave-flash ;; quality="high" wmode="transparent"></TD>  
背景图片加文字代码
方法一：文章编辑的时候点击创建表格后在弹出的窗口中把边框设置为0,然后填上背景图片的链接地址就好了
也可以用代码：
<TABLE height=600 width=600 background=你的背景图片地址 border=0>
<TBODY>
<TR>
<TD>你的背景图片地址</TD></TR></TBODY></TABLE>
方法二：
<body background=你的背景图片地址>
方法三：
使图片始终位于页面的中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面的内容一起滚动。如果你觉得照片位于页面的正中间不满意，只需要调整以下代码中的“background-position"的值就可以了。代码如下：

<STYLE type=text/css><!--body {background-image:url(你的背景图片地址);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--> </STYLE>

雨悦

下面引用由汉唐书道在 2005/08/22 09:36am 发表的内容：

谢谢总版！
可是，现在公社好象不能用HTML标签啊？？？ :em10:

汉唐书道

下面引用由雨悦在 2005/08/22 09:46am 发表的内容：
谢谢总版！
可是，现在公社好象不能用HTML标签啊？？？

有没有例子啊？HTML语言网页通用啊？ :em10:

雨悦

下面引用由汉唐书道在 2005/08/22 04:34pm 发表的内容：
有没有例子啊？HTML语言网页通用啊？

请看第一行：HTML 　标签: 不可用
[UploadFile=B2B6BBF1_1124955825.jpg]