wwt｜逻辑与碎片

首页 / 知识库 / 0基础入门-阅读资料 / 0基础-前端入门

零基础前端入门教程

面向 AI 应用开发课程，帮助零基础同学最快速度掌握 HTML + CSS + JS + Vue 核心技能。

教程目录

章节文件内容
第一章第一章-HTML.mdHTML — 搭建页面骨架
第二章第二章-CSS.mdCSS — 给页面化妆
第三章第三章-JavaScript.mdJavaScript — 让页面动起来
第四章第四章-Vue.mdVue — 现代前端开发框架
第五章第五章-综合实战.md综合实战 — 用 Vue 搭建 AI 对话应用
学习路线：HTML（骨架）→ CSS（样式）→ JS（逻辑）→ Vue（框架）→ 实战项目

以下是各章节大纲概览：

第一章：HTML — 搭建页面骨架

1.1 认识 HTML

  • 什么是 HTML？— 网页的”骨架”
  • 浏览器如何渲染一个网页（地址栏输入 → 看到页面）
  • 第一个 HTML 文件：创建 index.html，用浏览器打开

1.2 HTML 基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  <!-- 页面内容写在这里 -->
</body>
</html>
  • <!DOCTYPE html>、<html>、<head>、<body> 各自的作用

1.3 核心标签（只学最常用的）

类别标签用途
标题<h1> ~ <h6>大标题到小标题
段落<p>一段文字
链接<a href="">跳转到其他页面
图片<img src="" alt="">显示图片
列表<ul>/<ol> + <li>无序/有序列表
容器<div>通用块级容器（最常用）
行内容器<span>通用行内容器
按钮<button>可点击的按钮
输入框<input>用户输入

1.4 标签的属性

  • id：唯一标识
  • class：分类标识（CSS 用得最多）
  • style：行内样式（了解即可）

1.5 实战练习

  • 动手写一个个人简介页面（标题 + 照片 + 自我介绍 + 链接）

第二章：CSS — 给页面化妆

2.1 CSS 是什么

  • HTML 管结构，CSS 管样式（颜色、大小、位置……）
  • 三种引入方式：行内样式 / <style> 标签 / 外部文件（推荐）

2.2 选择器（只学三个）

/* 标签选择器 */
p { color: red; }

/* 类选择器（最常用） */
.card { background: #fff; }

/* ID 选择器 */
#header { height: 60px; }

2.3 最常用的样式属性

文字相关：

  • color — 文字颜色
  • font-size — 字体大小
  • font-weight — 加粗
  • text-align — 对齐方式

盒模型（重点）：

  • width / height — 宽高
  • padding — 内边距
  • margin — 外边距
  • border — 边框
  • border-radius — 圆角

背景：

  • background-color — 背景色
  • background-image — 背景图

2.4 Flex 布局（核心中的核心）

现代前端布局只需要掌握 Flex，能解决 90% 的布局需求。

.container {
  display: flex;
  justify-content: center;  /* 水平方向对齐 */
  align-items: center;      /* 垂直方向对齐 */
  gap: 10px;                /* 子元素间距 */
}
  • flex-direction: row（横排）/ column（竖排）
  • justify-content: flex-start / center / space-between
  • align-items: flex-start / center / stretch
  • flex-wrap: 是否换行

2.5 实战练习

  • 用 Flex 布局做一个卡片列表页面

第三章：JavaScript — 让页面动起来

3.1 JS 是什么

  • HTML 是骨架，CSS 是皮肤，JS 是大脑
  • 在 HTML 中引入 JS：<script src="app.js"></script>
  • console.log() — 你的第一个调试工具

3.2 变量与数据类型

let name = "小明";       // 字符串
let age = 20;            // 数字
let isStudent = true;    // 布尔值
const PI = 3.14;         // 常量，不可修改
  • let（可变）vs const（不可变）— 忘掉 var

3.3 函数

// 定义函数
function greet(name) {
  return "你好，" + name;
}

// 箭头函数（更简洁，现代写法）
const greet = (name) => "你好，" + name;

3.4 条件判断

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

3.5 数组与循环

const fruits = ["苹果", "香蕉", "橘子"];

// 遍历数组（最常用）
fruits.forEach((item) => {
  console.log(item);
});

3.6 对象

const user = {
  name: "小明",
  age: 20,
  skills: ["HTML", "CSS", "JS"]
};

console.log(user.name);  // "小明"

3.7 DOM 操作（JS 操控页面的核心）

// 获取元素
const btn = document.querySelector("#myBtn");
const title = document.querySelector(".title");

// 修改内容
title.textContent = "新标题";

// 修改样式
title.style.color = "red";

// 监听事件（点击、输入……）
btn.addEventListener("click", () => {
  alert("你点击了按钮！");
});
  • document.querySelector() — 获取页面元素
  • .textContent — 修改文字
  • .style — 修改样式
  • .addEventListener() — 监听用户操作

3.8 实战练习

  • 做一个”点击按钮切换主题色”的小功能

第四章：Vue — 现代前端开发框架

4.1 为什么要学 Vue

  • 原生 JS 操作 DOM 太繁琐，Vue 帮你自动同步数据和页面
  • 核心思想：数据驱动 — 你只管改数据，页面自动更新
  • Vue 在国内生态最好，AI 应用开发的主流选择

4.2 环境搭建

  • 安装 Node.js（npm 包管理器）
  • 用 npm create vue@latest 创建项目
  • 项目目录结构一览：src/、App.vue、main.js
  • npm run dev 启动开发服务器

4.3 Vue 单文件组件（.vue 文件）

<template>
  <!-- HTML 结构 -->
  <div class="app">
    <h1>{{ title }}</h1>
  </div>
</template>

<script setup>
// JS 逻辑
import { ref } from 'vue'
const title = ref('你好，Vue！')
</script>

<style scoped>
/* CSS 样式，scoped 表示只作用于当前组件 */
.app { text-align: center; }
</style>
  • 一个 .vue 文件 = HTML + JS + CSS 三合一
  • <script setup> 是 Vue 3 最简洁的写法

4.4 响应式数据（Vue 的核心）

import { ref, reactive } from 'vue'

// ref — 用于基本类型
const count = ref(0)
const message = ref('你好')

// reactive — 用于对象
const user = reactive({
  name: '小明',
  age: 20
})
  • 用 ref() 包裹的数据，修改后页面自动更新
  • 在 <script> 中访问用 .value，在 <template> 中直接用

4.5 模板语法（数据绑定到页面）

<template>
  <!-- 文本插值 -->
  <p>{{ message }}</p>

  <!-- 属性绑定 -->
  <img :src="imageUrl" />

  <!-- 事件绑定 -->
  <button @click="count++">点击了 {{ count }} 次</button>

  <!-- 双向绑定（输入框） -->
  <input v-model="message" />
</template>
  • {{ }} — 显示数据
  • :属性 — 动态绑定属性（v-bind 的缩写）
  • @事件 — 监听事件（v-on 的缩写）
  • v-model — 输入框和数据双向同步

4.6 条件渲染与列表渲染

<template>
  <!-- 条件：显示/隐藏 -->
  <p v-if="isLogin">欢迎回来！</p>
  <p v-else>请先登录</p>

  <!-- 列表：循环渲染 -->
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>
  • v-if / v-else — 条件显示
  • v-for — 循环渲染列表（必须加 :key）

4.7 组件化思维

App.vue（根组件）
├── NavBar.vue（导航栏）
├── ChatArea.vue（消息区域）
│   └── MessageBubble.vue（单条消息）
└── InputBar.vue（输入框）
  • 把页面拆成一个个组件，各管各的
  • 父组件通过 props 向子组件传数据
  • 子组件通过 emit 向父组件发消息
<!-- 父组件中使用子组件 -->
<MessageBubble :content="msg.text" :is-ai="msg.isAi" />
<!-- 子组件 MessageBubble.vue -->
<script setup>
defineProps({
  content: String,
  isAi: Boolean
})
</script>

<template>
  <div :class="isAi ? 'bubble-ai' : 'bubble-user'">
    {{ content }}
  </div>
</template>

4.8 生命周期与网络请求

import { onMounted, ref } from 'vue'

const data = ref(null)

onMounted(async () => {
  const res = await fetch('/api/data')
  data.value = await res.json()
})
  • onMounted — 组件加载完成后执行（最常用的生命周期钩子）
  • fetch() — 发送网络请求，获取后端数据

4.9 实战练习

  • 用 Vue 重写第三章的”切换主题色”功能，体会数据驱动的便利

第五章：综合实战 — 用 Vue 搭建 AI 对话应用

将前四章知识串联，用 Vue 搭建一个完整的 AI 对话页面。

5.1 项目初始化

  • npm create vue@latest ai-chat
  • 清理默认文件，搭建项目骨架

5.2 组件拆分

组件职责
App.vue整体布局（Flex 纵向排列）
NavBar.vue顶部导航栏
ChatArea.vue消息列表区域，循环渲染消息
MessageBubble.vue单条消息气泡（区分 AI / 用户）
InputBar.vue底部输入框 + 发送按钮

5.3 核心功能实现

  • 用 ref([]) 维护消息列表
  • v-for 渲染消息气泡
  • v-model 绑定输入框
  • @click 发送消息，更新消息列表
  • 页面自动滚动到最新消息

5.4 对接 AI 接口

  • 使用 fetch() 调用后端 AI 接口
  • 处理 loading 状态（发送中显示加载动画）
  • 将 AI 返回内容追加到消息列表

5.5 进阶优化（选学）

  • 流式响应：实现打字机效果（逐字显示 AI 回复）
  • Markdown 渲染：AI 回复支持代码块、列表等格式
  • 本地存储：使用 localStorage 保存聊天记录

附录：学习建议与工具

推荐工具

工具用途
VS Code / Cursor代码编辑器
浏览器开发者工具（F12）调试页面
Vue DevTools（浏览器插件）调试 Vue 组件和数据
AI 助手（Cursor / ChatGPT）遇到问题随时问

学习路线总结

HTML（骨架）→ CSS（样式）→ JS（逻辑）→ Vue（框架）→ 实战项目
   第一章        第二章       第三章       第四章        第五章

学习建议

  1. 不要背，要动手 — 每个知识点都跟着写一遍
  2. 善用 F12 — 浏览器开发者工具是前端最好的学习伙伴
  3. 善用 AI — 不懂就问 AI，让它解释代码、生成示例
  4. 先模仿，再创造 — 先照着写，能跑起来，再改成自己想要的
  5. 够用就好 — 本教程的内容足够支撑 AI 应用的前端开发
  6. Vue 官方文档很友好 — 遇到细节问题查 https://cn.vuejs.org

本教程配合 AI 应用开发课程使用，目标是用最短时间掌握前端核心技能，为后续 AI 应用开发打好基础。