不用深入学习，看懂只需要理解基本概念

今天要聊什么

AI帮你写代码，生成但你总得知道它写了什么吧？基础

不用担心，我不会让你从头学编程。概念 今天只讲最基础的看懂概念，让你能看懂AI生成的生成代码。

就像：

你不需要懂汽车原理，基础但要知道油门刹车你不需要懂编程语法，概念但要知道HTML/CSS/JS是看懂干什么的

网页的三剑客

做网页需要三种语言：

HTML：结构（骨架）CSS：样式（皮肤）JavaScript：功能（大脑）

类比：盖房子

HTML = 房子的结构

墙在哪里门在哪里窗户在哪里

CSS = 房子的装修

墙刷什么颜色门是什么样式窗帘是什么颜色

JavaScript = 房子的电器

开关控制灯按钮控制门遥控器控制空调

HTML：结构

什么是HTML

HTML = HyperText Markup Language（超文本标记语言）

大白话：用标签来描述网页的结构。

基本语法

<标签名>内容</标签名>

例子：

<h1>这是生成标题</h1> <p>这是段落</p> <button>这是按钮</button>

常用标签

文本类：

<h1> 到 <h6>：标题（h1最大，h6最小）<p>：段落<span>：行内文本

容器类：

<div>：块级容器（独占一行）<section>：章节<article>：文章

交互类：

<button>：按钮<input>：输入框<a>：链接

列表类：

<ul>：无序列表<ol>：有序列表<li>：列表项

实例解析

<div class="calculator"> <div class="display">0</div> <div class="buttons"> <button>7</button> <button>8</button> <button>9</button> </div> </div>

翻译：

一个容器，基础类名是概念calculator里面有一个显示屏，类名是看懂display，显示0还有一个按钮区域，生成类名是基础buttons按钮区域里有3个按钮，分别是7、8、9

CSS：样式

什么是CSS

CSS = Cascading Style Sheets（层叠样式表）

大白话：给HTML元素设置样式。

基本语法

选择器 { 属性: 值; }

例子：

button { background: blue; color: white; border-radius: 10px; }

常用属性

颜色：

color：文字颜色background：背景颜色

大小：

width：宽度height：高度font-size：字体大小

间距：

margin：外边距padding：内边距

边框：

border：边框border-radius：圆角

布局：

display：显示方式flex：弹性布局grid：网格布局

实例解析

.calculator { background: white; border-radius: 20px; padding: 20px; box-shadow: 0 10px 50px rgba(0,0,0,0.3); } .display { font-size: 48px; text-align: right; padding: 20px; background: #f0f0f0; } button { width: 60px; height: 60px; font-size: 24px; border: none; border-radius: 10px; background: #e0e0e0; } button:hover { background: #d0d0d0; }

翻译：

calculator容器：白色背景，圆角20px，内边距20px，有阴影display显示屏：字体48px，右对齐，内边距20px，浅灰背景button按钮：60x60px，字体24px，无边框，圆角10px，灰色背景button悬停时：背景变深

JavaScript：功能

什么是JavaScript

JavaScript = 编程语言

大白话：让网页动起来，能响应用户操作。

基本概念

变量：存储数据

let name = "张三"; let age = 25;

函数：执行任务

function sayHello() { alert("你好！"); }

事件：响应操作

button.onclick = function() { alert("你点击了按钮"); }

实例解析

let currentValue = 0; let operator = ; let previousValue = ; function handleNumber(num) { if (currentValue === 0) { currentValue = num; } else { currentValue += num; } updateDisplay(); } function handleOperator(op) { operator = op; previousValue = currentValue; currentValue = 0; } function calculate() { let result; const prev = parseFloat(previousValue); const current = parseFloat(currentValue); if (operator === +) { result = prev + current; } else if (operator === -) { result = prev - current; } else if (operator === ×) { result = prev * current; } else if (operator === ÷) { result = prev / current; } currentValue = result.toString(); updateDisplay(); } function updateDisplay() { document.querySelector(.display).textContent = currentValue; }

翻译：

定义3个变量：当前值、运算符、前一个值handleNumber函数：处理数字输入handleOperator函数：处理运算符输入calculate函数：计算结果updateDisplay函数：更新显示

如何看懂代码

步骤1：看结构

先看HTML，了解页面结构：

有哪些部分每部分是什么它们的关系

步骤2：看样式

再看CSS，了解样式：

每部分长什么样用了什么颜色怎么布局的

步骤3：看功能

最后看JavaScript，了解功能：

有哪些功能怎么实现的事件怎么处理的

步骤4：运行测试

运行代码，边看边测试：

点击按钮看反应修改代码看变化理解代码逻辑

如何修改代码

修改文字

找到HTML：

<h1>计算器</h1>

改成：

<h1>我的计算器</h1>

修改颜色

找到CSS：

button { background: blue; }

改成：

button { background: red; }

修改功能

找到JavaScript：

function sayHello() { alert("你好"); }

改成：

function sayHello() { alert("欢迎使用"); }

调试技巧

技巧1：用Console

按F12打开开发者工具，看Console：

红色：错误黄色：警告蓝色：信息

技巧2：用console.log

在代码里加上：

console.log("当前值：", currentValue);

运行后在Console里能看到输出。

技巧3：断点调试

在开发者工具的Sources标签：

点击行号设置断点刷新页面代码会在断点处暂停可以查看变量值

技巧4：问AI

把错误信息复制给AI：

代码报错： Uncaught TypeError: Cannot read property value of null at script.js:15 帮我看看是什么问题

本篇总结

三剑客：

HTML：结构（骨架）CSS：样式（皮肤）JavaScript：功能（大脑）

看懂代码的步骤：

看HTML了解结构看CSS了解样式看JavaScript了解功能运行测试理解逻辑

记住：

不用深入学习只需要理解概念遇到问题问AI边做边学

下一篇预告

《实战项目1：做一个待办事项清单》

我会手把手教你：

如何分析需求如何跟AI描述如何实现功能如何优化体验

这是第一个真正实用的项目！

如果这篇文章对你有帮助，别忘了点赞、收藏、转发！

上一篇：给设计师的专业级 AI 生图软件推荐，一篇只讲避坑的实战教程
下一篇：干货指南 | 普通人如何用AI搭建专属智能工单系统？从入门到精通全攻略