以下是一些网页制作中常用的HTML、CSS和JavaScript代码示例:
### HTML 基础结构
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
### CSS 样式设置
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}
```
### JavaScript 基础操作
```javascript
// 弹出对话框
alert("Hello, World!");
// 控制台输出
console.log("This is a message in the console.");
// 获取元素并修改内容
document.getElementById("myElement")[xss_clean] = "New content";
```
### 响应式设计
```css
/* 在不同屏幕尺寸下修改样式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
```
### 简单交互效果
```html
<!-- 切换图片 -->
<button onclick="changeImage()">Change Image</button>
<img id="myImage" src="image1.jpg" alt="Image">
<script>
function changeImage() {
var img = document.getElementById("myImage");
img.src = "image2.jpg";
}
</script>
```
这些是网页制作中常用的基础代码示例,您可以根据需要进行修改和扩展,实现不同的功能和效果。