HTML、CSS和JavaScript是实现网页动态交互的三大关键技术。HTML用于创建网页的结构，CSS用于美化网页，而JavaScript则用于实现网页的动态交互功能。通过结合这三者，可以创建出具有高度互动性和丰富视觉效果的网页。
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言，HTML 使用标签来描述网页的不同部分（如标题、段落、列表等）。
在 HTML 中，标签由尖括号包围，比如<p> 用于表示段落，<h1> 到<h6> 用于表示标题，标签通常是成对出现的，第一个标签是开始标签，第二个标签是结束标签。
一个简单的 HTML 文档可以这样写：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面。</p>
</body>
</html>在这个例子中，<!DOCTYPE html> 声明了这个文档是一个 HTML5 文档，<html> 标签是整个文档的根元素，<head> 标签包含了文档的元数据，如标题，<title> 标签定义了网页的标题，<body> 标签包含了网页的内容，<h1> 和<p> 标签分别表示标题和段落。
HTML 本身只能创建静态的网页，要创建动态的网页，我们需要使用 JavaScript（一种脚本语言）和 CSS（一种样式表语言）。
JavaScript 可以使网页具有交互性，比如响应用户的点击事件，改变元素的内容或样式等，JavaScript 可以直接嵌入到 HTML 中，也可以保存在一个单独的 .js 文件中，然后在 HTML 中通过<script> 标签引用。
CSS 用于描述网页的布局和样式，比如颜色、字体、间距等，CSS 可以通过内联样式、内部样式表或外部样式表的方式添加到 HTML 中。
我们可以使用 JavaScript 和 CSS 创建一个按钮，当用户点击这个按钮时，网页的背景颜色会发生变化：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
#changeColorButton {
padding: 10px 20px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面。</p>
<button id="changeColorButton" onclick="changeBackgroundColor()">点击我改变背景颜色</button>
<script>
function changeBackgroundColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>在这个例子中，我们首先用 CSS 定义了一个按钮的样式，然后使用 JavaScript 编写了一个函数，当用户点击按钮时，这个函数会被调用，改变网页的背景颜色。
