创建一个简单的HTML文档结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
创建一个表单:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">
</form>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
简单的事件处理:
<button id="myButton">Click me</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
</script>
操作DOM元素:
<div id="myDiv">This is a div.</div>
<script>
var myDiv = document.getElementById('myDiv');
myDiv.innerHTML = 'Content changed!';
myDiv.style.color = 'blue';
</script>