# 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/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lizh.gitbook.io/knowledge/html-tan-suo-xi-lie/05dhtml-dong-tai-wang-ye-jian-jie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.