3.1 Web基础：HTML/CSS/JavaScript

把”看得见的部分”搭起来，做出你的第一个像样的网站。这一章带你把前端三件套和 Next.js 串起来：先搞懂结构、样式、交互，再把它们拼成一个能上线的站点。

学习重点：在 AI 编程时代，你不需要从零写这些代码，但需要理解它们的作用，才能更好地指导 AI。

前端三剑客概览

想象一个网页就像一栋房子：

技术	类比	作用	学习难度
HTML	房子的结构（墙、门、窗）	定义网页的内容和结构	⭐
CSS	房子的装修（颜色、家具、布局）	定义网页的样式和外观	⭐⭐
JavaScript	房子的智能系统（灯光、空调、安防）	实现网页的交互和逻辑	⭐⭐⭐

AI 编程时代的学习策略：遇到陌生标签或属性，先别硬查文档。把代码扔给 AI 说「解释一下这段 HTML / CSS / JS 在做什么」，看懂大意就够了。

HTML：网页的骨架

什么是 HTML？

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

HTML 是一系列标签（Tags）的组合，每个标签告诉浏览器如何显示内容。

基础结构


<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一段文字</p>
  </body>
</html>

常用标签速查

文本标签


<!-- 标题标签，h1-h6 -->
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
 
<!-- 段落和换行 -->
<p>这是一个段落</p>
<br> <!-- 换行 -->
 
<!-- 文本格式化 -->
<strong>粗体文字</strong>
<em>斜体文字</em>
<span>内联元素</span>

结构标签


<!-- 容器标签 -->
<div>块级容器</div>
<section>语义化区域</section>
<header>页头</header>
<footer>页脚</footer>
<nav>导航区域</nav>
<main>主要内容</main>
 
<!-- 列表 -->
<ul>
  <li>无序列表项</li>
  <li>无序列表项</li>
</ul>
 
<ol>
  <li>有序列表项</li>
  <li>有序列表项</li>
</ol>

表单标签


<form action="/submit" method="post">
  <!-- 输入框 -->
  <input type="text" placeholder="请输入文本">
  <input type="email" placeholder="邮箱">
  <input type="password" placeholder="密码">
 
  <!-- 文本域 -->
  <textarea placeholder="多行文本"></textarea>
 
  <!-- 选择框 -->
  <select>
    <option>选项1</option>
    <option>选项2</option>
  </select>
 
  <!-- 按钮 -->
  <button type="submit">提交</button>
</form>

多媒体标签


<!-- 图片 -->
<img src="image.jpg" alt="图片描述">
 
<!-- 链接 -->
<a href="https://example.com">链接文本</a>
 
<!-- 视频 -->
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

AI 编程中的 HTML

AI 生成 HTML 的技巧：


你是一位前端专家，请帮我创建一个产品展示页面：

页面结构要求：
1. 顶部导航栏
2. Hero 区域（标题+描述+按钮）
3. 产品特性展示（3个卡片）
4. 用户评价区域
5. 页脚信息

技术要求：
- 使用语义化 HTML5 标签
- 确保良好的可访问性
- 添加适当的 alt 属性
- 使用语义化结构

CSS：网页的样式

什么是 CSS？

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

CSS 控制网页的视觉表现：颜色、字体、布局、动画等。

CSS 基础语法


/* 选择器 { 属性: 值; } */
h1 {
  color: blue;
  font-size: 24px;
  text-align: center;
}
 
.class-name {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}
 
#id-name {
  margin: 10px 0;
}

三种使用方式

内联样式


<p style="color: red; font-size: 16px;">红色文字</p>

适用场景：快速测试、单个元素的特殊样式

内部样式


<head>
  <style>
    .highlight {
      background-color: yellow;
      padding: 10px;
    }
  </style>
</head>

适用场景：单个页面的样式定义

外部样式


<!-- HTML 文件 -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>


/* styles.css 文件 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

适用场景：网站的全局样式管理

常用 CSS 属性

常用属性分类：布局、文字、颜色、边距、边框、背景等

布局属性


/* Flexbox 布局 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
/* Grid 布局 */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
 
/* 定位 */
.positioned {
  position: relative; /* relative, absolute, fixed, sticky */
  top: 10px;
  left: 20px;
}

文字样式


.text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold; /* normal, bold, 100-900 */
  line-height: 1.5;
  text-align: center; /* left, center, right, justify */
  text-decoration: none; /* underline, overline, line-through */
}

颜色和背景


.colors {
  color: #333333; /* 文字颜色 */
  background-color: #ffffff; /* 背景颜色 */
  background-image: url('image.jpg'); /* 背景图片 */
  opacity: 0.8; /* 透明度 */
}

边距和边框


.spacing {
  margin: 20px; /* 外边距 */
  padding: 15px; /* 内边距 */
  border: 2px solid #cccccc; /* 边框 */
  border-radius: 8px; /* 圆角 */
}

AI 编程中的 CSS

AI 生成 CSS 的技巧：


请帮我美化这个导航栏：

当前HTML：
[粘贴HTML代码]

设计要求：
- 现代化设计风格
- 使用蓝色主题
- 添加悬停效果
- 确保移动端适配
- 添加平滑过渡动画

技术要求：
- 使用 Flexbox 布局
- 添加 CSS 过渡效果
- 响应式设计
- 避免使用!important

JavaScript：网页的交互

什么是 JavaScript？

JavaScript 是网页的编程语言，负责处理用户交互、数据操作、动态内容更新等。

基础语法


// 变量声明
let name = "张三";
const age = 25;
var city = "北京";
 
// 函数
function greet(name) {
  return "你好，" + name;
}
 
// 箭头函数
const add = (a, b) => a + b;
 
// 对象
const person = {
  name: "李四",
  age: 30,
  greet: function() {
    return "我是" + this.name;
  }
};
 
// 数组
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);

DOM 操作

DOM（Document Object Model）是 JavaScript 与 HTML 交互的接口。


// 获取元素
const element = document.getElementById('myId');
const elements = document.getElementsByClassName('myClass');
const element = document.querySelector('.myClass');
const elements = document.querySelectorAll('div');
 
// 修改内容
element.textContent = '新内容';
element.innerHTML = '<strong>HTML内容</strong>';
 
// 修改样式
element.style.color = 'red';
element.classList.add('new-class');
element.classList.remove('old-class');
 
// 事件处理
element.addEventListener('click', function() {
  alert('点击了元素！');
});
 
// 创建元素
const newDiv = document.createElement('div');
newDiv.textContent = '新元素';
document.body.appendChild(newDiv);

常用交互功能

表单处理


// 表单验证
function validateForm() {
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
 
  if (!email.includes('@')) {
    alert('请输入有效的邮箱地址');
    return false;
  }
 
  if (password.length < 6) {
    alert('密码至少6位');
    return false;
  }
 
  return true;
}
 
// 实时验证
document.getElementById('email').addEventListener('input', function(e) {
  const email = e.target.value;
  const errorMsg = document.getElementById('email-error');
 
  if (!email.includes('@') && email.length > 0) {
    errorMsg.textContent = '邮箱格式不正确';
  } else {
    errorMsg.textContent = '';
  }
});

动态内容


// 动态加载内容
function loadContent() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('content');
      container.innerHTML = '';
 
      data.items.forEach(item => {
        const div = document.createElement('div');
        div.textContent = item.title;
        container.appendChild(div);
      });
    });
}
 
// 标签页切换
function showTab(tabName) {
  // 隐藏所有标签页内容
  document.querySelectorAll('.tab-content').forEach(tab => {
    tab.style.display = 'none';
  });
 
  // 显示选中的标签页
  document.getElementById(tabName).style.display = 'block';
 
  // 更新标签按钮状态
  document.querySelectorAll('.tab-button').forEach(btn => {
    btn.classList.remove('active');
  });
  event.target.classList.add('active');
}

动画效果


// 滚动动画
window.addEventListener('scroll', function() {
  const navbar = document.getElementById('navbar');
  if (window.scrollY > 100) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});
 
// 简单的淡入效果
function fadeIn(element) {
  element.style.opacity = 0;
  let opacity = 0;
 
  const timer = setInterval(function() {
    opacity += 0.05;
    element.style.opacity = opacity;
 
    if (opacity >= 1) {
      clearInterval(timer);
    }
  }, 50);
}

AI 编程中的 JavaScript

AI 生成 JavaScript 的技巧：


请帮我实现一个交互式的任务列表：

功能要求：
1. 添加新任务
2. 标记任务完成状态
3. 删除任务
4. 任务计数统计
5. 本地存储持久化

技术要求：
- 使用现代 JavaScript (ES6+)
- 添加适当的错误处理
- 确保良好的用户体验
- 添加事件监听器
- 使用 localStorage 保存数据

HTML 结构：
[粘贴相关HTML代码]

响应式设计基础

什么是响应式设计？

响应式设计让网页在不同设备上都有良好的显示效果。

媒体查询


/* 默认样式 - 移动端优先 */
.container {
  width: 100%;
  padding: 10px;
}
 
/* 平板设备 */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
    padding: 20px;
  }
}
 
/* 桌面设备 */
@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}
 
/* 大屏设备 */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

弹性布局


/* 使用相对单位 */
.container {
  width: 90%; /* 相对于父容器 */
  max-width: 1200px; /* 最大宽度限制 */
  font-size: 16px; /* 基础字体大小 */
}
 
.heading {
  font-size: 1.5em; /* 相对于父元素字体大小 */
  margin-bottom: 2rem; /* 相对于根元素字体大小 */
}
 
.image {
  max-width: 100%; /* 图片不超出容器 */
  height: auto; /* 保持比例 */
}

学习建议

理解优先于记忆

AI 编程时代的学习策略：

理解每个技术的作用和适用场景
知道遇到问题时该查什么
学会如何向 AI 描述需求
培养代码审查能力

实践项目建议

个人介绍页面：练习 HTML 结构和 CSS 样式
计算器应用：练习 JavaScript 交互
响应式博客：练习响应式设计
待办事项应用：综合练习三者的结合

常见学习误区

❌ 试图记住所有标签和属性
❌ 过分关注语法细节
❌ 忽视语义化的重要性
❌ 不重视可访问性

✅ 正确的学习方式：

理解概念和作用
学会使用 AI 辅助学习
重视用户体验和最佳实践
培养解决问题的思维

下一步：掌握了 Web 基础后，继续学习 Next.js核心概念，了解现代前端框架的使用。