网页设计当中的常用标签

最新推荐文章于 2025-05-19 08:47:29 发布

豆捞

最新推荐文章于 2025-05-19 08:47:29 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签：浏览器 html javascript css

本文链接：https://blog.youkuaiyun.com/sneiiler/article/details/26551701

本文详细列举了网页设计中的一些实用技巧，包括处理单元格溢出、设置弹出窗口、去除图片边框、电子邮件表单处理、页面大小设定、背景图片固定、光标样式定制、JavaScript交互等。此外，还介绍了如何处理滚动条颜色、图片抖动效果、全屏播放Flash、创建邮票效果、弹出窗口的控制以及CSS和JavaScript在设计中的应用，如文字链接效果、文字阴影和描边、下拉菜单颜色、显示更新日期、滚动条位置、图片关闭按钮、禁止右键查看源代码、查看源代码按钮、嵌入网页、闪烁按钮、线条绘制、鼠标拖动层大小调整等，展示了网页设计的丰富性和多样性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、如内容超出单元格，则隐藏：

style="TABLE-LAYOUT: fixed"

2、让弹出窗口总是在最上面：

<body onblur="this.focus();">

3、不要滚动条，让竖条没有：

<body style='overflow:scroll;overflow-y:hidden'>

让横条没有：

 <body style='overflow:scroll;overflow-x:hidden'>

两个都去掉：

 <body scroll="no">

4、去掉图片链接点击后，图片周围的虚线：

<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0>

5、电子邮件处理提交表单：

<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain"> <input type=submit> </form>

6、在打开的子窗口刷新父窗口：

 window.opener.locat ion.reload()

7、设定打开页面的大小：

 <body onload="top.resizeTo(300,200);">

8、在页面中加入不是满铺的背景图片，拉动页面时背景图不动：

 <html><head> <STYLE> body {background-image:url(logo.gif); background-repeat:no-repeat; background-position:center } </STYLE> </head> <body bgproperties="fixed" > </body> </html>

9、各种样式的光标：

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

定义全局鼠标：body{cursor: url(cur.ani或cur);}

示例：

<span style="cursor:auto">Auto</span>

10、

本机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.ServerVaria bles("SCRIPT_NAME"))%>

服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSOR S")%>

服务器解译引擎<%=ScriptEngine & "/"& ScriptEngineMajorVe rsion &"."&ScriptEngineMinorVe rsion&"."& ScriptEngineBuildVe rsion %>

服务器操作系统<%=Request.ServerVariables("OS")%>

11、文本竖排方式

<style type="text/css">
.shupai {Writing-mode:tb-rl}
</style>

12、超链接去虚线边框

在链接中加上onfocus="this.blur()"

13、网页搜索关键字头里插入

<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">

14、收藏夹图标

<link rel = "Shortcut Icon" href="favicon.ico">

15、鼠标控制图片隐现效果：

<SCRIPT language="javascript">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.o pacity=100
else
cur.filters.alpha.o pacity=20
}
</SCRIPT>

<img src="2.gif" style="filter:alpha(opacity=20)"
onMouseOver="makevisible(this,0)"
onMouseOut="makevisible(this,1)">

16、禁止图片下载

<A HREF="javascript:void(0)" onMouseover="alert('对不起,此图片不能下载!')">
<IMG SRC="2.gif" Align="center" Border="0" width="99" height="50">[/url]

17、页嵌页
<iframe width=291 height=247 src="main.files/news.htm" frameBorder=0></iframe>

18、CSS文字阴影（定义在<TD>中）
.abc{
FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;
}

19、跳转：
<meta http-equiv=refresh content='0; url=/distributor/distributor.aspx'>

20、溢出栏的设制：
visible：超出的部分照样显示；
hidden：超出的部分隐藏；
scrool：不管有否超出，都显示滚动条；
auto：有超出时才出现滚动条；

21、Javascript鼠标动作：

onMouseOver：鼠标移到目标上；
onMouseUp：按下鼠标再放开左键时；
onMouseOut：鼠标移开时；
onMouseDown：按下鼠标时（不需要放开左键）；
onClink：点击时；
onDblClick：双击时；
onLoad：载入网页时；
onUnload：离开页面时；
onResize：当浏览者改变浏览窗口的大小时；
onScroll：当浏览者拖动滚动条的时。

22、CSS链接样式：
a:link：表示已经链接；
a:hover：表示鼠标移上链接时；
a:active：表示链接激活时；
a:visited：表示己点击过的链接。

23、Javascript操作：

javascript:alert('lajflsjpjwg') 跳出对话框链接
javascript:history.back(1) 后退
javascript:window.close(); 关闭窗口

function restore(){
window.moveTo(8,8);
window.resizeTo(screen.width-24,screen.availHeight-24);
} 窗口还原

24、head区域标签说明
A①网页显示字符集
简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
A②网页制作者信息
<META name="author" content=" webmaster@maketown.com">
A③网站简介
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxx xxxxxxx">
A④搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
A⑤网页标题
<title>xxxxxxxxxxxxxxxxxx</title>
A⑥设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
A⑦.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
A⑧用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
A⑨自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com"> 5指时间停留5秒。
B①网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
B②收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">

25、flash透明：
在flash的源代码中加上：<param name="wmode" value="transparent">

26、表格透明：
style="FILTER: alpha(opacity=72)"

27、状态栏连接说明：
<A HREF="链接到某处" onmouseOver="window.status='连接说明';return true;" onMouseOut="window.status=' ';">某某链接[/url]

28、链接说明：
<a href=“”Title=链接说明>

29、禁止鼠标右键：
在<body>标签中加入 <body oncontextmenu="return false">

30、添加水平线：
<hr width="长度" size="高度" color="颜色代码" noshade> noshade为有无阴影

31、表单电子邮件提交：
< form name="content" method="post" action="mailto:电子邮箱" >< /form>
文本域名为Subject 为邮件的标题

32、邮件链接定制：
Mailto:地址 ? Subject=邮件的标题 &bc=抄送 &bcc=密件抄送

33、背景音乐：
<bgsound src=地址 loop="-1">

34、禁止页面正文选取：
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection. empty()" oncopy="document.selection. empty()" onbeforecopy="return false"onmouseup="document.selection. empty()">

35、消除ie6自动出现的图像工具栏：

设置 GALLERYIMG属性为false或no .

36、防止点击空链接时，页面往往重置到页首端：
代码“javascript:void(null)”代替原来的“#”标记

37、页面定时刷新：
<meta http-equiv="Refresh" content="秒" >

38、页面定时转向新的地址：
<meta http-equiv="refresh" content="秒;URL=url">

39、显示日期：
<script language="javascript">
today=new Date();
var week; var date;
if(today.getDay()==0) week="星期日"
if(today.getDay()==1) week="星期一"
if(today.getDay()==2) week="星期二"
if(today.getDay()==3) week="星期三"
if(today.getDay()==4) week="星期四"
if(today.getDay()==5) week="星期五"
if(today.getDay()==6) week="星期六"
date=(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+" "
document.write("<span style='font-size: 9pt;'>"+date+week+"</span>");
</script>

40、设为首页：
<A href=# onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('url');">设为首页[/url]

41、添加收藏：
<A href="javascript:window.external.Add Favorite('url','title')">收藏本站[/url]

42、文字滚动：
插入边框为0的1行1列的表格，在表格中输入文字，选中文字，
按ctrl+t输入marquee direction="up", 回车即可让文字在表格区域内向上滚动。
（right、down可用于让文字或图象向右及向下滚动，修改html原代码还可以得到需要的滚动速度。

43、表单验证：
<SCRIPT language=javascript>
function checkform(theform){
if(theform.name.value==""){
alert("姓名不能为空!");
theform.name.focus();
return false;
}
if(theform.tel.value==""){
alert("电话不能为空!");
theform.tel.focus();
return false;
}
}

</SCRIPT>

44、以图片方式插视频：
<IMG height=240 loop=infinite dynsrc=http://amedia.efu.com.cn/EFUADD0001.rmvb width=320>

45、层在flash上面：
< param name="wmode" value="opaque" >
延迟跳转
<meta http-equiv=refresh content='3; url=javascript:window.close();'>

46、导航条变色：：
单元格<TR后面插入onmouseover="javascript:this.bgColor='#57AE00'" onmouseout="javascript:this.bgColor='#99CCFF'"

47、滚动条颜色代码：
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;
SCROLLBAR-BASE-COLOR: #FFFFFF
}

48、连续的英文或者一堆感叹号!!!不会自动换行的问题，只要在CSS中定义了如下句子，可保网页不会再被撑开了：
table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
注释一下：
1.第一条table{table-layout: fixed;}，此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all}，一般用这句这OK了，但在有些特殊情况下还是会撑开，因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

49、如何给图片抖动怎做的：
〈SCRIPT language=javascript〉
var rector=2
var stopit=0
var a=1
var count=0
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElement ById)||stopit==1||count==100)
return
count++
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a〈4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
count=0
which.style.left=0
which.style.top=0
}
〈/SCRIPT〉
〈style〉.shakeimage {POSITION: relative}
〈/style〉
〈img src="图片的路径" onmouseout=stoprattle(this) onmouseover=init(this);rattleimage() class=shakeimage〉

50、在网页中实现flash的全屏播放：
只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100％即可，当然也可以在Flash导出HTML文件的设置中进行设置，方法是：打开File菜单；选Publish Settings弹出导出设置对话框；在HTML标签下的Dimensions选项,下拉后选中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。

51、用CSS做邮票：
〈input type=button value=我象不象邮票？ style="height:80px;border:2px dashed #cccccc"〉

52、一进入首页立刻会弹出一个窗口：
〈SCRIPT LANGUAGE="javascript"〉
window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)
〈/SCRIPT〉
参数解释：
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脚本结束

53、用marquee做的滚动字幕：
〈marquee align=top behavior=ALTERNATE BGCOLOR=#000000 height=60 width=433 scrollamount=5〉〈/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=# //移动的速度

54、让一张图片有浅到深的渐变：
〈SCRIPT language=javascript〉
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alph a.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha. opacity〈100)
cur2.filters.alpha. opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
〈/script〉
〈img onmouseout=low(this) onmouseover=high(this) style="FILTER: alpha(opacity=40)"src="logo.gif" 〉

55、双击鼠标左键来滚动背景，单击停止：
〈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.scrol lTop)
sc();
}
document.onmousedow n=sc
document.ondblclick=initialize
〈/SCRIPT〉

56、在同一页面设置不同文字链接效果的样式：

〈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〉
〈body〉
〈a href="#"〉下划线链接〈/a〉
〈a href="#" class="r1"〉双下划线链接〈/a〉
〈/BODY〉
补充说明：
a:hover 表示鼠标划过时的样式.
a:link 表示链接的样式.
a:active 表示当前活动连接的样式.
a:visited 表示已经访问过的连接的样式.

57、用CSS给文字加入阴影效果和文字描边效果：

.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: "宋体"}
//加入阴影效果
补充说明：
　　这两种滤镜要想实现效果，必须加在如：〈td class=glow或shadow 〉〈div〉xxxxxxxxx〈/div〉〈/td〉上
，并且要留有足够的空间能够显示阴影或描边，否则会出现半截的阴影或描边现象。

58、如何给做带颜色的下拉菜单：

〈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〉

59、自动显示主页最后更新日期：

〈script〉
document.write("最后更新日期："+document.lastModified+"")
〈/script〉

60、让滚动条出现在左边：
〈html dir="rtl"〉
〈body bgcolor="#000000" text="#FFFFFF"〉
〈table height=18 width=212 align=center bgcolor=#FFFFFF dir="ltr" cellspacing="1" 　cellpadding="0"〉
〈tr〉
〈td bgcolor="#FF0000" 〉是不是你的滚动条在左边啊〈/td〉
〈/tr〉
〈/table〉
〈/body〉
〈/html〉

61、用图片来关闭窗体：

〈A href="java script:window.close()"〉〈IMG height=20 width=20 alt="关闭窗口" src="close.gif" border=0〉〈/A〉
补充说明：如何使用了ACTIVEX！,不再警告窗口？
〈html〉
〈head〉
〈object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"〉
〈param name="Command" value="Close"〉〈/object〉
〈/head〉
〈body bgcolor="#003063" text="#ffffff" id=all〉〈a href="#" onclick="closes.Click();"〉关闭窗口无提示〈/a〉
〈/body〉
〈/html〉

62、禁止鼠标右键查看网页源代码：

〈SCRIPT language=javascript〉
function click()
{if (event.button==2) {alert(`你好,欢迎光临！`) }}
document.onmousedow n=click
〈/SCRIPT〉
补充说明：
鼠标完全被封锁,可以屏蔽鼠标右键和网页文字。
〈 body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"〉

63、通过按钮来查看网页源代码：

〈input type="BUTTON" value="查看源代码" onClick= `window.location = "view-source:" + window.location.href` name="BUTTON"〉

64、利用〈IFRAME〉来给网页中插入网页：
〈iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"〉〈/iframe〉
　　src="iframe.html"
　　用来显示〈IFRAME〉中的网页来源，必要加上相对或绝对路径。
　　name="test"
　　这是连结标记的 target 参数所需要的。
　　align="MIDDLE"
　　可选值为 left, right, top, middle, bottom，作用不大。
　　width="300" height="100"
　　框窗的宽及长，以 pixels 为单位。
　　marginwidth="1" marginheight="1"
　　该插入的文件与框边所保留的空间。
　　frameborder="1"
　　使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
　　scrolling="Yes"
　　使用 Yes 表示容许卷动（内定）， No 则不容许卷动。

65、Alt和Title都是提示性语言标签：
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。
用法如下：
　　　〈p Title="给链接文字提示"〉文字〈/p〉
　　　〈a href="#" Title="给链接文字提示"〉文字〈/a〉
　　　〈img src="图片.gif" alt="给图片提示"〉
补充知识：〈TITLE〉〈ALT〉里面如何多行换行？在源代码里Enter回车。
〈a href="#" Title="个人简历
姓名：张培
网名：我是闪梦
性别：男的，不是女的。
爱好：网页制作，软件开发"〉个人简历〈/a〉
例如：个人简历

66、用javascript代码来实现闪烁按钮：

〈body〉
〈form method="POST" action="--WEBBOT-SELF--"〉
〈input type="button" name=SUB value="闪烁" id=flashit style="BORDER: 1px solid ;BACKGROUND-COLOR: #FFFFFF"〉
〈/form〉
〈script〉
if (document.all&&document.all.flashi t)
{
var flashelement=document.all.flashit
if (flashelement.length==null)
flashelement[0]=document.all.flashit
function changecolor(which)
{
if (flashelement[which].style.color==`#800000`)
flashelement[which].style.color="#0063A4"
else
flashelement[which].style.color="#800000"
}
if (flashelement.length==null)
setInterval("changecolor(0)",1000)
else
for (i=0;i〈flashelement.length;i++)
{
var tempvariable=`setInterval("changecolor(`+i+`)",`+`1000)`
eval(tempvariable)
}
}
〈/script〉
〈/body〉

67、在网页中做出一根竖的线：

用水平条：〈hr color="red" width="1" size="100%"〉

68、关于鼠标拖动,改变层大小：
〈script〉
document.execComman d("2D-position",false,true);
〈/script〉
〈DIV contentEditable=true〉
〈DIV style="WIDTH: 300px; POSITION: absolute; HEIGHT: 100px; BACKGROUND-COLOR: red"〉移动层〈/DIV〉
〈/DIV〉

50. 过渡方式：
　　＜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 水平线状展开