> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/html-xi-lie/05dhtml-dong-tai-wang-ye-jian-jie.md).

# DHTML（动态网页）简介

## 什么是DHTML？

**DHTML 指动态 HTML（Dynamic HTML）**，是一种使 HTML 页面具有动态特性的艺术，是一种创建动态和交互 WEB 站点的技术集。它 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。

DHTML 实现了网页从 Web 服务器下载后无需再经过服务端的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。如：鼠标移到文章段落中时，字体颜色变成蓝色；鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。

DHTML 通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素：

* \*\*动态内容：\*\*动态地更新网页内容，可动态地插入、修改或删除网页的元件，如文字、图像、标记等。
* \*\*动态排版样式：\*\*W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、粗细、颜色、文本对齐方式、宽、高、行高度、外边距、内边距、边框、背景色\图片、位置以及页面布局方式等排版样式，而”动态排版样式”即可以“动态”地改变排版样式。

简而言之，**DHTML 就是一种在从 Web 服务器下载进浏览器以后，仍然能够随时变换更新网页内容、排版样式以及动画等的网页。**

确切地说，DHTML 只是一种制作网页的概念，而不是一种网络技术（就像 `JavaScript` 和 `ActiveX`），也不是一个标记、一个插件或者是一个浏览器。实际上没有一个组织或机构推出过所谓的 DHTML 标准或技术规范之类的。DHTML 不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。

## DHTML和HTML有什么区别？有什么不同

### HTML

HyperText Markup Language，超文本标记语言。

**超文本**就是指页面中可以包含图片、链接、音乐、视频等非纯文字元素。显然可知，静态文本就是页面只包含文字元素。

HTML 是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分，HTML 的结构包括头部（head）和主体（body）两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。通过标记符号，可以呈现出一个网站整体的架构部分。

### DHTML

DHTML 是 `Dynamic html` 的简称，就是动态的 HTML 的意思，是相对传统的静态的 HTML 而言的一种制作网页的概念。

可以把它简单地理解为：DHTML = `html + css + javascript` 的集成。

### 两者区别

* HTML 是一种标记语言，是一种规范，一种标准；DHTML 不是 W3C 标准，它是是一种用来创建动态站点的技术组合物。
* 传统的HTML 页面是静态的； DHTML 是在静态的 HTML 页面上加入了 javascript 脚本，使其能根据用户的动作作出一定的响应。如：鼠标移动到图片上，图片改变颜色；移动到导航栏，弹出一个动态菜单，等等效果。

## DHTML技术

对大多数人来说，DHTML 意味着 HTML、css和 JavaScript 的组合。Web 开发者通过 DHTML 可控制如何在浏览器窗口中显示和定位 HTML 元素。

DHTML 技术大致包含以下：

* **HTML 4.0**

  通过 HTML 4.0，所有的格式化（信息）可移出HTML文档，并写入一个独立的样式表中。因为 HTML 4.0 可以把文档的表现从其结构中分离，我们可以在不搞乱文档内容的情况下完全地控制表现层。
* **层叠样式表（CSS）**

  通过 CSS，我们得到了一种用于 HTML 文档的样式和布局模型。

  由于 CSS 使开发者有能力同时控制多个网页的样式和布局，CSS 可以称作 Web 设计领域的一个突破。作为开发者，您可以为每个 HTML 元素定义样式，并把它应用到您希望的任意多的页面上。如果需要做一个全局的改变，只需简单地改变样式，Web 中所有的元素都会被自动地更新。
* **文档对象模型（DOM）**

  DOM 指文档对象模型。

  HTML DOM 是针对 HTML 的文档对象模型。

  HTML DOM 定义了针对 HTML 的一套标准的对象，以及访问和处理 HTML 对象的标准方法。

  “W3C 文档对象模型（DOM）是一个中立于语言和平台的接口，它允许程序和脚本动态地访问和更新文档的内容、结构以及样式”。
* **JavaScript**

  JavaScript 是因特网的标准脚本语言，它使您有能力编写可控制所有 HTML 元素的代码。

## 相关阅读

#### [JS 参考手册](https://www.jishuchi.com/read/jsref/8185)

#### [中文DHTML参考手册](http://www.hbcms.com/main/dhtml/)