fbpx
维基百科

動態HTML

八月 03, 2023

提示：此条目的主题不是动态网页。

動態HTML（Dynamic HTML，简称DHTML、DHML）指的是网页内容随着用户或计算机程序提供的参数而变化的HTML，通过结合HTML、用戶端脚本语言（Client Side Script，如JavaScript）、串接樣式表（CSS）和文件物件模型（DOM）来创建動態網頁內容。

动态HTML

应用

动态HTML技术根据运行地点，分為客户端脚本（也称浏览器脚本）和服务器脚本。

  1. 客户端脚本
    客户端脚本包括JavaScript技术。是指在某个页面中，通过鼠标点击或键盘操作，与网页产生交互动作；或者在特定时间激发某个事件。客户端脚本在用户的电脑系统里运行。常用于多媒体展示和远程脚本调用。
  2. 服务器脚本
    服务器脚本包括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>

參考文獻

  1. ^ 存档副本. [2011-02-10]. （原始内容于2020-08-09）. 

八月 03, 2023
動態html, 提示, 此条目的主题不是动态网页, dynamic, html, 简称dhtml, dhml, 指的是网页内容随着用户或计算机程序提供的参数而变化的html, 通过结合html, 用戶端脚本语言, client, side, script, 如javascript, 串接樣式表, 和文件物件模型, 来创建動態網頁內容, 动态html, 目录, 应用, 結構, 範例, 參考文獻应用, 编辑动态html技术根据运行地点, 分為客户端脚本, 也称浏览器脚本, 和服务器脚本, 客户端脚本客户端脚本包括jav. 提示 此条目的主题不是动态网页 動態HTML Dynamic HTML 简称DHTML DHML 指的是网页内容随着用户或计算机程序提供的参数而变化的HTML 通过结合HTML 用戶端脚本语言 Client Side Script 如JavaScript 串接樣式表 CSS 和文件物件模型 DOM 来创建動態網頁內容 动态HTML 目录 1 应用 2 結構 3 範例 4 參考文獻应用 编辑动态HTML技术根据运行地点 分為客户端脚本 也称浏览器脚本 和服务器脚本 客户端脚本客户端脚本包括JavaScript技术 是指在某个页面中 通过鼠标点击或键盘操作 与网页产生交互动作 或者在特定时间激发某个事件 客户端脚本在用户的电脑系统里运行 常用于多媒体展示和远程脚本调用 服务器脚本服务器脚本包括ASP ColdFusion Perl PHP Ruby WebDNA等技术 一般通过Common Gateway Interface CGI 来产生动态页面 通过在HTML表单中填写数据 更改URL地址中的参数 更改浏览器的类型等 每次都可能产生不同的页面 称之为动态页面 最常见的例子包括 产生交互式表单 生成类似WebCT的e learning交互式在线基础培训 创建基于浏览器的视频游戏結構 编辑一個典型的使用 DHTML 如下 lt DOCTYPE html PUBLIC W3C DTD XHTML 1 1 EN http www w3 org TR xhtml11 DTD xhtml11 dtd gt lt html xmlns http www w3 org 1999 xhtml gt lt head gt lt title gt DHTML example lt title gt lt script type text javascript gt function init myObj document getElementById navigation more code window onload init lt script gt lt head gt lt body gt lt div id navigation gt lt div gt lt pre gt 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 lt pre gt lt script type text javascript src myjavascript js gt lt script gt lt body gt lt html gt 範例 编辑範例如下 1 lt DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Strict EN http www w3 org TR xhtml1 DTD xhtml1 strict dtd gt lt html xmlns http www w3 org 1999 xhtml xml lang en gt lt head gt lt title gt Test lt title gt lt style type text css gt 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 lt style gt lt script type text javascript gt 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 lt script gt lt head gt lt body gt lt h2 gt How to use a DOM function lt h2 gt lt div gt lt a id showhide href javascript changeDisplayState example1 gt Show example lt a gt lt div gt lt div id example1 gt This is the example Additional information which is only displayed on request lt div gt lt div gt The general text continues lt div gt lt body gt lt html gt 參考文獻 编辑 存档副本 2011 02 10 原始内容存档于2020 08 09 取自 https zh wikipedia org w index php title 動態HTML amp oldid 78326380, 维基百科，wiki，书籍，书籍，图书馆，

文章

，阅读，下载，免费，免费下载，mp3，视频，mp4，3gp， jpg，jpeg，gif，png，图片，音乐，歌曲，电影，书籍，游戏，游戏。