圖解瀏覽器的工作原理（史上最全）

能每一個前端工程師都想要理解瀏覽器的工作原理。

我們希望知道從在瀏覽器地址欄中輸入 url 到頁面展現的短短幾秒內瀏覽器究竟做了什么；

我們希望了解平時常常聽說的各種代碼優化方案是究竟為什么能起到優化的作用；

我們希望更細化的了解瀏覽器的渲染流程。

瀏覽器的多進程架構

一個好的程序常常被劃分為幾個相互獨立又彼此配合的模塊，瀏覽器也是如此，以 Chrome 為例，它由多個進程組成，每個進程都有自己核心的職責，它們相互配合完成瀏覽器的整體功能，每個進程中又包含多個線程，一個進程內的多個線程也會協同工作，配合完成所在進程的職責。

對一些前端開發同學來說，進程和線程的概念可能會有些模糊，為了更好的理解瀏覽器的多進程架構，這里我們簡單討論一下進程和線程。

進程（process）和線程（thread）

進程就像是一個有邊界的生產廠間，而線程就像是廠間內的一個個員工，可以自己做自己的事情，也可以相互配合做同一件事情。

當我們啟動一個應用，計算機會創建一個進程，操作系統會為進程分配一部分內存，應用的所有狀態都會保存在這塊內存中，應用也許還會創建多個線程來輔助工作，這些線程可以共享這部分內存中的數據。如果應用關閉，進程會被終結，操作系統會釋放相關內存。更生動的示意圖如下：

一個進程還可以要求操作系統生成另一個進程來執行不同的任務，系統會為新的進程分配獨立的內存，兩個進程之間可以使用 IPC （Inter Process Communication）進行通信。很多應用都會采用這樣的設計，如果一個工作進程反應遲鈍，重啟這個進程不會影響應用其它進程的工作。

如果對進程及線程的理解還存在疑惑，可以參考下述文章：

http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

瀏覽器的架構

有了上面的知識做鋪墊，我們可以更合理的討論瀏覽器的架構了，其實如果要開發一個瀏覽器，它可以是單進程多線程的應用，也可以是使用 IPC 通信的多進程應用。

不同瀏覽器的架構模型

不同瀏覽器采用了不同的架構模式，這里并不存在標準，本文以 Chrome 為例進行說明：

Chrome 采用多進程架構，其頂層存在一個 Browser process 用以協調瀏覽器的其它進程。

Chrome 的不同進程

具體說來，Chrome 的主要進程及其職責如下：

Browser Process：

負責包括地址欄，書簽欄，前進后退按鈕等部分的工作；
負責處理瀏覽器的一些不可見的底層操作，比如網絡請求和文件訪問；

Renderer Process：

負責一個 tab 內關于網頁呈現的所有事情

Plugin Process：

負責控制一個網頁用到的所有插件，如 flash
GPU Process
負責處理 GPU 相關的任務

不同進程負責的瀏覽器區域示意圖

Chrome 還為我們提供了「任務管理器」，供我們方便的查看當前瀏覽器中運行的所有進程及每個進程占用的系統資源，右鍵單擊還可以查看更多類別信息。

通過「頁面右上角的三個點點點 — 更多工具 — 任務管理器」即可打開相關面板。

Chrome 多進程架構的優缺點

優點

某一渲染進程出問題不會影響其他進程

更為安全，在系統層面上限定了不同進程的權限

缺點

由于不同進程間的內存不共享，不同進程的內存常常需要包含相同的內容。

為了節省內存，Chrome 限制了最多的進程數，最大進程數量由設備的內存和 CPU 能力決定，當達到這一限制時，新打開的 Tab 會共用之前同一個站點的渲染進程。

測試了一下在 Chrome 中打開不斷打開知乎首頁，在 Mac i5 8g 上可以啟動四十多個渲染進程，之后新打開 tab 會合并到已有的渲染進程中。

Chrome 把瀏覽器不同程序的功能看做服務，這些服務可以方便的分割為不同的進程或者合并為一個進程。以 Broswer Process 為例，如果 Chrome 運行在強大的硬件上，它會分割不同的服務到不同的進程，這樣 Chrome 整體的運行會更加穩定，但是如果 Chrome 運行在資源貧瘠的設備上，這些服務又會合并到同一個進程中運行，這樣可以節省內存，示意圖如下。

iframe 的渲染 – Site Isolation

在上面的進程圖中我們還可以看到一些進程下還存在著 Subframe，這就是 Site Isolation 機制作用的結果。

Site Isolation 機制從 Chrome 67 開始默認啟用。這種機制允許在同一個 Tab 下的跨站 iframe 使用單獨的進程來渲染，這樣會更為安全。

iframe 會采用不同的渲染進程

Site Isolation 被大家看做里程碑式的功能，其成功實現是多年工程努力的結果。Site Isolation 不是簡單的疊加多個進程。這種機制在底層改變了 iframe 之間通信的方法，Chrome 的其它功能都需要做對應的調整，比如說 devtools 需要相應的支持，甚至 Ctrl + F 也需要支持。關于 Site Isolation 的更多內容可參考下述鏈接：

https://developers.google.com/web/updates/2018/07/site-isolation

介紹完了瀏覽器的基本架構模式，接下來我們看看一個常見的導航過程對瀏覽器來說究竟發生了什么。

導航過程發生了什么

也許大多數人使用 Chrome 最多的場景就是在地址欄輸入關鍵字進行搜索或者輸入地址導航到某個網站，我們來看看瀏覽器是怎么看待這個過程的。

我們知道瀏覽器 Tab 外的工作主要由 Browser Process 掌控，Browser Process 又對這些工作進一步劃分，使用不同線程進行處理：

UI thread ：控制瀏覽器上的按鈕及輸入框；
network thread: 處理網絡請求，從網上獲取數據；
storage thread: 控制文件等的訪問；

瀏覽器主進程中的不同線程

回到我們的問題，當我們在瀏覽器地址欄中輸入文字，并點擊回車獲得頁面內容的過程在瀏覽器看來可以分為以下幾步：

1. 處理輸入

UI thread 需要判斷用戶輸入的是 URL 還是 query；

2. 開始導航

當用戶點擊回車鍵，UI thread 通知 network thread 獲取網頁內容，并控制 tab 上的 spinner 展現，表示正在加載中。

network thread 會執行 DNS 查詢，隨后為請求建立 TLS 連接。

UI thread 通知 Network thread 加載相關信息

如果 network thread 接收到了重定向請求頭如 301，network thread 會通知 UI thread 服務器要求重定向，之后，另外一個 URL 請求會被觸發。

3. 讀取響應

當請求響應返回的時候，network thread 會依據 Content-Type 及 MIME Type sniffing 判斷響應內容的格式。

判斷響應內容的格式

如果響應內容的格式是 HTML ，下一步將會把這些數據傳遞給 renderer process，如果是 zip 文件或者其它文件，會把相關數據傳輸給下載管理器。

Safe Browsing 檢查也會在此時觸發，如果域名或者請求內容匹配到已知的惡意站點，network thread 會展示一個警告頁。此外 CORB 檢測也會觸發確保敏感數據不會被傳遞給渲染進程。

4. 查找渲染進程

當上述所有檢查完成，network thread 確信瀏覽器可以導航到請求網頁，network thread 會通知 UI thread 數據已經準備好，UI thread 會查找到一個 renderer process 進行網頁的渲染。

收到 Network thread 返回的數據后，UI thread 查找相關的渲染進程

由于網絡請求獲取響應需要時間，這里其實還存在著一個加速方案。當 UI thread 發送 URL 請求給 network thread 時，瀏覽器其實已經知道了將要導航到那個站點。UI thread 會并行的預先查找和啟動一個渲染進程，如果一切正常，當 network thread 接收到數據時，渲染進程已經準備就緒了，但是如果遇到重定向，準備好的渲染進程也許就不可用了，這時候就需要重啟一個新的渲染進程。

5. 確認導航

進過了上述過程，數據以及渲染進程都可用了， Browser Process 會給 renderer process 發送 IPC 消息來確認導航，一旦 Browser Process 收到 renderer process 的渲染確認消息，導航過程結束，頁面加載過程開始。

此時，地址欄會更新，展示出新頁面的網頁信息。history tab 會更新，可通過返回鍵返回導航來的頁面，為了讓關閉 tab 或者窗口后便于恢復，這些信息會存放在硬盤中。

6. 額外的步驟

一旦導航被確認，renderer process 會使用相關的資源渲染頁面，下文中我們將重點介紹渲染流程。當 renderer process 渲染結束（渲染結束意味著該頁面內的所有的頁面，包括所有 iframe 都觸發了 onload 時），會發送 IPC 信號到 Browser process， UI thread 會停止展示 tab 中的 spinner。

Renderer Process 發送 IPC 消息通知 browser process 頁面已經加載完成。

當然上面的流程只是網頁首幀渲染完成，在此之后，客戶端依舊可下載額外的資源渲染出新的視圖。

在這里我們可以明確一點，所有的 JS 代碼其實都由 renderer Process 控制的，所以在你瀏覽網頁內容的過程大部分時候不會涉及到其它的進程。不過也許你也曾經監聽過 beforeunload 事件，這個事件再次涉及到 Browser Process 和 renderer Process 的交互，當當前頁面關閉時（關閉 Tab ，刷新等等），Browser Process 需要通知 renderer Process 進行相關的檢查，對相關事件進行處理。

瀏覽器進程發送 IPC 消息給渲染進程，通知要離開當前網站了

如果導航由 renderer process 觸發（比如在用戶點擊某鏈接，或者 JS 執行 window.location="http://newsite.com" ） renderer process 會首先檢查是否有 beforeunload 事件處理器，導航請求由 renderer process 傳遞給 Browser process。

如果導航到新的網站，會啟用一個新的 render process 來處理新頁面的渲染，老的進程會留下來處理類似 unload 等事件。

關于頁面的生命周期，更多內容可參考 Page Lifecycle API 。

瀏覽器進程發送 IPC 消息到新的渲染進程通知渲染新的頁面，同時通知舊的渲染進程卸載。

除了上述流程，有些頁面還擁有 Service Worker （服務工作線程），Service Worker 讓開發者對本地緩存及判斷何時從網絡上獲取信息有了更多的控制權，如果 Service Worker 被設置為從本地 cache 中加載數據，那么就沒有必要從網上獲取更多數據了。

值得注意的是 service worker 也是運行在渲染進程中的 JS 代碼，因此對于擁有 Service Worker 的頁面，上述流程有些許的不同。

當有 Service Worker 被注冊時，其作用域會被保存，當有導航時，network thread 會在注冊過的 Service Worker 的作用域中檢查相關域名，如果存在對應的 Service worker，UI thread 會找到一個 renderer process 來處理相關代碼，Service Worker 可能會從 cache 中加載數據，從而終止對網絡的請求，也可能從網上請求新的數據。

Service Worker 依據具體情形做處理。

關于 Service Worker 的更多內容可參考：

https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle

如果 Service Worker 最終決定通過網上獲取數據，Browser 進程和 renderer 進程的交互其實會延后數據的請求時間。Navigation Preload 是一種與 Service Worker 并行的加速加載資源的機制，服務端通過請求頭可以識別這類請求，而做出相應的處理。

更多內容可參考：

https://developers.google.com/web/updates/2017/02/navigation-preload

渲染進程是如何工作的？

渲染進程幾乎負責 Tab 內的所有事情，渲染進程的核心目的在于轉換 HTML CSS JS 為用戶可交互的 web 頁面。渲染進程中主要包含以下線程：

渲染進程包含的線程

1. 主線程 Main thread

2. 工作線程 Worker thread

3. 排版線程 Compositor thread

4. 光柵線程 Raster thread

后文我們將逐步介紹不同線程的職責，在此之前我們先看看渲染的流程。

1. 構建 DOM

當渲染進程接收到導航的確認信息，開始接受 HTML 數據時，主線程會解析文本字符串為 DOM。

渲染 html 為 DOM 的方法由 HTML Standard 定義。

2. 加載次級的資源

網頁中常常包含諸如圖片，CSS，JS 等額外的資源，這些資源需要從網絡上或者 cache 中獲取。主進程可以在構建 DOM 的過程中會逐一請求它們，為了加速 preload scanner 會同時運行，如果在 html 中存在 <img><link> 等標簽，preload scanner 會把這些請求傳遞給 Browser process 中的 network thread 進行相關資源的下載。

3.JS 的下載與執行

當遇到 <script> 標簽時，渲染進程會停止解析 HTML，而去加載，解析和執行 JS 代碼，停止解析 html 的原因在于 JS 可能會改變 DOM 的結構（使用諸如 documwnt.write()等 API）。

不過開發者其實也有多種方式來告知瀏覽器應對如何應對某個資源，比如說如果在<script> 標簽上添加了 async 或 defer 等屬性，瀏覽器會異步的加載和執行 JS 代碼，而不會阻塞渲染。更多的方法可參考 Resource Prioritization – Getting the Browser to Help You。

4. 樣式計算

僅僅渲染 DOM 還不足以獲知頁面的具體樣式，主進程還會基于 CSS 選擇器解析 CSS 獲取每一個節點的最終的計算樣式值。即使不提供任何 CSS，瀏覽器對每個元素也會有一個默認的樣式。

渲染進程主線程計算每一個元素節點的最終樣式值

5. 獲取布局

想要渲染一個完整的頁面，除了獲知每個節點的具體樣式，還需要獲知每一個節點在頁面上的位置，布局其實是找到所有元素的幾何關系的過程。其具體過程如下：

通過遍歷 DOM 及相關元素的計算樣式，主線程會構建出包含每個元素的坐標信息及盒子大小的布局樹。布局樹和 DOM 樹類似，但是其中只包含頁面可見的元素，如果一個元素設置了 display:none ，這個元素不會出現在布局樹上，偽元素雖然在 DOM 樹上不可見，但是在布局樹上是可見的。

6. 繪制各元素

即使知道了不同元素的位置及樣式信息，我們還需要知道不同元素的繪制先后順序才能正確繪制出整個頁面。在繪制階段，主線程會遍歷布局樹以創建繪制記錄。繪制記錄可以看做是記錄各元素繪制先后順序的筆記。

主線程依據布局樹構建繪制記錄

7. 合成幀

熟悉 PS 等繪圖軟件的童鞋肯定對圖層這一概念不陌生，現代 Chrome 其實利用了這一概念來組合不同的層。

復合是一種分割頁面為不同的層，并單獨柵格化，隨后組合為幀的技術。不同層的組合由 compositor 線程（合成器線程）完成。

主線程會遍歷布局樹來創建層樹（layer tree），添加了 will-change CSS 屬性的元素，會被看做單獨的一層。

主線程遍歷布局樹生成層樹

你可能會想給每一個元素都添加上 will-change，不過組合過多的層也許會比在每一幀都柵格化頁面中的某些小部分更慢。為了更合理的使用層，可參考堅持僅合成器的屬性和管理層計數。

一旦層樹被創建，渲染順序被確定，主線程會把這些信息通知給合成器線程，合成器線程會柵格化每一層。有的層的可以達到整個頁面的大小，因此，合成器線程將它們分成多個磁貼，并將每個磁貼發送到柵格線程，柵格線程會柵格化每一個磁貼并存儲在 GPU 顯存中。

柵格線程會柵格化每一個磁貼并存儲在 GPU 顯存中

一旦磁貼被光柵化，合成器線程會收集稱為繪制四邊形的磁貼信息以創建合成幀。

合成幀隨后會通過 IPC 消息傳遞給瀏覽器進程，由于瀏覽器的 UI 改變或者其它拓展的渲染進程也可以添加合成幀，這些合成幀會被傳遞給 GPU 用以展示在屏幕上，如果滾動發生，合成器線程會創建另一個合成幀發送給 GPU。

合成器線程會發送合成幀給 GPU 渲染

合成器的優點在于，其工作無關主線程，合成器線程不需要等待樣式計算或者 JS 執行，這就是為什么合成器相關的動畫最流暢，如果某個動畫涉及到布局或者繪制的調整，就會涉及到主線程的重新計算，自然會慢很多。

瀏覽器對事件的處理

瀏覽器通過對不同事件的處理來滿足各種交互需求，這一部分我們一起看看從瀏覽器的視角，事件是什么，在此我們先主要考慮鼠標事件。

在瀏覽器的看來，用戶的所有手勢都是輸入，鼠標滾動，懸置，點擊等等都是。

當用戶在屏幕上觸發諸如 touch 等手勢時，首先收到手勢信息的是 Browser process，不過 Browser process 只會感知到在哪里發生了手勢，對 tab 內內容的處理是還是由渲染進程控制的。

事件發生時，瀏覽器進程會發送事件類型及相應的坐標給渲染進程，渲染進程隨后找到事件對象并執行所有綁定在其上的相關事件處理函數。

事件從瀏覽器進程傳送給渲染進程

前文中，我們提到過合成器可以獨立于主線程之外通過合成柵格化層平滑的處理滾動。如果頁面中沒有綁定相關事件，組合器線程可以獨立于主線程創建組合幀。如果頁面綁定了相關事件處理器，主線程就不得不出來工作了。這時候合成器線程會怎么處理呢？

這里涉及到一個專業名詞「理解非快速滾動區域（non-fast scrollable region）」由于執行 JS 是主線程的工作，當頁面合成時，合成器線程會標記頁面中綁定有事件處理器的區域為 non-fast scrollable region ，如果存在這個標注，合成器線程會把發生在此處的事件發送給主線程，如果事件不是發生在這些區域，合成器線程則會直接合成新的幀而不用等到主線程的響應。

涉及 non-fast scrollable region 的事件，合成器線程會通知主線程進行相關處理。

web 開發中常用的事件處理模式是事件委托，基于事件冒泡，我們常常在最頂層綁定事件：

復制代碼

document.body.addEventListener('touchstart', 
event=> {
 if (event.target===area) {
 event.preventDefault();
 }
}
);

上述做法很常見，但是如果從瀏覽器的角度看，整個頁面都成了 non-fast scrollable region 了。

這意味著即使操作的是頁面無綁定事件處理器的區域，每次輸入時，合成器線程也需要和主線程通信并等待反饋，流暢的合成器獨立處理合成幀的模式就失效了。

由于事件綁定在最頂部，整個頁面都成為了 non-fast scrollable region。

為了防止這種情況，我們可以為事件處理器傳遞 passive: true 做為參數，這樣寫就能讓瀏覽器即監聽相關事件，又讓組合器線程在等等主線程響應前構建新的組合幀。

復制代碼

document.body.addEventListener('touchstart', 
event=> {
 if (event.target===area) {
 event.preventDefault()
 }
 }, {passive: true}
);

不過上述寫法可能又會帶來另外一個問題，假設某個區域你只想要水平滾動，使用 passive: true 可以實現平滑滾動，但是垂直方向的滾動可能會先于event.preventDefault()發生，此時可以通過 event.cancelable 來防止這種情況。

復制代碼

document.body.addEventListener('pointermove', event=> {
 if (event.cancelable) {
 event.preventDefault(); // block the native scroll
 /*
 * do what you want the application to do here
 */
 } 
}, {passive: true});

也可以使用 css 屬性 touch-action 來完全消除事件處理器的影響，如：

復制代碼

#area { 
 touch-action: pan-x; 
}

查找到事件對象

當組合器線程發送輸入事件給主線程時，主線程首先會進行命中測試（hit test）來查找對應的事件目標，命中測試會基于渲染過程中生成的繪制記錄（ paint records ）查找事件發生坐標下存在的元素。

主線程依據繪制記錄查找事件相關元素。

事件的優化

一般我們屏幕的刷新速率為 60fps，但是某些事件的觸發量會不止這個值，出于優化的目的，Chrome 會合并連續的事件 (如 wheel, mousewheel, mousemove, pointermove, touchmove )，并延遲到下一幀渲染時候執行。

而如 keydown, keyup, mouseup, mousedown, touchstart, 和 touchend 等非連續性事件則會立即被觸發。

Chrome 會合并連續事件到下一幀觸發。

合并事件雖然能提示性能，但是如果你的應用是繪畫等，則很難繪制一條平滑的曲線了，此時可以使用 getCoalescedEvents API 來獲取組合的事件。示例代碼如下：

復制代碼

window.addEventListener('pointermove', event=> {
 const events=event.getCoalescedEvents();
 for (let event of events) {
 const x=event.pageX;
 const y=event.pageY;
 // draw a line using x and y coordinates.
 }
});

花了好久來整理上面的內容，整理的過程收獲還挺大的，也希望這篇筆記能對你有所啟發，如果有任何疑問，歡迎一起來討論。

本文經作者授權轉載，原文鏈接為：

https://zhuanlan.zhihu.com/p/47407398

參考鏈接

https://developers.google.com/web/updates/2018/09/inside-browser-part1
https://developers.google.com/web/updates/2018/09/inside-browser-part2
https://developers.google.com/web/updates/2018/09/inside-browser-part3
https://developers.google.com/web/updates/2018/09/inside-browser-part4
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Layered_representation

HTML基本結構：
<form class="layui-form" action="" id="feedBackForm">
 <div class="layui-form-item">
 <!--表單內容-->
 </div>
 <!--圖片上傳-->
 <div class="layui-upload feedback-padding">
 <button type="button" class="layui-btn" id="selectImg">選擇圖片</button>
 <input type="text" class="layui-hide" name="">
 <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
 預覽圖：
 <div id="previewImg" class="layui-clear feedback-overflow">
 </div>
 </blockquote>
 </div>
 <div class="layui-form-item">
 <div class="feedback-block">
 <button id="submitBtn" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
 </div>
 </div>
 </form>

JavaScript基本內容：
1、多圖片上傳、預覽
 //多圖片上傳
 uploadList=upload.render({
 elem: '#selectImg'
 ,url: "/add.do"
 ,accept: 'images'
 ,acceptMime: 'image/*'
 ,method: 'post'
 ,multiple: true
 ,auto: false
 ,choose: function(obj){
 files=obj.pushFile(); //將每次選擇的文件追加到文件隊列
 //圖像預覽，如果是多文件，會逐個添加。(不支持ie8/9)
 obj.preview(function(index, file, result){
 var imgBox=document.createElement("div");//預覽圖、刪除預覽圖按鈕容器
 var imgDelete=document.createElement("div");//刪除預覽圖按鈕
 var imgobj=new Image(); //創建新img對象
 imgBox.style.float='left';
 imgBox.style.position='relative';
 imgDelete.setAttribute('class',"feedback-delete-btn layui-icon layui-icon-close-fill");
 imgDelete.setAttribute ('title','刪除');
 imgobj.src=result; //指定數據源
 imgobj['layer-src']=result;
 imgobj.alt=file.name;
 imgobj.className='layui-upload-img';
 imgobj['layer-index']=index;
 imgBox.appendChild(imgobj);
 imgBox.appendChild(imgDelete);
 imgDelete.onclick=function () { // 為預覽圖的刪除按鈕綁定刪除事件
 delete files[index]; //刪除對應的文件
 document.getElementById("previewImg").removeChild(imgBox);//從預覽區域移除
 uploadList.config.elem.next()[0].value=''; //清空 input file 值，以免刪除后出現同名文件不可選
 }
 document.getElementById("previewImg").appendChild(imgBox); //添加到預覽區域
 //photos 圖片層
 layer.photos({//此處目前存在bug 導致單擊后無法在彈層中打開預覽 下面會講解如何處理
 photos: '#previewImg'
 ,anim: 0
 });
 });
 }
 });

2、提交
 //監聽提交
 form.on('submit(demo1)', function(data){
 var myForm=document.getElementById("feedBackForm");
 var formData=new FormData(myForm);
 //循環 files(第一步choose回調中儲存的對象) 逐條插入到formData
 for (var i in files) {
 formData.append("files",files[i]);//此處的files為上傳接口參數名
 }
 $.ajax({
 url: "/add.do",
 type: "POST",
 data: formData,
 async: false,
 contentType: false,
 processData: false,
 error: function () {
 layer.msg('網絡超時',{icon:2});
 },
 success: function (data) {
 layer.msg('成功',{icon:1});
 }
 })
 return false;
 });

3、步驟一中 layer.photos 重復調用，導致彈層預覽圖無法正常顯示處理：
修改layer.js源碼 ，點擊事件綁定之前，先用off（）進行解綁，避免重復綁定，如下：
 loop || parent.off('click').on('click', options.img, function(){
 var othis=$(this), index=othis.attr('layer-index');
 layer.photos($.extend(options, {
 photos: {
 start: index,
 data: data,
 tab: options.tab
 },
 full: options.full
 }), true);
 pushData();
 })

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

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

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

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

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

消除連接的下劃線在新窗口打開連接：

<a href="相關地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>

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

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

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

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

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

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

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

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

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

13)貼音樂：<embed src=音樂地址 width=300 height=45 type=audio/mpeg 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)固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body

bgproperties=fixed>

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

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

23)貼網頁：<iframe src="相關地址" width="寬度" height="高度"></iframe>

/----------------------------------------HTML特效代碼--------------------------------/

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

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

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

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

　參數解釋：

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

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

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

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

　 width=400 窗口寬度；

　 height=300 窗口高度；

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

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

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

　 menubar，scrollbars 表示菜單欄和滾動欄。

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

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

　 status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

　 </SCRIPT> js腳本結束

4。簡單的頁面加密

<!--

　 function loopy(){

var sWord="";

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

alert("登陸成功！");

　 }

　 loopy()

　 //-->

　 </script>

5。拉動頁面時背景圖不動

　 <style>

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

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

　 </style>

6。讓瀏覽器在保存頁面時保存失敗

7。隨機替換圖片

　 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。窗口定時關閉

　先將如下代碼網頁文件的區：

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

　 </script>

　然后再在<body>標內加入如：<body onload="closeit()">

9。網頁自動關閉

　 <html>

　 <head>

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

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

　 </object>

　 </head>

　這個窗口會在10秒過后自動關閉,而且不會出現提示.

　 </body>

　 </html>

10。網頁自動刷新

　在head部記入

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

11。網頁自動轉頁

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

　在Layer中再插Iframe 或 Object 設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%>

　 </div>

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

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

　 </div>

13。返回上一頁

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

14。關閉窗口

15。關于iframe的透明背景

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

　 allowTransparency="true"

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

16. oncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵

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

17. <body onselectstart="return false"> 取消選取、防止復制

18.onpaste="return false" 不準粘貼

19.oncopy="return false;" oncut="return false;" 防止復制

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

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

22. <input style="ime-mode:disabled"> 關閉輸入法

23. 永遠都會帶著框架

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

// --></script>

24. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

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

// --></SCRIPT>

25. 網頁將不能被另存為

26. 查看網頁源代碼

27.刪除時確認

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

function look(){

if(event.shiftKey)

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

}

document.onkeydown=look;

</script>

29. 網頁不會被緩存

或者<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.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

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

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

</form>

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

window.opener.location.reload()

35.如何設定打開頁面的大小

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

36.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<STYLE>

body

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

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

</STYLE>

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

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

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

38. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

39. 怎么判斷是否是字符

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

else alert("全是字符");

40.TEXTAREA自適應文字行數的多少

</textarea>

41. 日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a=new Date(dd)

a=a.valueOf()

a=a - dadd * 24 * 60 * 60 * 1000

a=new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

</script>

42. 選擇了哪一個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.腳本永不出錯

</SCRIPT>

44.ENTER鍵可以讓光標移到下一個輸入框

45. 檢測某個網站的鏈接速度：

把如下代碼加入<body>區域中:

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="鏈接超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"} b++ }

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 nerror=auto("http://"+autourl+"")>")}

run()</script>

46. 各種樣式的光標

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

47、禁止鼠標右鍵，把Demo的圖片全都設為表格的背景，表格的大小與圖片的大小一樣。這樣做看起來是一樣的，主要是防止鼠標經過圖片時會出現另存的按鈕。禁止鼠標右鍵的代碼很簡單：

function click() { if (event.button==2)

{alert(呵呵，不好意思，你甭想使用右鍵下載圖片：）); } } document.onmousedown=click

</script>

48、在網頁的Head部分加入如下代碼，這段代碼的主要功能是屏蔽PrintScreen鍵，不斷清空剪貼版，防止圖片被用文件——另存為菜單另存。

<!--

function testclip(){

try {

if(clipboardData.getData("Text")||clipboardData.getData("HTML")||clipboardData.getData("URL"))

{

null;

}

catch(e){

clipboardData.setData("Text","")

}

setTimeout("testclip()",500)

}

testclip();

//-->

</script>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

1. 將徹底屏蔽鼠標右鍵

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

2. <body> 取消選取、防止復制

3. 不準粘貼

4. 防止復制

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址欄前換成自己的圖標

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夾中顯示出你的圖標

7. <input style="ime-mode:-Disabled"> 關閉輸入法

8. 永遠都會帶著框架

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

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--

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

// --></SCRIPT>

10. 網頁將不能被另存為

11. <input type=button value=查看網頁源代碼

onclick="window.location=`view-source:`+ http://www.51js.com/`";>

12.刪除時確認

<a href=`javascript：if(confirm("確實要刪除嗎?"location="boos.asp?&areyou=刪除&page=1"`>刪

除</a>

13. 取得控件的絕對位置

//javascript

function getIE(E){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a=a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光標是停在文本框文字的最后

function cc()

{

var e=event.srcElement;

var r=e.createTextRange();

r.moveStart(`character`,e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判斷上一頁的來源

javascript：

document.referrer

16. 最小化、最大化、關閉窗口

本例適用于IE

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

function look(){

if(event.shiftKey)

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

}

document.onkeydown=look;

</script>

18. 網頁不會被緩存

或者<META HTTP-EQUIV="expires" CONTENT="0">

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

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的區別？

<div>(division)用來定義大段的頁面元素，會產生轉行

<span>用來定義同一行內的元素，跟<div>的唯一區別是不產生轉行

<layer>是ns的標記，ie不支持，相當于<div>

21.讓彈出窗口總是在最上面:

<body>

22.不要滾動條?

讓豎條沒有:

</body>

讓橫條沒有:

</body>

兩個都去掉？更簡單了

</body>

23.怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

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

</form>

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

window.opener.location.reload()

26.如何設定打開頁面的大小

<body>

打開頁面的位置<body>

27.在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動

<style>

body

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

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

</style>

28. 檢查一段字符串是否全由數字組成

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

alert(checkNum("1232142141"

alert(checkNum("123214214a1"

// --></script>

29. 獲得一個窗口的大小

document.body.clientWidth; document.body.clientHeight

30. 怎么判斷是否是字符

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

else alert("全是字符";

31.TEXTAREA自適應文字行數的多少

</textarea>

32. 日期減去天數等于第二個日期

function cc(dd,dadd)

{

//可以加上錯誤處理

var a=new Date(dd)

a=a.valueOf()

a=a - dadd * 24 * 60 * 60 * 1000

a=new Date(A)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日"

}

cc("12/23/2002",2)

</script>

33. 選擇了哪一個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>

34.腳本永不出錯

<!-- Hide

function killErrors() {

return true;

}

window.onerror=killErrors;

// -->

</SCRIPT>

35.ENTER鍵可以讓光標移到下一個輸入框

<input>

36. 檢測某個網站的鏈接速度：

把如下代碼加入<body>區域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="http://www.njcatv.net/";

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

autourl[3]="http://www.sina.com.cn/";

autourl[4]="http://www.nuaa.edu.cn/";

autourl[5]="http://www.cctv.com/";

function butt(){

document.write("<form name=autof>"

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=測試中……>=》<input type=text

name=url"+i+" size=40>=》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>"

document.write("<input type=submit value=刷新></form>"

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="鏈接超時"}

else

{document.forms[0]["txt"+b].value="時間"+tim/10+"秒"}

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img

src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto(http://";+autourl+"`)>"}

run()</script>

37. 各種樣式的光標

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

38.頁面進入和退出的特效

進入頁面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出頁面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

這個是頁面被載入和調出時的一些特效。Duration表示特效的持續時間，以秒為單位。Transition表示使

用哪種特效，取值為1-23:

0 矩形縮小

1 矩形擴大

2 圓形縮小

3 圓形擴大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 豎百葉窗

9 橫百葉窗

10 錯位橫百葉窗

11 錯位豎百葉窗

12 點擴散

13 左右到中間刷新

14 中間到左右刷新

15 中間到上下

16 上下到中間

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 橫條

22 豎條

23 以上22種隨機選擇一種

39.在規定時間內跳轉

40.網頁是否被檢索

其中屬性值有以下一些:

屬性值為"all": 文件將被檢索，且頁上鏈接可被查詢；

屬性值為"none": 文件不被檢索，而且不查詢頁上的鏈接；

屬性值為"index": 文件將被檢索；

屬性值為"follow": 查詢頁上的鏈接；

屬性值為"noindex": 文件不檢索，但可被查詢鏈接；

屬性值為"nofollow": 文件不被檢索，但可查詢頁上的鏈接。

41.變換網頁的鼠標光標

42.怎樣實現在任務欄顯示小圖標的效果？ (要使用絕對地址)

有些站點，訪問時會在地址欄地址前顯出小圖標，添加到收藏夾后也在收藏欄中顯示圖標，

這樣很好的與其它站點有了區別。

要達到這個效果，先需做出這個圖標文件，圖像為16*16像素，不要超過16色。文件格式為ico，然后上傳至你的網站。

然后，在需要的頁面中，加上以下html語句到文件的<head>和</head>之間（假設以上ico文件的地址http://happyisland.126.com/icon.ico）。

如果訪問者的瀏覽器是IE5.0，就不需加任何代碼，只要將圖標文件上傳到網站的根目錄下即可。

1,META標簽里的代碼是什么意思？

<META>是放于<HEAD>與</HEAD>之間的標記.以下是我總結它在網頁中最常見的幾種。

該網頁的關鍵字，作用于搜索引擎的登錄，事實上它在現在的網站中并沒什么用。

設定這是 HTML 文件及其編碼語系，簡體中文網頁使用charset=gb2312，繁體中文使用charset=big5，或者不設編碼也可，純英文網頁建議使用 iso-8859-1。

這只表示該網頁由什么編輯器寫的。

這行較為實用，能于預定秒數內自動轉到指定網址。原代碼中 10 表示 10秒。

2，怎么改變滾動條的顏色，只有ie5.5版本以上才能支持。

這是使用CSS語言，在次說明一下，它和我的瀏覽器版本有一定的關系。

scrollbar-arrow-color：上下按鈕上三角箭頭的顏色。

scrollbar-base-color：滾動條的基本顏色。

scrollbar-dark-shadow-color：立體滾動條強陰影的顏色

scrollbar-face-color：立體滾動條凸出部分的顏色

scrollbar-highlight-color：滾動條空白部分的顏色

scrollbar-shadow-color立體滾動條陰影的顏色。

scrollbar-track-color:#99CC33;

scrollbar-3dlight-color:#A8CBF1;

代碼如下：

<style>

<!--

BODY {

scrollbar-face-color:#99CC33;//(立體滾動條凸出部分的顏色)

scrollbar-highlight-color:#A8CBF1;//(滾動條空白部分的顏色)

scrollbar-shadow-color:#A8CBF1;//(立體滾動條陰影的顏色)

scrollbar-arrow-color:#FF9966;//(上下按鈕上三角箭頭的顏色)

scrollbar-base-color:#A8CBF1; //(滾動條的基本顏色)

scrollbar-darkshadow-color:#A8CBF1; //(立體滾動條強陰影的顏色)

scrollbar-track-color:#99CC33;

scrollbar-3dlight-color:#A8CBF1;

}

-->

</style>

//以下是其它的網頁的代碼

在這我補充幾點：

1.讓瀏覽器窗口永遠都不出現滾動條。

2，沒有水平滾動條

3，沒有垂直滾動條

3,如何給圖片抖動怎做的.

<!--

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.getElementById)||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>

4，在DW如何給水平線加顏色。

在DW中沒有此項設置，你只能在HTML中加入代碼：<hr color=red noshade>按F12的預覽在能看到。由于在NC中不支持<hr>的COLOR屬性，所以在DW中沒有此項設置。

5，如何在網頁中實現flash的全屏播放？

只要在調用swf文件的HTML中將WIDTH和HEIGHT的參數設為100％即可，當然也可以在Flash導出HTML文件的設置中進行設置，方法是：打開File菜單；選Publish Settings彈出導出設置對話框；在HTML標簽下的Dimensions選項,下拉后選中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。

6,為什么我在DW中插入的Flash動畫缺看不找！

如果你沒有正確地安裝Dreamweaver和Flash，那么在你預覽的時候，Dreamweaver會提示你缺少播放的插件，請你按裝InstallAXFlash.exe 并從新啟動計算機。現在IE6已經捆綁這個程序。

7，在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";（退出關閉窗口）

8，Flash中什么是隱形按鈕。

利用button中的hit幀來制作只有感應區域而完全透明的按鈕。

9，如何給Flash動畫做鏈接。

Dreamweaver是不能給Flash制作鏈接的，只能在Flash中用geturl()加鏈接，然后再插入Dreamweaver中。

10，DW中的層的技巧。

層是可以嵌套的，我個人給大家一個技巧，在層面板中按住CTRL再拖放層到你想去成為其子層的地方就行了，我認為這是最簡單直觀的方法了。

11，如何改變鼠標的形狀？

在Dreamweaver4中CSS樣式面板：

按CTR+SHIFT+E--出現樣式表對話框,點擊NEW，出現編輯對話框,在左邊最后一項extensions-cursor 選擇你要改的指針形式就可以了，然后把你要想改變的地方運用樣式表，如果整頁都有在<body bgcolor="#003063" text="#ffffff" id=all>中加入就行了。

這里選擇（文本）作為對象，還可以自己改為其他的，如link等。

x可以等于=hand（手形）、crosshair（十字）、text（文本光標）、wait（顧名思義啦）、default（默認效果）、help（問號）、e-size（向右箭頭）、ne-resize（向右上的箭頭）、nw-resize（向左上的箭頭）、w-resize（向左的箭頭）、sw-resize（左下箭頭）、s-resize（向下箭頭）、se-resize（向右下箭頭）、auto（系統自動給出效果）。

12，用CSS做郵票，看看吧！

13，經常上網的朋友可能會到過這樣一些網站，一進入首頁立刻會彈出一個窗口，怎么做呢！

這javascript代碼即可實現，摘錄藍色論壇。

【1、最基本的彈出窗口代碼】

其實代碼非常簡單：

<!--

window.open (`page.html`)

-->

</SCRIPT>

因為著是一段javascripts代碼，所以它們應該放在<SCRIPT LANGUAGE="javascript">標簽和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標簽中的代碼作為文本顯示出來。要養成這個好習慣啊。

window.open (`page.html`) 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。

這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body bgcolor="#003063" text="#ffffff" id=all>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

【2、經過設置后的彈出窗口】

下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。

我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。

<!--

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>

參數解釋：

<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、用函數控制彈出窗口】

下面是一個完整的代碼。

<html>

<head>

<!--

function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=

no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"

//寫成一行

}

//-->

</script>

</head>

<body>

…任意的頁面內容…

</body>

</html>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。

怎么調用呢？

方法一：<body> 瀏覽器讀頁面時彈出窗口；

方法二：<body> 瀏覽器離開頁面時彈出窗口；

方法三：用一個連接調用：

<a href="#">打開一個窗口</a>

注意：使用的“#”是虛連接。

方法四：用一個按鈕調用：

14，沒有用表格寫的，讓大家隨便看看，沒什么。

<html>

<head>

<title>江南荷花扇面</title>

<!--

.font1 { font-size: 12px; color: #999999; text-decoration: none}

a { font-size: 12px; color: #999999; text-decoration: none}

a:hover { font-size: 12px; color: #000000; text-decoration: none}

-->

</style>

</head>

<p>盛夏尚　濤　

<p><a href="index.htm">一夜露痕黃粉香　袁運甫 </a>

<p>瑤池昨夜新涼王金嶺

<p>一朵白蓮隨意開　吳冠南

<p>新雨迎秋欲滿塘　齊辛民

<p>十里荷香齊辛民

<p>濯清蓮而不妖盧世曙

</div>

</body>

</html>

15,IE6已支持自定義cursor!

語法格式 cursor:url(圖標) //cur或是ani文件.

cur就是WINDOWS中的光標(cursor)文件，光標文件與圖標（ICON)文件除了文件頭有一個位置的值不同外，實際是一樣的。

ani是WINDOWS中的動畫光標（圖標）文件。

<!--

.unnamed1 { cursor:url(arrow2c.cur)}

-->

</style>

16,用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=# //移動的速度

17，在FLASH5中也存在一些字體，打散后變成一團的事是為什么？有解決的辦法嗎。

這是大家很常見的問題！可能是對字庫支持的不好！我個是做成透明的gif圖片格式，然后倒入。

18，flash的網頁里“加入收藏夾”功能怎么實現？

在as中加getUrl("java script:window.external.addFavorite(http://skydesigner.51.net`,`我的工作室`)"

19，在Flash中，文本的動態屬性和輸入屬性的區別。

input text在運行時可被用戶或程序改變其值。

ynamic text僅允許被程序修改。

20,怎樣在IE中調用Dreamweaver進行編輯.

相信很多在使用WinME或Window2000的朋友，會遇見是個問題。很簡單，把我們筆記本程序打開，保存為一個 *.reg 文件。雙擊它將信息添加到注冊表即可。

REGEDIT4

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]

@="\"c:\Program Files\Macromedia\Dreamweaver 4\dreamweaver.exe\" \"%1\""

21，設置表格虛線。

方法一：作一個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"

22,看看在網頁中調用HHCtrl控件效果。

代碼如下：

22，如何讓一張圖片有淺到深的漸變。

<!--

function high(which2){

theobject=which2

highlighting=setInterval("highlightit(theobject)",50)

}

function low(which2){

clearInterval(highlighting)

which2.filters.alpha.opacity=40

}

function highlightit(cur2){

if (cur2.filters.alpha.opacity<100)

cur2.filters.alpha.opacity+=10

else if (window.highlighting)

clearInterval(highlighting)

}

</script>

23,雙擊鼠標左鍵來滾動背景，單擊停止。

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>

24,如何在同一頁面設置不同文字鏈接效果的樣式.

代碼如下：

<HTML><HEAD><TITLE>如何在同一頁面設置不同文字鏈接效果的樣式</TITLE>

<!--

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>

<a href="#">下劃線鏈接 </a>

<p></p>

<a href="#" class="r1">雙下劃線鏈接</a>

</BODY>

</HTML>

補充說明：

a:hover 表示鼠標劃過時的樣式.

a:link 表示鏈接的樣式.

a:active 表示當前活動連接的樣式.

a:visited 表示已經訪問過的連接的樣式.

25, 用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>上

，并且要留有足夠的空間能夠顯示陰影或描邊，否則會出現半截的陰影或描邊現象。

26,如何給做帶顏色的下拉菜單。

<option selected>:: Dreamweaver4 ::</option>

<option>::Flash5::</option>

<option>::Firewoks4::</option>

</select>

27,關于DW4的表格中的亮邊框和暗邊框問題。

在DW4的表格面板中并沒有亮邊框和暗邊框的屬性設置，因為NC不支持,只有你在代碼中添加了。

bordercolorlight="#999999" bordercolordark="#000000"

你也可以用Css定義一個class。例如：

<style>

.bordercolor { bordercolorlight: #999999; bordercolordark: #000000 }

</style>

然后在要加效果的表格里加上<table class="bordercolor">

28,自動顯示主頁最后更新日期.

document.write("最后更新日期："+document.lastModified+""

</script>愛電臺有我

29,如何讓滾動條出現在左邊？

我想居然在論壇中有人發表了這段代碼，很有意思，它的確照顧一些左撇子，呵呵！

<tr>

<td bgcolor="#FF0000" >是不是你的滾動條在左邊啊</td>

</tr>

</table>

</body>

</html>

30,如何加入網址前面的小圖標？

首先,您必須了解所謂的圖標（Icon）是一種特殊的圖形文件格式，它是以 .ico 作為擴展名。你可用在網上找一個制作圖標軟件，它具有特有的規格：圖標的大小為 16 * 16（以像素為單位）；顏色不得超過 16 色。在該網頁文件的 HEAD 部分加入下面的內容：<LINK REL="SHORTCUT ICON" HREF=" http://skydesigner.51.net/圖標文件名">,并放在該網頁的根目錄下。

31,在800*600顯示器中，如何不讓網頁水平出現滾動條！

設至<body leftmargin="0" topmargin="0">，網頁中的表格寬度為778。

32,關于<!DOTYPE>的說明解釋。

在網頁中，經常會看到〈!DOCTYPE HTML PUBLIC`-//W3C//DTD HTML 4.01//EN`>，是聲明HTML文件的版本信息。

33, 用圖片來關閉窗體.

補充說明：如何使用了ACTIVEX！,不再警告窗口？

<html>

<head>

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

</head>

<body bgcolor="#003063" text="#ffffff" id=all> <a href="#">關閉窗口無提示</a>

</body>

</html>

34,禁止鼠標右鍵查看網頁源代碼。

function click()

{if (event.button==2) {alert(`你好,歡迎光臨！`) }}

document.onmousedown=click

</SCRIPT>

補充說明：

鼠標完全被封鎖,可以屏蔽鼠標右鍵和網頁文字。

< body>

35,通過按鈕來查看網頁源代碼。

36,怎么用文字聯結實現按鈕的SUBMIT功能？

這段文字要放在form里。formname是這里要寫在form中的name,<form name=form111>那么就應該是form111.submit()

37,如何做一個空鏈接？

加#

38,利用<IFRAME>來給網頁中插入網頁。

經常我看到很多網頁中又有一個網頁，還以為是用了框架，其實不然，是用了<IFRAME>,它只適用于IE，NS可是不支持<IFRAME>的，但圍著的字句只有在瀏覽器不支援 iframe 標記時才會顯示，如<noframes>一樣，可以放些提醒字句之類的話。

你注意啊！下面請和我學習它的用法。

分析代碼：<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 則不容許卷動。

39,請問＜tbody＞的用法？

tbody用法據說是加強對表格的控制能力的.例如：

tbody代碼如果不是你用手寫的話,只有在你用IE5打開一個網頁的時候，把它另存為

一下，你的另存為的文件在表格中就會生成tbody代碼。(即便你的表格根本就沒有

tbody代碼，IE5另存為的時候也會給你生成)。

40,Alt和Title都是提示性語言標簽，請注意它們之間的區別。

在我們瀏覽網頁時，當鼠標停留在圖片對象或文字鏈接上時，在鼠標的右下角有時會出現一個提示信息框。對目標進行一定的注釋說明。在一些場合，它的作用是很重要的。

alt 用來給圖片來提示的。Title用來給鏈接文字或普通文字提示的。

用法如下：

補充知識：<TITLE><ALT>里面如何多行換行？在源代碼里Enter回車。

<a href="#" Title="個人簡歷

姓名：張培

網名：我是閃夢

性別：男的，不是女的。

愛好：網頁制作，軟件開發">個人簡歷</a>

例如：個人簡歷

41, 用javascript代碼來實現閃爍按鈕。

<body>

</form>

if (document.all&&document.all.flashit)

{

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>

42,CSS給圖片定義顏色邊框。

img { border: 1px solid red}

43,在DW中如何使插入的FLASH透明。

方法一：選中swf,打開原代碼窗口，在</object>前輸入:<param name="wmode" value="transparent">

方法二：在Flash中的Flie→Publist Settings→HTML→Window Mode選擇transparent

44,在DW編輯文本中，如何輸入一個空格呢？

輸入空格的問題，在DW似乎已成了一個老生常談的問題。通過將輸入法調整到全角模式就可以避免了。本以人工智能ABC為例.按Shift+Space切換到全角狀態。

45,為何我的DW中圖形顯示不正常。

第一種：可能是因為你定義并正在使用一個site，而你的HTML文件或者圖片不在這個site包含的區域之內，因此dreamweaver使用file協議來

描述圖象的絕對路徑，可惜IE不支持src中使用file協議，所以圖象就顯示不出來了。

第二種：可能是放圖片的文件夾或圖片名為中文，也顯示不到網頁中去。

46,如何在本地機器上測試flash影片的loading？

我想這可能是很多人在問的題了，其實很簡單，在Test時，選選View->Show Streaming就可以看到了。

47,在網頁中做出一根豎的線有幾種辦法.

第一種方法：用一個像素圖的辦法！

如果你用Dreamwever的Edit→Preferences…→Layout View中的Spacer Image給你創建了一個缺省名為：spacer.gif的一個像素圖文件。

代碼中：

<tr>

</tr>

</table>

第二種方法：用表格填顏色的辦法！把<td> </td>中的刪掉 .

<tr>

</tr>

</table>

第三種方法：用水平條。

48, 關于鼠標拖動,改變層大小。──看看微軟的做法.

document.execCommand("2D-position",false,true);

</script>

<DIV>

</DIV>

在線咨詢

上一篇：在SSM框架使用攔截器實現用戶登錄權限驗證
下一篇：視頻分割軟件哪個好？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

圖解瀏覽器的工作原理（史上最全）

您的項目需求