核心要點

• 動態(tài)HTML (DHTML)並非一門獨立的編程語言，而是HTML的增強技術(shù)，它結(jié)合了HTML、JavaScript和CSS，使網(wǎng)頁具備動態(tài)特性。
• DHTML的主要功能是在不重新加載頁面的情況下動態(tài)改變網(wǎng)頁的外觀和內(nèi)容，這依賴於第四代瀏覽器內(nèi)置的功能。
• 不同瀏覽器對DHTML的實現(xiàn)差異很大；例如，Netscape Navigator 4使用<layer></layer>標(biāo)籤，而Internet Explorer 4則依賴於與標(biāo)準(zhǔn)HTML標(biāo)籤（如<div>和<code><table>）關(guān)聯(lián)的樣式對象。 <li>為了實現(xiàn)跨瀏覽器兼容性，DHTML需要根據(jù)瀏覽器使用不同的腳本技術(shù)，這突顯了對象檢測等瀏覽器檢測技術(shù)在高效腳本編寫中的重要性。 </li> <li>儘管AJAX和jQuery等新技術(shù)層出不窮，但DHTML仍然具有相關(guān)性，並且是創(chuàng)建交互式動態(tài)網(wǎng)頁內(nèi)容的基礎(chǔ)技能。 </li> <p>作為一名自封的網(wǎng)站管理員，我盡力跟上最新的網(wǎng)絡(luò)技術(shù)。我目前正在學(xué)習(xí)DHTML，即動態(tài)HTML。在聽說了很多關(guān)於這項技術(shù)以及它最終將如何徹底改變互聯(lián)網(wǎng)的信息後，我認為我必須從沙發(fā)上站起來開始學(xué)習(xí)它，否則我就沒有資格再自稱“網(wǎng)站管理員”了。如果你對DHTML和我一樣一無所知，本教程正適合你。享受學(xué)習(xí)過程，如有任何問題，請隨時給我發(fā)郵件。 </p> <p>這是一個很好的問題，我承認我很難找到一個直接的答案。我記得在JavaScript新聞組上看到過一個帖子試圖用以下回復(fù)來回答這個問題：</p> <p><q>“DHTML是HTML和JavaScript的組合”</q>我自言自語道：“那不就是帶有JavaScript的網(wǎng)頁嗎？”我至少感到很困惑。在搜索引擎上搜索了數(shù)百個搜索結(jié)果，尋找那個難以捉摸的答案，我還是找不到。所以我想，管它呢，我先學(xué)習(xí)DHTML，然後再弄清楚它是什麼！現(xiàn)在我已經(jīng)成為一名DHTML程序員了，我認為我已經(jīng)準(zhǔn)備好向你提供一個不錯的DHTML的一句話定義了：</p> <p><q>“DHTML是第四代瀏覽器中幾種內(nèi)置瀏覽器功能的組合，這些功能使網(wǎng)頁更具動態(tài)性”</q>你看，DHTML不是腳本語言（如JavaScript），而僅僅是一個瀏覽器功能——或增強功能——它使你的瀏覽器能夠動態(tài)化。你真正需要學(xué)習(xí)的不是DHTML本身，而是使用DHTML所需的語法。在其他任何事情之前，你可能想快速訪問Dynamic Drive，看看這種語言能夠做什麼。 </p> <p>就像我說的，DHTML是一組功能的集合，這些功能共同使你的網(wǎng)頁具有動態(tài)性。我認為現(xiàn)在重要的是要定義DHTML的創(chuàng)建者在說“動態(tài)”時是什麼意思。 “動態(tài)”被定義為瀏覽器在文檔加載後改變網(wǎng)頁外觀和樣式的能力。我記得當(dāng)我學(xué)習(xí)JavaScript時，我被教導(dǎo)可以使用JavaScript的<code>document.write()方法動態(tài)創(chuàng)建網(wǎng)頁。例如：

  document.write("This is text created on the fly!")

  我記得當(dāng)時對自己說：“還不錯”。但是，如果我想創(chuàng)建的內(nèi)容不僅是動態(tài)的，而且是按需生成的怎麼辦？那時我還很天真，我嘗試這樣做，通過將上面的代碼嵌套在一個函數(shù)中，並通過表單按鈕調(diào)用它：

  按下按鈕簡直是令人大失所望。我的整個網(wǎng)頁都被擦除了，只剩下函數(shù)生成的文本。

  那是過去?，F(xiàn)在，隨著DHTML的引入，我可以根據(jù)需要隨時更改網(wǎng)頁上的內(nèi)容，而無需瀏覽器擦除其他所有內(nèi)容。這就是DHTML的全部意義所在。瀏覽器即使在文檔加載後也能改變外觀和樣式的能力。

  既然我已經(jīng)讓你興奮不已了，我認為公平起見，我應(yīng)該潑點冷水。 DHTML技術(shù)目前正處於開發(fā)階段，NS 4和IE 4在其對這項偉大技術(shù)的實現(xiàn)方面差異很大。目前不可能編寫一段DHTML代碼並期望它在兩個瀏覽器中都能正常運行。此外，這兩個瀏覽器在其DHTML開發(fā)的不同階段；根據(jù)我自己的知識和我聽到的內(nèi)容，IE 4中的DHTML比NS 4中的DHTML強大得多且用途更廣。我不想幫助傳播任何宣傳，所以我到此為止。

  這可能是好事，也可能是壞事，這取決於你的觀點。 NS 4中的DHTML非常簡單，基本上可以歸結(jié)為一個詞——Layer。我自己也很驚訝，但這是真的——NS 4完全依賴於一個名為<layer></layer>的新標(biāo)籤來發(fā)揮其DHTML的魔力。這個新標(biāo)籤是動態(tài)的，因為它可以放置在網(wǎng)頁上的任何位置（與其他內(nèi)容無關(guān)），可以四處移動，其內(nèi)部內(nèi)容可以按需更新，等等。

  基本語法

  <layer></layer>標(biāo)籤的基本語法再簡單不過了（好像HTML中的任何標(biāo)籤都很複雜一樣?。?/p>

  <layer>層內(nèi)文本<code><layer>層內(nèi)文本</layer>

  <layer></layer>標(biāo)籤是一個內(nèi)容標(biāo)籤，這意味著你可以向其中添加內(nèi)容（如<table>）。繼續(xù)嘗試將上面的代碼插入到你的頁面中……你會注意到層內(nèi)的文本浮在其他文本之上，並與它們重疊。想像一下，一個層就像一張紙，位於頁面的其餘部分之上，並且不佔用文檔流中的空間。 <h5 id="層屬性">層屬性</h5> <p>一個單獨的層可能很無聊，更不用說沒用了。幸運的是，它還有更多功能。層支持屬性，允許你使用x、y坐標(biāo)係對其進行定位，為其提供背景，剪輯它（使層的特定區(qū)域可見），將其隱藏等等。我在下面列出了最重要的層屬性：</p> <table> <thead> <tr> <th>層屬性</th> <th>說明</th> </tr> </thead> <tbody> <tr> <td><code>id 層的名稱，用于在腳本中標(biāo)識它 left 層相對于x坐標(biāo)的位置 top 層相對于y坐標(biāo)的位置 width 層的寬度，以px或%為單位 height 層的高度，以px或%為單位 bgColor 層的背景顏色 background 層的背景圖像 src 層中包含的外部HTML文檔

  你可以隨意混合和匹配不同的屬性。

  點擊此處查看一個使用上述某些屬性的示例層

  請注意，我沒有指定left和top屬性。當(dāng)你沒有指定時，層將被放置在你定義它的位置。

  腳本層

  這是關(guān)於層最重要的事情之一——如何編寫它們的腳本。畢竟，正是腳本使層活躍起來。要訪問一個層，你需要使用以下語法：

  document.layername

  訪問層只是第一步。一旦你訪問了一個層，你就可以繼續(xù)操作層的屬性之一以產(chǎn)生動態(tài)效果。

  點擊此處查看一個示例，其中層的背景顏色在紅色和藍色之間切換。

  所有層的屬性都是可讀寫的，所以一定要嘗試每一個屬性！

  當(dāng)我開始學(xué)習(xí)IE 4對DHTML的實現(xiàn)時，我意識到它比NS對應(yīng)版本要復(fù)雜得多。 IE中的DHTML不依賴於任何一個標(biāo)籤，而是依賴於你習(xí)慣使用的常用HTML標(biāo)籤（如

  和）產(chǎn)生的新對象和屬性。它功能更強大，但同時也更難掌握。

  IE 4的樣式對象

  IE 4中的HTML元素現(xiàn)在都支持一個樣式對象，它本質(zhì)上是用於動態(tài)操作該元素的外觀和“感覺”的“動態(tài)”對象。與<layer></layer>標(biāo)籤一樣，元素也可以分配一個“id”屬性，然後可以在腳本編寫期間使用它來標(biāo)識它。例如：

  <div id="adiv"></div>

  在你的腳本中，訪問“adiv”的樣式對象所需的語法如下所示：

  adiv.style<code>adiv.style

  樣式對象包含許多屬性，通過操作這些屬性，你可以動態(tài)地改變元素的外觀。我現(xiàn)在將展示其中一些屬性：

  樣式對象的重要屬性

  1. backgroundColor<code>backgroundColor 元素的背景顏色
  2. backgroundImage<code>backgroundImage 元素的背景圖像
  3. color<code>color 元素的顏色
  4. position<code>position 元素的位置類型?？山邮艿闹禐椤癮bsolute”和“relative”
  5. pixelWidth<code>pixelWidth 元素的寬度
  6. pixelHeight<code>pixelHeight 元素的高度
  7. pixelLeft<code>pixelLeft 元素相對於x坐標(biāo)的位置
  8. pixelTop<code>pixelTop 元素相對於y坐標(biāo)的位置

  上述屬性僅代表所有受支持屬性的一個子集，但它們是最常用的屬性。操作任何樣式屬性的基本語法都是相同的，我將在稍後展示。通過訪問這些屬性，我們可以改變大多數(shù)HTML元素的外觀和樣式（而不是Netscape中的<layer></layer>標(biāo)籤?。?。

  點擊此處查看一個簡單的演示

  請注意我是如何更改文本顏色的：

  sometext.style.color = 'red'<code>sometext.style.color = 'red'

  我首先使用元素的id來訪問它，然後通過樣式對象，最後通過樣式的顏色屬性，我能夠輕鬆地根據(jù)需要更改文本的顏色！

  所有樣式屬性都是可讀寫的，並且以類似的方式訪問：元素id->樣式對象->屬性名稱。

  點擊此處查看另一個示例，該示例在鼠標(biāo)懸停在圖像上時會展開圖像，並在鼠標(biāo)移出時將其恢復(fù)到原始大小。

  是的，我知道它並不是世界上最實用的例子，但它確實很好地說明了DHTML的工作原理。圖像按需更改尺寸，無需重新加載文檔。這是JavaScript單獨無法做到的。

  如果你還沒有被NS 4和IE 4中DHTML的語法和功能差異嚇跑，那麼你就可以學(xué)習(xí)如何使頁面上的內(nèi)容動態(tài)化，或者根據(jù)需要進行更改！

  NS 4中的動態(tài)內(nèi)容

  更改NS 4中的內(nèi)容涉及——你猜對了——layer<code>layer標(biāo)籤。所有層都被NS瀏覽器視為與頁面其餘部分不同的實體，它們有自己的文檔對象（該對象又包含文檔支持的其他對象）。理解這一點非常重要，因為層包含另一個文檔對象的事實使得在NS中創(chuàng)建動態(tài)內(nèi)容成為可能。我將首先構(gòu)建一個基本的層，然後展示如何更改其內(nèi)部的內(nèi)容：

  <layer height="30" id="alayer" width="100%"><code><layer height="30" id="alayer" width="100%"></layer>

  準(zhǔn)備好訪問上述層的文檔對象了嗎？以下是所需的語法：

  document.alayer.documentdocument.alayer.document

  因此，了解了這一信息，我可以編寫一個腳本，每3秒更改一次層的內(nèi)容。

  點擊此處查看如何在Netscape中完成此操作的示例。

  文本正在動態(tài)生成和擦除，無需重新加載文檔！

  IE 4中的動態(tài)內(nèi)容

  在IE 4中，動態(tài)內(nèi)容是通過一個名為innerHTML的特殊屬性實現(xiàn)的，該屬性存在於<span></span>和

  標(biāo)籤中。只需將此屬性設(shè)置為新的HTML值，<span></span>或

  內(nèi)部的內(nèi)容就會立即更新為新值！我將通過修改上面的示例來為IE 4用戶創(chuàng)建動態(tài)內(nèi)容來說明如何做到這一點：點擊此處查看適用於IE的示例。

  相同的結(jié)果，只是實現(xiàn)方式不同！

  如果你喜歡使用動畫，你會很高興知道，使用DHTML，整個網(wǎng)頁現(xiàn)在都是你的畫布！你可以創(chuàng)建自由地在屏幕上飛行的內(nèi)容。在Netscape中，這是通過操作<layer></layer>標(biāo)籤的left和top屬性來完成的。在IE 4中，通過更改樣式對象的pixelLeft和pixelTop屬性來完成相同的事情。

  在NS 4中移動元素

  回想一下第2課中，層支持left和top屬性，它們控制其相對於文檔左上角的偏移量。好吧，通過使用簡單的數(shù)學(xué)運算和幾行腳本，我們可以動態(tài)更新這些屬性，以便層移動！以下示例更改層的left屬性，以便在按下按鈕時它水平移動。

  點擊此處查看示例。

  你看，我所做的只是不斷地添加到“space”的left屬性以使其移動，並在我想將層返回到其初始位置時將屬性設(shè)置回其原始值。

  在IE 4中移動元素

  順便說一句，NS和IE就DHTML的一種實現(xiàn)達成一致的那一天，就是我可以停止編寫兩個版本的每件事物的那一天（只是發(fā)洩一下我的挫敗感）。在IE 4中移動元素基本上首先需要將該元素包裝在定位的<span></span>或

  內(nèi)，然後更改<span></span>或<div>的<code>pixelLeft和pixelTop屬性。聽起來很複雜，但實際上非常簡單。

  點擊此處查看示例。

  我首先所做的是將名為“spaceship”的外部<div>設(shè)置為相對位置，這對於使元素可移動是必要的（你也可以將其設(shè)置為“absolute”值）。然後，通過操作其樣式對象的<code>pixelWidth屬性，元素移動。

  在“真正的”跨瀏覽器DHTML可用之前（換句話說，當(dāng)NS和IE恢復(fù)理智時），跨瀏覽器DHTML基本上意味著使用你在那些JavaScript年中選擇的各種腳本技術(shù)來嗅探出用戶正在使用的瀏覽器，並執(zhí)行為該瀏覽器設(shè)計的代碼。在本課中，我將首先說明創(chuàng)建“跨瀏覽器”層的一種方法，然後向你展示我最近學(xué)習(xí)的一種腳本技術(shù)，該技術(shù)允許你輕鬆嗅探出瀏覽器的類型。

  創(chuàng)建“跨瀏覽器”層

  好的，我們有NS理解<layer></layer>標(biāo)籤，IE理解<span></span>和<div>。如果我們想創(chuàng)建一個簡單的DHTML效果，例如移動圖像，我們通常需要使用兩個標(biāo)籤——一個用於NS 4的<code>layer標(biāo)籤，以及一個用於IE 4的div或span標(biāo)籤。不太漂亮，對吧？好吧，我最近了解到，實際上有一種方法可以使用一個標(biāo)籤來創(chuàng)建一個“跨瀏覽器”層，儘管它在NS方面有點bug。顯然，NS 4將絕對定位的div視為與層相同。因此，無需進一步延遲，這是一個跨瀏覽器層的示例：<div id="crosslayer" style="position:absolute"></div>NS 4將上面的div<code>div視為與層完全相同。像任何其他層一樣，要訪問它，我們首先要通過文檔對象，然後是層的id：

  document.crosslayer<code>document.crosslayer

  在IE 4中，我們將簡單地使用div<code>div的id：

  crosslayer<code>crosslayer

  我發(fā)現(xiàn)，在NS中，以這種方式指定層雖然在跨瀏覽器兼容性方面很方便，但有一個主要的缺點。這樣的層並不總是像正常的層那樣運行，有時甚至?xí)篂g覽器崩潰。準(zhǔn)備好迎接意想不到的情況吧！

  瀏覽器嗅探——對象檢測

  直到最近，每當(dāng)我想要確定用戶的瀏覽器類型時，我都會像大多數(shù)JavaScript程序員一樣使用navigator<code>navigator對象。下面說明了使用此對象來嗅探NS 4和IE 4：

  var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4)<code>var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4) var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)<code>var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)

  我個人討厭使用navigator<code>navigator對象——它使用起來太複雜了（看看上面的混亂吧?。：冒?，我有好消息要告訴你。實際上有一種更快的方法來嗅探各種瀏覽器，它被稱為對象檢測。

  這個想法是基於JavaScript的工作方式。如果瀏覽器不支持特定的對象，則當(dāng)你引用它時，JavaScript會返回null<code>null。了解這一事實，我們可以在if<code>if語句中使用對象引用（代替navigator<code>navigator對象）來確定用戶的瀏覽器。

  讓我們舉個例子。我們知道NS 3 和IE 4 支持document.images<code>document.images對象。如果我們想嗅探這些瀏覽器，我們會這樣做：

  if (document.images) alert("You are using NS 3 or IE 4 ")<code>if (document.images) alert("You are using NS 3 or IE 4 ")

  將上述內(nèi)容翻譯成英語，它的意思是：“如果瀏覽器支持images<code>images對象（只有NS 3 和IE 4 支持），則發(fā)出警告消息”。

  將對象檢測視為確定用戶瀏覽器類型的一種間接方法。對象檢測不是直接確定用戶瀏覽器名稱和版本（通過navigator<code>navigator對象），而是一種更通用、更省事的瀏覽器嗅探技術(shù)。

  那麼，我們?nèi)绾问褂脤ο髾z測來嗅探NS 4和IE 4呢？好吧，只有NS 4支持document.layers<code>document.layers對象，只有IE 4支持document.all<code>document.all。我們可以利用這些知識輕鬆確定用戶是否正在使用NS 4、IE 4或兩者：

  if (document.layers) alert("You are using NS 4 ")<code>if (document.layers) alert("You are using NS 4 ") if (document.all) alert("You are using IE 4 ")<code>if (document.all) alert("You are using IE 4 ")

  if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")<code>if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")

  現(xiàn)在你再也不用返回到混亂的navigator<code>navigator對象來進行瀏覽器嗅探了！

  DHTML資源

  顯然，本教程僅作為DHTML的介紹。以下是一些繼續(xù)你的DHTML學(xué)習(xí)之旅的優(yōu)秀資源：

  • Dynamic Drive DHTML示例
  • MSDN的DHTML指南

  動態(tài)HTML (DHTML)常見問題解答

  HTML和DHTML有什麼區(qū)別？

  HTML（超文本標(biāo)記語言）是一種用於創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。它是靜態(tài)的，這意味著它一旦加載就不會改變。另一方面，DHTML（動態(tài)HTML）不是一種獨立的語言，而是HTML的擴展。它結(jié)合了HTML、JavaScript和CSS來創(chuàng)建交互式和動態(tài)的網(wǎng)頁內(nèi)容。這意味著DHTML允許網(wǎng)頁在不需要重新加載頁面的情況下進行更改並與用戶交互。

  DHTML如何增強用戶交互？

  DHTML通過允許網(wǎng)頁在不重新加載頁面的情況下對用戶輸入做出反應(yīng)來增強用戶交互。這是通過使用JavaScript和CSS來實現(xiàn)的。例如，DHTML可用於創(chuàng)建下拉菜單、動畫和其他交互式功能。這使得用戶體驗更具吸引力和效率。

  我可以將DHTML與其他編程語言一起使用嗎？

  是的，DHTML可以與其他編程語言一起使用。雖然DHTML本身是HTML、CSS和JavaScript的組合，但它也可以與PHP和ASP.NET等語言交互。這允許創(chuàng)建更複雜和動態(tài)的Web應(yīng)用程序。

  DHTML今天仍然相關(guān)嗎？

  雖然AJAX和jQuery等新技術(shù)已經(jīng)流行起來，但DHTML仍然相關(guān)且被廣泛使用。它是Web開發(fā)的基礎(chǔ)部分，理解DHTML可以為學(xué)習(xí)更高級的Web技術(shù)提供堅實的基礎(chǔ)。

  DHTML的一些常見用途是什麼？

  DHTML通常用於創(chuàng)建交互式網(wǎng)頁內(nèi)容。這包括下拉菜單、表單驗證、動畫和圖像滾動等。它還可以用於創(chuàng)建單頁應(yīng)用程序，其中整個站點或應(yīng)用程序都加載在一個HTML頁面中。

  DHTML如何提高網(wǎng)站性能？

  通過允許網(wǎng)頁在不重新加載頁面的情況下對用戶輸入做出反應(yīng)，DHTML可以顯著提高網(wǎng)站性能。這減少了服務(wù)器負載，並使用戶體驗更流暢、更快。

  DHTML的組件是什麼？

  DHTML由四個主要組件組成：HTML、CSS、JavaScript和文檔對像模型 (DOM)。 HTML提供頁面的結(jié)構(gòu)，CSS控制演示文稿，JavaScript啟用交互性，而DOM允許操作頁面元素。

  DHTML如何與文檔對像模型 (DOM) 一起工作？

  文檔對像模型 (DOM) 是DHTML的關(guān)鍵部分。它提供網(wǎng)頁的結(jié)構(gòu)化表示，可以使用JavaScript進行操作。這允許根據(jù)用戶輸入動態(tài)更改頁面。

  DHTML難學(xué)嗎？

  學(xué)習(xí)DHTML的難度因你之前的知識和Web開發(fā)經(jīng)驗而異。如果你已經(jīng)熟悉HTML、CSS和JavaScript，學(xué)習(xí)DHTML將是這些技能的自然延伸。但是，如果你不熟悉Web開發(fā)，那麼可能需要一些時間才能掌握這些概念。

  我在哪裡可以學(xué)習(xí)更多關(guān)於DHTML的知識？

  網(wǎng)上有很多資源可以學(xué)習(xí)DHTML。 GeeksforGeeks、JavaTPoint和TutorialsPoint等網(wǎng)站提供全面的指南和教程。此外，你可以在YouTube等平臺上找到許多視頻教程。