sync from local backup
This commit is contained in:
chunyu
@@ -0,0 +1,42 @@
|
||||
# HTML 基础结构
|
||||
|
||||
## 学习目标
|
||||
- 理解 HTML 的作用和基本概念
|
||||
- 掌握 HTML 文档的基本结构
|
||||
- 熟悉常用的 HTML 标签
|
||||
|
||||
## 什么是 HTML？
|
||||
|
||||
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它使用标签来描述网页的结构和内容。
|
||||
|
||||
## HTML 文档结构
|
||||
|
||||
```html
|
||||
<!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>
|
||||
<h1>欢迎来到我的网页</h1>
|
||||
<p>这是一个段落。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 常用标签
|
||||
|
||||
| 标签 | 说明 |
|
||||
|------|------|
|
||||
| `<h1>` ~ `<h6>` | 标题标签 |
|
||||
| `<p>` | 段落标签 |
|
||||
| `<a>` | 链接标签 |
|
||||
| `<img>` | 图片标签 |
|
||||
| `<div>` | 块级容器 |
|
||||
| `<span>` | 行内容器 |
|
||||
|
||||
## 动手练习
|
||||
|
||||
尝试创建一个包含标题、段落和个人简介的简单网页。
|
||||
@@ -0,0 +1,44 @@
|
||||
# HTML 表单与多媒体
|
||||
|
||||
## 学习目标
|
||||
- 掌握表单元素
|
||||
- 学会插入图片和视频
|
||||
- 理解语义化标签
|
||||
|
||||
## 表单元素
|
||||
|
||||
```html
|
||||
<form action="/submit" method="post">
|
||||
<input type="text" name="username" placeholder="用户名">
|
||||
<input type="password" name="password" placeholder="密码">
|
||||
<input type="email" name="email" placeholder="邮箱">
|
||||
<select name="city">
|
||||
<option value="beijing">北京</option>
|
||||
<option value="shanghai">上海</option>
|
||||
</select>
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
## 多媒体标签
|
||||
|
||||
```html
|
||||
<img src="image.jpg" alt="图片描述">
|
||||
<video src="video.mp4" controls></video>
|
||||
<audio src="audio.mp3" controls></audio>
|
||||
```
|
||||
|
||||
## 语义化标签
|
||||
|
||||
| 标签 | 说明 |
|
||||
|------|------|
|
||||
| `<header>` | 页面头部 |
|
||||
| `<nav>` | 导航栏 |
|
||||
| `<main>` | 主内容区 |
|
||||
| `<footer>` | 页脚 |
|
||||
|
||||
## 动手练习
|
||||
|
||||
1. 制作用户注册表单
|
||||
2. 在页面中插入图片和视频
|
||||
3. 使用语义化标签重构页面
|
||||
@@ -0,0 +1,43 @@
|
||||
# CSS 选择器与样式
|
||||
|
||||
## 学习目标
|
||||
- 理解 CSS 的作用
|
||||
- 掌握 CSS 选择器
|
||||
- 学会使用常见样式属性
|
||||
|
||||
## CSS 语法
|
||||
|
||||
```css
|
||||
选择器 {
|
||||
属性名: 值;
|
||||
属性名: 值;
|
||||
}
|
||||
```
|
||||
|
||||
## 选择器类型
|
||||
|
||||
| 选择器 | 说明 | 示例 |
|
||||
|--------|------|------|
|
||||
| 元素选择器 | 选中所有该元素 | `p { }` |
|
||||
| 类选择器 | 选中 class 属性 | `.box { }` |
|
||||
| ID 选择器 | 选中 id 属性 | `#header { }` |
|
||||
| 后代选择器 | 选中后代元素 | `div p { }` |
|
||||
|
||||
## 常用属性
|
||||
|
||||
```css
|
||||
.box {
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
```
|
||||
|
||||
## 动手练习
|
||||
|
||||
1. 为之前的 HTML 页面添加样式
|
||||
2. 使用不同选择器设置样式
|
||||
3. 实现一个卡片组件
|
||||
@@ -0,0 +1,49 @@
|
||||
# CSS 布局与响应式
|
||||
|
||||
## 学习目标
|
||||
- 掌握 Flexbox 布局
|
||||
- 学会 Grid 布局
|
||||
- 理解响应式设计
|
||||
|
||||
## Flexbox 布局
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
## Grid 布局
|
||||
|
||||
```css
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
## 响应式设计
|
||||
|
||||
```css
|
||||
/* 移动端优先 */
|
||||
.box { width: 100%; }
|
||||
|
||||
/* 平板 */
|
||||
@media (min-width: 768px) {
|
||||
.box { width: 50%; }
|
||||
}
|
||||
|
||||
/* 桌面 */
|
||||
@media (min-width: 1024px) {
|
||||
.box { width: 33.33%; }
|
||||
}
|
||||
```
|
||||
|
||||
## 动手练习
|
||||
|
||||
1. 使用 Flexbox 实现导航栏
|
||||
2. 使用 Grid 实现图片画廊
|
||||
3. 制作响应式登录页面
|
||||
@@ -0,0 +1,46 @@
|
||||
# JavaScript 基础语法
|
||||
|
||||
## 学习目标
|
||||
- 了解 JavaScript 的作用
|
||||
- 掌握变量和数据类型
|
||||
- 学会函数定义
|
||||
|
||||
## JavaScript 简介
|
||||
|
||||
JavaScript 是一种轻量级编程语言，用于网页交互开发。
|
||||
|
||||
## 变量声明
|
||||
|
||||
```javascript
|
||||
let name = "小明"; // 可变变量
|
||||
const PI = 3.14159; // 常量
|
||||
// var 已不推荐使用
|
||||
```
|
||||
|
||||
## 数据类型
|
||||
|
||||
```javascript
|
||||
let str = "Hello"; // 字符串
|
||||
let num = 42; // 数字
|
||||
let bool = true; // 布尔
|
||||
let arr = [1, 2, 3]; // 数组
|
||||
let obj = { name: "Tom" }; // 对象
|
||||
```
|
||||
|
||||
## 函数定义
|
||||
|
||||
```javascript
|
||||
// 函数声明
|
||||
function greet(name) {
|
||||
return `你好，${name}！`;
|
||||
}
|
||||
|
||||
// 箭头函数
|
||||
const add = (a, b) => a + b;
|
||||
```
|
||||
|
||||
## 动手练习
|
||||
|
||||
1. 声明不同类型的变量
|
||||
2. 编写计算两数之和的函数
|
||||
3. 使用箭头函数处理数组
|
||||
@@ -0,0 +1,47 @@
|
||||
# DOM 操作与事件
|
||||
|
||||
## 学习目标
|
||||
- 理解 DOM 树结构
|
||||
- 掌握元素选择方法
|
||||
- 学会事件处理
|
||||
|
||||
## 选择元素
|
||||
|
||||
```javascript
|
||||
document.getElementById("header");
|
||||
document.querySelector(".title");
|
||||
document.querySelectorAll("p");
|
||||
```
|
||||
|
||||
## 修改内容
|
||||
|
||||
```javascript
|
||||
const el = document.querySelector("h1");
|
||||
el.textContent = "新标题";
|
||||
el.style.color = "red";
|
||||
el.classList.add("active");
|
||||
```
|
||||
|
||||
## 事件处理
|
||||
|
||||
```javascript
|
||||
const btn = document.querySelector("button");
|
||||
btn.addEventListener("click", function() {
|
||||
console.log("按钮被点击了！");
|
||||
});
|
||||
```
|
||||
|
||||
## 常见事件
|
||||
|
||||
| 事件 | 说明 |
|
||||
|------|------|
|
||||
| `click` | 点击事件 |
|
||||
| `mouseover` | 鼠标悬停 |
|
||||
| `keydown` | 键盘按下 |
|
||||
| `submit` | 表单提交 |
|
||||
|
||||
## 动手练习
|
||||
|
||||
1. 实现点击按钮改变背景色
|
||||
2. 制作图片轮播效果
|
||||
3. 实现表单验证功能
|
||||
Reference in New Issue
Block a user