📅  最后修改于: 2023-12-03 14:41:47.285000             🧑  作者: Mango
HTML(Hypertext Markup Language),XHTML(eXtensible Hypertext Markup Language)和DHTML(Dynamic HTML)是用于创建网页和应用程序的标记语言。尽管它们在很多方面相似,但在某些方面有着明显的区别。
HTML是最常见和最早引入的标记语言之一。它用于创建结构化的静态网页,并在不同的浏览器中呈现出一致的外观和布局。HTML由一系列标签组成,使用这些标签可以定义网页的标题、段落、链接、图像、表格等元素。
HTML的主要特点包括:
HTML示例代码片段:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个示例段落。</p>
<img src="image.jpg" alt="示例图片">
<a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>
XHTML是HTML的扩展版本,属于XML的一个应用。它是对HTML进行了严格的重写和规范,更加严谨和可读性更好。XHTML旨在使HTML更加符合XML标准。
XHTML的主要特点包括:
XHTML示例代码片段:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个示例段落。</p>
<img src="image.jpg" alt="示例图片" />
<a href="https://www.example.com">点击这里</a>访问示例网站。
</body>
</html>
DHTML是一种结合了HTML、CSS和JavaScript的技术,用于创建动态和交互式的网页。通过使用JavaScript和CSS,可以在网页上实现动态效果,例如动画、交互式表单、内容更改等。
DHTML的主要特点包括:
DHTML示例代码片段:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<script src="script.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 0.5s;
}
.box:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="changeText()">点击我</button>
<p id="message">这是一个示例文本。</p>
<script>
function changeText() {
document.getElementById("message").textContent = "文本已更改。";
}
</script>
</body>
</html>
总结: