小狮博客
一、HTML（超文本标记语言）
-
基本结构
- 了解 HTML 文档的基本框架，包括
<!DOCTYPE html>声明，<html>、<head>和<body>标签。例如：<!DOCTYPE html>：声明文档类型为 HTML5。<html>：根元素，所有其他 HTML 元素都包含在这个元素中。<head>：包含文档的元数据，如标题（通过<title>标签）、字符编码（通过<meta charset="UTF - 8">）等。<body>：包含文档的可见内容，如文本、图像、链接等。
- 掌握常用的 HTML 标签，如标题标签（
<h1>–<h6>）、段落标签（<p>）、列表标签（<ul>、<ol>、<li>）、图像标签（<img>）和链接标签（<a>）。例如：<h1>这是一个一级标题</h1>：会显示较大的标题文本。<p>这是一个段落。</p>：用于定义一个段落。<ul><li>项目 1</li><li>项目 2</li></ul>：创建一个无序列表，包含两个列表项。
- 了解 HTML 文档的基本框架，包括
-
语义化标签
- 学习语义化 HTML 标签，如
<header>（定义文档或区节的页眉）、<nav>（定义导航链接）、<article>（定义独立的内容）、<section>（定义文档中的节）、<footer>（定义文档或区节的页脚）等。这些标签有助于提高网页的可读性和可访问性。例如：<header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li></ul></nav></header>：定义了网站的页眉部分，包含标题和导航链接。
- 学习语义化 HTML 标签，如
-
表单和输入元素
- 了解如何创建表单，包括表单标签（
<form>）和各种输入元素，如文本输入框（<input type="text">）、密码输入框（<input type="password">）、单选按钮（<input type="radio">）、复选框（<input type="checkbox">）和下拉列表（<select>）。例如：<form><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="password">密码：</label><input type="password" id="password" name="password"><br><input type="submit" value="提交"></form>：创建了一个简单的登录表单，包含姓名和密码输入框以及一个提交按钮。
- 了解如何创建表单，包括表单标签（
推荐课程
- 《HTML入门课程》
二、CSS（层叠样式表）
-
选择器
- 掌握 CSS 选择器，包括元素选择器（通过元素名称选择）、类选择器（通过类名选择，如
.class - name）、ID 选择器（通过 ID 名称选择，如#id - name）和属性选择器（根据元素的属性进行选择，如[type="text"]）。例如：p {color: red;}：将所有段落文本颜色设置为红色。.highlight {background - color: yellow;}：为具有类名 “highlight” 的元素设置背景颜色为黄色。#header {text - align: center;}：将 ID 为 “header” 的元素中的文本居中对齐。
- 掌握 CSS 选择器，包括元素选择器（通过元素名称选择）、类选择器（通过类名选择，如
-
样式属性
- 学习常用的 CSS 样式属性，如颜色（
color、background - color）、字体（font - family、font - size、font - weight）、边距（margin）、内边距（padding）、边框（border）和布局属性（display、position、float等）。例如：body {font - family: Arial, sans - serif; margin: 0; padding: 0;}：将页面主体的字体设置为 Arial 或无衬线字体，并将边距和内边距设置为 0。.box {width: 200px; height: 100px; border: 1px solid black; margin: 10px;}：定义了一个宽度为 200 像素、高度为 100 像素的盒子，带有 1 像素的黑色边框，边距为 10 像素。
- 学习常用的 CSS 样式属性，如颜色（
- 盒模型
- 理解 CSS 盒模型，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。知道如何通过调整这些属性来控制元素的大小和间距。例如：
div {width: 300px; padding: 20px; border: 5px solid blue; margin: 10px;}：这个 div 元素的总宽度为 300px（内容宽度） + 2 × 20px（左右内边距） + 2 × 5px（左右边框） + 2 × 10px（左右外边距） = 370px。
- 理解 CSS 盒模型，包括内容（content）、内边距（padding）、边框（border）和外边距（margin）。知道如何通过调整这些属性来控制元素的大小和间距。例如：
推荐课程
- 《CSS 入门课程》
三、JavaScript
-
基本语法
- 了解 JavaScript 的基本语法，包括变量声明（
var、let、const）、数据类型（如数字、字符串、布尔值、对象、数组等）、运算符（算术运算符、比较运算符、逻辑运算符等）和控制结构（if语句、for循环、while循环等）。例如：let name = "张三";：声明一个变量 name 并赋值为 “张三”。if (age >= 18) {console.log("成年人");} else {console.log("未成年人");}：根据年龄判断是否为成年人。
- 了解 JavaScript 的基本语法，包括变量声明（
-
函数
- 学习如何定义和调用函数。函数是 JavaScript 中的代码块，可以执行特定的任务。例如：
function greet(name) {console.log("你好，" + name + "!");}greet("李四");：定义了一个 greet 函数，接收一个参数 name，并输出问候语，然后调用该函数，传入参数 “李四”。
- 学习如何定义和调用函数。函数是 JavaScript 中的代码块，可以执行特定的任务。例如：
- DOM 操作
- 掌握如何通过 JavaScript 操作文档对象模型（DOM）。这包括获取元素（如
document.getElementById()、document.querySelector()）、修改元素内容（如innerHTML属性）、添加和删除元素、处理事件（如点击事件click、鼠标悬停事件mouseover等）。例如：document.getElementById("demo").innerHTML = "Hello JavaScript!";：获取 ID 为 “demo” 的元素，并将其内容修改为 “Hello JavaScript!”。button.addEventListener("click", function() {alert("按钮被点击了!");});：为按钮添加一个点击事件监听器，当按钮被点击时弹出一个警告框。
- 掌握如何通过 JavaScript 操作文档对象模型（DOM）。这包括获取元素（如
推荐课程
四、后端语言（如 Python、Node.js 等）基础（如果需要开发动态网站）
-
Python 基础（以 Python 为例）
- 了解 Python 的基本语法，包括变量、数据类型（如列表、字典、元组等）、函数、模块导入等。例如：
name = "王五"numbers = [1, 2, 3, 4, 5]def add(a, b):return a + b：定义了一个变量 name，一个列表 numbers 和一个 add 函数。
- 学习 Python 的 Web 框架，如 Flask 或 Django。以 Flask 为例，了解如何创建一个简单的 Web 应用，包括路由（通过
@app.route装饰器）和视图函数。例如：from flask import Flaskapp = Flask(__name__)@app.route("/")def home():return "Hello, Flask!"if __name__ == "__main__":app.run()：创建了一个简单的 Flask 应用，当访问根路径时返回 “Hello, Flask!”。
推荐课程
- 了解 Python 的基本语法，包括变量、数据类型（如列表、字典、元组等）、函数、模块导入等。例如：
- Node.js 基础（如果选择 Node.js 作为后端）
- 掌握 Node.js 的基本概念，如非阻塞 I/O 和事件驱动。了解如何使用 Node.js 创建一个简单的 HTTP 服务器。例如：
const http = require('http');const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content - Type', 'text/plain');res.end('Hello Node.js\n');});server.listen(3000, '127.0.0.1', () => {console.log('服务器运行在 http://127.0.0.1:3000/');});：创建了一个监听在 3000 端口的 HTTP 服务器，当客户端请求时返回 “Hello Node.js”。
- 掌握 Node.js 的基本概念，如非阻塞 I/O 和事件驱动。了解如何使用 Node.js 创建一个简单的 HTTP 服务器。例如：
推荐课程
五、数据库基础（如果网站需要数据存储）
-
关系型数据库（如 MySQL）
- 了解关系型数据库的基本概念，如表、字段、主键、外键等。学习如何使用 SQL（结构化查询语言）进行数据的插入（
INSERT INTO）、查询（SELECT）、更新（UPDATE）和删除（DELETE）操作。例如：CREATE TABLE users(id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50), age INT);：创建一个 users 表，包含 id（主键，自动递增）、name（字符串类型）和 age（整数类型）字段。INSERT INTO users(name, age) VALUES('赵六', 25);：向 users 表中插入一条记录。SELECT * FROM users WHERE age > 20;：查询年龄大于 20 的用户。
推荐课程
- 了解关系型数据库的基本概念，如表、字段、主键、外键等。学习如何使用 SQL（结构化查询语言）进行数据的插入（
- 非关系型数据库（如 MongoDB）
- 如果使用非关系型数据库，了解其基本概念，如文档、集合等。学习如何使用 MongoDB 的查询语言进行数据操作，如插入文档（
insertOne、insertMany）、查询文档（find）、更新文档（updateOne、updateMany）和删除文档（deleteOne、deleteMany）。例如：db.users.insertOne({name: "钱七", age: 30})：在 users 集合中插入一个文档。db.users.find({age: {$gt: 25}})：查询年龄大于 25 的文档。
- 如果使用非关系型数据库，了解其基本概念，如文档、集合等。学习如何使用 MongoDB 的查询语言进行数据操作，如插入文档（