浅谈HTML、CSS和JS怎么变成页面
warning:
这篇文章距离上次修改已过192天,其中的内容可能已经有所变动。
HTML、CSS和JS组合起来可以创建一个动态的网页。
HTML (Hypertext Markup Language) 负责网页的结构,CSS (Cascading Style Sheets) 负责网页的样式,JS (JavaScript) 负责网页的行为。
以下是一个简单的HTML、CSS和JS结合的例子:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Page</title>
<style>
.highlight { color: red; }
</style>
</head>
<body>
<h1 id="greeting">Hello, World!</h1>
<button onclick="changeText()">Click Me!</button>
<script>
function changeText() {
document.getElementById('greeting').className = 'highlight';
}
</script>
</body>
</html>
在这个例子中,HTML定义了页面的结构,包括一个标题和一个按钮。CSS定义了当标题被点击后如何改变样式(这里是改变颜色)。JS定义了当按钮被点击时要执行的函数,该函数改变了标题元素的类,从而应用了CSS规则。
当你打开这个页面并点击按钮时,标题文字的颜色会变成红色。这就是HTML、CSS和JS结合创建动态网页的一个简单例子。
评论已关闭