← 返回教育专区

Web 开发基础教程

第一章：互联网与 Web 工作原理

1.1 互联网基础架构

客户端-服务器模型：

DNS 域名系统：

步骤说明
1浏览器缓存查找
2操作系统缓存查找
3递归 DNS 服务器查询
4根域名 → 顶级域名 → 权威域名服务器
5返回 IP 地址

1.2 HTTP 协议

请求方法：

方法用途特点
GET获取资源幂等、可缓存
POST提交数据非幂等
PUT更新资源（全量）幂等
PATCH更新资源（部分）非幂等
DELETE删除资源幂等

状态码：

  • 200 OK — 请求成功
  • 301 Moved Permanently — 永久重定向
  • 304 Not Modified — 使用缓存
  • 400 Bad Request — 请求格式错误
  • 403 Forbidden — 无权限
  • 404 Not Found — 资源不存在
  • 500 Internal Server Error — 服务器错误

第二章：HTML5 核心

2.1 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <header>页头</header>
  <nav>导航</nav>
  <main>
    <article>文章</article>
    <aside>侧边栏</aside>
  </main>
  <footer>页脚</footer>
</body>
</html>

2.2 语义化标签

  • /
    — 页头/页脚
  • — 页面主体（唯一）
  • — 独立内容块
  • — 主题分组
  • +
    — 图表与说明
  • — 高亮文本
  • — 时间日期

2.3 表单

<form action="/api/submit" method="POST">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  
  <select name="grade">
    <option value="10">高一</option>
    <option value="11">高二</option>
    <option value="12">高三</option>
  </select>
  
  <button type="submit">提交</button>
</form>

第三章：CSS3 样式

3.1 选择器

/* 基础选择器 */
.class { }        /* 类选择器 */
#id { }           /* ID 选择器 */
element { }       /* 标签选择器 */
[attr="value"] { } /* 属性选择器 */

/* 组合选择器 */
.parent .child { }  /* 后代 */
.parent > .child { } /* 直接子代 */
.sibling + .next { } /* 紧邻兄弟 */
.sibling ~ .after { } /* 后续兄弟 */

/* 伪类 */
:hover { }         /* 鼠标悬停 */
:focus { }         /* 获得焦点 */
:nth-child(2n) { } /* 偶数位 */
:first-child { }   /* 第一个 */

3.2 Flexbox 布局

.container {
  display: flex;
  flex-direction: row;      /* 主轴方向 */
  justify-content: center;  /* 主轴对齐 */
  align-items: center;      /* 交叉轴对齐 */
  flex-wrap: wrap;          /* 换行 */
  gap: 16px;                /* 间距 */
}

.item {
  flex: 1;          /* 弹性增长 */
  flex-basis: 200px; /* 基础宽度 */
  order: 2;         /* 排列顺序 */
}

3.3 Grid 布局

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid-item {
  grid-column: span 2;  /* 跨两列 */
  grid-row: span 1;
}

3.4 响应式设计

/* 媒体查询 */
@media (max-width: 768px) {
  .container { flex-direction: column; }
  .sidebar { display: none; }
}

/* 移动端优先 */
.card { width: 100%; }
@media (min-width: 768px) {
  .card { width: 50%; }
}
@media (min-width: 1024px) {
  .card { width: 33.33%; }
}

第四章：JavaScript 基础

4.1 变量与数据类型

// 变量声明
let name = '张三';       // 可重新赋值
const PI = 3.14159;      // 常量
var legacy = '旧语法';   // 避免使用

// 数据类型
typeof 42           // "number"
typeof 'hello'      // "string"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" (历史 bug)
typeof {}           // "object"
typeof []           // "object"
Array.isArray([])   // true

4.2 DOM 操作

// 查询元素
const el = document.querySelector('.card');
const all = document.querySelectorAll('.card');

// 修改内容
el.textContent = '新文本';
el.innerHTML = '<strong>加粗</strong>';

// 修改样式
el.style.color = 'red';
el.classList.add('active');
el.classList.toggle('hidden');

// 事件监听
el.addEventListener('click', (event) => {
  console.log('被点击了', event.target);
});

// 创建元素
const div = document.createElement('div');
div.textContent = '新元素';
document.body.appendChild(div);

4.3 Fetch API

// GET 请求
async function loadData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error);
  }
}

// POST 请求
async function submitForm(formData) {
  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData),
  });
  return response.json();
}

第五章：实战项目

5.1 个人主页

需求：用 HTML/CSS/JS 构建响应式个人主页

  • 导航栏（固定顶部）
  • 自我介绍区域
  • 项目展示卡片（Grid 布局）
  • 联系表单
  • 移动端适配

5.2 Todo 应用

核心功能：

  • 添加/删除/标记完成
  • 本地存储（localStorage）
  • 筛选（全部/未完成/已完成）
  • 拖拽排序

5.3 天气查询

技术要点：

  • 调用公开天气 API
  • 异步请求与错误处理
  • 动态更新 DOM
  • 地理位置定位

学习资源

← 返回教育专区