DHTML 教程

2025 年 3 月 8 日 | 阅读需 10 分钟

DHTML 代表 Dynamic Hypertext Markup language，即 动态 HTML。

动态 HTML 不是一种标记或编程语言，而是一个术语，它结合了各种 Web 开发技术的功能，用于创建动态和交互式的网页。

DHTML 应用程序是由 Microsoft 随 IE (Internet Explorer) 的第 4 版于 1997 年推出的。

动态 HTML 的组成部分

DHTML 由以下四个组成部分或语言组成：

HTML 4.0
CSS
JavaScript
DOM。

HTML 4.0

HTML 是一种客户端标记语言，它是 DHTML 的核心组件。它使用各种定义的基本元素或标签定义了网页的结构。

CSS

CSS 代表层叠样式表，它允许 Web 用户或开发人员控制 Web 页面上 HTML 元素的样式和布局。

JavaScript

JavaScript 是一种脚本语言，它在客户端完成。各种浏览器都支持 JavaScript 技术。 DHTML 使用 JavaScript 技术来访问、控制和操作 HTML 元素。 JavaScript 中的语句是指示浏览器执行操作的命令。

DOM

DOM 是文档对象模型。它是 W3C 标准，是 HTML 的标准编程接口。它主要用于定义 HTML 中所有元素的对象和属性。

DHTML 的用途

以下是 DHTML（动态 HTML）的用途：

它用于设计实时开发的动画和交互式网页。
DHTML 通过在其文档中动画显示文本和图像来帮助用户。
它允许作者在其页面上添加效果。
它还允许页面作者包含下拉菜单或翻转按钮。
该术语也用于创建各种基于浏览器的动作游戏。
它也用于在需要自动刷新其内容的各种网站上添加行情跑马灯。

DHTML 的特性

以下是 DHTML（动态 HTML）的各种特征或功能：

它最简单和主要的功能是我们可以动态创建网页。
动态样式是一种功能，允许用户更改网页的字体、大小、颜色和内容。
它提供了使用事件、方法和属性的便利。并且，还提供了代码重用功能。
它还提供了浏览器中的数据绑定功能。
使用 DHTML，用户可以轻松地为其网站或网页创建动态字体。
借助 DHTML，用户可以轻松更改标签及其属性。
网页功能得到增强，因为 DHTML 使用低带宽效果。

HTML与DHTML的区别

下表描述了 HTML 和 DHTML 之间的差异

HTML (超文本标记语言)	DHTML (动态超文本标记语言)
1. HTML 仅仅是一种标记语言。	1. DHTML 不是一种语言，而是一组 Web 开发技术。
2. 它用于开发和创建网页。	2. 它用于创建和设计动画和交互式网站或页面。
3. 这种标记语言创建静态网页。	3. 这个概念创建动态网页。
4. 它不包含任何服务器端脚本代码。	4. 它可能包含服务器端脚本的代码。
5. HTML 文件以 .html 或 .htm 扩展名存储在系统中。	5. DHTML 文件以 .dhtm 扩展名存储在系统中。
6. 用户在不使用脚本或样式的情况下创建的简单页面称为 HTML 页面。	6. 用户使用 HTML、CSS、DOM 和 JavaScript 技术创建的页面称为 DHTML 页面。
7. 此标记语言不需要数据库连接。	7. 这个概念需要数据库连接，因为它与用户交互。

DHTML JavaScript

JavaScript 可以包含在 HTML 页面中，从而使页面的内容成为动态的。我们可以轻松地在 HTML 页面的 <head> 或 <body> 标签中键入 JavaScript 代码。如果我们想添加 JavaScript 的外部源文件，我们可以轻松地使用 <src> 属性添加。

以下是描述如何在 DHTML 中使用 JavaScript 技术的各种示例

Document.write() 方法

JavaScript 的 document.write() 方法将输出写入到网页。

示例 1： 以下示例简单地在 DHTML 中使用 JavaScript 的 document.write() 方法。在此示例中，我们在 <body> 标签中键入 JavaScript 代码。

<HTML>
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
document.write("JavaTpoint");
</script>
</body>
</html>

输出

JavaScript 和 HTML 事件

当发生某些事件时，也可以执行 JavaScript 代码。假设，用户单击网页上的 HTML 元素，单击后，会自动调用与该 HTML 元素关联的 JavaScript 函数。然后，执行函数中的语句。

示例 1： 以下示例使用 JavaScript 和 HTML 事件 (Onclick) 显示当前日期和时间。在此示例中，我们在 <head> 标签中键入 JavaScript 代码。

<html>
<head>
<title>
DHTML with JavaScript
</title>
<script type="text/javascript">
function dateandtime()
{
alert(Date());
}
</script>
</head>
<body bgcolor="orange">
<font size="4" color="blue">
<center> <p>
Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
# to check the today's date and time. 
</p> </center>
</font>
</body>
</html>

输出

说明

在上面的代码中，我们在 DHTML 中借助 JavaScript 显示了当前日期和时间。在 body 标签中，我们使用了锚标记，它引用了页面本身。当您单击链接时，将调用 JavaScript 函数。

在 JavaScript 函数中，我们使用了 alert() 方法，我们在其中键入了 date() 函数。 date 函数在网页上的警报对话框中显示日期和时间。

JavaScript 和 HTML DOM

使用 HTML 的版本 4，JavaScript 代码还可以更改 HTML 事件的内部内容和属性。

示例 1： 本示例使用 JavaScript 和 HTML DOM 根据百分比标准检查学生的成绩。在此示例中，我们在 <body> 标签中键入 JavaScript 代码。

<html> 
    <head> 
        <title> Check Student Grade
</title> 
    </head> 
      
    <body> 
<p>Enter the percentage of a Student:</p> 
<input type="text" id="percentage">
<button type="button" onclick="checkGrade()">
Find Grade
</button> 
<p id="demo"></p>
<script type="text/javascript">  
            function checkGrade() { 
                var x,p, text; 
                p = document.getElementById("percentage").value; 
		
		x=parseInt(p);
		
		
               if (x>90 && x <= 100) { 
                    document.getElementById("demo").innerHTML = "A1";
                } else if (x>80 && x <= 90) { 
                   document.getElementById("demo").innerHTML = "A2";
		 } else if (x>70 && x <= 80) { 
                   document.getElementById("demo").innerHTML = "A3";
		}	
            } 
        </script> 
    </body> 
</html> 

输出

说明

在上面的代码中，我们借助 DHTML 中的 JavaScript 检查了学生的成绩。在 JavaScript 代码中，我们使用了 checkGrade() 方法，当我们单击按钮时会调用该方法。在此函数中，我们将值存储在变量 p 中。该值取自输入字段。存储该值后，我们将 p 的值转换为整数，并将转换后的值存储在 x 中，因为 p 中的值是文本。

之后，我们使用 if-else-if 语句来根据百分比查找成绩。

DHTML 中具有 JavaScript 的 CSS

使用 HTML 的版本 4，JavaScript 代码还可以更改 HTML 元素的样式，例如大小、颜色和面。

示例 1： 以下示例更改了文本的颜色。

<html>
<head>
  <title>
getElementById.style.property example
</title>
</head>
<body>
  <p id="demo"> This text changes color when click on the following different buttons. </p>
  <button onclick="change_Color('green');"> Green </button>
  <button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">

function change_Color(newColor) {
  var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html>

输出

说明

在上面的代码中，我们使用以下语法更改了文本的颜色

上面的语法用于 JavaScript 函数中，该函数在我们单击 HTML 按钮时执行或调用。不同的 HTML 按钮指定文本的颜色。

DHTML CSS

借助 JavaScript 和 HTML DOM，我们可以轻松地将 CSS 与 DHTML 页面一起使用。借助 this.style.property=new style 语句，我们可以更改当前使用的 HTML 元素的样式。或者，我们也可以通过 document.getElementById(id).style.property = new_style 语句更新任何特定 HTML 元素的样式。

示例 1： 以下示例使用 DHTML CSS 来更改当前元素的样式

<html>
<head>
<title>
Changes current HTML element
</title>
</head>
<body>
<center>
<h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
<center>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 this.style.color='blue' 语句，它将文本的颜色显示为蓝色。

示例 2： 以下示例使用 DHTML CSS 来更改 HTML 元素的样式

<html>
<head>
  <title>
changes the particular HTML element example
</title>
</head>
<body>
  <p id="demo"> This text changes color when click on the following different buttons. </p>
  <button onclick="change_Color('green');"> Green </button>
  <button onclick="change_Color('blue');"> Blue </button>
<script type="text/javascript">

function change_Color(newColor) {
  var element = document.getElementById('demo').style.color = newColor;
}
</script>
</body>
</html>

输出

说明

在上面的代码中，我们使用了 var element = document.getElementById('demo').style.color = newColor; 语句，该语句根据按钮将文本的颜色更改为绿色和蓝色。

DHTML 事件

事件定义为更改对象的发生。

在 DHTML 页面中添加事件是强制性的。如果没有事件，HTML 页面上将没有动态内容。事件是 HTML 中的一个术语，它会触发 Web 浏览器中的操作。

假设，任何用户单击 HTML 元素，则会执行与该元素关联的 JavaScript 代码。实际上，事件处理程序会捕获用户执行的事件，然后执行代码。

事件示例

单击按钮。
提交表单。
图像加载或网页加载等。

下表描述了 DHTML 中使用的事件处理程序

序号	事件	何时发生
1.	onabort	当用户中止页面或媒体文件加载时发生。
2.	onblur	当用户离开 HTML 对象时发生。
3.	onchange	当用户更改或更新对象的值时发生。
4.	onclick	当任何用户单击 HTML 元素时发生或触发。
5.	ondblclick	当用户一起单击 HTML 元素两次时发生。
6.	onfocus	当用户专注于 HTML 元素时发生。此事件处理程序与 onblur 相反。
7.	onkeydown	当用户在键盘设备上按下键时触发。此事件处理程序适用于所有键。
8.	onkeypress	当用户按下键盘上的键时触发。此事件处理程序不会为所有键触发。
9.	onkeyup	它发生在用户按下某个对象或元素后，松开键盘上的按键时。
10.	onload	它发生在某个对象完全加载时。
11.	onmousedown	它发生在用户在 HTML 元素上按下鼠标按键时。
12.	onmousemove	它发生在用户将光标移动到 HTML 对象上时。
13.	onmouseover	它发生在用户将光标移动到 HTML 对象上时。
14.	onmouseout	它发生在鼠标指针移出 HTML 元素时，或者当鼠标指针移出 HTML 元素时触发。
15.	onmouseup	它发生在鼠标按键在 HTML 元素上释放时，或者当鼠标按键在 HTML 元素上释放时触发。
16.	onreset	用户使用它来重置表单。
17.	onselect	它发生在网页上选择内容或文本后。
18.	onsubmit	当用户在提交表单后点击按钮时触发。
19.	onunload	当用户关闭网页时触发。

以下是使用不同事件处理程序的示例，这些示例有助于我们理解 DHTML 事件的概念。

示例 1：此示例使用 onclick 事件处理程序，用于在点击后更改文本。

<html>
<head>
<title>
Example of onclick event
</title>
<script type="text/javascript">
function ChangeText(ctext)
{
ctext.innerHTML=" Hi JavaTpoint! ";
}
</script>
</head>
<body>
<font color="red"> Click on the Given text for changing it: <br>
</font>
<font color="blue"> 
<h1 onclick="ChangeText(this)"> Hello World! </h1>
</font>
</body>
</html>

输出

示例 2：此示例使用 onsubmit 事件处理程序，在点击提交按钮后发出警告。

<html>
<head>
<title>
Example of onsubmit event
</title>
</head>
<body>
<form onsubmit="Submit_Form()">
<label> Enter your name: </label>
<input type="text">
<label> Enter your Roll no: </label>
<input type="Number">
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function Submit_Form()
{
alert(" Your form is submitted");
}
</script>
</body>
</html>

输出

DHTML DOM

DHTML DOM 代表动态 HTML 文档对象模型。

它是一个 W3C 标准，是 HTML 的标准编程接口。它主要用于定义 HTML 中所有对象的对象和属性。它还定义了访问 HTML 元素的方法。

示例：以下程序有助于理解 DHTML DOM 的概念。此示例自动更改文本的颜色，并以红色显示文本。

<html>
<head>
  <title>
Example of DHTML DOM
</title>
</head>
<body>
<font color = "blue">
  <p id="demo"> This text changes color when the page loaded. </p>
</font> 
<script type="text/javascript">
document.getElementById('demo').style.color = "red";
</script>
</body>
</html>

输出

DHTML 的优点

以下是 DHTML（动态 HTML）的各种优点或优势：

使用此概念创建的网站和网页速度很快。
无需插件即可动态创建网页。
由于动态 HTML 的低带宽效应，网页功能得到增强。
这个概念提供了比静态 HTML 更高级的功能。
它具有高度的灵活性，用户可以轻松地更改网页。

DHTML 的缺点

以下是 DHTML（动态 HTML）的各种缺点或局限性：

DHTML 的脚本在各种 Web 浏览器中无法正常运行。或者简单地说，我们可以说各种 Web 浏览器不支持 DHTML。它仅受最新浏览器的支持。
使用 DHTML 创建的网站的编码冗长而复杂。
为了理解 DHTML，用户必须了解 HTML、CSS 和 JavaScript。如果任何用户不了解这些语言，那么这本身就是一个耗时且漫长的过程。

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

DHTML 教程

DHTML 教程

动态 HTML 的组成部分

HTML 4.0

CSS

JavaScript

DOM

DHTML 的用途

DHTML 的特性

HTML与DHTML的区别

DHTML JavaScript

Document.write() 方法

JavaScript 和 HTML 事件

JavaScript 和 HTML DOM

DHTML 中具有 JavaScript 的 CSS

DHTML CSS

DHTML 事件

DHTML DOM

DHTML 的优点

DHTML 的缺点

相关帖子

DHTML 的特性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器