mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
147 lines
4.5 KiB
Markdown
147 lines
4.5 KiB
Markdown
# 2. 网页开发基础
|
||
|
||
## 第一部分：HTTP协议（1小时）
|
||
|
||
### 任务1：http协议分析 (10分钟)
|
||
- **目标**：掌握http协议，理解http请求和响应的过程，以及http请求头和响应头的作用。
|
||
- **步骤**：
|
||
|
||
1. 在浏览器中打开开发者工具，选择Network选项卡。
|
||
2. 使用浏览器访问https://www.baidu.com/，观察浏览器的请求和响应过程。
|
||
3. 找到请求url为 https://www.baidu.com/ 的请求，查看请求头和响应头。找到这些字段值：
|
||
Request Method:
|
||
Status Code:
|
||
Content-Type:
|
||
4. 在页面的搜索框中， 输入： 临沂科技职业学院，观察浏览器的请求和响应过程。
|
||
5. 将网站提供搜索建议的URL记录下来，观察此URL请求对应的请求头、响应头、请求数据、响应数据数据。
|
||
-
|
||
- **评估**：将字段值填在上面步骤中。
|
||
|
||
### 任务2：http method： get put post delete (10分钟)
|
||
- **目标**：理解http method，理解get、put、post、delete的区别。
|
||
- **步骤**：
|
||
|
||
1. 在浏览器中打开开发者工具，选择Network选项卡。
|
||
2. 使用浏览器访问https://jsonplaceholder.typicode.com/
|
||
3. 点击页面上的如下图的连接，观察浏览器的请求和响应过程。
|
||
|
||
|
||
|
||
|
||
### 任务3： 自定义请求 (40分钟)
|
||
- **目标**：理解http method，能使用api工具测试web api。
|
||
- **步骤**：
|
||
|
||
1. idea中安装插件：Restful Api Tool
|
||
2. 在此插件中，自己按照任务2中的几个接口， 填写url和请求参数，点击发送请求，观察回应数据。
|
||
|
||
|
||
## 第二部分：HTML/CSS/JavaScript基础实践（4小时）
|
||
|
||
1. **HTML5标签使用**
|
||
- 使用HTML5的新标签（如`<header>`、`<nav>`、`<section>`、`<article>`等）构建页面结构。
|
||
- 练习使用HTML5的表单控件，如日期选择器、电子邮件验证等。
|
||
|
||
2. **CSS3样式和布局**
|
||
- 应用CSS3的新选择器，尝试不同的布局方式，如Flexbox和Grid。
|
||
|
||
3. **JavaScript基本语法和DOM操作**
|
||
- 实践变量声明、数据类型、条件语句、循环、函数等基本语法。
|
||
- 编写脚本来操作DOM，如添加元素、修改元素属性、绑定事件监听器等。
|
||
|
||
4. **综合练习：登录/注册页面**
|
||
- **目标**：设计并实现一个登录或注册页面，使用HTML5、CSS3和JavaScript。
|
||
- **步骤**：
|
||
1. **设计页面结构**：使用HTML5标签构建页面的基本结构。
|
||
2. **添加样式**：使用CSS3为页面添加样式，包括布局、背景、边框等。
|
||
3. **实现交互**：使用JavaScript添加交互功能，如表单验证、按钮点击事件等。
|
||
4. **扩展功能**：如果时间允许，可以考虑使用localStorage来保存用户的登录状态或偏好设置。
|
||
|
||
### 示例代码：登录页面
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Login Page</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
background-color: #f4f4f9;
|
||
}
|
||
.login-form {
|
||
width: 300px;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.login-form h2 {
|
||
text-align: center;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
}
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.form-group button {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background-color: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.form-group button:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-form">
|
||
<h2>Login</h2>
|
||
<div class="form-group">
|
||
<label for="username">Username</label>
|
||
<input type="text" id="username" placeholder="Enter your username">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">Password</label>
|
||
<input type="password" id="password" placeholder="Enter your password">
|
||
</div>
|
||
<div class="form-group">
|
||
<button onclick="validateForm()">Login</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function validateForm() {
|
||
const username = document.getElementById('username').value;
|
||
const password = document.getElementById('password').value;
|
||
|
||
if (username === '' || password === '') {
|
||
alert('Please fill in all fields.');
|
||
} else {
|
||
alert('Login successful!');
|
||
localStorage.setItem('isLoggedIn', 'true');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|