不用深入学习，只需要理解基本概念
今天要聊什么
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、9CSS：样式
什么是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 nullat script.js:15帮我看看是什么问题本篇总结
三剑客：
HTML：结构（骨架）CSS：样式（皮肤）JavaScript：功能（大脑）看懂代码的步骤：
看HTML了解结构看CSS了解样式看JavaScript了解功能运行测试理解逻辑记住：
不用深入学习只需要理解概念遇到问题问AI边做边学下一篇预告
《实战项目1：做一个待办事项清单》
我会手把手教你：
如何分析需求如何跟AI描述如何实现功能如何优化体验这是第一个真正实用的项目！
如果这篇文章对你有帮助，别忘了点赞、收藏、转发！
评论 (0)