Some common methods used in html pages are sorted out

Author：Eve Cole Update Time：2025-05-12 19:48:02

Some of the common small methods used in html pages can be sorted out. Friends who make web pages can read them. They are indeed good.

Add in the <Head> tag

How to jump with JQuery's ajax, you can clean it up like this

//Ajax request is not cached

$.ajaxSetup({ cache: false

});

MaintainScrollPositionOnPostback=true

If the content exceeds the cell, it will be hidden

style=TABLE-LAYOUT: fixed

Let the popup always be on top: <body onblur=this.focus();>

Don't scroll the bar? Let the vertical bar not have: <body style='overflow:scroll;overflow-y:hidden'> </body>

Let the horizontal bar not: <body style='overflow:scroll;overflow-x:hidden'> </body>

Remove both? It's easier <body scroll=no> </body>

How to remove the dotted lines around the image after clicking on the image link? <a href=# onFocus=this.blur()><img src=logo.jpg border=0></a>

Email processing Submit form <form name=form1 method=post action=mailto:****@***.com enctype=text/plain>

How to write in the code to refresh the parent window when an open child window is refreshed? window.opener.location.reload()

How to set the size of the open page <body onload=top.resizeTo(300,200);>

How to add a background image that is not full on the page, and the background image remains unchanged when pulling the page <html><head> <STYLE> body {background-image:url(logo.gif); background-repeat:no-repeat; background-position:center } </STYLE> </head> <body bgproperties=fixed > </body> </html>

Various styles of cursor auto: standard cursor

default: standard arrow

hand: hand cursor

wait : Wait for the cursor

text: I-shaped cursor

vertical-text: horizontal I-shaped cursor

no-drop: The cursor cannot be dragged

not-allowed: Invalid cursor

help :?Help cursor

all-scroll: triangle direction mark

move: mobile tag

crosshair: crosshair e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize

Native ip<%=request.servervariables(remote_addr)%>

Server name <%=Request.ServerVariables(SERVER_NAME)%>

Server IP<%=Request.ServerVariables(LOCAL_ADDR)%>

Server Port <%=Request.ServerVariables(SERVER_PORT)%>

Server time <%=now%> IIS

Version <%=Request.ServerVariablesSERVER_SOFTWARE)%>

Script timeout time <%=Server.ScriptTimeout%>

The path of this file is <%=server.mappath(Request.ServerVariables(SCRIPT_NAME))%>

Number of server CPUs <%=Request.ServerVariables(NUMBER_OF_PROCESSORS)%>

Server interpretation engine <%=ScriptEngine & /& ScriptEngineMajorVersion &.&ScriptEngineMinorVersion

&.& ScriptEngineBuildVersion %>

Server operating system <%=Request.ServerVariables(OS)%>

Vertical text arrangement

<!--

.shupai {Writing-mode:tb-rl}

-->

</style>

Hyperlink to dotted border

Add onfocus=this.blur() to the link

Insert the keyword header of the web search

Favorites icon

My computer

file:///::%7B20D04FE0-3AEA-1069-A2D8-08002B30309D}

Online neighbors

file:///::%7B208D2C60-3AEA-1069-A2D7-08002B30309D%7D

My Documents

file:///::%7B450D8FBA-AD25-11D0-98A8-0800361B1103%7D

control Panel

file:///::%7B20D04FE0-3AEA-1069-A2D8-08002B30309D%7D/::%7B21EC2020-3AEA-1069-A2DD-08002B30309D}

Recycling bin

file:///::%7B645FF040-5081-101B-9F08-00AA002F954E%7D

Mouse control image hidden effect

Add the following code to the <body> area:

<!--

function makevisible(cur, which){

if (which==0)

cur.filters.alpha.opacity=100

else

cur.filters.alpha.opacity=20

}

//-->

</SCRIPT>

2. Add the following code to the <body> area:

<img src=2.gif style=filter:alpha(opacity=20)

onMouseOver=makevisible(this,0)

onMouseOut=makevisible(this,1)>

Image download is prohibited

Page embedding

Hide scrollbar

<body style=overflow-x:hidden;overflow-y:hidden

CSS text shadow (defined in <TD>)

.abc{

FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: 安体; FONT-SIZE: 9pt; COLOR: #ffffff;

}

List/Menu

onchange=location=this.options[this.selectedIndex].value

reurl=server.htmlencode(request.ServerVariables(HTTP_REFERER))

How to define a connection on the server

MM_www_STRING =driver={Microsoft access Driver (*.mdb)};dbq= & server.mappath(../data/www.mdb)

Link to

response.redirectlogin.asp

location.href=xx.asp

onClick=window.location='login.asp'

onClick=window.open('')

Obtain IP

userip = Request.ServerVariables(HTTP_X_FORWARDED_FOR)

If userip = Then userip = Request.ServerVariables(REMOTE_ADDR)

sql=update feedback set hit=hit+1 where id=&request(id)

conn.execute(sql)

Whether to add characters to the intercept...

function formatStr(str,len)

if(len(str)>len)

str = left(str,len) + ...

end if

formatStr = str

end function

Receive form

If Ucase(Request.ServerVariables(REQUEST_METHOD)) = POST then

end if

Image width

<!--

var flag=false;

function DrawImage(ckp){

var image=new Image();

image.src=ckp.src;

if(image.width>0 && image.height>0)

{flag=true;

if(image.width>120){

ckp.width=120;

}else{

ckp.width=image.width;

}

ckp.alt=image.width+×+image.height;

}

//-->

</script>

I'll be Back 22:18:06

<img src=<%=formPath%>/<%=rs(photoname)%> border=0 onload=javascript:DrawImage(this);>

Jump

Overflow slaughtering

visible: The excess part will still be displayed;

hidden: the excess part is hidden;

Scrool: whether it is exceeded or not, the scroll bar is displayed;

auto: The scroll bar appears when there is an outage;

onMouseOver: Move the mouse to the target;

onMouseUp: When pressing the mouse and then releasing the left button;

onMouseOut: When the mouse is removed;

onMouseDown: When pressing the mouse (no need to release the left button);

onClink: when clicked;

onDblClick: When double-clicked;

onLoad: When loading a web page;

onUnload: When leaving the page;

onResize: When the browser changes the size of the browsing window;

onScroll: When the viewer drags the scrollbar.

CSS Style

a:link: means that it has been linked;

a:hover: means when the mouse moves the link;

a:active: indicates when the link is activated;

a: visited: indicates that the link you have clicked.

Bounce the dialog link

javascript:alert('lajflsjpjwg')

Back: javascript:history.back(1)

Close window: javascript:window.close();

Window Restore

function restore(){

window.moveTo(8,8);

window.resizeTo(screen.width-24,screen.availHeight-24);

}

The head area refers to the content between the <head> and </head> of the HTML code on the home page.

Must add tags

1. Company copyright notes

2. Web page display character set

Simplified Chinese: <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=gb2312>

Traditional Chinese: <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=BIG5>

English: <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=iso-8859-1>

3. Web page maker information

4. Website introduction

5. Search for keywords

6. Web page css specifications

(See Table of Contents and Naming Specifications)

7. Web page title

<title>xxxxxxxxxxxxxxxxxxxxxx</title>

.Tags that can be added

1. Set the expiration time of the web page. Once the web page expires, it must be re-read on the server.

2. Prohibit the browser to read page content from the local machine's cache.

3. Used to prevent others from calling your page in the framework.

4. Automatically jump.

5 fingers stay for 5 seconds.

5. Web Search Robot Wizard. It is used to tell the search robot which pages need indexes and which pages do not need indexes.

The parameters of CONTENT are all, none, index, noindex, follow, nofollow. The default is all.

6. Favorites icon

All javascript calls should be used as much as possible to take external calls.

Attached with <body> tag:

The <body> tag does not belong to the head area. Here we emphasize that in order to ensure browser compatibility, the page background must be set <body bgcolor=#FFFFF>

flash transparent

Add: <param name=wmode value=transparent> to the source code of flash

Transparent form

style=FILTER: alpha(opacity=72)

How to add icon before URL

1. Use his icon editor online to create an icon on http://www.favicon.com/. He will send the prepared icon to you instantly via email.

2. Place this icon named favicon.ico in the same folder as index.html. That's it.

Make an icon file with a size of 16*16 pixels. The file extension is ico and upload it to the corresponding directory. Add the following code between HTML source file <head> </head>:

＜Link Rel=SHORTCUT ICON href=http://image address (note that it corresponds to the directory just now)＞

The SHORTCUT ICON in it is the name of the icon. Of course, it is even easier if the user browses using IE5 or above. Just upload the image to the root directory of the website and automatically identify it.

You can display your icon in your favorites <link rel=Bookmark href=favicon.ico>

Status bar connection instructions

Link Description

Prohibit the right mouse button

Add <body oncontextmenu=return false> to the <body> tag

Enter space in DW

Insert N 

Horizontal line

<hr width=length size=height color=color=color code noshade> noshade is shadow

Form Email Submission

< form name=content method=post action=mailto:emailbox></form>

The text domain name is Subject as the title of the message

Customize email links

Mailto: Address? Subject=Mail title&bc=CC&bcc=CC

Background music

Prohibit page text selection

<body oncontextmenu=return false ondragstart=return false onselectstart =return false

onselect=document.selection.empty() oncopy=document.selection.empty() onbeforecopy=return falseonmouseup=document.selection.empty()>

Eliminate the image toolbar that ie6 automatically appears and set the GALLERYIMG attribute to false or no.

Prevent the page from resetting to the top of the page when clicking an empty link.

Code javascript:void(null) instead of the original # tag

How to avoid others putting your web page in the frame

Page refresh regularly

Pages are timed to new addresses

Show date

today=new Date();

var week; var date;

if(today.getDay()==0) week=Sunday

if(today.getDay()==1) week=Monday

if(today.getDay()==2) week=Tuesday

if(today.getDay()==3) week=Wednesday

if(today.getDay()==4) week=Thursday

if(today.getDay()==5) week=Friday

if(today.getDay()==6) week=Saturday

date=(today.getYear())+year+(today.getMonth()+1)+month+today.getDate()+day+

document.write(<span style='font-size: 9pt;'>+date+week+</span>);

// -->

</script>

Set as home page

<A href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('url');>SetHomePage('url');>Set as home page</A>

Add to favorites

Text scroll

Insert a table with 1 row and 1 column with border 0, enter text in the table, select text,

Press ctrl+t to enter marquee direction=up, and press Enter to make the text scroll upward in the table area.

(right and down can be used to scroll the text or image to the right and down. Modify the original html code and you can also get the required scrolling speed.

Form verification

function checkform(theform){

if(theform.name.value==){

alert(The name cannot be empty!);

theform.name.focus();

return false;

}

if(theform.tel.value==){

alert(The phone cannot be empty!);

theform.tel.focus();

return false;

}

</SCRIPT>

Define the mouse

body{cursor: url(cur.ani or cur);}

Insert videos in pictures

The layer is on flash

Delay jump

Navigation bars change color:

Insert onmouseover=javascript:this.bgColor='#57AE00' onmouseout=javascript:this.bgColor='#99CCFF'

Center

Empty link

javascript:;

Title Form

<legend>Instructions for the form</legend>

</fieldset>

Thin line table

style=BORDER-COLLAPSE: collapse;

Scrollbar color code

BODY{

SCROLLBAR-FACE-COLOR: #FFFFF;

SCROLLBAR-HIGHLIGHT-COLOR: #FFFFF;

SCROLLBAR-SHADOW-COLOR: #FFFFF;

SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;

SCROLLBAR-ARROW-COLOR: #FFFFF;

SCROLLBAR-TRACK-COLOR: #FFFFF;

SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;

SCROLLBAR-BASE-COLOR: #FFFFFF

}

Continuous English or a bunch of exclamation marks!!! Issues that I won't wrap automatically

As long as the following sentence is defined in CSS, the web page will not be opened again.

table{table-layout: fixed;}

td{word-break: break-all; word-wrap:break-word;}

Comment:

1. The first table{table-layout: fixed;}, this style allows the table to automatically wrap characters such as!!! (exclamation mark).

2.td{word-break: break-all}, this sentence is generally OK, but it will still be stretched out in some special circumstances, so you need to add the next sentence {word-wrap:break-word;} to solve it. This style allows some consecutive English words in the table to wrap automatically.

1. Control the visible and hidden nature of horizontal and vertical scroll bars?

<body style=overflow-y:hidden> Remove the x-axis

<body style=overflow-x:hidden> Remove the y-axis

<body scroll=no> does not display

2. The table changes color

<TD onmouseover=this.style.backgroundColor='#FFFFF'

onmouseout=this.style.backgroundColor=''

style=CURSOR: hand>

3. Copying is prohibited, drag the mouse to select

<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false

onselectstart=event.returnValue=false>

4. Ordinary iframe page

</iframe>

5. Iframe adaptive height

height=100% frameborder=no onload=document.all['pindex'].style.height=pindex.document.body.scrollHeight ></iframe>

6. Change it to your own icon in front of the IE address bar & you can display your icon in your favorites

7. Font size zoom

More and more people spend a long time on the Internet, and the popularity of glasses is getting higher and higher, making the text bigger and more users see it more clearly.

function doZoom(size)

{document.getElementById('zoom').style.fontSize=size+'px';}

</script>

<span id=zoom>Text of specified size is required</span>

<a href=javascript:doZoom(16)>Large</a> <a href=javascript:doZoom(14)>Medium</a> <a href=javascript:doZoom(12)>Small</a>

8. Solution to select blocking div

Add the following code to the div and adjust it as needed.

</iframe>

9. iframe (embedded frame) adaptive height

The embedded address you fill in must be on the same site as this page, otherwise access will be denied! . For permissions for cross-domain references, please refer to other information.

frameborder=no onload=document.all['guestbook'].style.height=guestbook.document.body.scrollHeight></iframe>

10. Jump the menu to new window

<option value=http://www.microsoft.com/ie> Internet Explorer</option>

<option value=http://www.microsoft.com/> Microsoft Home</option>

<option value=http://msdn.microsoft.com/> Developer Network</option>

</select>

11. Flash transparent options

12. Add to favorites and set as homepage

<a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.makewing.com/lanren/');>Set as homepage</a>

13. Record and display the last modification time of the web page

document.write (last updated: + document.lastModified + )

</script>

14. Countdown to the festival

var timedate= new Date(October 1,2002);

var times= National Day;

var now = new Date();

var date = timedate.getTime() - now.getTime();

var time = Math.floor(date / (1000 * 60 * 60 * 24));

if (time >= 0)

document.write(Now there are still: +time + days before +times+)

</Script>

15. Added in HEAD

Disable cache

16. Make the background of the document within the IFRAME framework transparent

17. Open the window and maximize it

<!-- Begin

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

// End -->

</script>

18. Add background music

<bgsound src=mid/windblue[1].mid loop=-1> only applies to IE

19. Scroll

<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>Scroll information

</marquee>

20. Prevent the page from being reset to the top of the page when clicking an empty link

Code javascript:void(null) instead of the original # tag

21. A window of the specified size pops up in text or picture

Add to body

function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}

</script>

Pop up code

<a href=# target=_self onClick=MM_openBrWindow('windows01.htm','','width=550,height=380') width=550 height=380 border=0>Picture or text</a>

22. Add link to the flash button

on (press) {

getURL(http://www.makewing.com%22,%22_blank/);

}

23. Jump the page code

24. Thin line divider

25. Automatic line wrapping in web pages

<td style=word-break:break-all> is done.

The complete one is

style=table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word

26. Eliminate the image toolbar that automatically appears in ie6 and set the GALLERYIMG attribute to false or no.

27. The content of the page is not selected

<body oncontextmenu=return false ondragstart=return false onselectstart =return false

onselect=document.selection.empty() oncopy=document.selection.empty() onbeforecopy=return

falseonmouseup=document.selection.empty()>

28. You cannot right-click, you do not use CTRL+A, and you cannot copy it!

<body oncontextmenu=window.event.returnValue=false

onkeypress=window.event.returnValue=false

onkeydown=window.event.returnValue=false

onkeyup=window.event.returnValue=false

ondragstart=window.event.returnValue=false

onselectstart=event.returnValue=false>

</body>

29. IE browser supports a Body property bgproperties, which allows the background to not scroll:

30. Randomly change background images (a special effect that can refresh your mood)

image = new Array(4); //Define image as an array of images

image [0] = 'tu0.gif' //Path of background image

image [1] = 'tu1.gif'

image [2] = 'tu2.gif'

image [3] = 'tu3.gif'

image [4] = 'tu4.gif'

number = Math.floor(Math.random() * image.length);

document.write(<BODY BACKGROUND=+image[number]+>);

</Script>

31. Flash loads video

on (release)

{

loadMovie(1-01.swf, _root.loaderclip);

}

32. Picture form button

</form>

33. CSS definition method for left and right shadow backgrounds

body {

text-align:center;

background-repeat: repeat-y;

background-position: center;

background-image: url(../images/bg.jpg);

}

34. Swipe the link to the mouse

style=cursor:hand

35. How to close the layer

<a href=# onClick=Layer1.style.display='none'>Close layer</a>

36. Script to close the window

<a href=javascript:close()>[Close window]</a>

37. If the text is too long, the too long part will be turned into an ellipsis to display.

<NOBR>For example, there is a line of text that is very long and cannot be displayed in a row in the table.</NOBR>

</DIV>

38. Automatically maximize after entering the homepage

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

</script>

39. Hollow text

How about it, I'm smothering? <br>

Don't you want to try it? <br>

</div>

40. Run the code box

function Preview()

{var TestWin=open('');

TestWin.document.write(code.value);}

</script>

<br>

41. Link to the form

<tr>

</tr>

</table>

42. Let the pop-up window always be on the top

43. CSS text shadow

.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: 安体; FONT-SIZE: 9pt;COLOR: #ffffff;}

44. Back & Close the window

Back: javascript:history.back(1)

Close: javascript:window.close();

45. Transparent form

style=FILTER: alpha(opacity=72)

46. How to avoid others putting your web page in the frame

47. The difference between Alt and Title

alt is used to prompt the picture. Title is used to prompt link text or ordinary text.

48. Try to use external calls to all javascript calls

49. Link to

response.redirectlogin.asp

location.href=xx.asp

onClick=window.location='login.asp'

onClick=window.open('')

50. Basic link style

a:link represents the style of the link

a:active represents the style of the currently active connection

a:hover means the style of the mouse being outdated

a: visited represents the style of the connection that has been visited

link-visited-hover-active is simply written as lvha, that is, love+hate

51. Set styles for different text link effects on the same page

.green {COLOR: #309633}

.green A:link {COLOR: #309633; TEXT-DECORATION: none}

.green A: visited {COLOR: #309633; TEXT-DECORATION: none}

.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}

.green A:active {COLOR: #309633; TEXT-DECORATION: none}

</style>