A11. 初识网页开发

1.1. 前端网页开发的基本概念

网页游戏、公司门户乃至视频网站是怎么来的？它们就像数字世界的乐高积木，由HTML、CSS、JavaScript三种语言拼装而成！今天起，你也能自己造网页！

核心特点：

• 前端代码直接在浏览器运行（对比Python需要解释器）
• 实时渲染：修改代码立即看到效果（超强即时反馈）
• 三大基石：

  <!-- HTML搭建骨架 -->
  <h1>欢迎来到编程社！</h1>
  
  <!-- CSS添加样式 -->
  <style>
    h1 { color: red; }
  </style>
  
  <!-- JavaScript实现交互 -->
  <script>
    document.querySelector('h1').onclick = () => alert('你点中我了！');
  </script>

⚠️ 易错：混淆三种语言的文件扩展名（.html/.css/.js）！

1.2. HTML、CSS、JavaScript 的分工

如果把网页比作机器人：HTML是骨架，CSS是皮肤和衣服，JavaScript是肌肉和神经！三者各司其职，共同创造动态世界。

<!-- HTML负责内容与结构 -->
<div class="card">
  <img src="robot.jpg" alt="机器人">
  <h2>智能助手</h2>
</div>

<!-- CSS控制外观 -->
<style>
  .card {
    width: 200px;
    border: 2px solid blue;
    border-radius: 10px;
  }
  img { width: 100%; }
</style>

<!-- JavaScript处理交互 -->
<script>
  document.querySelector('.card').addEventListener('mouseover', () => {
    this.style.transform = 'scale(1.1)';
  });
</script>

黄金三角关系：

• HTML：定义内容（文字/图片/链接）
• CSS：美化样式（颜色/布局/动画）
• JavaScript：实现交互（点击/滑动/数据加载）

知识回顾

• 前端开发通过浏览器实时渲染页面
• HTML定义内容结构，CSS控制视觉样式，JavaScript处理交互逻辑
• 三种语言协同工作，文件扩展名严格区分

课后练习

1. （单选）以下哪种文件存储CSS代码？ A. style.html B. main.css C. script.html D. config.js
2. （填空）网页三大基石中，负责弹出提示框的是______，控制字体颜色的是______。
3. （情景分析）为什么购物车的商品数量变化不需要刷新整个页面？这与哪种技术相关？