初学者美博基础代码 - 清茶的日志

引用

回眸一笑的初学者美博基础代码

引用

悠然自得的 html基本知识——初学者进

一：背景

原代码如下：

<TABLE align=center background="帖子背景图" border=0 cellPadding=0 cellSpacing=0 borderColor=#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="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#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="#0000FF"
表格的底色，与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

cols="2"
表格栏位数目，只是让浏览器在下载表格时先画出整个表格而已。

载入音乐

基本语法：

<EMBED SRC="音乐文件地址">

常用属性如下：

src="your.mid"
设定 midi 档案及路径，可以是相对或绝对。

autostart=true
是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。

loop="true"
是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。

HIDDEN="true"
是否完全隐藏控制画面，true 为是，no 为否 (内定)。

STARTTIME="分:秒"
设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。

VOLUME="0-100"
设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定

WIDTH="整数" 和 HIGH="整数"
设定控制面板的高度和宽度。(若 HIDDEN="no")

ALIGN="center"
设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom

CONTROLS="smallconsole"
设定控制面板的外观。预设值是 console。
console 一般正常面板　　
smallconsole 较小的面板　　
playbutton 只显示播放按钮　　
pausecutton 只显示暂停按钮　　
stopbutton 只显示停止按钮　　
volumelever 只显示音量调节按钮

例一：

<EMBED SRC="midi.mid" autostart=true hidden=true loop=true>

作为背景音乐来播放，隐藏了播放器。

例二：

<EMBED SRC="midi.mid" loop=true width=145 height=60>

出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。

注明：可用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支持。

IE中的的背景音乐

代码如下：

<bgsound src="音乐文件地址" loop=#>

#=循环数

注明：这种背景音乐格式，只有在IE浏览器中才可以听到。一般用来插入wav wma mid mp3等格试的音乐。

在论坛做帖常用格试如下：

一：

<EMBED height=200 src=音乐文件地址 type=audio/x-pn-realaudio-plugin width=200 autostart="true" controls="IMAGEWINDOW,ControlPanel,StatusBar" console="Clip1"></EMBED>

说明：一般用来插入mp3 rm ra ram asf mid 等音乐文件，如果要隐藏播放器，把width和height的数值改成0或者1就可以了。

二：

<bgsound src="音乐文件地址" loop=3>说明：一般用来插入wav wma mid mp3等格试的音乐文件。

最简单的滚动条设置

<table align=center width="260" border="0">
<tr><td bgcolor="cyan"><font color="#FFFFFF"><b>带滑动条的表格</b></font></td></tr>
<tr><td bgcolor="yellow">
<div style="overflow:auto;height:80;">
看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格<td>标识后加上如下代码就可以了
</div>
</td>
</tr>
</table>

页面嵌入

<iframe src="你要嵌入的网址" width="600" height=800 marginwidth="0"

marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>

说明:(红色部分)
width和height即宽度和高度根据你所嵌入目标的高度和宽度填写,
例如你的日记本的宽为600,高为800,填上去就可以完整显示了

scroing 表示滚动条,它有三个参数,

一个是
yes, 即显示滚动条,

二是no,表示不显示滚动条.

第三是auto,系统自动判断显示或不显示滚动条~

1. 将彻底屏蔽鼠标右键,无右键菜单
<body oncontextmenu="window.event.returnvalue=false">

也可以用于网页中Table框架中

<table border oncontextmenu=return(false)><td>no</table>

2.取消选取、防止复制

<body onselectstart="return false">

3.不准粘贴
<body onpaste="return false">

4.防止复制
<body oncopy="return false;" oncut="return false;">

5.IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">
说明：关于favicon.ico文件的制作。你可以先在FW中做一个图片，属于你自己站点一个小图标。然后在ACD see将文件属性改为*.ico，然后将你做的*.ICO文件传到你的服务器目录中，然后就可以使用以上代码来实现，当别人登陆你的站点时，地址栏里使用的就是你自定义的图标了。很PP哦。

6.可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">
说明：制作方法和上面的一样。只是显示的方式不同，这个是在别人收藏你的网页地址时显示的个性图标。也很PP.

7.关闭输入法
<input style="ime-mode:disabled">
说明：这段代码是在表格提交时用到的。也就是在输入数据时不可以使用其他输入法模式。

8.永远都会带着框架
<script language="javascript"></script>
说明：frames.htm为你的网页，这也是保护页面的一种方法

9.防止被人frame
<SCRIPT LANGUAGE=javascript></SCRIPT>

10.网页将不能被另存为
<noscript><iframe src=*.html></iframe></noscript>
说明：<noscirpt>的用法很广，其中一条就是可以使JS广告失效。

11.查源文件
<input type=button value=查看网页源代码
onclick="window.location = 'view-source:'+ [url]http://www.lovq.cn/jl.asp[/url]';">　

12.COOKIE脚本记录，有很大的用处哦

<script language =“javascript“>
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = documents.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
documents.cookie="popped=yes"
}
}
</script>

13.内框架<IFRAME>使用
Iframe标记的使用格式是: 　
<iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"
name="main"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；　　width、height："内部框架"区域的宽与高；　
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，则显示; 　FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。
name:框架的名字，用来进行识别。
比如: 　当你想用父框架控制内部框架时，可以使用： target="框架的名字"来控制。
例子：<iframe src="http://www.lovq.cn";; width="100%" height="100%" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>　

14.自动跳转
在源代码中的<head>…</head>加入如下代码：
<meta http-equiv="refresh"content="3;URL=http://www.e3i5.com; charset=gb2312">
说明：content="3 表示3秒刷新到URL

15.如何改变链接的鼠标形状
只需在链接上加上这一代码就行的了
或者跟上面的用CSS写也行
style="cursor:hand"　　　　　　style="cursor:crosshair"
style="cursor:text" 　　　　　　style="cursor:wait"
style="cursor:move" 　　　　　　style="cursor:help"
style="cursor:e-resize" 　　　　style="cursor:n-resize"
style="cursor:nw-resize" 　　　style="cursor:w-resize"
style="cursor:s-resize" 　　　　style="cursor:se-resize"
style="cursor:sw-resize"
以上代码你只需要加到连接或是页面的style区里就可以实现鼠标多样化。　

16.全屏显示
<form>
<div align="center">
<input type="BUTTON" value="全屏显示" 'big', 'fullscreen=yes')">
</div>
</form>
把它放到<body>区中。

17.设为首页
<script language="javascript">

</script>
<a href="#" title="==E代时光==">设为首页</a>

18.这里是加入收藏夹的代码
<a href="#" ;.'-=E代时光=-')" target="_self" title="-=E代时光=-">加入收藏夹</a>　

19.flash图片效果
以下代码加入<head>区域
<SCRIPT language="javascript">

</SCRIPT>
以下代码加入<body>区域
<img src="http://www.lovq.cn/img/logo.gif";; style="filter:alpha(opacity=20)" width="63" height="56"> //图片地址请自己改

20.背景图片滚动
<body scroll="no" background="images/bg.jpg" link="#00FF00" alink="#FF0000" vlink="#00FF00" bgcolor="#000080" topmargin="8">
<script language="javascript">
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;}
var ScrollTimer = window.setInterval("scrollBG(410)", 20)
</script>

21.滚动特效
<marquee scrollamount="2" scrolldelay="0" direction="up" width="330" height="120" border="0" align="center" >
欢迎光临无风网络
我们地址[url]http://www.lovq.cn[/url]
</marquee>
　

22.让背景图不滚动

IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
〈Body Background="图片文件" bgproperties="fixed"〉

23.让你的网页无法另存为

<noscript><iframe src=*></iframe></noscript>

24.让IFRAME框架内的文档的背景透明

<iframe src="about :<body style='background:transparent'>" allowtransparency></iframe>

25.禁止右键：

<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" oncopy="document.selection.empty()" onbeforecopy="return false">

26.进入页面后立即自动刷新？
<meta http-equiv="refresh" content="120;url=http://www.lovq.cn">
[url]http://www.lovq.cn[/url],这是你自己的网址。

27.隐藏IFRAME的滚动条三种方法:

1. 设置iframe scrolling="no"
2. 被包含页body应用overflow:hidden
3. 被包含页的body标签加scroll="no"

28.加入背景音乐
<bgsound src="mid/min1.mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用

29.滚动
<MARQUEE direction=up height=146 scrollAmount=4></marquee>

30.细线分隔线
<hr noshade size=0 color=#C0C0C0>

31.过度方式
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
Duration的值为网页动态过渡的时间，单位为秒。
Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：
0 盒状收缩 1 盒状放射
2 圆形收缩 3 圆形放射
4 由下往上 5 由上往下
6 从左至右 7 从右至左
8 垂直百叶窗 9 水平百叶窗
10 水平格状百叶窗 11垂直格状百叶窗
12 随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17 从右上角向左下角展开
18 从右下角向左上角展开 19 从左上角向右下角展开
20 从左下角向右上角展开 21 水平线状展开
22 垂直线状展开 23 随机产生一种过渡方式

32.如何控制横向和纵向滚动条的显隐？
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

33.加入注释的格式是：　
〈!-［注释内容…］--〉

34.怎样在网页中加入 E-mail 链接并显示预定的主题?
〈A href="mailto:lovq@163.com=主题"〉……〈/a〉

35.定义本网页关键字，可以在〈Head〉〈/Head〉中加入如下代码：　
〈meta content="无风网络"〉
Content 中所包含的就是关键字,你可以自行设置。
这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的排行位置,如：
〈meta content="无风网络"〉

36.添加到收藏夹：
〈a href="java script:window.external.addFavorite([url]http://www.lovq.cn[/url]','http://www.lovq.cn');"〉添加到收藏夹〈/a〉

37.设为首页：
〈a href=# url(#default#homepage)';this.setHomePage([url]http://www.lovq.cn);[/url]〉设为首页〈/a〉

38.定制浏览器地址栏前的小图标：
A:在网页的〈head〉〈/head〉间加入以下语句：
〈link rel="shortcuticon" href="http://…/icon.ico"〉
即可。其中 icon.ico 为 16x16 的图标文件，颜色不要超过 16 色。

39.表格的分隔线可以隐藏
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线
<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

40.表格的边框不断在闪

以下方法可以令表格的边框不断在闪，很实用的

在BODY区加上

<table border="0" width="280"
style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<script language="JavaScript1.2">



</script>

41.普通表格

<table border="1" width="220" style="; left:
11; top: 11" height="26" >

<tr>

<td width="100%">普通表格</td>

</tr>

</table>

42.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"
bordercolordark="#000000" style="; left: 10; top:
49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>

43.细表格

<table border="0" frame=vsides width="219"
bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="; left: 11; top: 86">

<tr bgcolor="#FFFFFF">

<td width="100%" height="2">细表格</td>

</tr>

</table>

44.立体表格

<table border="1" width="220" bordercolorlight="#ffffff"
bordercolordark="#ffffff" style="; left: 10; top:
112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

</tr>

</table>

45.无名表格

<table width="220" align="center" style=";
left: 246; top: 12" height="51">

<tr>

<td><fieldset style="width:220" align="center">
<legend> 无名表格 </legend> 　<p align="right">　</fieldset>
<br>

</td>

</tr>

</table>

46.表中表效果Ⅱ

<table width="220" align="center" style="; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220"
align="center"> <legend> 表中表效果Ⅱ </legend> <table
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff"
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table>

47.表中表效果Ⅰ

<table width="220" align="center" style=";
left: 10; top: 120" height="138" cellspacing="1"
cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;
border-style: groove" align="center"> <legend style="color:
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
</legend> 　<p align="right">　</fieldset>

</td>

</tr>

</table>

48.表格中边框的显示

只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>

把边框变成虚线

<table width="200" cellspacing="0" cellpadding="0">
<tr align="center">
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td>
<td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td>
</tr>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td>
<td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td>
</tr>
</table>

立体感的表格

<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0">
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td>
</tr>
<tr align="center">
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td>
<td bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td>
</tr>
</table>

常用的帖子代码



1.如何在每段前加两个空格？保守估计，90％以上的帖子内容里每段文字的开头都没有两个空格，因为在记事本里写好的空格在回复时会被过滤掉，加空格的方法是在前面加上就可以了。
  2.其它符号的使用。如果你在帖子里要引用<font></font>，如果直接回复就会被解析。解决的方法是把 < 换成 < 即可。

1.加入MP3的方法：
[mp=200,22]http://user.hjenglish.com/hjmusic/homlee/couldone.mp3[/mp]
不自动播放的方法：
<EMBED src="http://user.hjenglish.com/hjmusic/homlee/couldone.mp3" width=300 height=50 type=audio/x-pn-realaudio-plugin controls="ControlPanel,statusbar" autostart="false">
</EMBED>

2.无边框，有颜色的语法：
<TABLE borderColor=#800000 cellSpacing=0 width="100%" bgColor=#000000 border=0><TBODY><TR><TD>
无边框有背景颜色语法
</TD><BR></TR></TBODY></TABLE>

3.背景图片＋图片方法：
<TABLE align=center background=背景图片网址 border=6 cellSpacing=2 borderColor=#1E90FF width=500><TBODY><TR><TD>文章</TD><*/TR></TBODY></TABLE>

4.字体后面加入背景色
<font style="BACKGROUND-COLOR: #af3f83" color="#e44e8a">字体后加背景语法</font>
style="BACKGROUND-COLOR: #af3f83"(背景颜色)
color="#e44e8a"（字体颜色）

5.有边框且有底色方法：
<table borderColor="#000000" cellSpacing="2" cellPadding="3" width="100%" bgColor="#0997f7" border="10"><tbody><tr><td>有边框且有底色的语法：举例一 </td></tr></tbody></table>

6.悬浮窗口，但是点击不弹出哦：
<DIV STYLE="cursor:arrow;filter : progidXImageTransform.Microsoft.Glow(Color=#1E90FF,Strength=#1);padding:8px;;width:200px;height:40.7px;border:0 solid #FFF8DC;top:+eval(document.body.clientHeight)-120);left:+eval(document.body.clientWidth)-280);text-align:center;"><FONT STYLE="color:#FFF8DC;font-size:12px;font-weight:bold;">

一切与答题无关的回复删除并且扣除沪元50
参与奖励60沪元 B-)<FONT></DIV>

7.只有回复才能浏览的代码：
[replyview]
1.You′ve been keeping me warm
2.I try to be strong but you′ll never be more wanted
3.To sweet beginnings and bitter endings
[/replyview]

8.插入FLash的方法：
<EMBED style="LEFT: 50px; WIDTH: 600px; ; TOP: 900px; HEIGHT: 550px" align=right src=http://www.nygyfs.com/tmswf/47.swf width=1000 height=560 type=application/octet-stream wmode="transparent" quality="high" ;;></FONT>

9.隐藏播放器的方法：
<embed src="http://user.hjenglish.com/hjmusic/homlee/couldone.mp3" hidden="true" type="audio/mpeg" loop="true" autostart="true" width="128" height="128">

10.引用网页方法：
<BR><BR><IFRAME marginWidth=0 marginHeight=0 src="http://www.hjenglish.com/hjmusic/homlee/htm/lina.htm" frameBorder=0 width="100%" scrolling=auto height=1500></IFRAME>

11.单个图片的方法：
<img src=http://图片地址 width=500 height=375>

12.将左右分为两栏：（编排比较好看，空间利用率高）：
<table align=right width=300><td>
</td></table>

13.引用网页框架：
<iframe src="http://被引用网页"; width="100%" height="1650" frameborder=0 scrolling=no></iframe>

14.虚线框入文字：（可以左右分）
<td style="BORDER: #cccccc 1px dotted; padding:10; FONT-SIZE: 12px" width="100%" align=left border=0 bgColor=#f3f3f3>每年的十月三十一日。<br><br>但万圣节的各种相关活动会从10月底开始，一直延续到11月初。</td>

15.跳转到下一个链接点：
<a href="#jump-test">跳转到下一个"链接点"</a><>
<a >下一个链接点</a>

16.文字的分区(Division)显示：

<div align=left> ... </div> （left right center）

17.使题目动起来：

（1）循环左移：<marquee>[现场直播]有奖征文评审暨颁奖典礼</marquee>
（2）左右弹撞：<marquee behavior="alternate">[现场直播]有奖征文评审暨颁奖典礼</marquee>

18.友情链接

<a href=http://www.tianyaclub.com/new/techforum/ArticlesList.asp?idWriter=72652&Key=346787081&art=0&idItem=71><font color=green>脑筋急转弯</font></a>

19.自下而上滚动文字：
<marquee align=center scrollAmount="2" direction="up" width="200" height="400">
......需要添加的文字.....
</marquee>

20.图片左右滚动：
<marquee direction="left" height=120 scrollamount=-1 width="100%"> </marquee>

21.文字特效
<CENTER><FONT style="COLOR: #e4dc9b; FILTER: shadow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>数到三就不哭</B></FONT></CENTER>

<CENTER><FONT style="COLOR: #e4dc9b; FILTER: glow(color=black); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>数到三就不哭</B></FONT></CENTER>

<CENTER><FONT color=#0099ff style="FILTER: blur(add=1, direction=40,strength=10); FONT-SIZE: 30px; FONT-WEIGHT: bolder; ; LINE-HEIGHT: 150%; WIDTH: 450px">数到三就不哭</FONT></CENTER>

22.图片蝴蝶翩翩飞
<MARQUEE behavior=alternate direction=up height=300 width=130><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=orange><MARQUEE behavior=alternate direction=up height=250 width=130><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=Fuchsia><MARQUEE behavior=alternate direction=up height=300 width=130><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE><FONT color=olive><MARQUEE behavior=alternate direction=up height=250 width=130><img src=http://bbs.mz99.com/UploadFile/2004-6/20046733350553.gif></MARQUEE>

23.飞翔的广告：
<script language="javascript">move_ad('gongwuyuan .gif','http://222.28.138.125/besti/dispbbs.asp?boardID=27&ID=13327&page=1','150','175');fix_up_ad('banzhu.gif','150','60','http://222.28.138.125/besti/dispbbs.asp?boardID=27&ID=10961&page=1');</script>

24.图片中插入飞翔flash：
<TABLE height=482 width=400 border=\"1\" cellpadding=\"1\" cellspacing=\"1\" bordercolorlight=\"#008B8B\" bordercolordark=\"#008B8B\" background=http://www.oodpoo.org/ipb/uploads/11/post-142-1101792948.jpg><TBODY><TR><TD><EMBED src=http://218.75.24.92/clcq/flashtm/26.swf width=400 height=482 type=application/x-shockwave-flash quality=high wmode=transparent>

</TD></TR></TBODY></TABLE>

25.超大字体正楷：
原代码：< align=center><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 100%" face=汉鼎繁随意 size=6>数到三就不哭</FONT><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=apar); WIDTH: 100%; COLOR: #ff00ff; LINE-HEIGHT: 100%; FONT-FAMILY: 汉鼎繁中变" size=6></FONT><FONT color=#ff00ff> </FONT></P>

移动代码

<MARQUEE scrollAmount=1 direction=up><P align=center> <FONT color=#ffddaa size=4>安德烈．瑞欧在专辑《爱在世界的每个角落》再度以他独特的編曲技法，融合古典与轻音乐大乐团的演出方式，演出一首又一首世人耳熟能祥的乐曲。选曲切合专辑的名称，從奧斯卡金曲〈世事当如此〉，到俄罗斯民谣〈黑眼珠〉；从維也納圓舞曲〈風流寡婦〉，到法國香頌經典〈巴黎天空下〉，每一首都是深具代表性與地方色彩的動人樂曲，欣賞這張專輯，乐迷更能深入體會到「音樂無國界」的意義。</MARQUEE>

渐隐的播放器

<TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=20, StartY=60, FinishX=0, FinishY=0)gray(); WIDTH: 330px; HEIGHT: 24px">
<TBODY>
<TR>
<TD><EMBED style="FILTER: invert()" align=left src=http://www.616bbs.com/picture/by/缠绵/缠绵.wma width=330 height=24 type=audio/mpeg Kern - The Winding Path 32-01.wma loop="-1" autostart="true" volume="0" ShowStatusBar="1" louie.mp3 Louie.mp3 Amo.WMA Ti Che Dirti Pausini--Volevo></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

HTML入门

　　HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。

　　所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

　　通过HTML可以表现出丰富多彩的设计风格

　　　　　图片调用：<IMG SRC="文件名">
　　　　　文字格式：<FONT SIZE="+5 " COLOR="00FFFF">文字</FONT>

　　通过HTML可以实现页面之间的跳转

　　　　　页面跳转：〈A HREF="文件路径/文件名"></A>

　　通过HTML可以展现多媒体的效果

　　　　　声频：<EMBED SRC="音乐文件名" AUTOSTART=true>
　　　　　视频：<EMBED SRC="视频文件名" AUTOSTART=true>

　　上面我们在示例超文本特征的同时，采用了了一些我们在制作超文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字　属性>”来表示。有关标签详细的内容参见下一页。

HTML的基本结构

　　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。

<HTML>

</HTML>

　　其中<HTML>在最外层，表示这对标记间的内容是HTML文档。我们还会看到一些Hompage省略<HTML>标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。<HEAD> 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。<BODY> 标记一般不省略，表示正文内容的开始。

下面是一个最基本的超文本文档的源代码：

<HTML>
<HEAD>
<TITLE>一个简单的HTML示例</TITLE>
</HEAD>

<BODY>
<CENTER>
<H3>欢迎光临我的主页</H3>
<BR>
<HR>
<FONT SIZE=2>
　　这是我第一次做主页，无论怎么样，我都会努力做好！
</FONT>
</CENTER>
</BODY>

</HTML>

━┓
　┃文件头
━┛

━┓
　┃
　┃
　┃
　┃文件体
　┃
　┃
　┃
　┃
━┛

超文本中的标签

　　刚刚接触超文本，遇到的最大的障碍就是一些用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。

1. 单标签

　　某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：

　　　　　　　　　　< 标签名称>

　　最常用的单标签是<BR>, 它表示换行。

2.双标签

　　另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是：

　　　　　　　　　　　　　<标签> 内容</ 标签>

　　其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一<EM> </EM>标记中：

3.标签属性

　　许多单标记和双标记的始标记内可以包含一些属性，其语法是：

　　　　　　　　< 标签名字属性1 属性2 属性3 … >

　　各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条
水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性：

                <HR SIZE=3 ALIGN=LEFT WIDTH="75%">

　　其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，
缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "
号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的
个数，如WIDTH=300），缺省值是"100%"。

　页面布局及文字设计

标题

　　一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：

〈H1>…</H1>　　　　　第一级标题

〈H2>…</H2>　　　　　第二级标题

〈H3>…</H3>　　　　　第三级标题

〈H4>…</H4>　　　　　第四级标题

〈H5>…</H5>　　　　　第五级标题

〈H6>…</H6>　　　　　第六级标题

请看下面的例子：

<body>

这是一行普通文字<P>
〈H1>一级标题</H1>
〈H2>二级标题</H2>
〈H3>三级标题</H3>
〈H4>四级标题</H4>
〈H5>五级标题</H5>
〈H6>六级标题</H6>
</body>

</html>

　　从结果可以看出，每一个标题的字体为黑体字，内容文字前后都插入空行。

　换行

换行<br>

　　在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上<br>标签。

　　请看下面的例子：

<html>
<head>
<title>无换行示例</title>
</head>

<body>
登鹳雀楼　白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</body>

</html>

<body>
登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。
</body>

</html>

　段落标签<P>

段落标签<P>

　　为了排列的整齐、清晰，文字段落之间，我们常用<P></P>来做标记。文件段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束。

　　<P>标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。

　　下面，我们用两个例子来说明这个标签的用法。

<body>
<P ALIGN=CENTER>
浣溪沙　<P>一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。<P>无可奈何花落去，似曾相识燕归来。小园香径几徘徊。</P>
</body>

</html>

<body>
登鹳雀楼<P>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。</P>
</body>

</html>

　线段<HR>

水平线段<HR>

　　这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：

　　　size　水平线的宽度
　　　width 水平线的长，用占屏幕宽度的百分比或象素值来表示
　　　align 水平线的对齐方式，有LEFT RIGHT CENTER三种
　　　noshade 线段无阴影属性，为实心线段

　　我们可以用几个例子来说明这线段的用法：

线段粗细的设定

<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段，无size设定，取内定值SIZE=1来显示<BR>
<HR>
<P>这是第二条线段，SIZE=5<BR>
<HR SIZE=5>
<P>这是第三条线段，SIZE=10<BR>
<HR SIZE=10>
</BODY>

</HTML>

线段长度的设定

<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示<BR>
<HR SIZE=3>
<P>这是第二条线段，WIDTH=50(点数方式)<BR>
<HR WIDTH=50 SIZE=5>
<P>这是第三条线段，WIDTH=50%(百分比方式)<BR>
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>

线段排列的设定

<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段，无ALIGN设定，(取内定值CENTER显示)<BR>
<HR WIDTH=50% SIZE=5>
<P>这是第二条线段，向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
<P>这是第三条线段，向右对齐<BR>
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>

无阴影的设定

<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示<BR>
<HR WIDTH=80% SIZE=5>
<P>这是第二条线段，有NOSHADE设定<BR>
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>

　文字的大小设置

文字的大小设置

　　提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。

　　请看示例：

<body>
<font size=7>这是size=7的字体</font><P>
<font size=6>这是size=6的字体</font><P>
<font size=5>这是size=5的字体</font><P>
<font size=4>这是size=4的字体</font><P>
<font size=3>这是size=3的字体</font><P>
<font size=2>这是size=2的字体</font><P>
<font size=1>这是size=1的字体</font><P>
<font size=-1>这是size=-1的字体</font><P>
</body>

</html>

　文字的字体

文字的字体与样式

　　HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。

请看例子：

<HTML>
<HEAD>
<TITLE>字体</TITLE>
</HEAD>

<BODY>
<CENTER>
<FONT face="楷体_GB2312">欢迎光临</FONT><P>
<FONT face="宋体">欢迎光临</FONT><P>
<FONT face="仿宋_GB2312">欢迎光临</FONT><P>
<FONT face="黑体">欢迎光临</FONT><P>
<FONT face="Arial">Welcom my homepage.</FONT><P>
<FONT face="Comic Sans MS">Welcom my homepage.</FONT><P>
</CENTER>
</BODY>

</HTML>

　　为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下：

<B>　　　　　</B>　　　　　粗体　　　　　　　　　　　　　　HTML语言

<I>　　　　　</I>　　　　　斜体　　　　　　　　　　　　　　HTML语言

<U>　　　　　</U>　　　　　加下划线　　　　　　　　　　　　HTML语言

<TT>　　　　 <TT>　　　　　打字机字体　　　　　　　　　　　HTML语言

<BIG>　　　　</BIG>　　　　大型字体　　　　　　　　　　　　HTML语言

<SMALL>　　　</SMALL>　　　小型字体　　　　　　　　　　　　HTML语言

<BLINK>　　　</BLINK>　　　闪烁效果　　　　　　　　　　　　HTML语言

<EM>　　　　 </EM> 　　　　表示强调，一般为斜体　　　　　　HTML语言

<STRONG>　　 </STRONG>　　表示特别强调，一般为粗体　　　　HTML语言

<CITE>　　　 </CITE>　　　用于引证、举例，一般为斜体　　　HTML语言

现在我们用一个实例来看看效果：

<body>
<B>黑体字</B>
<P> <I>斜体字</I>
<P> <U>加下划线</U>
<P> <BIG>大型字体</BIG>
<P> <SMALL>小型字体</SMALL>
<P> <BLINK>闪烁效果</BLINK>
<P><EM>Welcome</EM>
<P><STRONG>Welcome</STRONG>
<P><CITE>Welcom</CITE></P>
</body>

</html>

请看例子：

<HTML>
<HEAD>
<TITLE>文字的颜色</TITLE>
</HEAD>

<BODY BGCOLOR=000080>
<CENTER>
<FONT COLOR=WHITE>色彩斑斓的世界</FONT><BR>
<FONT COLOR=RED>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FFFF>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#FFFFFF>色彩斑斓的世界</FONT> <BR>
<FONT COLOR=#00FF00>色彩斑斓的世界</FONT><BR>
<FONT COLOR=#C0C0C0>色彩斑斓的世界</FONT><BR>
</CENTER>
</BODY>

</HTML>