网页代码常用技巧
在网页编辑开发过程中,一些常用的 功能会被开发者 留心并汇集起来。本文汇集了近100多例常用技巧。与大家共学习。
1.oncontextmenu=window.event.returnvalue=false 将彻底屏蔽鼠标右键
1 | 〈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.永远都会带着框架
1 | 〈script language=javascript〉〈!-- |
9.防止被人frame
1 | 〈SCRIPT LANGUAGE=javascript〉〈!-- |
10.网页将不能被另存为
1 | 〈noscript〉〈iframe src=*.html〉〈/iframe〉〈/noscript〉 |
11.〈input type=button value=查看网页源代码
1 | onclick=window.location = `view-source:`+ http://www.51js.com/`;〉 |
12.删除时确认
1 | 〈a href='javascript:if(confirm(确实要删除吗?))location=boos.asp?&areyou=删除&page=1'〉删 |
13.取得控件的绝对位置
1 | //javascript |
14.光标是停在文本框文字的最后
1 | 〈script language=javascript〉 |
15.判断上一页的来源
1 | javascript:document.referrer |
16.最小化、最大化、关闭窗口 (本例子只适用于ie)
1 | 〈object id=hh1 classid=clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11〉 |
17.屏蔽功能键Shift,Alt,Ctrl
1 | 〈script〉 |
18.网页不会被缓存
1 | 〈META HTTP-EQUIV=pragma CONTENT=no-cache〉 |
19.怎样让表单没有凹凸感?
1 | 〈input type=text style=border:1 solid #000000〉 |
20.〈div〉〈span〉&〈layer〉的区别?
1 | 〈div〉(division)用来定义大段的页面元素,会产生转行 |
21.让弹出窗口总是在最上面:
1 | 〈body onblur=this.focus();〉 |
22.不要滚动条?
1 | //让竖条没有: |
23.怎样去掉图片链接点击后,图片周围的虚线?
1 | 〈a href=# onFocus=this.blur()〉〈img src=logo.jpg border=0〉〈/a〉 |
24.电子邮件处理提交表单
1 | 〈form name=form1 method=post action=mailto:****@***.com enctype=text/plain〉 |
25.在打开的子窗口刷新父窗口的代码里如何写?
1 | window.opener.location.reload() |
26.如何设定打开页面的大小
1 | 〈body onload=top.resizeTo(300,200);〉 |
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
1 | 〈style〉 |
28.检查一段字符串是否全由数字组成
1 | 〈script language=javascript〉〈!-- |
29.获得一个窗口的大小
1 | document.body.clientWidth; document.body.clientHeight |
30.怎么判断是否是字符
1 | if (/[^/x00-/xff]/g.test(s)) alert(含有汉字); |
31.TEXTAREA自适应文字行数的多少
1 | 〈textarea rows=1 name=s1 cols=27 onpropertychange=this.style.posHeight=this.scrollHeight〉 |
32.日期减去天数等于第二个日期
1 | 〈script language=javascript〉 |
33.选择了哪一个Radio
1 | 〈HTML〉〈script language=vbscript〉 |
34.脚本永不出错
1 | 〈SCRIPT LANGUAGE=javascript〉 |
35.ENTER键可以让光标移到下一个输入框
1 | 〈input onkeydown=if(event.keyCode==13)event.keyCode=9〉 |
36.检测某个网站的链接速度:
把如下代码加入〈body〉区域中:
1 | 〈script language=javascript〉 |
37.各种样式的光标
1 | auto :标准光标 |
38.页面进入和退出的特效
1 | 进入页面〈meta http-equiv=Page-Enter content=revealTrans(duration=x, transition=y)〉 |
1 | 用哪种特效,取值为1-23: |
39.在规定时间内跳转
1 | 〈META http-equiv=V=REFRESH content=5;URL=http://www.51js.com〉 |
40.网页是否被检索
1 | 〈meta name=ROBOTS content=属性值〉 |
41.变换网页的鼠标光标
1 | 〈BODY style=CURSOR: url(http://203.73.125.205/~liangmi2/farmfrog01.cur`)〉 |
42.怎样实现在任务栏显示小图标的效果? (要使用绝对地址)
1 | 有些站点,访问时会在地址栏地址前显出小图标,添加到收藏夹后也在收藏栏中显示图标, |
43.META标签里的代码是什么意思?
1 | 〈META〉是放于〈HEAD〉与〈/HEAD〉之间的标记.以下是我总结它在网页中最常见的几种。 |
44.怎么改变滚动条的颜色,只有ie5.5版本以上才能支持。
1 | 这是使用CSS语言,在次说明一下,它和我的浏览器版本有一定的关系。 |
在这我补充几点:
- 让浏览器窗口永远都不出现滚动条。
〈body style=overflow-x:hidden;overflow-y:hidden〉或〈body style=overflow:hidden〉 或〈body scroll=no〉 - 没有水平滚动条
〈body style=overflow-x:hidden〉 - 没有垂直滚动条
〈body style=overflow-y:hidden〉
- 如何给图片抖动怎做的.
1 | 〈SCRIPT language=javascript1.2〉 |
5.在DW如何给水平线加颜色。
在DW中没有此项设置,你只能在HTML中加入代码:〈hr color=red noshade〉按F12的预览在能看到。由于在NC中不支持〈hr〉的COLOR属性,所以在DW中没有此项设置。
6.如何在网页中实现flash的全屏播放?
只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100%即可,当然也可以在Flash导出HTML文件的设置中进行设置,方法是:打开File菜单;选Publish Settings弹出导出设置对话框;在HTML标签下的Dimensions选项,下拉后选中Percent(百分比),并在WIDTH 和HEIGHT框中填100.就行了。
7.为什么我在DW中插入的Flash动画缺看不找!
如果你没有正确地安装Dreamweaver和Flash,那么在你预览的时候,Dreamweaver会提示你缺少播放的插件,请你按装InstallAXFlash.exe 并从新启动计算机。现在IE6已经捆绑这个程序。
8.在Flash中,如果屏蔽鼠标右键?FS命令都是什么意思?
fscommand (fullscreen, true/false);(全屏设置,TRUE开,FALSE关)
fscommand (showmenu, true/false);(右键菜单设置,TRUE显示,FALSE不显示)
fscommand (allowscale, true/false);(缩放设置,TRUE自由缩放,FALSE调整画面不影响影片本身的尺寸)
fscommand (trapallkeys, true/false);(快捷键设置,TRUE快捷键开,FALSE快捷键关)
fscommand (exec);(EXE程序调用)
fscommand (quit);(退出关闭窗口)
9.Flash中什么是隐形按钮。
利用button中的hit帧来制作只有感应区域而完全透明的按钮。
10.如何给Flash动画做链接。
Dreamweaver是不能给Flash制作链接的,只能在Flash中用geturl()加链接,然后再插入Dreamweaver中。
11,DW中的层的技巧。
层是可以嵌套的,我个人给大家一个技巧,在层面板中按住CTRL再拖放层到你想去成为其子层的地方就行了,我认为这是最简单直观的方法了。
12,如何改变鼠标的形状?
在Dreamweaver4中CSS样式面板:
按CTR+SHIFT+E–出现样式表对话框,点击NEW,出现编辑对话框,在左边最后一项extensions-cursor 选择你要改的指针形式就可以了,然后把你要想改变的地方运用样式表,如果整页都有在〈body bgcolor=#003063 text=#ffffff id=all〉中加入就行了。
〈span style=cursor:X`〉样例〈/span〉
这里选择(文本)作为对象,还可以自己改为其他的,如link等。
x可以等于=hand(手形)、
crosshair(十字)、
text(文本光标)、
wait(顾名思义啦)、
default(默认效果)、
help(问号)、
e-size(向右箭头)、
ne-resize(向右上的箭头)、
nw-resize(向左上的箭头)、
w-resize(向左的箭头)、
sw-resize(左下箭头)、
s-resize(向下箭头)、
se-resize(向右下箭头)、
auto(系统自动给出效果)。
13.用CSS做邮票,看看吧!
1 | 〈input type=button value=我象不象邮票? style=height:80px;border:2px dashed #cccccc〉 |
14.经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,怎么做呢!
【1、最基本的弹出窗口代码】
其实代码非常简单:
1 | 〈SCRIPT LANGUAGE=javascript〉 |
因为着是一段javascripts代码,所以它们应该放?lt;SCRIPT LANGUAGE=javascript〉标签和〈/script〉之间。〈!– 和 –〉是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open (page.html
) 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。%E5%92%8C%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84(../)%E5%9D%87%E5%8F%AF%E3%80%82%E7%94%A8%E5%8D%95%E5%BC%95%E5%8F%B7%E5%92%8C%E5%8F%8C%E5%BC%95%E5%8F%B7%E9%83%BD%E5%8F%AF%E4%BB%A5%EF%BC%8C%E5%8F%AA%E6%98%AF%E4%B8%8D%E8%A6%81%E6%B7%B7%E7%94%A8%E3%80%82)
这一段代码可以加入HTML的任意位置,〈head〉和〈/head〉之间可以,〈body bgcolor=#003063 text=#ffffff id=all〉间〈/body〉也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。
1 | 〈SCRIPT LANGUAGE=javascript〉 |
参数解释:
〈SCRIPT LANGUAGE=javascript〉 js脚本开始;
window.open 弹出新窗口的命令;
page.html
弹出窗口的文件名;
newwindow
弹出窗口的名字(不是文件名),非必须,可用空代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;
〈/SCRIPT〉 js脚本结束
【3、用函数控制弹出窗口】
下面是一个完整的代码。
1 | 〈html〉 |
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?
方法一:〈body onload=openwin()〉 浏览器读页面时弹出窗口;
方法二:〈body onunload=openwin()〉 浏览器离开页面时弹出窗口;
方法三:用一个连接调用:
〈a href=# onclick=openwin()〉打开一个窗口〈/a〉
注意:使用的“#”是虚连接。
方法四:用一个按钮调用:
〈input type=button onclick=openwin() value=打开窗口〉
15.没有用表格写的,让大家随便看看,没什么。
1 | 〈html〉 |
16.IE6已支持自定义cursor!
语法格式 cursor:url(图标) //cur或是ani文件.
cur就是WINDOWS中的光标(cursor)文件,光标文件与图标(ICON)文件除了文件头有一个位置的值不同外,实际是一样的。
ani是WINDOWS中的动画光标(图标)文件。
1 | 〈style type=text/css〉 |
17.用marquee做的滚动字幕.这也我刚看到论坛的朋友在问。
语法:
align=# | top | middle| bottom //对齐方式)
BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移动的方式
BGCOLOR=color//底色区域颜色
DIRECTION=DOWN | LEFT | RIGHT | UP //移动的方向
Loop=n //循环次数(默认是循环不止)
Scrolldelay=milliseconds//延时
height=# width=# //区域面积
hspace=# vspace=# //空白区域
scrollamount=# //移动的速度
〈marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5〉〈/marquee〉
18.在FLASH5中也存在一些字体,打散后变成一团的事是为什么?有解决的办法吗。
这是大家很常见的问题!可能是对字库支持的不好!我个是做成透明的gif图片格式,然后倒入。
19.flash的网页里“加入收藏夹”功能怎么实现?
在as中加getUrl(java script:window.external.addFavorite(http://skydesigner.51.net,
我的工作室`))
20.在Flash中,文本的动态属性和输入属性的区别。
input text在运行时可被用户或程序改变其值。
ynamic text仅允许被程序修改。
21.怎样在IE中调用Dreamweaver进行编辑.
相信很多在使用WinME或Window2000的朋友,会遇见是个问题。很简单,把我们笔记本程序打开,保存为一个 *.reg 文件。双击它将信息添加到注册表即可。
1 | REGEDIT4 |
22.设置表格虚线。
方法一:作一个1X2的图。半黑半白,再利用表格作成线。
方法二:在css里面设,要IE5。5才支持这种效果。
style=BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED
23.看看在网页中调用HHCtrl控件效果。
代码如下:
1 | 〈object id=HHC type=application/x-oleobject classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11〉〈/object〉〈script〉HHC.TextPopup(哈哈,大家好,我是闪梦!,,50,5,128255,346751);〈/script〉 |
24.如何让一张图片有浅到深的渐变。
1 | 〈SCRIPT language=javascript1.2〉 |
〈SCRIPT language=javascript〉
var currentpos,timer;
function initialize()
{
timer=setInterval(scrollwindow(),16);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
〈/SCRIPT〉
1 | 26.如何在同一页面设置不同文字链接效果的样式. |
〈HTML〉〈HEAD〉〈TITLE〉如何在同一页面设置不同文字链接效果的样式〈/TITLE〉
〈meta http-equiv=Content-Type content=text/html; charset=gb2312〉
〈style type=text/css〉
〈!–
a:hover { font-size: 9pt; color: #FF0000; text-decoration: underline}
a:link { font-size: 9pt; color: #006699; text-decoration: underline}
a:visited { font-size: 9pt; color: #006699; text-decoration: underline}
a:active { font-size: 9pt; color: #FF0000; text-decoration: none}
a.r1:hover { font-size: 9pt; color: #FF0000; text-decoration: underline overline}
a.r1:link { font-size: 9pt; color: #000000; text-decoration: underline overline}
a.r1:visited { font-size: 9pt; color: #99CC00; text-decoration: underline overline}
a.r1:active { font-size: 9pt; color: #000000; text-decoration: underline overline}
–〉
〈/style〉
〈/head〉
〈body bgcolor=#FFFFFF text=#000000〉
〈a href=#〉下划线链接 〈/a〉
〈p〉〈/p〉
〈a href=# class=r1〉双下划线链接〈/a〉
〈/BODY〉
〈/HTML〉
1 | 补充说明: |
.glow{FONT-SIZE: 9pt; FILTER: Glow(Color=#000000, Strength=1)}
//文字描边效果
.shadow {FONT-SIZE: 9pt; FILTER: DropShadow(OffX=1, OffY=1, DropShadow(OffX=1, OffY=1, color:#111111); COLOR: #ffffff; FONT-FAMILY: 宋体} //加入阴影效果
1 | 补充说明: |
〈select style=FONT-SIZE: 10px; COLOR: #ffffff; FONT-FAMILY: Verdana;BACKGROUND-COLOR: #ff6600; size=1 〉
〈option selected〉:: Dreamweaver4 ::〈/option〉
〈option〉::Flash5::〈/option〉
〈option〉::Firewoks4::〈/option〉
〈/select〉
1 | 29.关于DW4的表格中的亮边框和暗边框问题。 |
然后在要加效果的表格里加?lt;table class=bordercolor〉
30.自动显示主页最后更新日期.
1 | 〈script〉 |
31.如何让滚动条出现在左边?
我想居然在论坛中有人发表了这段代码,很有意思,它的确照顾一些左撇子,呵呵!
1 | 〈html dir=rtl〉 |
32.如何加入网址前面的小图标?
首先,您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。你可用在网上找一个制作图标软件,它具有特有的规格:图标的大小为 16 * 16(以像素为单位);颜色不得超过 16 色。 在该网页文件的 HEAD 部分加入下面的内容:〈LINK REL=SHORTCUT ICON HREF= http://skydesigner.51.net/图标文件名〉,并放在该网页的根目录下。
33.在800*600显示器中,如何不让网页水平出现滚动条!
设至〈body leftmargin=0 topmargin=0〉,网页中的表格宽度为778。
34.关于〈!DOTYPE〉的说明解释。
在网页中,经常会看到〈!DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.01//EN
〉,是声明HTML文件的版本信息。
35.用图片来关闭窗体.
1 | 〈A href=java script:window.close()〉〈IMG height=20 width=20 alt=关闭窗口 src=close.gif border=0〉〈/A〉 |
补充说明:如何使用了ACTIVEX!,不再警告窗口?
1 | 〈html〉 |
36.禁止鼠标右键查看网页源代码。
1 | 〈SCRIPT language=javascript〉 |
补充说明:
鼠标完全被封锁,可以屏蔽鼠标右键和网页文字。
1 | 〈 body oncontextmenu=return false ondragstart=return false onselectstart=return false〉 |
37.通过按钮来查看网页源代码。
1 | 〈input type=BUTTON value=查看源代码 onClick= `window.location = view-source: + window.location.href` name=BUTTON〉 |
38.怎么用文字联结实现按钮的SUBMIT功能?
1 | 〈a href=# onclick=formname.submit()〉OK〈/a〉 |
39.如何做一个空链接?
加#
40.利用〈IFRAME〉来给网页中插入网页。
经常我看到很多网页中又有一个网页,还以为是用了框架,其实不然,是用了〈IFRAME〉,它只适用于IE,NS可是不支持〈IFRAME〉的,但围着的字句只有在浏览器不支援 iframe 标记时才会显示,如〈noframes〉一样,可以放些提醒字句之类的话。
你注意啊!下面请和我学习它的用法。
分析代码:
1 | 〈iframe src=iframe.html name=test align=MIDDLE width=300 height=100 marginwidth=1 marginheight=1 frameborder=1 scrolling=Yes〉 〈/iframe〉 |
41.请问<tbody>的用法?
tbody用法据说是加强对表格的控制能力的.例如:
1 | 〈table〉〈tbody〉……..〈/tbody〉〈/table〉 |
tbody代码如果不是你用手写的话,只有在你用IE5打开一个网页的时候, 把它另存为
一下,你的另存为的文件在表格中就会生成tbody代码。(即便你的表格根本就没有
tbody代码,IE5另存为的时候也会给你生成)。
42.Alt和Title都是提示性语言标签,请注意它们之间的区别。
在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
用法如下:
1 | 〈p Title=给链接文字提示〉文字〈/p〉 |
43.用javascript代码来实现闪烁按钮。
1 | 〈body〉 |
44.CSS给图片定义颜色边框。
1 | img { border: 1px solid red} |
45.在DW中如何使插入的FLASH透明。
方法一:选中swf,打开原代码窗口,在〈/object〉前输入:〈param name=wmode value=transparent〉
方法二:在Flash中的Flie→Publist Settings→HTML→Window Mode选择transparent
46.在DW编辑文本中,如何输入一个空格呢?
输入空格的问题,在DW似乎已成了一个老生常谈的问题。通过将输入法调整到全角模式就可以避免了。本以人工智能ABC为例.按Shift+Space切换到全角状态。
47.为何我的DW中图形显示不正常。
第一种:可能是因为你定义并正在使用一个site,而你的HTML文件或者图片不在这个site包含的区域之内,因此dreamweaver使用file协议来
描述图象的绝对路径,可惜IE不支持src中使用file协议,所以图象就显示不出来了。
第二种:可能是放图片的文件夹或图片名为中文,也显示不到网页中去。
48.如何在本地机器上测试flash影片的loading?
我想这可能是很多人在问的题了,其实很简单,在Test时,选选View-〉Show Streaming就可以看到了。
49.在网页中做出一根竖的线有几种办法.
第一种方法:用一个像素图的办法!
如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Image给你创建了一个缺省名为:spacer.gif的一个像素图文件 。
代码中:
1 | 〈table border=0 cellspacing=0 cellpadding=0〉 |
第二种方法:用表格填颜色的办法!把〈td〉 〈/td〉中的 删掉 .
1 | 〈table border=0 cellspacing=0 cellpadding=0〉 |
第三种方法:用水平条。
1 | 〈hr color=red width=1 size=100%〉 |
50.关于鼠标拖动,改变层大小。──看看微软的做法.
1 | 〈script〉 |
51.点击连接文字加入收藏夹。
1 | 〈a href=java script:window.external.AddFavorite(http://www.263.net`, `269家园`)〉点击加入收藏夹〈/a〉 |
转载自优秀微信公共号平台