動態どうたいHTML

動態どうたいHTML（Dynamic HTML，简称DHTML、DHML）指ゆび的てき是ぜ网页内容ないよう随ずい着用ちゃくよう户或计算机つくえ程ほど序じょ提供ていきょう的てき参まいり数すう而变化か的てきHTML，通つう过结合あいHTML、用よう戶ど端はし脚本きゃくほん语言（Client Side Script，如JavaScript）、串くし接せっ樣式ようしき表ひょう（CSS）和わ文ぶん件けん物件ぶっけん模型もけい（DOM）来らい创建動態どうたい網もう頁ぺーじ內容。

应用

动态HTML技わざ术根据すえ运行地点ちてん，分ふん為ため客きゃく户端脚本きゃくほん（也称浏览器き脚本きゃくほん）和服わふく务器脚本きゃくほん。

客きゃく户端脚本きゃくほん
客きゃく户端脚本きゃくほん包括ほうかつJavaScript技わざ术。是ぜ指ゆび在ざい某ぼう个页面めん中ちゅう，通つう过鼠标点击或键盘操作そうさ，与あずか网页产生交互こうご动作；或ある者もの在ざい特定とくてい时间激げき发某个事件じけん。客きゃく户端脚本きゃくほん在ざい用よう户的电脑系けい统里运行。常用じょうよう于多媒体ばいたい展示てんじ和わ远程脚本きゃくほん调用。
服ふく务器脚本きゃくほん
服ふく务器脚本きゃくほん包括ほうかつASP, ColdFusion, Perl, PHP, Ruby, WebDNA等とう技わざ术，一般いっぱん通どおり过Common Gateway Interface (CGI)来らい产生动态页面。通つう过在HTML表ひょう单中填はま写うつし数すう据すえ，更改こうかいURL地ち址し中ちゅう的てき参さん数すう，更改こうかい浏览器き的てき类型等とう，每次まいじ都と可能かのう产生不同ふどう的てき页面，称しょう之の为动态页面めん。

最さい常つね见的例れい子こ包括ほうかつ：

产生交互こうご式しき表ひょう单
生成せいせい类似WebCT的てきe-learning交互こうご式しき在ざい线基础培训
创建基もと于浏览器的てき视频游ゆう戏

結構けっこう

一いち個こ典型てんけい的てき使用しよう DHTML 如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>DHTML example</title>
    <script type="text/javascript"> 
      function init() {
      myObj = document.getElementById("navigation");
      // .... more code
      }
      window.onload=init;
    </script>
  </head>
  <body>
    <div id="navigation"></div>
    <pre>
      Often the code is stored in an external file; this is done by linking the file that contains the JavaScript. 
      This is helpful when several pages use the same script:
    </pre>
    <script type="text/javascript" src="myjavascript.js"></script>
  </body>
</html>

範はん例れい

範はん例れい如下：^[1]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test</title>
    <style type="text/css">
      h2 {background-color: lightblue; width: 100%}
      a {font-size: larger; background-color: goldenrod} 
      a:hover {background-color: gold}
      #example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
    </style>
    <script type="text/javascript">
      function changeDisplayState (id) {
        d=document.getElementById("showhide");
        e=document.getElementById(id);
        if (e.style.display == 'none' || e.style.display == "") {
          e.style.display = 'block';
          d.innerHTML = 'Hide example..............';
        } else {
          e.style.display = 'none';
          d.innerHTML = 'Show example';
        }
      }
    </script>
  </head>
  <body>
    <h2>How to use a DOM function</h2>
    <div><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></div>
    <div id="example1">
      This is the example.
      (Additional information, which is only displayed on request)...
    </div>
    <div>The general text continues...</div>
  </body>
</html>

參考さんこう文獻ぶんけん

^ 存そん档副本ふくほん. [2011-02-10]. （原始げんし内容ないよう存そん档于2020-08-09）.

[1] 存そん档副本ふくほん. [2011-02-10]. （原始げんし内容ないよう存そん档于2020-08-09）.

[1]