HTML5：构建现代、交互式的Web应用
warning:
这篇文章距离上次修改已过235天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web App</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Welcome to My Web App</h1>
<p id="greeting">Hello, guest!</p>
<button onclick="changeGreeting()">Click Me</button>
<script>
function changeGreeting() {
var greetingElement = document.getElementById('greeting');
if (greetingElement.textContent === 'Hello, guest!') {
greetingElement.textContent = 'Hello, user!';
} else {
greetingElement.textContent = 'Hello, guest!';
}
}
</script>
</body>
</html>这个简单的HTML5示例展示了如何创建一个包含交互元素的Web应用。页面上有一段文本和一个按钮，点击按钮会改变段落中的问候语。使用JavaScript函数changeGreeting来实现这个功能，演示了基本的DOM操作。这个例子也展示了如何使用CSS来增强按钮的视觉效果，提升用户体验。
评论已关闭