第2节 · 前端基础语言本节导读本节不是要立刻培养成 “ 会背语法的前端程序员 ”而是对前端基础语言建立一个足够清晰的认知知道 HTML、CSS、JavaScript 分别负责什么能大致看懂 AI 生成的网页代码能在和 AI 协作时明确说出自己想改的是结构、样式还是交互有了 AI 之后前端基础语言不再要求从零手写所有代码但仍然需要知道网页是怎么组成的。前端编程语言并不难学值得花点时间稍微研究一下这样遇到问题的时候你才能知道怎么更高效地和 AI 对话。学习目标完成本课后你应该能够说出 HTML、CSS、JavaScript 的作用理解三者在一个网页中的配合关系看懂最基础的网页代码结构知道如何用更准确的提示词让 AI 修改网页明确现阶段目标“ 不必死记硬背语法但要具备基本认知 ”一、概念讲解1. 前端到底是什么前端就是用户在浏览器里直接看到和操作的那部分内容。例如一个网页里常见的这些内容都属于前端范围页面标题文字介绍图片和视频按钮输入框点击后的弹窗、切换、跳转如果把一个网页比作一间房子语言作用类比HTML网页的结构房屋的框架结构CSS网页的外观房屋的装修风格JavaScript网页的交互房屋的门窗开关这三者配合起来才构成了我们看到的完整网页。2. HTML 是什么HTML负责页面结构HTML 的全称是 HyperText Markup Language中文通常叫 “超文本标记语言”。它的核心作用不是“ 编程计算 ”而是告诉浏览器这部分内容是什么。比如这是一个标题这是一段文字这是一张图片这是一个按钮这是一个列表二、一个最简单的 HTML 例子h1我的第一个网页/h1p这是一个简单的自我介绍页面。/pbutton联系我/button你可以把这段代码粘贴到下面这个网站里在线预览HTML 在线运行 - 锤子在线工具这段代码的意思是h1一级标题p段落button按钮你会发现HTML 很像在给内容贴标签。三、常见 HTML 标签标签作用h1 ~ h6标题p段落img图片a链接button按钮div通用容器用来组织页面结构input输入框ul / li列表理解 HTML 的关键初学者最需要明白的一点是HTML 负责 “页面上有什么” 不负责 “好不好看” 也不负责 “点了之后会发生什么”。至于页面 “好不好看”主要就是CSS在发挥作用。四、CSS负责页面样式CSS负责页面样式1. CSS 是什么CSS 的全称是 Cascading Style Sheets中文通常叫 “层叠样式表”。它的作用是控制网页的视觉效果比如文字颜色背景颜色字体大小边框间距布局方式也就是说HTML 搭好骨架之后CSS 来决定它 “长什么样”。2. 一个最简单的 CSS 例子输入以下代码style body { background-color: #f5f7fb; font-family: sans-serif; } h1 { color: #2b4eff; } button { background-color: #111827; color: white; border: none; padding: 10px 16px; } /style这段代码的意思是把整个页面背景设成浅灰色让标题变成蓝色让按钮有深色背景、白色文字和内边距3. 常见 CSS 属性属性作用color文字颜色background-color背景颜色font-size字体大小width / height宽高margin外边距padding内边距border边框display布局方式gap元素之间的间距理解 CSS 的关键CSS 负责 “看起来怎么样”。同一份 HTML只要换一套 CSS页面风格就会完全不同。这也是为什么很多 AI 工具生成的网页功能差不多但视觉风格可能差很多。5.案例对比同一份 HTML两套完全不同的视觉效果下面是一个可以直接复制到在线网站里运行的小案例。你可以使用任意一个支持 HTML/CSS/JS 分栏预览的网站先粘贴 HTML再分别粘贴两套 CSS对比效果差异。第一步固定不变的 HTMLdiv classcard div classtag我的主页/div h1昇腾AI专班/h1 p classsubtitleAI 编程初学者 / 喜欢设计和产品/p p classdesc 我是一名大四学生学习方向为昇腾AI方向这是我们的工程实训课程第一课我正在学习如何借助 AI 快速完成网页、海报、个人项目及个人简历希望有真正属于我自己的项目作品。 /p button查看我的作品/button /div运行结果第二步先看一套比较普通的 CSS加上普通的CSSstyle body { margin: 0; font-family: Arial, sans-serif; background: #f2f2f2; } .card { width: 320px; margin: 60px auto; padding: 20px; background: white; border: 1px solid #ddd; text-align: left; } .tag { display: inline-block; padding: 4px 8px; background: #e5e5e5; color: #333; font-size: 12px; margin-bottom: 12px; } h1 { margin: 0 0 8px; font-size: 28px; color: #222; } .subtitle { margin: 0 0 12px; color: #666; font-size: 14px; } .desc { color: #555; font-size: 14px; line-height: 1.6; } button { margin-top: 16px; padding: 10px 14px; border: none; background: #333; color: white; cursor: pointer; } /style运行结果这套样式在配色上有点普通了配色很安全但没有记忆点排版能看但没有层次感卡片像是 “把内容装进去” 了但没有明显风格第三步换成一套更亮眼的 CSSstyle body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top left, rgba(255, 210, 63, 0.45), transparent 28%), radial-gradient(circle at bottom right, rgba(255, 107, 107, 0.35), transparent 30%), linear-gradient(135deg, #0f172a, #1e293b 55%, #334155); font-family: PingFang SC, Microsoft YaHei, sans-serif; } .card { width: 360px; padding: 32px; border-radius: 24px; background: rgba(255, 255, 255, 0.12); color: white; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.45); } .tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: linear-gradient(90deg, #ffd43b, #ff8c42); color: #1f2937; font-size: 12px; font-weight: bold; margin-bottom: 18px; } h1 { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: 1px; } .subtitle { margin: 12px 0 16px; color: rgba(255, 255, 255, 0.78); font-size: 15px; } .desc { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.8; } button { margin-top: 24px; padding: 12px 18px; border: none; border-radius: 999px; background: linear-gradient(90deg, #ffffff, #ffe082); color: #111827; font-size: 14px; font-weight: bold; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 212, 59, 0.28); } /style运行结果这套样式更亮眼的原因其实很容易看出来背景不再是单色而是有层次的渐变和光感卡片使用了半透明和模糊效果更像真实产品界面标题、说明、按钮之间有明显的视觉节奏颜色、圆角、阴影是成套出现的所以整体感更强第四步思考一下为什么第二套 CSS 明显更“亮眼”这两套代码里HTML 有没有变化如果让 AI 帮你把第一套升级成第二套你会怎么描述需求如果你想让 AI 帮你把第一套样式升级成第二套风格可以尝试这样描述需求请不要修改 HTML 结构只优化这段页面的 CSS。要求1. 整体风格更有设计感和视觉冲击力2. 不要使用单调的纯色背景改成更有层次的背景3. 卡片要更像作品集首页精致一些4. 按钮要更有吸引力5. 保持代码简单适合初学者理解这个练习的重点是帮助你真正感受到HTML 不变CSS 一变页面气质就完全不同所谓“审美差异”最后也会落实到具体的样式代码里五、JavaScript负责页面交互1. JavaScript 是什么JavaScript 是网页中最常用的脚本语言用来实现 “动态效果” 和 “用户交互” 。例如点击按钮弹出提示切换图片表单提交打开和关闭菜单记住用户输入的内容2. 一个最简单的 JavaScript 例子你可以继续把这段代码用一个 script 标签包裹起来然后再粘贴到我们刚刚的在线 HTML 预览的编辑框里点击一下按钮试试看发生了什么。这段代码的意思是找到页面里的按钮监听“点击”这个动作用户点按钮时弹出一句提示script const button document.querySelector(button); button.addEventListener(click, function () { alert(你好欢迎来到我的网页); }); /script运行结果3. JavaScript 最重要的理解方式对于入门阶段不需要先学习复杂语法先抓住这三件事选中元素我要操作页面上的哪个部分监听事件用户做了什么动作比如点击、输入、滚动执行结果页面要发生什么变化4. 理解 JavaScript 的关键JavaScript 负责 “用户操作后会发生什么” 。没有 JavaScript网页也能展示内容但很多 “活起来” 的效果通常都需要 JavaScript。5. 三者配合的简历案例下面是一个完整的小例子!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title自我介绍卡片/title style body { background: #f3f4f6; font-family: sans-serif; } .card { width: 320px; margin: 60px auto; padding: 24px; background: white; border-radius: 16px; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } button { margin-top: 12px; padding: 10px 16px; } /style /head body div classcard h1你好我是黑龙江东方学院23级昇腾AI班的***/h1 p我刚步入大四马上就要开始毕业设计。/p p我正在学习 AI 全栈技术工程实训课程。/p p我毕业后想找AI全栈及系统测试方面的工作。/p p我给自己做了一个小小简历卡片。/p button idbtn想了解我就请点击/button /div script const btn document.getElementById(btn); btn.addEventListener(click, function () { alert(欢迎来到我的个人简介空间); }); /script /body /html运行结果你可以这样理解这个例子HTML页面里有卡片、标题、文字、按钮CSS卡片有白底、圆角、阴影页面整体更美观JavaScript点击按钮后弹出提示这就是一个最小可运行的网页。从 AI 编程的角度应该怎么理解这三种语言在 AI 编程场景下你不一定要自己手写完整代码但你要能判断 AI 写的内容分别属于哪一层。当你想改页面内容时通常是在改 HTML例如把标题改成 “ 我的旅行相册 ”新增一张图片增加一个按钮在底部添加作者信息当你想改页面样式时 通常是在改 CSS例如页面改成深色风格按钮颜色改成橙色卡片之间间距更大整体排版更居中、更简洁当你想改页面行为时 通常是在改 JavaScript例如点击按钮后弹出窗口点击卡片跳转详情页输入关键词后筛选内容切换深色/浅色模式所以你和 AI 沟通时可以更准确地说“请帮我调整页面结构”“请帮我优化页面样式”“请给这个页面增加点击交互”这种表达会比 “ 帮我改改这个网页 ” 更有效。现在你应该能看懂 AI 生成的页面代码了初学者不需要一行一行死抠代码而是优先看这 4 件事1. 页面结构先看 HTML 里有哪些区域有没有标题区有没有内容区有没有按钮或输入框有没有底部信息2. 样式入口看 CSS 主要改了哪些地方背景色字体布局卡片、按钮、图片的样式3. 交互逻辑看 JavaScript 有没有做这些事绑定按钮点击事件获取用户输入修改页面内容发起请求或跳转页面动手练习练习目的通过这个练习你可以亲自体验同一个网页结构、样式、交互是如何一步一步加上去的。练习任务试着让 AI 帮你生成一个 “个人介绍卡片” 网页要求页面中包含姓名、身份介绍、头像页面中有一个“联系我”按钮风格简洁、清爽可以试着直接使用下面这段提示词帮我生成一个简单的个人介绍网页。要求1. 页面中展示我的姓名、身份介绍和头像2. 页面中有一个“联系我”按钮3. 风格简洁清爽适合学生个人主页4. 使用 HTML、CSS、JavaScript 实现5. 代码尽量简单并加上必要注释方便初学者理解运行结果练习后的 3 次迭代生成完成后你可以继续这样修改请把页面主色调改成更活泼的橙色系请在卡片下方增加我的兴趣爱好列表点击联系我按钮时弹出一句欢迎和我交流运行结果通过这 3 次修改你通常会更明显地感受到增加内容主要在动 HTML调整风格主要在动 CSS增加点击效果主要在动 JavaScript新手常见误区误区 1我是不是必须先把三门语言都学会才能开始做网页不是。在 AI 时代更合理的路径是先做出东西再理解 AI 生成的代码在不断修改中逐步建立认知误区 2既然 AI 会写代码我是不是完全不用学也不是。你不一定要像传统前端工程师那样系统学习所有细节但至少要知道页面由什么组成改动需求属于哪一层AI 生成的结果是否合理误区 3我看不懂每一行代码是不是就说明我不适合学不是。入门阶段看不懂所有细节非常正常。你的目标不是立刻成为高手而是先建立“整体认知”。本课小结这一课最重要的不是记住多少语法而是记住下面三句话HTML 决定网页有什么CSS 决定网页长什么样JavaScript 决定网页如何动起来对于 Vibe Coding 来说这三者的意义在于它们帮助你更好地看懂 AI、纠正 AI、指挥 AI。