html常用代碼大全

.結(jié)構(gòu)性定義

文件類型 <HTML></HTML> （放在檔案的開頭與結(jié)尾）

文件主題 <TITLE></TITLE> （必須放在「文頭」區(qū)塊內(nèi)）

文頭 <HEAD></HEAD> （描述性資料，像是「主題」）

文體 <BODY></BODY> （文件本體）

（由瀏覽器控制的顯示風(fēng)格）

標(biāo)題 <H?></H?> （從1到6，有六層選擇）

標(biāo)題的對齊 <H? ALIGN=LEFT|CENTER|RIGHT></H?>

區(qū)分 <DIV></DIV>

區(qū)分的對齊 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區(qū)塊 <BLOCKQUOTE></BLOCKQUOTE> （通常會(huì)內(nèi)縮）

強(qiáng)調(diào) <EM></EM> （通常會(huì)以斜體顯示）

特別強(qiáng)調(diào) <STRONG></STRONG> （通常會(huì)以加粗顯示）

引文 <CITE></CITE> （通常會(huì)以斜體顯示）

碼 <CODE></CODE> （顯示原始碼之用）

樣本 <SAMP></SAMP>

鍵盤輸入 <KBD></KBD>

變數(shù) <VAR></VAR>

定義 <DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字 <BIG></BIG>

小字 <SMALL></SMALL>

與外觀相關(guān)的標(biāo)簽（作者自訂的表現(xiàn)方式）

加粗 <B></B>

斜體 <I></I>

底線 <U></U> （尚有些瀏覽器不提供）

刪除線 <S></S> （尚有些瀏覽器不提供）

下標(biāo) <SUB></SUB>

上標(biāo) <SUP></SUP>

打字機(jī)體 <TT></TT> （用單空格字型顯示）

預(yù)定格式 <PRE></PRE> （保留文件中空格的大?。?/p>

預(yù)定格式的寬度 <PRE WIDTH=?></PRE>（以字元計(jì)算）

向中看齊 <CENTER></CENTER> （文字與圖片都可以）

閃耀 <BLINK></BLINK> （有史以來最被嘲弄的標(biāo)簽）

字體大小 <FONT SIZE=?></FONT>（從1到7）

改變字體大小 <FONT SIZE=+|-?></FONT>

基本字體大小 <BASEFONT SIZE=?> （從1到7; 內(nèi)定為3）

字體顏色 <FONT COLOR="#$$$$$$"></FONT>

說明  （瀏覽器不會(huì)顯示）

body {

scrollbar-face-color: #330033;

scrollbar-shadow-color: #FFFFFF;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color: #FFFFFF;

scrollbar-darkshadow-color: #FFFFFF;

scrollbar-track-color: #330033;

scrollbar-arrow-color: #FFFFFF;

}

</style>

將上面的代碼放在葉子代碼的<head></head>之間,顏色可根據(jù)自己的需要修改。

滾動(dòng)條的代碼意思如下：

Scrollbar-Face-Color為滾動(dòng)條表面顏色設(shè)定；

Scrollbar-Track-Color為滾動(dòng)條底板顏色設(shè)定；

Scrollbar-Darkshadow為滾動(dòng)條下邊和右邊邊沿顏色設(shè)定；

Scrollbar-Highlight-Color為滾動(dòng)條上斜面和左斜面顏色設(shè)定；

Scrollbar-Shadow-Color為滾動(dòng)條下斜面和右斜面顏色設(shè)定；

Scrollbar-3Dlight-Color為滾動(dòng)條上邊和左邊的邊沿顏色設(shè)定；

Scrollbar-Arrow-Color為滾動(dòng)條兩端箭頭顏色設(shè)定。

<!> 跑馬燈

<marquee>...</marquee>普通捲動(dòng)

<marquee behavior=slide>...</marquee>滑動(dòng)

<marquee behavior=scroll>...</marquee>預(yù)設(shè)捲動(dòng)

<marquee behavior=alternate>...</marquee>來回捲動(dòng)

<marquee direction=down>...</marquee>向下捲動(dòng)

<marquee direction=up>...</marquee>向上捲動(dòng)

<marquee direction=right></marquee>向右捲動(dòng)

<marquee direction=’left’></marquee>向左捲動(dòng)

<marquee loop=2>...</marquee>捲動(dòng)次數(shù)

<marquee width=180>...</marquee>設(shè)定寬度

<marquee height=30>...</marquee>設(shè)定高度

<marquee bgcolor=FF0000>...</marquee>設(shè)定背景顏色

<marquee scrollamount=30>...</marquee>設(shè)定捲動(dòng)距離

<marquee scrolldelay=300>...</marquee>設(shè)定捲動(dòng)時(shí)間

1)貼圖：<img src="圖片地址">

2)加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>

3)在新窗口打開連接：<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>

4)移動(dòng)字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

5)字體加粗：<b>寫上你想寫的字</b>

6)字體斜體：<i>寫上你想寫的字</i>

7)字體下劃線: <u>寫上你想寫的字</u>

8)字體刪除線: <s>寫上你想寫的字</s>

9)字體加大: <big>寫上你想寫的字</big>

10)字體控制大?。?lt;h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

11)更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間

12)消除連接的下劃線：<a href="相關(guān)地址" style="text-decoration:none">寫上你想寫的字</a>

13)貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>

14)貼flash: <embed src="flash地址" width="寬度" height="高度">

15)貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

16)換行：<br>

17)段落：<p>段落</p>

18)原始文字樣式：<pre>正文</pre>

19)換帖子背景：<body background="背景圖片地址">

20)固定帖子背景不隨滾動(dòng)條滾動(dòng)：<body background="背景圖片地址" body

bgproperties=fixed>

21)定制帖子背景顏色：<body bgcolor="#value">(value值見10)

22)帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

23)貼網(wǎng)頁：<iframe. src="相關(guān)地址" width="寬度" height="高度"></iframe>

1、店鋪音樂代碼:音樂網(wǎng)址" loop="-1">

2、圖片制作代碼：＜img src="這里放圖片地址"＞

3、公告圖片代碼：＜img border="0" src="這里放圖片地址" /＞或＜img src="這里放圖片地址"/＞

4、懸浮掛飾代碼：＜img src="這里放圖片地址" style="left:20px; position: relative; top:0px" /＞

5、商品分類代碼:＜img src="這里放圖片地址"/＞

6、字體大小代碼:＜font size="2"＞這里放要處理的文字，可用3、4、5等設(shè)置大?。?font＞

7、字體顏色代碼:＜font color="red"＞這里放要處理的文字，可以換成blue,yellow等＜/font＞

8、文字鏈接代碼:＜a href="網(wǎng)頁地址"＞鏈接的文字，在分類欄里用時(shí)鏈接的網(wǎng)頁地址必須縮短＜/a＞

9、移動(dòng)文字代碼:＜marquee＞從右到左移動(dòng)的文字＜/marquee＞

10、背景音樂代碼：＜bgsound loop="-1" src="這里放音樂地址"＞＜/bgsound＞

11、圖片附加音樂代碼：＜img border=0 src="這里放圖片地址" dynsrc="這里放音樂地址"＞

12、浮動(dòng)圖片代碼:＜img alt="1" height="150" src="這里放圖片地址"/＞

公告圖片的代碼：公告掛飾：店鋪分類代碼:背景音樂代碼：換行代碼

計(jì)數(shù)器代碼顏色代碼：

1白色 #FFFFFF

2紅色#FF0000

3綠色#00FF00

4藍(lán)色#0000FF

5牡丹紅#FF00FF

6青色 #00FFFF

7黃色#FFFF00

8黑色#000000

9海藍(lán)#70DB93

10巧克力色#5C3317

11藍(lán)紫色 #9F5F9F

12黃銅色#B5A642

13亮金色#D9D919

14棕色#A67D3D

15青銅色 #8C7853

162號(hào)青銅色 #A67D3D

17士官服藍(lán)色 #5F9F9F

18冷銅色 #D98719

19銅色 #B87333

20珊瑚紅 #FF7F00

21紫藍(lán)色 #42426F

22深棕 #5C4033

23深綠 #2F4F2F

24深銅綠色 #4A766E

25深橄欖綠 #4F4F2F

26深蘭花色 #9932CD

27深紫色 #871F78

28深石板藍(lán) #6B238E

29深鉛灰色 #2F4F4F

30深棕褐色 #97694F

32深綠松石色 #7093DB

33暗木色 #855E42

34淡灰色 #545454

35土灰玫瑰紅色 #856363

36長石色 #D19275

37火磚色#8E2323

38森林綠 #238E23

39金色 #CD7F32

40鮮黃色 #DBDB70

41灰色 #C0C0C0

42銅綠色 #527F76

43青黃色 #93DB70

44獵人綠 #215E21

45印度紅 #4E2F2F

46土黃色 #9F9F5F

47淺藍(lán)色 #C0D9D9

48淺灰色 #A8A8A8

49淺鋼藍(lán)色 #8F8FBD

59淺木色 #E9C2A6

60石灰綠色 #32CD32

61桔黃色 #E47833

62褐紅色 #8E236B

63中海藍(lán)色 #32CD99

64中藍(lán)色 #3232CD

65中森林綠 #6B8E23

66中鮮黃色 #EAEAAE

67中蘭花色 #9370DB

68中海綠色 #426F42

69中石板藍(lán)色 #7F00FF

70中春綠色 #7FFF00

71中綠松石色 #70DBDB

72中紫紅色 #DB7093

73中木色 #A68064

74深藏青色 #2F2F4F

75海軍藍(lán) #23238E

76霓虹籃 #4D4DFF

77霓虹粉紅 #FF6EC7

78新深藏青色 #00009C

79新棕褐色 #EBC79E

80暗金黃色 #CFB53B

81橙色 #FF7F00

82橙紅色 #FF2400

83淡紫色 #DB70DB

84淺綠色 #8FBC8F

85粉紅色 #BC8F8F

86李子色 #EAADEA

87石英色 #D9D9F3

88艷藍(lán)色 #5959AB

89鮭魚色 #6F4242

90猩紅色 #BC1717

91海綠色 #238E68

92半甜巧克力色 #6B4226

93赭色 #8E6B23

94銀色 #E6E8FA

95天藍(lán) #3299CC

96石板藍(lán) #007FFF

97艷粉紅色 #FF1CAE

98春綠色 #00FF7F

99鋼藍(lán)色 #236B8E

100亮天藍(lán)色 #38B0DE

101棕褐色 #DB9370

102紫紅色 #D8BFD8

103石板藍(lán)色 #ADEAEA

104濃深棕色 #5C4033

105淡淺灰色 #CDCDCD

106紫羅蘭色 #4F2F4F

107紫羅蘭紅色 #CC3299

108麥黃色#D8D8BF

109黃綠色 #99CC32

簡單常用HTML代碼大全（修改網(wǎng)頁必備）

網(wǎng)頁常用HTML代碼大全

超鏈接，用的最多：

點(diǎn)擊在當(dāng)前頁打開網(wǎng)站

<a >這是我的網(wǎng)站</a>

效果：這是我的網(wǎng)站

點(diǎn)擊彈出網(wǎng)站

<a target="_blank">這是我的網(wǎng)站</a>

<br>這個(gè)是向下一行，比如

歡迎光臨我的網(wǎng)站<br>希望開心

演示效果就是：

歡迎光臨我的網(wǎng)站

希望開心

<p>向下一大行，比如

歡迎光臨我的網(wǎng)站<p>希望開心

演示效果就是：

歡迎光臨我的網(wǎng)站

希望開心

<b>這是粗體字

比如 <b >我的網(wǎng)站</ b>

演示效果：我的網(wǎng)站

我的網(wǎng)站這是字體的顏色BLUE是藍(lán)，RED是紅

演示

忽視右鍵

<body >

或

如何幾秒后轉(zhuǎn)到別的頁面？

<META. HTTP-EQUIV="Refresh" C>

點(diǎn)擊關(guān)閉窗口

<a href="javascript.:top.window.close();">點(diǎn)擊關(guān)閉窗口</a>！

請問如何去掉主頁右面的滾動(dòng)條？

如何做到讓一個(gè)網(wǎng)頁自動(dòng)關(guān)閉.

<html>

<head>

</object>

</head>

<body >

這個(gè)窗口會(huì)在10秒過后自動(dòng)關(guān)閉,而且不會(huì)出現(xiàn)提示. </body>

如何在不刷新頁面的情況下刷新css?

<style>

button{ color:#000000;}

</style>

<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點(diǎn)擊按鈕直接修改style標(biāo)簽里button選擇符使按鈕改為紅色</button>

請問如何讓網(wǎng)頁自動(dòng)刷新？

在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動(dòng)刷新，你可以更改為任意值。

如何讓頁面自動(dòng)刷新？

方法一，用refresh

HTML 代碼片段如下:

<head>

</head>

5表示刷新時(shí)間

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運(yùn)行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

</script>

如何讓超鏈接沒有下劃線

在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：

a { text-decoration: none}

--> </style>

請問如何去掉IE的上下滾動(dòng)條？

</body>

怎樣才能把RealPlayer文件在網(wǎng)頁做一個(gè)試聽連接？

如何用html實(shí)現(xiàn)瀏覽器上后退按鈕的功能？

或者

請問怎么在網(wǎng)頁中改變鼠標(biāo)的箭頭形狀？

HTML 代碼片段如下:

<body>

<a href="#" style="cursor: crosshair ">crosshair </a><br>

<a href="#" style="cursor: default ">default </a><br>

<a href="#" style="cursor: e-resize ">e-resize </a><br>

<a href="#" style="cursor: ne-resize ">ne-resize </a><br>

<a href="#" style="cursor: nw-resize">nw-resize</a><br>

<a href="#" style="cursor: n-resize">n-resize</a><br>

<a href="#" style="cursor: se-resize">se-resize</a><br>

<a href="#" style="cursor: sw-resize">sw-resize</a><br>

<a href="#" style="cursor: s-resize">s-resize</a><br>

<a href="#" style="cursor: w-resize">w-resize</a><br>

</body>

怎樣不使用頁面的緩存？即每一次打開頁面時(shí)不是調(diào)用緩存中的東西

<META. HTTP-EQUIV="

ragma" C>

頁面打開時(shí)自動(dòng)彈出一個(gè)窗口的代碼怎么寫？

HTML 代碼片段如下:

<html>

<head>

<title>Untitled Document</title>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

　window.open(theURL,winName,features);

}

//-->

</script>

</head>

</body>

</html>

如何讓我的頁面出現(xiàn)一個(gè)會(huì)講話的小人？Merlin

HTML 代碼片段如下:

<HTML>

<HEAD>

<META. http-equiv=Content-Type c>

</HEAD>

<BODY>

<p><OBJECT id=sims classid=CLSID

45FD31B-5C6E-11D1-9EC1-00C04FD7081F>

　</OBJECT>

var MerlinID;

var MerlinACS;

sims.Connected = true;

MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);

Merlin = sims.Characters.Character(MerlinID);

Merlin.Show();

Merlin.Play("Surprised");

Merlin.Speak("大家好");

Merlin.Play("GestureLeft");

Merlin.Think("我是默林！");

Merlin.Play("

leased");

Merlin.Think("可愛嗎？");

Merlin.Play("GestureDown");

Merlin.Speak("哈哈！");

Merlin.Hide();

function LoadLocalAgent(CharID, CharACS){

LoadReq = sims.Characters.Load(CharID, CharACS);

return(true);

}

</SCRIPT>

</p>

<p>看此效果必須裝有office2000?。?！</p>

</BODY>

</HTML>

在頁面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)

HTML 代碼片段如下:

<STYLE>

body　 {background-image:url(logo.gif);

background-repeat:no-repeat; background-position:center }

</STYLE>

</head>

</body>

</html>

[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運(yùn)行]

background-repeat:no-repeat; 是讓背景圖不占滿整個(gè)頁面

body bgproperties="fixed" 是拉動(dòng)scroll時(shí)背景圖不動(dòng)

文本輸入框什么屬性能實(shí)現(xiàn)不可輸入？

HTML 代碼片段如下:

或者

如何禁止自己的頁面在別人的框架里打開？

把以下代碼加至你的<head>區(qū)

if (window.top!=self){

window.top.location=self.location

}

</script>

如何實(shí)現(xiàn)首頁全屏幕顯示？

HTML 代碼片段如下:

<html>

<body><script. language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

var coolw=642

var coolh=400

var coolhuang=window.open("http://www.51js.com","coolhuang","width="+coolw+",height="+coolh+",

fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

window.close()

</script></body></html>

如何監(jiān)聽一個(gè)窗口被關(guān)閉了？

HTML 代碼片段如下:

<body >

如何禁止Ctrl+N？

HTML 代碼片段如下:

如何把頁面加入用戶的收藏夾？

HTML 代碼片段如下:

<a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:window.external.AddFavorite(‘‘‘‘http://www.51js.com‘‘‘‘,‘‘‘‘無憂腳本‘‘‘‘)">收藏?zé)o憂腳本</a>

如何在我的頁面中加入背景音樂？

IE: <bgsound src="*.mid" loop=infinite>

NS:<embed src="*.mid" autostart=true hidden=true loop=true>

*.mid你的背景音樂的midi格式文件

關(guān)于頁面轉(zhuǎn)換效果

或

說明：Transition=23是隨機(jī)效果，另可以選0-22任一數(shù)字固定某個(gè)效果

如何設(shè)定打開頁面的大小

HTML 代碼片段如下:

怎樣雙擊滾屏，單擊停止？

HTML 代碼片段如下:

<html>

<head>

</head>

<body>

var currentpos,timer;

function initialize()

{

timer=setInterval("scrollwindow()",10);

}

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>

</body>

</html>

如何讓body中的文字不被選中？

HTML 代碼片段如下:

如何讓彈出的窗口不能關(guān)閉？

在新開的窗口中加入如下代碼

</body>

如何讓瀏覽器在保存頁面時(shí)保存失敗？

HTML 代碼片段如下:

<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

</<B style="color:black;background-color:#ffff66">IFRAME</B>>

</NOSCRIPT>

表單中如何用圖片按鈕實(shí)現(xiàn) reset?

<html>

<head>

function aaa(){

document.forms[0].reset()

}

</script>

</head>

<body>

<form>

</form>

</body></html>

進(jìn)入網(wǎng)頁時(shí)彈出的信息對話框

<body >

關(guān)閉窗口后彈出對話框

<body >

告別提示

只要你肯干,沒有什么不能成功的.

1。忽視右鍵

或

2。加入背景音樂

　 IE:<bgsound src="*.mid" loop=infinite>

　 NS:<embed src="*.mid" autostart=true hidden=true loop=true>

　 </embed>

　 *.mid你的背景音樂的midi格式文件

3。簡單的window.open方法

　 <a href="#"

　 nclick="javascript:window.open(文件路徑/文件名,newwindow,

　 toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

　 width=400,height=300);">文字或圖片</a>

參數(shù)解釋：

　 <SCRIPT. LANGUAGE="javascript"> js腳本開始；

　 window.open 彈出新窗口的命令；

文件路徑/文件名彈出窗口的文件名；

　 newwindow 彈出窗口的名字（不是文件名），非必須，可用空代替；

　 width=400 窗口寬度；

　 height=300 窗口高度；

　 top=0 窗口距離屏幕上方的象素值；

　 left=0 窗口距離屏幕左側(cè)的象素值；

　 toolbar=no 是否顯示工具欄，yes為顯示；

　 menubar，scrollbars 表示菜單欄和滾動(dòng)欄。

　 resizable=no 是否允許改變窗口大小，yes為允許；

　 location=no 是否顯示地址欄，yes為允許；

　 status=no 是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），yes為允許；

　 </SCRIPT> js腳本結(jié)束

4。簡單的頁面加密

　 <script. LANGUAGE="javascript">

<!--

　 function loopy(){

var sWord ="";

while(sWord!="login"){sWord=prompt("請輸入你的登陸密碼");}

alert("登陸成功！");

　 }

　 loopy()

　 //-->

　 </script>

5。拉動(dòng)頁面時(shí)背景圖不動(dòng)

　 <style>

　 body{background-image:url(logo.gif);

　 background-repeat:no-repeat;background-position:center}

　 </style>

6。讓瀏覽器在保存頁面時(shí)保存失敗

7。隨機(jī)替換圖片

　 document.write(<img src="img/+parseInt(Math.random()*(5))

　 +.gif"height="40" width="50">

　 </script>

圖片文件名為0.gif 1.gif 2.gif 3.gif 4.gif

8。窗口定時(shí)關(guān)閉

先將如下代碼網(wǎng)頁文件的區(qū)：

　 <script. language="javascript">

　 function closeit() { setTimeout("self.close()",10000) //毫秒 }

　 </script>

然后再在<body>標(biāo)內(nèi)加入如：<body nload="closeit()">

9。網(wǎng)頁自動(dòng)關(guān)閉

　 <html>

　 <head>

　 <object id=closes type="application/x-oleobject"

　 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

　 </object>

　 </head>

這個(gè)窗口會(huì)在10秒過后自動(dòng)關(guān)閉,而且不會(huì)出現(xiàn)提示.

　 </body>

　 </html>

10。網(wǎng)頁自動(dòng)刷新

在head部記入

　 <META. HTTP-EQUIV="Refresh" content="20">

其中20為20秒后自動(dòng)刷新，你可以更改為任意值。

11。網(wǎng)頁自動(dòng)轉(zhuǎn)頁

　 <META. HTTP-EQUIV="Refresh" CONTENT="時(shí)間(秒);URL=地址">

12。保持layer在最前面，而不被Iframe、Object所覆蓋

在Layer中再插Iframe. 或 Object 設(shè)z-Index值

　 <div z-Index:2><object xxx></object> ＃前面

　 <div z-Index:1><object xxx></object> ＃后面

　 <div id="Layer2" style="position:absolute; top:40;width:400px;

　 height:95px;z-index:2"> height=100% width=100%>

　 <iframe. width=0 height=0></iframe>

　 </div>

　 <div id="Layer1" style="position:absolute; top:50;width:200px;

　 height:115px;z-index:1">

　 <iframe. height=100% width=100%></iframe>

　 </div>

13。返回上一頁

　 <a href=javascript:history.back(1)>『返回上一頁』</a>

14。關(guān)閉窗口

15。關(guān)于iframe的透明背景

　 <IFRAME. ID="iFrame1" SRC="iframe.htm"

　 allowTransparency="true"

　 style="background-color: green"></IFRAME>

16. ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標(biāo)右鍵

<table border ncontextmenu=return(false)><td>no</table> 可用于Table

17. <body nselectstart="return false"> 取消選取、防止復(fù)制

18.onpaste="return false" 不準(zhǔn)粘貼

19.oncopy="return false;" ncut="return false;" 防止復(fù)制

20. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標(biāo)

21. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標(biāo)

22. <input style="ime-mode:disabled"> 關(guān)閉輸入法

23. 永遠(yuǎn)都會(huì)帶著框架

if (window == top)top.location.href = "frames.htm"; //frames.htm為框架網(wǎng)頁

// --></script>

24. 防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

25. 網(wǎng)頁將不能被另存為

26. 查看網(wǎng)頁源代碼

<input type=button value=查看網(wǎng)頁源代碼

onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

27.刪除時(shí)確認(rèn)

28.屏蔽功能鍵Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift鍵!"); //可以換成ALT　CTRL

}

document.onkeydown=look;

</script>

29. 網(wǎng)頁不會(huì)被緩存

<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">

30.怎樣讓表單沒有凹凸感？

或 <input type=text style="border-left:none; border-right:none; border -top:none; border-bottom: 1 solid #000000"></textarea>

31.不要滾動(dòng)條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個(gè)都去掉？更簡單了

</body>

32.怎樣去掉圖片鏈接點(diǎn)擊后，圖片周圍的虛線？

33.電子郵件處理提交表單

<form. name="form1" method="post" action="mailt****@***.com" enctype="text/plain">

</form>

34.在打開的子窗口刷新父窗口的代碼里如何寫？

window.opener.location.reload()

35.如何設(shè)定打開頁面的大小

打開頁面的位置<body nload="top.moveBy(300,200);">

36.在頁面中如何加入不是滿鋪的背景圖片,拉動(dòng)頁面時(shí)背景圖不動(dòng)

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

37. 檢查一段字符串是否全由數(shù)字組成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個(gè)窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");

else alert("全是字符");

40.TEXTAREA自適應(yīng)文字行數(shù)的多少

</textarea>

41. 日期減去天數(shù)等于第二個(gè)日期

function cc(dd,dadd)

{

//可以加上錯(cuò)誤處理

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>

42. 選擇了哪一個(gè)Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style.

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

43.腳本永不出錯(cuò)

<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

44.ENTER鍵可以讓光標(biāo)移到下一個(gè)輸入框

45. 檢測某個(gè)網(wǎng)站的鏈接速度：

把如下代碼加入<body>區(qū)域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="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="鏈接超時(shí)"}

else

{document.forms[0]["txt"+b].value="時(shí)間"+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 nerror=auto("http://"+autourl+"")>")}

run()</script>

46. 各種樣式的光標(biāo)

auto ：標(biāo)準(zhǔn)光標(biāo)

default ：標(biāo)準(zhǔn)箭頭

hand ：手形光標(biāo)

wait ：等待光標(biāo)

text ：I形光標(biāo)

vertical-text ：水平I形光標(biāo)

no-drop ：不可拖動(dòng)光標(biāo)

not-allowed ：無效光標(biāo)

help ：?幫助光標(biāo)

all-scroll ：三角方向標(biāo)

move ：移動(dòng)標(biāo)

crosshair ：十字標(biāo)

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

47、禁止鼠標(biāo)右鍵，把Demo的圖片全都設(shè)為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標(biāo)經(jīng)過圖片時(shí)會(huì)出現(xiàn)另存的按鈕。禁止鼠標(biāo)右鍵的代碼很簡單：<script. LANGUAGE="JavaScript"> function click() { if (event.button==2) {alert('呵呵，不好意思，你甭想使用右鍵下載圖片：）'); } } document.onmousedown=click</script>

1. 怎樣定義網(wǎng) 頁語言( 字符集)?

----在制作網(wǎng) 頁過程中, 你首先要定義網(wǎng) 頁語言, 以便訪問者瀏覽器自動(dòng) 設(shè) 置語言, 而我們用所見即所得的HTML 工具時(shí), 都沒有注意到這個(gè) 問題, 因為它是默認(rèn) 設(shè) 置。要設(shè) 置的語言可以在HTML 代碼狀態(tài) 下找到:

$#@60; meta http －equiv="Content Type" content="text/html; charset=gb2312" $#@62;

----把charset=gb2312 改換成其它語言代碼即可, 比如英文:charset=en.

2. 怎樣防止別人把你的網(wǎng) 頁放到框架里?

----因為框架（frame）的緣故, 有許多人把別人的網(wǎng) 頁放置到自己的框架里, 使之成為自己的一頁。如果你要防止別人這樣做, 可以加入下列JavaScript 代碼即可, 它會(huì) 自動(dòng) 監(jiān) 測, 然后跳出別人的框架。

$#@60; script language="javascript" $#@62;

？?if (self != top) { top.location = self.location; }

$#@60; /script $#@62;

3. 怎樣設(shè) 置字體?

----在制作網(wǎng) 頁過程中, 大家都喜歡使用漂亮的字體。但是, 如果訪客瀏覽器沒有安裝同樣的字體，看到你的網(wǎng) 頁會(huì) 是很普通的字體。如何防止這種情況出現(xiàn) 呢? 大家知道字體設(shè) 置的標(biāo) 簽是Font, 而它有個(gè) 屬性是Face, 該屬性是定義字體的, 你可以這樣設(shè) 置:, 訪客的瀏覽器就會(huì) 按照Face 定義的字體順序設(shè) 置已安裝的字體。目前動(dòng) 態(tài) 主頁有種技術(shù), 可以把字體信息用向量格式存儲(chǔ), 然后利用訪客本身機(jī) 器含有的公共信息庫把字體快速的組裝起來, 這樣, 就不用擔(dān) 心訪客是否安裝有某種字體了。

4. 怎樣在網(wǎng) 頁中加入注釋?

----在共同開發(fā) 網(wǎng) 頁中, 加入注釋是防止分工被搞混淆或者注釋某段代碼特殊的含加入注釋的格式是:

$#@60; ! －－ Microsoft FrontPage 3.0 －－ $#@62;。

5. 怎樣測試瀏覽器并自動(dòng) 裝入所需要的網(wǎng) 頁?

----目前微軟和網(wǎng) 景的瀏覽器并不能完全兼容所有網(wǎng) 頁, 有的在某種瀏覽器里非常漂亮, 而用其它瀏覽器查看時(shí) 卻一團(tuán) 糟。如果你需要測試瀏覽器, 可以加入以下JavaScript 代碼并保存單獨(dú) 一個(gè) 網(wǎng) 頁:

$#@60; script LANGUAGE="JavaScript" $#@62;

function TestBrowser(){

ie = ((navigator.appName ==

"Microsoft Internet Explorer") ＆＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

ns = ((navigator.appName == "Netscape") ＆＆

(parseInt(navigator.appVersion) $#@62;= 3 ))

if (ns) {

setTimeout(location.href="nn4.htm",10);

} else {

setTimeout(location.href="ie4.htm",10);

}

$#@60; /script $#@62;

實(shí) 例請參考:

http://www.netease.com/～tiantao/test.htm

6. 怎樣讓鏈接沒有下劃線?

----只要在加入以下代碼, 所有鏈接就都沒有下劃線了:

$#@60; style type="text/css" $#@62;

$#@60; ! －－

A{text －transform: none;

text －decoration: none ;}

a:hover { text －decoration:underline }

－－ $#@62;

$#@60; /style $#@62;

7. 怎樣在網(wǎng) 頁中加入E-mail 鏈接并顯示預(yù) 定的主題?

A HREF=mailto:lovett@163.net?subject=test

8. 怎樣讓背景圖像不滾動(dòng)?

----Internet Explorer 瀏覽器支持一個(gè)Body 屬性Bgproperties, 它可以讓背景不滾動(dòng)。

$#@60; Body Background="c98.gif" Bgproperties="fixed" $#@62;

9. 怎樣評定網(wǎng) 頁的級別?

----在IE4.0 瀏覽器中, 有一項(xiàng) 功能是過濾網(wǎng) 站的, 一些受限制的網(wǎng) 站被過濾掉, 而該網(wǎng) 站必須被RSAC( 美國娛樂委員會(huì)) 評定了級別IE4.0 才能過濾, 如果你要評級可以在網(wǎng) 頁中加入以下代碼:

$#@60; meta http －equiv="PICS －Label"????

content=(PICS －1.1 "http://www.rsac.org/ratingsv01.html"

？?l gen true comment "RSACi North America Server"

？?for "http://youHostname"

？?on "1998.11.26GMT08:15 ?0500"

？?r (n 0 s 0 v 0 l 0))$#@62;

10. 怎樣定義本網(wǎng) 頁的關(guān) 鍵字?

----在網(wǎng) 頁中加入關(guān) 鍵字, 可以供某些搜索站臺(tái) 機(jī) 器人的使用, 它們會(huì) 利用該關(guān) 鍵字為你的網(wǎng) 站做索引, 這樣, 當(dāng) 別人用關(guān) 鍵字搜索網(wǎng) 站時(shí), 如果你的網(wǎng) 頁包含該關(guān) 鍵字, 那么就可以被列出了, 定義本網(wǎng) 頁關(guān) 鍵字, 可以加入以下代碼:

----$#@60; meta name="Keywords" content="china,enterprise,business,net" $#@62;

----Content 所包含的就是關(guān) 鍵字, 你可以自行設(shè) 置。

----這里有個(gè) 技巧, 你可以重復(fù) 某一個(gè) 單詞, 這樣可以提高自己網(wǎng) 站的排行位置, 如:

----$#@60; meta name="Keywords" CONTENT="china,china,china,china" $#@62;

11. 怎樣鏈接本網(wǎng) 頁的對象?

----有時(shí) 鏈接發(fā) 生在一個(gè) 網(wǎng) 頁里, 比如頁面上半部分列出了目錄, 下部分就列出了內(nèi) 容, 而單擊目錄任何一個(gè) 項(xiàng) 目都可以跳到指定部分, 可以在要被鏈接的內(nèi) 容部分設(shè) 置如下方式:

$#@60; A NAME=" ＃t1" $#@62;$#@60; /A $#@62;

而要鏈接到以上設(shè) 置的部分, 可以如下編制:

$#@60; A HREF="index.htm ＃t1" $#@62;t1$#@60; /A $#@62;

12. 怎樣為不支持框架結(jié) 構(gòu) 的瀏覽器指定內(nèi) 容?

----為了防止不支持框架結(jié) 構(gòu) 的瀏覽器訪問你的網(wǎng) 頁, 可以在你的網(wǎng) 頁中加入以下內(nèi) 容:

$#@60; body $#@62;

$#@60; noframes $#@62;

本網(wǎng) 頁是框架結(jié) 構(gòu), 請下載新的瀏覽器瀏覽

$#@60; /noframes $#@62;

$#@60; /body $#@62;

13. 怎樣刪除表格邊框?

----有時(shí) 需要刪除表格的邊框, 你可以把Border 設(shè) 置為如下代碼:

$#@60; body $#@62;

$#@60; table border="0" width="100 ％" $#@62;

$#@60; tr $#@62;

$#@60; td width="100 ％" $#@62;$#@60; /td $#@62;

$#@60; /tr $#@62;

$#@60; /table $#@62;

$#@60; /body $#@62;

14. 怎樣隱藏在狀態(tài) 欄里出現(xiàn) 的LINK 信息?

----大家知道, 當(dāng) 你指向一個(gè) 鏈接時(shí), 該鏈接的信息會(huì) 出現(xiàn) 在瀏覽器狀態(tài) 欄里, 如果需要隱藏信息, 可以如下設(shè) 置:

$#@60; a onMouseOver="window.status=none ;

return true" $#@62;test$#@60; /a $#@62;

15. 怎樣在網(wǎng) 頁中加入多媒體文件?

----有些多媒體文件無需其他程序就可以播放, 而有許多多媒體文件需要外部程序的幫助, 當(dāng) 瀏覽器下載不支持的格式時(shí) 會(huì) 調(diào) 用外部程序。如果瀏覽器沒有安裝這種外部程序, 那么瀏覽器會(huì) 自動(dòng) 去下載；如果你需要加入多媒體格式, 可設(shè) 置如下代碼:

$#@60; EMBED SRC="tt.ram" AUTOSTART="TRUE" LOOP="2" WIDTH="80" HEIGHT="30" $#@62;

----對于不支持EMBED 標(biāo) 簽的瀏覽器, 可以改用標(biāo) 簽。

16. 怎樣在網(wǎng) 頁中加入電子郵件表單提交?

----表單提交需要CGI 程序的支持, 但你也可以利用E ？mail 提交, 當(dāng) 你設(shè) 計(jì) 好表單后, 把Action 內(nèi) 容加入郵件地址即可, 如下:

form method="POST" action="mailto:lovett@163.net" ENCTYPE="text/plain"$#@62;

17. 怎樣隱藏熱訊分析的圖標(biāo)?

----熱訊分析是許多網(wǎng) 友使用的服務(wù), 它能幫助你分析網(wǎng) 站的流量, 如果你想隱藏該服務(wù) 圖標(biāo), 可以把服務(wù)代碼中的 width=88 height=31 都改為1 即可。

18. 怎樣在網(wǎng) 頁中加入最后修改日期?

----在中加入以下代碼即可:

$#@60; Script Language="Java Script" $#@62;

document.write

(" 最后修改日期" ＋document.lastModified);

$#@60; /Script $#@62;

內(nèi)容是《Web前端開發(fā)之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學(xué)習(xí)。

錯(cuò)誤處理對于web應(yīng)用開發(fā)至關(guān)重要，任何javascript錯(cuò)誤都有可能會(huì)導(dǎo)致網(wǎng)頁無法使用，因此作為開發(fā)人員，必須要及時(shí)處理有可能出現(xiàn)的錯(cuò)誤；

從IE4.0之后，幾乎所有的瀏覽器都包含了一些基本的錯(cuò)誤處理功能，但并沒有統(tǒng)一，后來，由ECMAscript添加了異常處理機(jī)制，也就是try…catch…finally結(jié)構(gòu)以及throw操作；

錯(cuò)誤處理的重要性: 好的錯(cuò)誤處理技術(shù)可以讓腳本的開發(fā)、調(diào)試和部署更加流暢，能對代碼進(jìn)行更好的控制；另外，JS缺乏標(biāo)準(zhǔn)的開發(fā)環(huán)境；

錯(cuò)誤類型：

語法錯(cuò)誤（syntax error）：也稱為解析錯(cuò)誤，發(fā)生在傳統(tǒng)編程語言的編譯解釋時(shí)；發(fā)生語法錯(cuò)誤時(shí)，就會(huì)發(fā)生阻塞，也就是不能繼續(xù)執(zhí)行代碼，但只是同一個(gè)線程中的代碼會(huì)受影響，其他線程中的代碼不受影響；

// Uncaught SyntaxError: Invalid or unexpected token
// 未捕獲的語法錯(cuò)誤：無效或意外的標(biāo)記
document.write("zeronetwork;

運(yùn)行時(shí)錯(cuò)誤（Runtime error）：也稱為exception異常, 其發(fā)生在編譯期/解釋期后，此時(shí)，問題并不出現(xiàn)在代碼的語法上，而是在嘗試完成一個(gè)非法的操作；

<input type="button" value="單擊" onclick="handleClick()" />
<script>
// Uncaught ReferenceError: openMy is not defined
// 未捕獲的引用錯(cuò)誤：未定義openMy
function handleClick(){
    openMy();
}
</script>

錯(cuò)誤報(bào)告：

因?yàn)槊總€(gè)瀏覽器都有自己的內(nèi)置Javascript解釋程序，所以每種瀏覽器報(bào)告錯(cuò)誤的方式都不同；有些是彈出錯(cuò)誤信息，有些是把信息打印在控制臺(tái)中；

IE(windows): 默認(rèn)情況下，會(huì)彈出包含錯(cuò)誤細(xì)節(jié)的對話框，并詢問是否繼續(xù)執(zhí)行頁面上的腳本；如果瀏覽器有調(diào)試器(如：Microsoft Script Debugger) ，此對話框會(huì)提供一個(gè)是調(diào)試還是忽略的選項(xiàng)；如果在IE設(shè)置中取消了”顯示錯(cuò)誤”，那么會(huì)在頁面左下角顯示一個(gè)黃色的圖標(biāo)；

注：如果JS代碼就在HTML里，顯示錯(cuò)誤行是正確的，如果是外部的JS文件，則行號(hào)往往差一行，如第5行則為第4行；

Mozilla(所有平臺(tái)): 在控制臺(tái)中打印錯(cuò)誤信息，并發(fā)出警告；其會(huì)報(bào)告三種類型的消息：錯(cuò)誤、嚴(yán)格警告和消息等的；

Safari (MacOS)：是對JavaScript錯(cuò)誤和調(diào)試的支持最差，默認(rèn)情況下，它對終端用戶不提供任何javascript錯(cuò)誤報(bào)告；

錯(cuò)誤處理：

Javascript提供了兩種處理錯(cuò)誤的方式：

BOM包含一個(gè)onerror事件處理函數(shù)，該函數(shù)通常被綁定在window對象或image對象上；
ECMAscript定義了try…catch結(jié)構(gòu)來處理異常；

onerror事件處理函數(shù):

window對象的onerror屬性是一個(gè)事件處理程序，頁面上出現(xiàn)異常時(shí)，error事件便在window對象上觸發(fā)，并把錯(cuò)誤消息輸出到Javascript控制臺(tái)上，這種方式也稱為全局錯(cuò)誤捕獲；如：

window.onload = function(){
    show(); // 在onload事件中調(diào)用了一個(gè)不存在的函數(shù)
}
window.onerror = function(){
    alert("出現(xiàn)錯(cuò)誤");
    return true;
}

獲取錯(cuò)誤信息：

window.onerror事件處理程序在調(diào)用時(shí)可以傳5個(gè)參數(shù)，由這5個(gè)參數(shù)可以獲取詳細(xì)的錯(cuò)誤信息；

message：錯(cuò)誤信息，描述錯(cuò)誤的一條消息；
URL：引發(fā)錯(cuò)誤的Javascript所在的文檔的URL；
line：文檔中發(fā)生錯(cuò)誤的行數(shù)；
column：發(fā)生錯(cuò)誤的列數(shù)；
error：錯(cuò)誤對象，這個(gè)error也稱為全局錯(cuò)誤對象；

window.onerror = function(sMessage, sUrl, sLine, sColumn, error){
console.log("Error:" + sMessage + " URL：" + sUrl + " Line：" + sLine + " Column：" + sColumn);
console.log(error);
    return true;
}

onerror處理程序的返回值：

如果返回true，則阻止執(zhí)行默認(rèn)的事件處理程序，也就是將通知瀏覽器，事件處理程序已經(jīng)處理了錯(cuò)誤，不需要其他操作，反之會(huì)顯示錯(cuò)誤消息；

某些元素也支持onerror; 但其處理函數(shù)沒有任何關(guān)于error信息的參數(shù)，如:

document.images[0].onerror = function(event){
console.log(event);  // Event
console.log(event.type);  // error
}

這里的event參數(shù)是一個(gè)類型為Event事件對象，其存儲(chǔ)的信息除了type返回了error，并沒有其他和錯(cuò)誤相關(guān)的信息；

全局錯(cuò)誤處理window.onerror通常不能恢復(fù)腳本繼續(xù)執(zhí)行，但會(huì)給開發(fā)者發(fā)送錯(cuò)誤信息；

window.onerror = function(error){
  console.log(error);
}
show();
console.log("中止，不會(huì)被執(zhí)行");
window.onload = function(){
  console.log("也不會(huì)被執(zhí)行");
}

可以是簡單的打印，也可以把錯(cuò)誤保存到日志記錄里；

window.onerror就是綁定在window對象的error事件，也可以使用標(biāo)準(zhǔn)的添加事件偵聽的方式window.addEventListener(eventtype, handler)，其需要兩個(gè)參數(shù)，eventtype為事件類型，在此為error，handler是事件處理函數(shù)，其需要一個(gè)參數(shù)event，一個(gè)ErrorEvent類型的對象，其保存著有關(guān)事件和錯(cuò)誤的所有信息，如：

window.addEventListener("error", function(event){
  console.log(event);  // ErrorEvent
  console.log(event.error);  // Error對象
  console.log(event.error.name);
  console.log(event.error.message);
  console.log(event.error.stack);
  console.log(event.lineno);  // 行
  console.log(event.colno);  // 列
  console.log(event.filename);
});

在實(shí)際的開發(fā)中，這兩種方式都會(huì)被使用，只不過addEventListener有定的兼容必問題，所以要兼顧所有的瀏覽器且不太關(guān)注事件對象本身的話，就使用window.onerror；

當(dāng)加載自不同域的腳本中發(fā)生語法錯(cuò)誤時(shí)，為避免信息泄露，語法錯(cuò)誤的細(xì)節(jié)將不會(huì)報(bào)告，只會(huì)返回簡單的"Script error."；

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  console.log(msg);  // Script error
  console.log(url);  // ""
  console.log(lineNo);  // 0
  console.log(columnNo);  // 0
  console.log(error);  // null
}
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

可以針對同域和不同域的錯(cuò)誤分開處理，如：

<script>
window.onerror = function(msg, url, lineNo, columnNo, error){
  var str_error = msg.toLowerCase();
  var sub_string = "script error";
  if(str_error.indexOf(sub_string) > -1)
    alert("腳本發(fā)生錯(cuò)誤，詳情請?jiān)诳刂婆_(tái)查看");
  else{
    var message = [
      '消息：' + msg,
      'URL：' + url,
      '行：' + lineNo,
      '列：' + columnNo,
      '錯(cuò)誤對象：' + error
    ].join(" - ");
    alert(message);
  }
}
show();
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>

從上在的執(zhí)行結(jié)果來看，error事件執(zhí)行了兩次，原因是使用了兩個(gè)script，也就是當(dāng)一個(gè)script有錯(cuò)誤發(fā)生時(shí)，它只會(huì)阻止當(dāng)前的script塊，而不會(huì)阻止其他的script塊；如：

<script>
show();  // 會(huì)捕獲
console.log("不會(huì)被執(zhí)行");
myshow();  // 不會(huì)捕獲
</script>
<script src="https://www.zeronetwork.cn/demo/demo.js"></script>
<script>
console.log("執(zhí)行了");
demo();  // 會(huì)捕獲
console.log("不會(huì)被執(zhí)行");
</script>

body元素的onerror特性，也可以充當(dāng)事件處理函數(shù)，如：

<body onerror="alert('出現(xiàn)了錯(cuò)誤');return true;">

注意，先注釋掉window.onerror等代碼；

此時(shí)，可以直接使用event、source、lineno、colno、error等屬性；

<body onerror="alert(event + '\n' + source + '\n' + lineno + '\n' + colno + '\n' + error);return true;">

當(dāng)然了，也可以為body綁定error事件，此時(shí)各屬性，必須明確指定，如：

document.body.onerror = function(msg, url,lineno,colno,error){
  alert(msg + '\n' + url + '\n' + lineno + '\n' + colno + '\n' + error);
  return true;
}

try-catch語句：

try語句中為期待正常執(zhí)行的代碼塊，當(dāng)在try語句中發(fā)生錯(cuò)誤，其余代碼會(huì)中止執(zhí)行，catch語句就處理該錯(cuò)誤，如果沒有錯(cuò)誤，就跳過catch語句；try和catch必須成對出現(xiàn)；

try{
    //code
    [break]
}catch([exception]){
    //code
}[finally]{
    //code
}
// 如
try {
    show();
    alert("不能執(zhí)行");
} catch (error) {
    alert("出現(xiàn)一個(gè)錯(cuò)誤:" + error);
} finally{
    alert("管你呢");
}

try語句塊內(nèi)的錯(cuò)誤只會(huì)中止try語句塊中發(fā)生錯(cuò)誤之后的邏輯代碼，并不會(huì)中止整個(gè)腳本的運(yùn)行；執(zhí)行try-catch語句，必須是運(yùn)行時(shí)，運(yùn)行時(shí)錯(cuò)誤，也被稱為異常；try-catch語句中指定只能有一個(gè)catch子句；try-catch語句適合處理無法預(yù)知、無法控制的錯(cuò)誤；finally常被用于無論結(jié)果是否有異常，都要執(zhí)行的代碼，如：

try{
  alert("try");
  show();
  alert("no exec");
}catch(error){
  alert("catch");
}finally{
  alert("finally");
}
alert("continute");

代碼執(zhí)行的兩條路徑：如果沒有異常，執(zhí)行路徑為：try->finally，反之為：try的部分->catch->finally；

一般用于關(guān)閉打開的鏈接和釋放資源；

var connection = {open: function(){},close: function(){},send: function(data){}}
// var data = "大師哥王唯"; // 注釋這一行，讓它產(chǎn)生異常
connection.open();
try{
    connection.send(data);
}catch(exception){
    console.log("出現(xiàn)一個(gè)錯(cuò)誤");
}finally{
    connection.close();
    console.log("關(guān)閉了");
}

還有一個(gè)典型的應(yīng)用，讀寫文件，如：

function openFile(){};
function writeFile(data){};
function closeFile(){};
openFile();
try{
  writeFile();
}catch(error){
  console.log(error);
}finally{
  closeFile();
}

在try-catch-finally語句塊中的變量是全局變量：

try{
  var name = "王唯";
  show();
  var city = "蚌埠";
}catch(error){
  var age = 18;
  console.log(name);
}finally{
  var sex = "男";
  console.log(name);
  console.log(age);
}
console.log(name);
console.log(city);
console.log(age);
console.log(sex);

try-catch-finally與return：

如果直接在try-catch-finally語句塊中執(zhí)行return，會(huì)拋出異常，如：

try {
  console.log("try");
  // return;  // Illegal return statement 非法返回語句
  console.log("try agin");
} catch (error) {
  console.log(error);
  // return;  // Illegal return statement
}finally{
  console.log("finally");
  // return;  // Illegal return statement
}

如：

function foo(){
  try {
    console.log("try");
    return 1;
    show();
    console.log("try agin");
  } catch (error) {
    console.log(error);
    return 2;
  }finally{
    console.log("finally");
    return 3;
  }
}
console.log(foo());  // 3

try-finally：

沒有catch從句，只有try-finally也可以，目的是，只確保執(zhí)行開始和最終的過程，而不處理錯(cuò)誤，如：

try{
  console.log("try");
  show();
}finally{
  console.log("finally"); // 會(huì)執(zhí)行
}
console.log("over"); // 不會(huì)執(zhí)行，已中止

但此時(shí)，還是會(huì)拋出異常的，但此時(shí)，會(huì)在執(zhí)行完finally后中止執(zhí)行，并會(huì)查找外部的catch語句;

嵌套try-catch語句：

在catch子句中，也有可能會(huì)發(fā)生錯(cuò)誤，所以就可以使用嵌套的try-catch語句，如：

try {
    show();
    console.log("不能執(zhí)行");
} catch (error) {
    console.log("出現(xiàn)一個(gè)錯(cuò)誤:" + error);
    try {
        var arr = new Array(10000000000000000);
        arr.push(error);
    } catch (error) {
        console.log("又出現(xiàn)了一個(gè)錯(cuò)誤：" + error);
    }
} finally{
    console.log("管你呢");
}

也可以在try中嵌套try-catch-finally語句，如：

try{
  try{
    console.log("try");
    show();
  }catch(error){
    console.log("error");
  }finally{
    console.log("finally");
  }
}catch(error){
  console.log(error);
}

一個(gè)比較典型的應(yīng)用，就是處理json數(shù)據(jù)，如：

// var json = '{"name":"wangwei", "age": 18, "sex": "男"}';
var json = '{bad json}';  // Uncaught SyntaxError
var data = JSON.parse(json);
console.log(data.name);
console.log(data.age);
console.log(data.sex);

一量json數(shù)據(jù)發(fā)生錯(cuò)誤，整個(gè)應(yīng)用都會(huì)崩潰，所以應(yīng)該使用try-catch，如：

<div id="msg">您的信息：</div>
<script>
window.onload = function(){
  var msg = document.getElementById("msg");
  try{
    // var json = '{"name":"王唯", "age": 18, "sex": "男"}';
    var json = '{bad json}';  // Uncaught SyntaxError
    var data = JSON.parse(json);
    msg.innerHTML += "姓名：" + data.name + "，年齡：" + data.age + "，性別：" + data.sex;
  }catch(error){
    msg.innerHTML = "開小差了，找不到你的信息";
  }
}
</script>

當(dāng)使用了try-catch語句，就不會(huì)將錯(cuò)誤提交給瀏覽器，也就不會(huì)觸發(fā)error事件，如：

window.onerror = function(error){
  console.log(error);  // 不會(huì)觸發(fā)
}
try{
  show();
}catch(error){
  console.log(error);
}

Error錯(cuò)誤對象：

在catch中會(huì)捕獲一個(gè)Error錯(cuò)誤對象；該對象在Javascript解析或運(yùn)行時(shí)，一旦發(fā)生錯(cuò)誤，引擎就會(huì)拋出這個(gè)對象；如果沒有相關(guān)聯(lián)的try-catch捕獲該對象，就由瀏覽器輸出這個(gè)對象；

// ...
console.log("錯(cuò)誤：" + error + " name:" + error.name + " message:" + error.message);

也可以通過Error的構(gòu)造器創(chuàng)建一個(gè)錯(cuò)誤對象，這個(gè)Error對象也可用于用戶自定義的異常；語法：new Error([message[, filename[, lineNumber]]]);

message：可選，錯(cuò)誤描述信息；
fileName：可選，非標(biāo)準(zhǔn)，被創(chuàng)建的Error對象的fileName屬性值，默認(rèn)是調(diào)用Error構(gòu)造器代碼所在的文件的名字; 但大部分瀏覽器沒有實(shí)現(xiàn)；
lineNumber：可選，非標(biāo)準(zhǔn)，被創(chuàng)建的Error對象的lineNumber屬性值，默認(rèn)是調(diào)用Error構(gòu)造器代碼所在的文件的行號(hào)；但大部分瀏覽器沒有實(shí)現(xiàn)；

實(shí)例化Error對象，也可以不使用new關(guān)鍵字，如：

var error = new Error("自定義錯(cuò)誤對象");
var error = Error("不使用new");
console.log(error);
console.log(error.name);  // Error
console.log(error.message);  // 自定義錯(cuò)誤對象

Error錯(cuò)誤對象屬性：

name：表示錯(cuò)誤類型的字符串；
message：實(shí)際的錯(cuò)誤信息；

Error類還有6個(gè)子類，其可以通過錯(cuò)誤對象的name屬性返回具體異常類的名稱：

EvalError：錯(cuò)誤發(fā)生在eval()函數(shù)中；
RangeError：數(shù)值超出javascript可表示的范圍；；
ReferenceError：使用了非法或不能識(shí)別的引用；
SyntaxError：發(fā)生了語法錯(cuò)誤；
TypeError：操作數(shù)的類型不是預(yù)期所需的；
URIError：在encodeURI()或decodeURI()函數(shù)中發(fā)生了錯(cuò)誤；

// EvalError
try{
  throw new EvalError("Eval異常");
}catch(error){
  console.log(error);
  console.log(error instanceof EvalError);  // true
  console.log(error.name);  // EvalError
  console.log(error.message);  // Eval異常
}
// RangeError
var num = 1;
try{
  num.toPrecision(500);  //  [pr??s??n] 精度
}catch(error){
  console.log(error); 
}
// ReferenceError
var x;
try {
  x = y + 1;
} catch (error) {
  console.log(error);
}
// SyntaxError
try{
  eval("alert('wangwei)");
}catch(error){
  console.log(error);
}
// TypeError
var num = 1;
try{
  num.toUpperCase(); // 無法將數(shù)字轉(zhuǎn)為大寫
}catch(error){
  console.log(error);
}
// URIError (malformed [?m?l?f??md]格式不正確，畸形的)
try{
  decodeURI("%%%"); // 使用了非法字符
}catch(error){
  console.log(error);
}

Error對象的message屬性是瀏覽器生成的用于表示錯(cuò)誤描述的信息，因?yàn)檫@個(gè)屬性是特定于瀏覽器的，所以不同的瀏覽器上可能產(chǎn)生不同的錯(cuò)誤信息，如：

try {
    eval("a ++ b");
    show();
    console.log("執(zhí)行了嗎？");
} catch (error) {
    // SyntaxError:Unexpected identifier或
    // SyntaxError:unexpected token: identifier
    console.log(error.name + ":" + error.message);
}

使用name屬性判斷錯(cuò)誤類型：

try {
    eval("a++b");
} catch (error) {
    console.log(error instanceof SyntaxError); // true
    if(error.name == "SyntaxError")
        console.log(error.name + ":" + error.message);
    else
        console.log("未知錯(cuò)誤：" + error.message);
}

拋出異常：

throw語句的作用是手動(dòng)中斷程序執(zhí)行，拋出一個(gè)錯(cuò)誤，一般用于有目的的拋出異常，也就是允許開發(fā)者可以創(chuàng)建自定義錯(cuò)誤；

throw可以拋出任何類型的值，也就是說，它的參數(shù)可以是任何值；語法：throw error_object；error_object可以是字符串、數(shù)字、布爾或?qū)ο螅?/p>

throw "出現(xiàn)一個(gè)錯(cuò)誤";
throw 50666;
throw true;
throw new Object();
throw {
    toString:function(){
        return 'Error!';
    }
}
function getRectArea(width, height){
  if(isNaN(width) || isNaN(height))
    throw '參數(shù)應(yīng)該是number類型';
  return width * height;
}
getRectArea("wangwei",10);

對于Javascript引擎來說，只要遇到throw語句，程序就會(huì)終止；

也可以拋出一個(gè)Error錯(cuò)誤對象；Error對象的構(gòu)造函數(shù)只有一個(gè)參數(shù),

throw new Error("請?jiān)俅螄L試");

其他Error子類對象也可以拋出：

throw new SyntaxError("...");
throw new TypeError("...");
throw new RangeError("...");
throw new EvalError("...");
throw new URIError("...");
throw new ReferenceError("...");

對于Error類和其子類來說，錯(cuò)誤對象的name就是其構(gòu)造函數(shù)的名稱，message是其構(gòu)造函數(shù)的參數(shù)；

當(dāng)拋出異常后，throw之后的語句將不會(huì)執(zhí)行，并跳到相關(guān)聯(lián)的catch語句中進(jìn)行處理，如：

<h1>請輸入18-99之間的數(shù)字</h1>
<input id="txtInput" type="text" />
<button id="btn">確定</button>
<p id="msg"></p>
<script>
function myFun(){
  var msg,x;
  msg = document.getElementById("msg");
  msg.innerHTML = "";
  x = document.getElementById("txtInput").value;
  try{
    if(x == "") throw "空的";
    if(isNaN(x)) throw "不是數(shù)字";
    x = Number(x);
    if(x < 18) throw "太小";
    if(x > 99) throw "太大";
    msg.innerHTML = "輸入的值正確：" + String(x);
  }
  catch(error){
    msg.innerHTML = "輸入的值不正確：" + error; 
  }
}
var btn = document.getElementById("btn");
btn.onclick = myFun;
</script>

也可以在某個(gè)語句塊的外部捕獲throw異常，如：

function sum(a,b){
    if(arguments.length < 2)
        throw new Error("需要兩個(gè)參數(shù)");
    else
        return a + b;
}
try{
    console.log(sum(18));
}catch(error){
    // Error:需要兩個(gè)參數(shù)
    console.log(error.name + ":" + error.message);
}

可以通過instanceof判斷異常的類型來特定處理某一類的異常，例如可以區(qū)分瀏覽器拋出的異常和開發(fā)人員拋出的異常，如：

function sum(a,b){
    if(arguments.length < 2)
      throw new Error("需要兩個(gè)參數(shù)");
    if(isNaN(a) || isNaN(b))
      throw "參數(shù)是不是Number類型";
    return a + b;
}
try{
    console.log(sum(18,12));
}catch(error){
  if(error instanceof SyntaxError)
    console.log("語法錯(cuò)誤：" + error.name + ":" + error.message);
  else if(error instanceof Error)
    console.log(error.name + ":" + error.message);
  else
      console.log(error);
}

注：判斷Error類型要放到if的最后一個(gè)條件；

即使在catch語句中，還可以根據(jù)實(shí)際情況，再次拋出異常，此時(shí)，其可以被外部的try-catch語句塊捕獲（如果存在的話）；

當(dāng)發(fā)生異常時(shí)，代碼會(huì)立即停止，僅當(dāng)有try-catch語句捕獲到異常時(shí)，代碼才會(huì)繼續(xù)執(zhí)行；其背后運(yùn)行的原理是，當(dāng)發(fā)生異常，JavaScript解釋器會(huì)立即停止執(zhí)行的邏輯，并跳轉(zhuǎn)到就近的try-catch異常處理程序，如果發(fā)生異常的代碼塊中沒有相關(guān)聯(lián)的catch從句，解釋器會(huì)檢查更高層的閉合代碼塊，看它是否有相關(guān)聯(lián)的異常處理程序，以此類推，直到找到一個(gè)異常處理程序?yàn)橹?；如果發(fā)生異常的函數(shù)中沒有處理它的try-catch語句，異常將向上傳播到調(diào)用該函數(shù)的代碼，如此，異常就會(huì)沿著Javascript的語法結(jié)構(gòu)或調(diào)用棧向上傳播；如果沒有找到任何異常處理程序，JavaScript將把異常當(dāng)成程序錯(cuò)誤來處理，并通過瀏覽器報(bào)告給用戶；

自定義錯(cuò)誤類型：

可以基于Error類來創(chuàng)建自定義的錯(cuò)誤類型，此時(shí)可以使用throw拋出自定義的異常類，或通過instanceof來檢查這個(gè)異常類的類型，新類型需要實(shí)現(xiàn)name和message屬性；

function CustomError(message){
  this.name = "CustomError";
  this.message = message || 'Default Message';
  this.stack = (new Error()).stack;
}
// CustomError.prototype = new Error();
// 或者
CustomError.prototype = Object.create(Error.prototype);
CustomError.prototype.constructor = CustomError;
try{
  var name = "jingjing";
  if(name !== "wangwei")
    throw new CustomError("自定義的錯(cuò)誤類型");
}catch(error){
  console.log(error.message);
}

小示例：

function UserException(message){
  this.name = "UserException";
  this.message = message;
}
function getMothName(m){
  m = m - 1;  // 調(diào)整月份數(shù)字到數(shù)組索引（1=Jan,12=Dec）
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  if(months[m] != undefined)
    return months[m];
  else
    throw new UserException("Invalid Month No");
}
try{
  var myMonth = 15;
  var monthName = getMothName(myMonth);
}catch(error){
  var monthName = "未知";
  console.log(error.name + ":" + error.message);
}

小示例：驗(yàn)證電話號(hào)碼，如：

function Telephone(num){
  num = String(num);
  var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
  if(pattern.test(num)){
    this.value = num.match(pattern)[0];
    this.valueOf = function(){
      return this.value;
    };
    this.toString = function(){
      return String(this.value);
    }
  }else{
    throw new TelephoneFormatException(num);
  }
}
function TelephoneFormatException(value){
  this.name = "TelephoneFormatException";
  this.message = "電話號(hào)碼格式不正確";
  this.value = value;
  this.toString = function(){
    return this.value + ":" + this.message;
  }
}
// 應(yīng)用
var TELEPHONE_INVALID = -1;
var TELEPHONE_UNKNOWN_ERROR = -2;
function verifyTelephone(num){
  try{
    num = new Telephone(num);
  }catch(error){
    if(error instanceof TelephoneFormatException)
      return TELEPHONE_INVALID;
    else
      return TELEPHONE_UNKNOWN_ERROR;
  }
  return num.toString();
}
console.log(verifyTelephone("010-66668888"));
console.log(verifyTelephone("13812345678"));
console.log(verifyTelephone("138123456")); // -1
console.log(verifyTelephone("wangwei")); // -1

常見錯(cuò)誤：

由于javaScript是松散類型的，也不會(huì)驗(yàn)證函數(shù)的參數(shù)，因此錯(cuò)誤只會(huì)在運(yùn)行時(shí)出現(xiàn)；一般來說，需要關(guān)注三種錯(cuò)誤：類型轉(zhuǎn)換錯(cuò)誤、數(shù)據(jù)類型錯(cuò)誤、通信錯(cuò)誤；

類型轉(zhuǎn)換錯(cuò)誤：

一般發(fā)生在使用某個(gè)操作符，或者使用其他可能自動(dòng)轉(zhuǎn)換值的數(shù)據(jù)類型的語言結(jié)構(gòu)時(shí)；

function output(str1,str2,str3){
  var result = str1 + str2;
  if(str3)
    result += str3;
  return result;
}
console.log(output(1,2,3));
console.log(output(1,2));
console.log(output(1,2,0));
console.log(output(1,2,"wangwei"));

這就是一個(gè)非常典型的與期望不一致的方式；

數(shù)據(jù)類型錯(cuò)誤：

在流控制語句中使用非布爾值，是極為常見的一個(gè)錯(cuò)誤來源，為避免此類錯(cuò)誤，就要做到在條件比較時(shí)確定傳入的是布爾值，例如，把if語句改成：if(typeof str3 == 'number')；

所以在使用某個(gè)變量或?qū)ο髸r(shí)，一定要適當(dāng)?shù)貦z查它的數(shù)據(jù)類型，如：

function reverseSort(values){
  // if(values){
  //   values.sort();
  //   values.reverse();
  // }
  if(arguments.length > 0){
    if(!Array.isArray(values))
      return [];
    else{
      values.sort();
      values.reverse();
      return values;
    }
  }
  return [];
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));

另一個(gè)常見的錯(cuò)誤就是將參數(shù)與null值進(jìn)行比較。與null進(jìn)行比較只能確保相應(yīng)的值不是null和undefined。要確保傳入的值有效，僅檢測null值是不夠的；

function reverseSort(values){
  // if(values != null){  // 任何非數(shù)組值都會(huì)導(dǎo)致錯(cuò)誤
  if(values instanceof Array) // 非數(shù)組值被忽略
    values.sort();
    values.reverse();
  }
  return values;
}
var arr = [3,2,6,9,4];
// var arr = 100;  // Uncaught TypeError: values.sort is not a function
console.log(reverseSort(arr));
// 或
function reverseSort(values, fun){
  if(values instanceof Array){
    if(fun != null && typeof fun === "function")
      values.sort(fun);
    else
      values.sort();
  }
  return values;
}
var arr = [3,2,6,9,4];
console.log(reverseSort(arr, function(a,b){
  return a > b ? -1 : 1;
}));

通信錯(cuò)誤：最典型的就是Ajax應(yīng)用，用其可以動(dòng)態(tài)加載信息，但是，javascript與服務(wù)器之間的任何一次通信，都有可能會(huì)產(chǎn)生錯(cuò)誤；

調(diào)試技巧：

使用警告框: 這是最簡單、流行的方式，如：

function test(){
    alert("函數(shù)內(nèi)");
    var iNum1 = 5, iNum2 = 10;
    alert(iNum1);
    var iResult = iNum1 + iNum2;
    alert(iResult);
}
test();

拋出自定義錯(cuò)誤：

function assert(bCondition, sErrorMessage){
    if(!bCondition)
        throw new Error(sErrorMessage);
}
function divide(iNum1, iNum2){
    assert(arguments.length == 2, "divide需要兩個(gè)參數(shù)");
    assert((!isNaN(iNum1) && !isNaN(iNum2)), "需要Number類型");
    return iNum1 / iNum2;
}
console.log(divide(10,2));
console.log(divide(10,"c"));  // 異常
// 或
try{
  console.log(divide(10,"c"));
}catch(error){
  console.log(error.name + ":" + error.message);
}

Javascript校驗(yàn)器：

jslint的主要目的是指出不合規(guī)范的js語法和可能的語法錯(cuò)誤，包括一些不良代碼；官網(wǎng)：http://www.jslint.com/

如以下，會(huì)給出警告：

語句未使用塊標(biāo)記；
一行的結(jié)尾未以分號(hào)結(jié)束；
用var聲明一個(gè)已在使用的變量；
with語句；

調(diào)試器：

Javascript自身不具備調(diào)試器，但目前所有的瀏覽器可以使用自身的調(diào)試器；

IE調(diào)試：

啟用IE的調(diào)試功能：

菜單“工具”|“Internet選項(xiàng)”命令，打開“Internet選項(xiàng)”對話框，在“高級”選項(xiàng)卡中，找到兩個(gè)“禁用腳本調(diào)試”復(fù)選框并取消；開始調(diào)試，調(diào)試的主要工作是反復(fù)地跟蹤代碼，找出錯(cuò)誤并修正；

設(shè)置斷點(diǎn)：

在調(diào)試程序窗口中，將光標(biāo)移動(dòng)到需要添加斷點(diǎn)的行上，按一次F9鍵或單擊，當(dāng)前行的背景色變?yōu)榧t色，并且在窗口左邊界上標(biāo)上紅色的圓點(diǎn)，當(dāng)程序運(yùn)行到斷點(diǎn)時(shí)就會(huì)暫停；

運(yùn)行調(diào)試：

單擊繼續(xù)或按F5進(jìn)行逐步運(yùn)行調(diào)試；F10步進(jìn)、F11步入，都可以繼續(xù)向下執(zhí)行；將鼠標(biāo)移動(dòng)到變量名上時(shí)，會(huì)顯示變量當(dāng)前時(shí)刻的值；或者在右側(cè)的“監(jiān)視”窗格中可以觀察該變量的值；點(diǎn)擊變量信息框中的變量值或右側(cè)“監(jiān)視”空格中的變量值可以修改變量的當(dāng)前值；更多的調(diào)試操作：查看調(diào)用關(guān)系、監(jiān)視特定變量的值等；

// 示例
var balance = 200.0;    //
var willPay = 20.0;
function pay(_balance, _pay){
    return _balance - _pay;
}
function showBalance(){
    debugger;
    var blnc = pay(balance,willPay);
    alert("當(dāng)前余額:" + blnc);
}
showBalance();

日志輸出：

程序運(yùn)行時(shí)，有些中間數(shù)據(jù)需要記錄，以便檢查程序運(yùn)行的狀態(tài)；對于JavaScript記錄中間數(shù)據(jù)通常是以日志的形式記錄需要記錄的數(shù)據(jù)，再發(fā)送到服務(wù)器上保存起來；日志記錄的內(nèi)容可以是任意的信息，根據(jù)開發(fā)者的需要而定；

覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下：

HTML文檔的接收和預(yù)處理

網(wǎng)絡(luò)請求處理：當(dāng)用戶輸入U(xiǎn)RL或點(diǎn)擊鏈接時(shí)，瀏覽器發(fā)起HTTP請求，服務(wù)器響應(yīng)并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網(wǎng)絡(luò)通信操作。
預(yù)解析優(yōu)化：為了提高性能，現(xiàn)代瀏覽器在主線程解析HTML之前會(huì)啟動(dòng)一個(gè)預(yù)解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續(xù)渲染過程的順暢進(jìn)行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標(biāo)記轉(zhuǎn)化為符號(hào)序列，然后通過句法分析器按照HTML規(guī)范構(gòu)建出DOM樹。每個(gè)節(jié)點(diǎn)代表一個(gè)HTML元素，形成了多層次的樹狀結(jié)構(gòu)。
生成對象接口：生成的DOM樹是頁面元素的結(jié)構(gòu)化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動(dòng)態(tài)修改頁面內(nèi)容和結(jié)構(gòu)。

CSS解析與CSSOM樹構(gòu)建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標(biāo)簽引入的外部CSS文件和<style>標(biāo)簽中的內(nèi)聯(lián)CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關(guān)系。
CSS屬性計(jì)算：包括層疊、繼承等，確保每個(gè)元素對應(yīng)的樣式能夠被準(zhǔn)確計(jì)算。這些計(jì)算過程為后續(xù)的布局提供必要的樣式信息。

JavaScript加載與執(zhí)行

阻塞式加載：當(dāng)解析器遇到<script>標(biāo)簽時(shí)，它會(huì)停止HTML的解析，轉(zhuǎn)而先加載并執(zhí)行JavaScript代碼。這是因?yàn)镴S可能會(huì)修改DOM結(jié)構(gòu)或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺(tái)進(jìn)行JS的加載和執(zhí)行，而不阻塞HTML解析。

渲染樹的構(gòu)建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個(gè)樹只包含顯示界面所需的DOM節(jié)點(diǎn)及對應(yīng)的樣式信息。
不可見元素的排除：渲染樹會(huì)忽略例如<head>、<meta>等不可見元素，只關(guān)注<body>內(nèi)的可視化內(nèi)容。

布局計(jì)算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節(jié)點(diǎn)開始，遞歸地計(jì)算每個(gè)節(jié)點(diǎn)的精確位置和尺寸，這個(gè)過程也被稱為“回流”或“重排”，是后續(xù)繪制的基礎(chǔ)。
布局過程的優(yōu)化：現(xiàn)代瀏覽器會(huì)盡量優(yōu)化布局過程，例如通過流式布局的方式減少重復(fù)計(jì)算，確保高效地完成布局任務(wù)。

繪制（Paint）

像素級繪制：繪制是一個(gè)將布局計(jì)算后的各元素繪制成像素點(diǎn)的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內(nèi)容，瀏覽器會(huì)將頁面分成若干層次（Layer），對每一層分別進(jìn)行繪制，這樣只需更新變化的部分。

因此，我們開發(fā)中要注意以下幾點(diǎn)：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預(yù)處理器：合理組織CSS文件的結(jié)構(gòu)和覆蓋規(guī)則，利用CSS預(yù)處理器進(jìn)行模塊化管理。
利用瀏覽器緩存機(jī)制：通過設(shè)置合理的緩存策略，減少重復(fù)加載相同資源，提升二次訪問的體驗(yàn)。
優(yōu)化圖片和多媒體資源：適當(dāng)壓縮圖片和優(yōu)化多媒體資源的加載，減少網(wǎng)絡(luò)傳輸時(shí)間和渲染負(fù)擔(dān)。

綜上所述，瀏覽器解析HTML文件是一個(gè)復(fù)雜而高度優(yōu)化的過程，涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個(gè)步驟。開發(fā)者需要深入理解這些步驟，以優(yōu)化網(wǎng)頁性能和用戶體驗(yàn)。通過合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁面加載速度和運(yùn)行效率。

在線咨詢

上一篇：技術(shù)貼：一篇文章看懂鏈接（超鏈接）設(shè)計(jì)
下一篇：HTML <legend> 標(biāo)簽

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html常用代碼大全

您的項(xiàng)目需求