2. 网页开发基础

第一部分：HTTP协议（1小时）

任务1：http协议分析 (10分钟)

目标：掌握http协议，理解http请求和响应的过程，以及http请求头和响应头的作用。
步骤：

在浏览器中打开开发者工具，选择Network选项卡。
使用浏览器访问https://www.baidu.com/，观察浏览器的请求和响应过程。
找到请求url为 https://www.baidu.com/ 的请求，查看请求头和响应头。找到这些字段值： Request Method: Status Code: Content-Type:
在页面的搜索框中，输入：临沂科技职业学院，观察浏览器的请求和响应过程。
将网站提供搜索建议的URL记录下来，观察此URL请求对应的请求头、响应头、请求数据、响应数据数据。

评估：将字段值填在上面步骤中。

任务2：http method： get put post delete (10分钟)

目标：理解http method，理解get、put、post、delete的区别。
步骤：

在浏览器中打开开发者工具，选择Network选项卡。
使用浏览器访问https://jsonplaceholder.typicode.com/
点击页面上的如下图的连接，观察浏览器的请求和响应过程。

任务3：自定义请求 (40分钟)

目标：理解http method，能使用api工具测试web api。
步骤：

idea中安装插件：Restful Api Tool
在此插件中，自己按照任务2中的几个接口，填写url和请求参数，点击发送请求，观察回应数据。

第二部分：HTML/CSS/JavaScript基础实践（4小时）

HTML5标签使用
- 使用HTML5的新标签（如<header>、<nav>、<section>、<article>等）构建页面结构。
- 练习使用HTML5的表单控件，如日期选择器、电子邮件验证等。
CSS3样式和布局
- 应用CSS3的新选择器，尝试不同的布局方式，如Flexbox和Grid。
JavaScript基本语法和DOM操作
- 实践变量声明、数据类型、条件语句、循环、函数等基本语法。
- 编写脚本来操作DOM，如添加元素、修改元素属性、绑定事件监听器等。
练习题1：

我国古代数学家张丘建在《算经》中出了一道题“鸡翁一，值钱五；鸡母一，值钱三；鸡雏三，值钱一。百钱买百鸡，问鸡翁、鸡母、鸡雏各几何？”（假定每种鸡都必须至少有一只）

思路：设鸡翁、鸡母、鸡雏分别为x，y，z只，分析题目可以知道(1)5x+3y+z/3=100; z=100-x-y (2) 1<=x<20, 1<=y<33 。
综合练习：登录/注册页面
- 目标：设计并实现一个登录或注册页面，使用HTML5、CSS3和JavaScript。
- 步骤：
  1. 设计页面结构：使用HTML5标签构建页面的基本结构。
  2. 添加样式：使用CSS3为页面添加样式，包括布局、背景、边框等。
  3. 实现交互：使用JavaScript添加交互功能，如表单验证、按钮点击事件等。
  4. 扩展功能：如果时间允许，可以考虑使用localStorage来保存用户的登录状态或偏好设置。

示例代码：登录页面

<!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>

4.9 KiB Raw Blame History Unescape Escape

2. 网页开发基础

第一部分：HTTP协议（1小时）

任务1：http协议分析 (10分钟)

任务2：http method： get put post delete (10分钟)

任务3： 自定义请求 (40分钟)

第二部分：HTML/CSS/JavaScript基础实践（4小时）

示例代码：登录页面

4.9 KiB

Raw Blame History

任务3：自定义请求 (40分钟)