Web期末复习指南
一、前端基础
前端开发主要涵盖HTML、CSS和JavaScript三个核心技术。
1.1 HTML
HTML（超文本标记语言）是构建网页的基础。它使用标记来组织和展示网页内容。常见的HTML标签包括：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">访问链接</a>
</body>
</html>
1.2 CSS
CSS（层叠样式表）用于美化网页，控制网页的布局和视觉效果。以下是一些CSS基础用法：
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
font-size: 16px;
line-height: 1.5;
}
可以通过<link>标签在HTML中引入CSS文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
1.3 JavaScript
JavaScript是为网页添加交互效果的脚本语言。以下是一个简单的JavaScript代码示例：
<script>
function greet() {
alert("欢迎来到我的网页!");
}
</script>
<button onclick="greet()">点击我</button>
二、前端框架与库
在实际开发中，为了提高效率，常用一些前端框架和库，如React、Vue.js和Angular。
2.1 React
React是一个用于构建用户界面的JavaScript库。通过组件化的方式，可以高效地管理UI状态。以下是一个简单的React组件：
import React from 'react';
function App() {
return <h1>欢迎使用React</h1>;
}
export default App;
2.2 Vue.js
Vue.js是一个渐进式框架，易于上手。通过指令和组件，可以快速构建应用。
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '欢迎使用Vue.js'
}
});
</script>
三、后端基础
后端开发主要涉及数据库和服务器的处理，常用的技术有Node.js、Express等。
3.1 Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行时，用于构建高效、可伸缩的网络应用。
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!\n');
});
server.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000/');
});
3.2 Express框架
Express是Node.js的一种Web应用框架，简化了创建服务器的流程。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('欢迎来到Express应用！');
});
app.listen(3000, () => {
console.log('服务器运行在 http://localhost:3000/');
});
四、数据库基础
常用的数据库有MySQL、MongoDB等，数据的存储与取用是后端开发的重要环节。
4.1 MongoDB示例
MongoDB是一个非关系型数据库，使用文档存储数据。以下是一个简单的MongoDB连接示例：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });
const Schema = mongoose.Schema;
const UserSchema = new Schema({
name: String,
age: Number
});
const User = mongoose.model('User', UserSchema);
const user = new User({ name: '张三', age: 25 });
user.save().then(() => console.log('用户已保存！'));
五、总结
这份复习指南概述了Web开发的基础知识，包括前端技术（HTML、CSS、JavaScript）、前端框架（React和Vue.js）、后端技术（Node.js和Express）以及简单的数据库操作（MongoDB）。在复习时，建议结合实际项目进行练习，加深对各个知识点的理解与应用。
最后，祝大家在期末考试中取得优异的成绩！
