查看完整版本: [-- HTML代码贴速成教程 --]


开心谷---快乐源泉!人人播撒快乐,快快乐乐每一天!快乐 幽默 图片 美女 影视 原创 开心 新闻 -> □建站资料□ -> HTML代码贴速成教程 [打印本页] 登录 -> 注册 -> 回复主题 -> 发表主题

兰香淡淡 2006-11-24 23:13

                          第一课

________________________________________________

下面是:一背景,一图片,一文字说明,

一链接,一播放器基础html代码帖

请换掉蓝体背景图片地址,

分隔线图片地址,图片地址,

文字说明内容,链接地址和说明,

播放音乐地址,换上你的签名,

完成第一次作业!

_________________________________________________

face=宋体——>face=楷体 (改变字体)

color=#FF0000——>color=#FF00FF (改变颜色)

size=3——>size=6 (改变字体大小)

width=400 height=40——>width=0 height=0 (隐藏播放器)

1.背景音乐(适合mid wma等格式)

<bgsound src=音乐网址 Loop=-1>

2.音频(适合MP3 WMA RM等很多格式)代码如下:

<P align=center><embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40></P>

3.Flash的MTV请用下面代码替换上面粉红体代码!

<P align=center><embed src格式文件连接地址 width=450 height=350></P>

                              第二课

_____________________________________________

下面是四背景,三图片,三行文字说明,

三链接,一播放器html代码帖。

请换掉蓝体背景图片地址,

分隔线图片地址,图片地址,

文字说明内容,链接地址和链接说明,

播放音乐地址,换上你的签名,

完成第二次作业!

至少三图片,三行文字,三链接,

请复制代码加在相应后面!!!

_________________________________________

cellSpacing=0——>cellSpacing=5 (单元格间距)

cellPadding=0——>cellPadding=25 (单元格边距)

width=420——>width=400 或 width="100%"——>width="80%"(改变宽度,太宽将不能显示全帖)

border=0——>border=3 (边框粗细)

背景宽不要太大,能显示全帖!

要增加图片和链接请复制其中代码依次排列!

                              第三课

_____________________________________________

下面是八背景,小装饰图片,

大体文字标题,移动图片,

滚动文字说明,透明FLASH,

单链接,一播放器html帖。

请换掉蓝体背景图片地址,

分隔线图片地址,图片地址,

文字说明内容,链接地址和说明,

播放音乐地址,换上你的签名图片,

完成第三次作业!至少三特效

(如滚动文字、移动图片、透明FLASH),!

_____________________________________________


<TABLE cellSpacing=30 cellPadding=0 width="100%" align=center background=外背景图片地址 border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" background=2背景图片地址(2、6层一样) border=3> <TBODY> <TR> <TD> <TABLE cellSpacing=3 cellPadding=0 width="100%" background=3背景图片地址(3、5层一样) border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" background=4背景图片地址 border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=3 cellPadding=0 width="100%" background=5背景图片地址(3、5层一样) border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" background=6背景图片地址(2、6层一样) border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" background=7背景图片地址 border=0> <TBODY> <TR> <TD> <TABLE cellSpacing=0 cellPadding=20 width="100%" background=8背景图片地址 border=0> <TBODY> <TR> <TD> <P align=center><IMG src="小装饰图片地址"> <P align=center><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">大体字标题</FONT></P> <P align=center><IMG src="分隔线图片地址"> <P align=center><MARQUEE scrollDelay=300 direction=up height=250><CENTER><FONT face=华文行楷 color=red size=5>滚动文字1<BR><BR>滚动文字2行<BR><BR>滚动文字3行<BR><BR>依此类推</FONT></CENTER></MARQUEE></P> <P align=center><IMG src="分隔线图片地址"> <P align=center><MARQUEE scrollDelay=80 direction=left height=250 width=320><IMG src="移动图片地址1"><IMG src="移动图片地址2"><IMG src="移动图片地址3"><IMG src="依此类推"></MARQUEE><P align=center> <P align=center><IMG src="分隔线图片地址"> <P align=center><TABLE height=300 cellSpacing=0 cellPadding=0 width=320 background="透明背景图片地址" border=3> <TBODY> <TR> <TD > <P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src="透明swf文件地址" width=320 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high"></P> </TD></TR></TBODY></TABLE></P> <P align=center><IMG src="分隔线图片地址"> <P align=center><embed src=在线音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=320 height=30></P> <p align=center><A href="歌曲连结地址" target=_blank><FONT color="#FF0000" size="4" face=#000000>歌曲名称</FONT></A></font></p> <P align=center><IMG src="分隔线图片地址"> <P align=center><IMG src="小装饰图片地址"><IMG src="签名图片地址"><IMG src="小装饰图片地址"> </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>

FONT-SIZE: 40pt——>FONT-SIZE: 50pt (大体文字大小)

scrollDelay=80 direction=left——>scrollDelay=100 direction=up (改变速度和移动方向)

字体:宋体 新宋体 仿宋_GB2312 黑体 楷体_GB2312 幼圆 隶书 方正舒体 华文新魏 华文行楷 华文细黑 华文彩云

颜色:#FF0000(大红) #FF00FF(粉红) #FF9900(橘黄) #FFFF00(黄) #00FF00(绿) #00CC66(浅绿)

#00FFFF(蓝) #0000FF(深兰) #663300(紫) #6633CC(浅紫) #000000(黑) #999999(浅黑)

边框多了请调整:

width=420宽度值,以便看到全贴,

要增加图片和链接请复制其中代码依次类推!

_________________________________________________________________
html贴图教程


一,贴背景:

一层背景:


代码:


<center><*TABLE borderColor=#000000 height=300 cellSpacing=2 cellPadding=3 width=500 background="图片链接地址" border=1>
<TBODY>
<TR>
<TD>


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

说明:

居中效果

border 边框粗细

width 边框宽度

height 边框高度

cellspacing单元格间距

cellpadding边框间距

borderColor边框颜色
注意这个边框大小一定要合图片的大小。
移动文字基本语法: (一)

开心谷欢迎您
代码:
<marquee direction=left>开心谷欢迎您</marquee>

<marquee direction=right>开心谷欢迎您</marquee>

<marquee behavior=scroll>开心谷欢迎您</marquee>

<marquee behavior=slide>开心谷欢迎您</marquee>

<marquee behavior=alternate>开心谷欢迎您</marquee>

说明:


left 向右移动

right 向左移动

scroll 一圈一圈绕着走

slide 只走一次

alternate 来回走
代码:


<marquee loop=3 width=454 behavior=alternate>开心谷欢迎您!</marquee>


<marquee scrollamount=20>开心谷欢迎您!</marquee>
 
<marquee scrolldelay=500 scrollamount=100>开心谷欢迎您!</marquee>


<marquee direction=up scrollamount=3>

<center><*font color="008000" size="3" face="宋体">开心谷欢迎您!</font>

</marquee>

<marquee direction=down scrollamount=3>

<center>开心谷欢迎您!</font>

</marquee>

说明:
alternate 向右移动

scrollamount 移动速度

scrolldelay 停停走走

direction=up 向上

direction=down 向下

[s:18260] 在背景中插入图片:
代码:

<div align="center">

<table border="1" width="73%" height="469" background="图片链接地址">

<tr>

<td>

<div align="center">

<font color="#00FF00">发呆的狙击手!

bordercolorlight="#0000FF" bordercolordark="#0000FF">

<img src="图片链接地址">

</div>

</td>

</tr>

</table>

</div>

[s:18260] 加入透明FLASH效果

代码
<EMBED height=560
pluginspage=http://www.macromedia.com/go/getflashplayer src="文件连接地址.swf"
type=application/x-shockwave-flash width=400 wmode="transparent"
quality="high"></EMBED>

width=宽度 height=高度 可任意调整

演示代码如下:

<TABLE height=350 cellSpacing=0 cellPadding=0 width=500 background="图片连接地址" border=3>
<TBODY>
<TR>
<TD >
<P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src="文件连接地址.swf" width=400 height=200 type=application/x-shockwave-flash wmode="transparent" quality="high"></P><BR>
</P></TD></TR></TBODY></TABLE>
[请注意,一个贴子里不要加太多的FLASH,会影响打开帖子速度的]

[s:18260] 图片的移动效果:

代码:和文字的移动实质是相同的

<MARQUEE behavior=alternate width="90%"><IMG src="图片连接地址"><IMG src="图片连接地址"><IMG src="图片连接地址"><IMG src="图片连接地址"></MARQUEE>

[s:18260] 贴音乐的公式:

反复播放的

<EMBED src="音乐连接地址" width=0 height=0 type=audio/mpeg loop="true" autostart="true" panel="0">

一般播放:

<EMBED src="音乐连接地址" width=123 height=23 type=application/vnd.rn-realmedia autostart="true">

这里width=0 height=0 是隐藏

[s:18260] 双背景效果:

代码一如下:


<TABLE height=400 cellSpacing=30 cellPadding=20 width="90%" align=center bgColor=blue background="图片连接地址" border=2>
<TBODY>
<TR>
<TD align=middle background="图片连接地址"><FONT color=yellow size=5 align="center"></FONT></TD></TR><*/TBODY></TABLE></TBODY>

[s:18260] 双背景代码二:

<TABLE style="WIDTH: 533px; HEIGHT: 5662px" cellSpacing=17 borderColorDark=black cellPadding=10 width=533 align=center borderColorLight=#7d7dd8 background="图片连接地址"border=7>
<TBODY>
<TR>
<TD width="100%" background="图片连接地址"></TD></TR></TBODY></TABLE></TBODY>
呵呵,都是一样的。表格数字的设定都是自己随意掌握的,可以自己练习使用


贴内背景公式:
<center><*table cellpadding=0 cellspacing=0 border=0 WIDTH=100% align=center table background="内背景图片地址" width=720><tr><td><center>
。。。。。。
(要贴的内容--图片或文字)
。。。。。。
<td></table>
图片向左移动
<marquee directio=left><8img src="图片地址"></marquee>
文字向左移动
<marquee directio=left><*font size=? color=?>文字部分</font></marquee>
贴FLASH
<embed src="★"width="660"height="450">
藏歌
<embed src="★"HIDDEN=TRUE AUTOSTART=TRUE LOOP=TRUE>
帖子外背景底图
<body background="地址">
外背景底图图不动
<body background="地址" bgproperties="fixed">
图片居中
<center><img src="图片地址">

贴播放器
<embed src="   ">http://mp3.baidu.com/r?url=http: ... c/pop/469.mp3" width=480 height=35 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types>  
   
交替舞动的蝴蝶
<FONT COLOR=GREEN><marquee behavior="alternate"scrollamount=8 direction=right><b><font color=#7700bb size=6><FONT color=red><MARQUEE behavior=alternate direction=up height=150 width=50><img src=http://www.fyj.cn/dhome/dimg/4013.gif></MARQUEE><FONT color=orange><MARQUEE behavior=alternate direction=up height=200 width=50><img src=http://www.fyj.cn/dhome/dimg/4013.gif></MARQUEE><FONT color=Fuchsia><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif></MARQUEE><FONT color=olive><MARQUEE behavior=alternate direction=up height=200 width=50><img src=http://www.fyj.cn/dhome/dimg/4013.gif></MARQUEE><FONT COLOR=GREEN><*MARQUEE behavior=alternate direction=up height=150 width=50><img src=http://www.fyj.cn/dhome/dimg/4013.gif></MARQUEE><FONT color=red><MARQUEE behavior=alternate direction=up height=200 width=50><img src=http://www.fyj.cn/dhome/dimg/4013.gif>
双背景代码之三

<TABLE cellSpacing=0 cellPadding=20 width="100%" background=http://yuandi.com/wysc/zheng/16/hollyhockstrip2.jpg border=0>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 borderColorDark=#6a373a cellPadding=0 width="100%" borderColorLight=#c78d91 background=http://yuandi.com/wysc/zheng/16/hollyhocktile.jpg border=1>
<TBODY>
<TR>
<TD width="100%">
<P align=center><*/P>
<P align=center><*FONT face=隶书 color=#0000ff size=6>
<MARQUEE direction=right width=250 height=50>开心谷欢迎您</MARQUEE>
</P><DIV>
</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>



兰香淡淡 2006-11-24 23:15
 
                  (新手教程)
一些新手看到别人做出漂亮的帖子边框都很好奇是怎么做成的,说穿了也就是巧妙的应用了表格的相关属性。这里我就统计几种常见的表格使用方法,可能大家也有更多更好的想法,我这里也就起个抛砖引玉的作用吧。

说明:看起来好像是用了四层表格,其实只用了两层,同一个背景图。主要是边框向光和背光部分的颜色应用起到的效果。 原代码如下: <table lign="center" border="1" cellpadding="8" cellspacing="10" width="400" background="" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center"> <table lign="center" border="1" cellpadding="4" cellspacing="6" width="100%" background="" bordercolorlight="#0C091D" bordercolordark="#C0B4FE"><tr><td width="100%" align="center"> <br> <img border="0" src=""><br> <br> </td></tr></table></td></tr></table>

例2:

说明:这种效果其实有好几种方法做出来,但是在我认为这种是最简单的,只是金色背景那层(第二层)表格的宽是100%其它属性值一律为0。主要是在第三层,第三层的宽width的取值要是99%,而第三层的td里的width属性要是100%。 源代码如下: <table lign="center" border="0" cellpadding="0" cellspacing="10" width="400" background=""><tr><td width="100%" align="center"> <table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background=""><tr><td width="100%" align="center"> <table lign="center" border="0" cellpadding="0" cellspacing="0" width="99%" background=""><tr><td width="100%" align="center"> <br> <img border="0" src=""><br> <br> </td></tr></table></td></tr></table></td></tr></table>

例3:

说明:这个好像没什么特别的,就是把四个角上的框架图用表格分开。 源代码: <table lign="center" border="0" cellpadding="0" cellspacing="0" width="400" background=""><tr><td width="100%" align="center"> <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src=""></TD><TD width="50%" align=right><img border="0" src=""></TD></TR></TBODY></TABLE> <br> <img border="0" src=""><br> <br> <TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR><TD width="50%" align=left><img border="0" src=""></TD><TD width="50%" align=right><img border="0" src=""></TD></TR></TBODY></TABLE></td></tr></table>

例4:

说明:把图片应用到边框上面,整个表格的大小很重要,调整也是件麻烦的事,所以建议大家用表格格线的厚度cellspacing的属性值或者是表格格线的间距cellpadding的属性值来调整。 源代码:

<table lign="center" border="1" cellpadding="0" cellspacing="10" width="400" background="" bordercolorlight="#C0B4FE" bordercolordark="#0C091D"><tr><td width="100%" align="center"> <table lign="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="" bordercolor="#C0B4FE"><tr><td width="100%" align="center"> <table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background=""><tr><td width="100%" align="center"> <br> <img border="0" src=""><br> <br></td></tr></table></td></tr></table></td></tr></table>

好像还有一些吧`````只是偶现在什么也不记得了,把想好的东西全忘了,等得的时候再来加上吧。 关与内容居中: 说明: 一般大家做帖子为了美观总是把整体内容全都居中,内容中的文字图片等都加上了居中的代码CENTER,频繁的使用同一组代码,用多了大家是不是觉得有些杂乱的感觉?在这里我都教大家一招,只需要用一次就可以使整个表格内的内容全都居中。 下面是大家一般使用的表格代码: <table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background=""><tr><td></td></tr></table> 将其改成如下代码: <table lign="center" border="0" cellpadding="0" cellspacing="0" width="100%" background=""><tr><td width="100%" align="center"></td></tr></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"><tr><td>

</td></tr></table>

width="400" 表格宽度,接受绝对值(如 80)及相对值(如 80%)。


border="1" 表格边框的厚度,不同浏览器有不同的内定值,故请指明。


cellspacing="2" 表格格线的厚度


cellpadding="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 将会失效




兰香淡淡 2006-11-24 23:17
西西~
我也不懂
发来有兴趣的可以一起参考
[s:18257]

风自由 2006-11-30 14:25
哎呀!先放着哪天好好学学 [s:18258]

白兰度·希特 2007-03-07 04:19
这个我要学起来好难..!
不过我回努力的。...!

歆梦 2007-03-09 20:54
看不懂耶!
西西,看来我想学会是不可能的了.

白兰度·希特 2007-03-10 01:22
[转载]一些不常用的html代码
信息来源:网

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table
2. <body onselectstart="return false"> 取消选取、防止复制
3. onpaste="return false" 不准粘贴  

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

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架
<script language="javascript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
// --></script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

10. <noscript><iframe src=*.html></iframe></noscript> 网页将不能被另存为

11. <input type=button value=查看网页源代码
onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'">

12. 怎样通过asp的手段来检查来访者是否用了代理
<% if Request.ServerVariables("HTTP_X_FORWARDED_FOR")<>"" then
response.write "<font color=#FF0000>您通过了代理服务器,"& _
"真实的IP为"&Request.ServerVariables("HTTP_X_FORWARDED_FOR")
end if
%>

13. 取得控件的绝对位置

//javascript
<script language="javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"\nleft="+l);
}
</script>

//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
end function
--></script>

14. 光标是停在文本框文字的最后
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">

15. 判断上一页的来源
asp:
request.servervariables("HTTP_REFERER")

javascript:
document.referrer

16. 最小化、最大化、关闭窗口
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close"></OBJECT>

<input type=button value=最小化 onclick=hh1.Click()>
<input type=button value=最大化 onclick=hh2.Click()>
<input type=button value=关闭 onclick=hh3.Click()>
本例适用于IE

17.
<%
'定义数据库连接的一些常量
Const adOpenForwardOnly = 0 '游标只向前浏览记录,不支持分页、Recordset、BookMark
Const adOpenKeyset = 1 '键集游标,其他用户对记录说做的修改将反映到记录集中,但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
Const adOpenDynamic = 2 '动态游标功能最强,但耗资源也最多。用户对记录说做的修改,增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。
Const adOpenStatic = 3 '静态游标,只是数据的一个快照,用户对记录说做的修改,增加或删除记录都不会反映到记录集中。支持向前或向后移动

Const adLockReadOnly = 1 '锁定类型,默认的,只读,不能作任何修改
Const adLockPessimistic = 2 '当编辑时立即锁定记录,最安全的方式
Const adLockOptimistic = 3 '只有在调用Update方法时才锁定记录集,而在此前的其他操作仍可对当前记录进行更改、插入和删除等
Const adLockBatchOptimistic = 4 '当编辑时记录不会被锁定,而更改、插入和删除是在批处理方式下完成的

Const adCmdText = &H0001
Const adCmdTable = &H0002
%>

18. 网页不会被缓存
HTM网页
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META HTTP-EQUIV="expires" CONTENT="0">
ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.cachecontrol = "no-cache"
PHP网页
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

19. 检查一段字符串是否全由数字组成
<script language="javascript"><!--
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>

20. 获得一个窗口的大小
document.body.clientWidth,document.body.clientHeight

21. 怎么判断是否是字符
if (/[^\x00-\xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");

22.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

23. 日期减去天数等于第二个日期
<script language=javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("12/23/2002",2)
</script>

24. 选择了哪一个Radio
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>

25.获得本页url的request.servervariables("")集合
Response.Write "<TABLE border=1><!-- Table Header --><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>"
for each ob in Request.ServerVariables
Response.Write "<TR><TD>"&ob&"</TD><TD>"&Request.ServerVariables(ob)&"</TD></TR>"
next
Response.Write "</TABLE>"

26.
本机ip<%=request.servervariables("remote_addr")%>
服务器名<%=Request.ServerVariables("SERVER_NAME")%>
服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>
服务器端口<%=Request.ServerVariables("SERVER_PORT")%>
服务器时间<%=now%>
IIS版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>
脚本超时时间<%=Server.ScriptTimeout%>
本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>
服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>
服务器解译引擎<%=ScriptEngine & "/"& ScriptEngineMajorVersion &"."&ScriptEngineMinorVersion&"."& ScriptEngineBuildVersion %>
服务器操作系统<%=Request.ServerVariables("OS")%>

27.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">

28. 检测某个网站的链接速度:
把如下代码加入<body>区域中:
<script language=javascript>
tim=1
setInterval("tim++",100)
b=1

var autourl=new Array()
autourl[1]="http://www.njcatv.net/"
autourl[2]="javacool.3322.net"
autourl[3]="http://www.sina.com.cn/"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="http://www.cctv.com/"

function butt(){
document.write("<form name=autof>")
for(var i=1;i<autourl.length;i++)
document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text name=url"+i+" size=40> =》<input type=button value=GO onclick=window.open(this.form.url"+i+".value)><br/>")
document.write("<input type=submit value=刷新></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
b++
}
function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 onerror=auto('http://"/;;;;;+autourl+"')>")}
run()</script>

29. 各种样式的光标
auto :标准光标
default :标准箭头
hand :手形光标
wait :等待光标
text :I形光标
vertical-text :水平I形光标
no-drop :不可拖动光标
not-allowed :无效光标
help :?帮助光标
all-scroll :三角方向标
move :移动标
crosshair :十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize

1、 去掉IE的滚动条
有时候做好的网页明明没有超出窗口,可IE却偏偏给加上滚动条,这样看上去很不舒服,其实这也是可以通过一些小技巧避免的。具体如下:
<body style=”overflow-x:hidden”>…</body> //去掉X轴方向的滚动条
<body style=”overflow-y:hidden”>…</body> //去掉Y轴方向的滚动条
<body style=”overflow:hidden”>…</body> //去掉全部的滚动条
现在你看到的和你想像中的网页应该一样了吧,如果其中有什么不明白的地方可以参照注释中的说明。

2、 使网页中的复制无效
有方法防止网页被保存了(参见《你别看我的源代码》),可不可以也防止网页内容被复制呢?答案是当然可以。看看下面的例子你就会明白的。
<html>
<head>
<script language=”javascript”>
function nocopy() {
alert(“对不起,你不能非法复制本站内容”);
event.returnvalue=false;
}
</script>
</head>
<body oncopy=”nocopy()”>copyright by commander.</body>
</html>
这其实中是利用了document的一个oncopy事件,也就是说当发生复制事件时,弹出警告框,同时事件(event)的返回值为false使oncopy事件失效,从而达到防止复制的目的。

3、 用脚本控制浏览器
看到标题是不是有点不相信,那么试试下面的这几个例子吧!你一定会吃惊的。
在<body>和</body>之间加入如下代码:
<button onclick=”document.execCommand(‘open’)”>打开</button>
<button onclick=”document.execCommand(‘saveas’)”>另存为…</button>
<button onclick=”document.execCommand(‘print’)”>打印</button>
上面其实都是利用了document.execCommand()这个内置的函数,其参数为相应的浏览器命令,还有很多命令就留给大家自己发现吧!

4、 IFrame也可以编辑文字
有没有想过除了表单(<form>)之外还有其它的网页元素可以编辑文字呢?只要使用IFrame的隐藏的一个属性就可以使IFrame成为一个文本编辑器。
<html>
<body onload=”editer.document.designMode=’On’”>
<IFrame ID=”editer”></IFrame>
</body>
</html>
其中designMode属性表示IFrame的设计模式的状态(开/关),还在犹豫什么呢,快试试吧!
只要巧妙的利用这一特性就可以制作很多意想不到的效果。如果下面我们来做一个图片编辑器。
<html>
<body onload=”imgEditer.document.designMode=’On’;imgEditer.document.write(‘<img src=图片.gif>’)”>
<IFrame id=”imgEditer”></IFrame>
</body>
</html>
用鼠标点击图片是不是有新的发现,其实大家只要利用自己的想象和充分利用这个属性一定能做出更多的花样来
5、 打开硬盘
这是打开硬盘的另一种方法,把它写出来只是想告诉大家,要达到同一个目的有很多种方法,这里就是利用了表单的Action属性达到的,其实打开硬盘有很多种方法,只是这种不太被人们注意,所以这里就选择了这种方法。
<form action=file ://c|><input type=”submit” value=”打开C盘”></form>

白兰度·希特 2007-03-10 01:24
[转载]HTML和JS互相转换的简单代码
信息来源:危险危危的BLOG

在站长站论坛看到
试了一下
感觉挺有用的...

HTML转JS代码如下:
<table bgcolor='#EFFBFE' bordercolorlight='#0072BC' border=1 cellspacing=0 cellpadding=3 bordercolordark='#FFFFFF' width=750 align='center'>
<TR bgcolor="#E6F2FF">
<td width='775%' align='center' vAlign='center' style='font-size: 14px; color: #FF0000'>html转js-html转js脚本代码</TD>
</TR>
<tr align='center'>
<td height=28><table width="100%">
<tr>
<td align="middle" valign="top" width="760"><div align="center">
请将html源代码拷贝到下面表单中:<br>
<textarea name="textarea" cols="99" rows="12" id="oSource" onpropertychange="change()"></textarea>
<br>
下面表单中是相应的JS代码:<br>
<textarea name="textarea2" cols="99" rows="12" id="oResult" title="双击复制" ondblclick="this.select();oResult.createTextRange().execCommand("Copy")"></textarea>
<br>
<script>
function change(){
oResult.value="document.writeln(\""+oSource.value.replace(/\\/g,"\\\\").replace(/\//g,"\\/").replace(/\'/g,"\\\'").replace(/\"/g,"\\\"").split('\r\n').join("\");\ndocument.writeln(\"")+"\")"
} </script>
</div></td>
</table></td>
</tr>
</table>




JS 转 HTML代码如下:
<p>请将js源代码拷贝到下面表单中: <br>
<textarea id="oResult" onpropertychange="rechange()" ondblclick='this.select();oResult.createTextRange().execCommand("Copy")' title="双击复制" ></textarea>
<br>
下面表单中是相应的HTML代码: <br>
<textarea id="Re" ondblclick='this.select();this.createTextRange().execCommand("Copy")' title="双击复制"></textarea>
<script>
function rechange(){
Re.value=oResult.value.replace(/document.writeln\("/g,"").replace(/"\);/g,"").replace(/\\\"/g,"\"").replace(/\\\'/g,"\'").replace(/\\\//g,"\/").replace(/\\\\/g,"\\")
}
</script>

白兰度·希特 2007-03-10 01:24
[转载]HTML在线编辑器的调用方法
信息来源:Webyanhai.com

HTML在线编辑器不需要懂得使用Dreamweaver,会用Word就会使用此编辑器,在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。
但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢?!
首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中,文件名是gledit.htm上传图片的前台页面:http://www.jfinfo.com/room/admin/img_upload.asp
HTML在线编辑器有两种基本调用方法
一、使用object调用(http://www.jfinfo.com/room/admin/editor.asp):
1、怎么在web页中嵌入html编辑器: 我们在需要嵌入得位置加入以下html代码:<object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
其中object标签里面得data后面接得数据就是我们所要调用得在线编辑器页得路径,id就是我们调用object得id,后面取编辑器中得数据时就要用到这个id。Width和height就是编辑器得高度和宽度了。
2、怎么取得html编辑器中的数据:所有需要提交的内容我们都是放在一个表单里面,同样利用object调用的编辑器也放在这个表单里面,同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"> )用以在提交的时候临时保存html在线编辑器的数据,因为在asp或者jsp,php中不能直接获取表单中的object的内容,所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中:首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口,我们利用自己写的程序来实现上传本机图片到服务器上,然后我们需要记录图片的路径,然后通过html在线编辑器的值中加入显示图片的html标签。详细说明及代码如下:
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在'img_upload.asp'中我们将提交的图片上传到服务器制定目录然后记录图片路径
<script language=javascript>
var src='<%="upload/"&newname%>';
opener.form1. doc_html.value +="<img border=0 src="+src+">";
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据:当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容,例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>,要注意这里我们用隐藏的textarea而不能用隐藏的input,因为数据里面可能包含了回车换行,所以如果我们使用<INPUT TYPE="hidden" name=content value="<%=(rs("Content")%>">很可能因为<%=(rs("Content")%>有换行而出现HTML错误(value=后面接的数据必须保证是在一行,否则出错)。然后按照前面介绍的方法使用object调用HTML在线编辑器,方法和代码同上,现在我们要做的其实就是提交时候的逆过程,我们只要将隐藏文本区域的内容复制到HTML在线编辑器就可以了,在这里我们在body里面加上<body onload="document.form1. doc_html.value=document.form1.content.value">,这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了,提交过程和上面介绍的一样,在此就不赘述了。


二、使用iframe调用(http://qxd.5599.net/by/source/article/manage/gledit.htm
1、 怎么在web页中嵌入:我们在需要嵌入得位置加入以下html代码:<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>其中"src="后面接得数据就是我们所要调用得在线编辑器页得路径,id就是我们调用IFRAME得id,Width和height就是编辑器得高度和宽度了。
2、 怎么取得html编辑器中的数据:同样所有需要提交的内容我们都是放在一个表单里面,同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"> )用以在提交的时候临时保存html在线编辑器的数据,我们借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
</SCRIPT>
<FORM METHOD=POST ACTION="Article_add_save.gl" name="form1" onsubmit=" subchk()">
<input type="hidden" name="content" >
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>
</FORM>
在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
2、怎么取得html编辑器中的数据:所有需要提交的内容我们都是放在一个表单里面,同样利用object调用的编辑器也放在这个表单里面,同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content"> )用以在提交的时候临时保存html在线编辑器的数据,因为在asp或者jsp,php中不能直接获取表单中的object的内容,所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下:
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中:首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口,我们利用自己写的程序来实现上传本机图片到服务器上,然后我们需要记录图片的路径,然后通过在调用html在线编辑器的web页中写一个函数在光标的位置插入显示图片的html标签。详细说明及代码如下:
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在调用编辑器的页面中我们定义好插入html代码到编辑器的函数
<script language=javascript>
function insertHtml(HtmlCode)
{
var win=window.content_html.idEditbox.document;//其中编辑区域是gledit.htm中的一个iframe,id是idEditbox
window.content_html.idEditbox.focus();//是编辑器获得焦点,防止代码插入在编辑器外地方
win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代码
}
</script>
在处理上传图片的文件中,我们调用父窗口的函数插入html代码
<script language=javascript>
var src='<%=" upload/"&newname%>';
var htmlcodes;
htmlcodes = "<img src='"+src+"' alt='<%=theForm("alt")%>' align='<%=theForm("align")%>' border='<%=theForm("border")%>' hspace='<%=theForm("hspace")%>' vspace='<%=theForm("vspace")%>'>";
opener.insertHtml(htmlcodes)
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、 怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据:当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容,例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>,在这里我们在调用编辑器的页面中的body标签里面加上<BODY onload="insertHtml(document.form1.content.value)">其中inserthtml()就是我们定义好插入html代码到编辑器的函数(具体参考插入图片的代码)。这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了,提交过程和上面介绍的一样,在此就不赘述了。

这里只是简单的向大家介绍了一下如何来调用html在线编辑器,具体代码并未一一列出,整理过程中,如果大家对文章中的内容有任何问题和建议请和我联系。

我改的一个html在线编辑器(iframe调用的时候用到的):
http://qxd.5599.net/by/source/article/manage/gledit.htm
或者
http://www.thspxa.com.cn/manage/gledit.htm

object调用的时候大家可以用这个:
http://www.jfinfo.com/room/admin/editor.asp

小七 2007-03-10 20:52
神啊。。。我看的头都晕了。。。 还是不会弄。。 [s:18262]

zbiaowen 2007-03-16 07:52
都是些乱码,看不懂哦.

逍遥 2007-07-05 10:20
头顶上好多蜜蜂~~ [s:18262]

平凡时空 2007-09-20 23:17
[attachment=177152] 太难了,神啊,救救我吧...

广凌瘟神 2007-10-25 14:19
在实践中摸索
光看是不懂滴

兰香淡淡 2007-10-27 14:26
是~说得很对 [s:30401]

淡淡清茶 2008-03-28 12:27
有教材实你例图就好了.对照学习会更快
可能偶笨吧.

怡然网上 2008-04-05 08:18
我收藏了,我要好好学习!


查看完整版本: [-- HTML代码贴速成教程 --] [-- top --]