用 HTML（以及它的两个好兄弟 CSS 和 JavaScript）来比喻“煎鸡蛋”

#html #css #webdev #beginners

我们可以把做一道煎鸡蛋的过程，拆解为网页设计的三个核心要素：

HTML（结构/食材）：决定了盘子里有什么。
CSS（样式/火候与颜值）：决定了鸡蛋好看不好看，熟到什么程度。
JavaScript（交互/动作）：决定了你如何烹饪它，以及吃它的动作。

1. HTML：准备食材（骨架与内容）

HTML 是网页的结构。在煎鸡蛋之前，你得把食材和工具摆出来。没有 HTML，CSS 和 JS 就没有作用的对象。

<!-- 这是一个平底锅容器 -->
<div class="pan">

  <!-- 我们的核心食材：鸡蛋 -->
  <div class="egg">
    <!-- 蛋黄 -->
    <span class="yolk"></span>

    <!-- 蛋清 -->
    <span class="egg-white"></span>
  </div>

  <!-- 调料 -->
  <salt id="salt"></salt>
  <pepper id="pepper"></pepper>

</div>

<div> 和 <span>：就像是蛋清和蛋黄，它们现在只是冷冰冰的、没有形状的“原料”挂在页面（盘子）上。

2. CSS：开火烹饪（样式与视觉效果）

刚写好 HTML 时，鸡蛋只是几个硬邦邦的标签。现在我们需要用 CSS（火候、油、调料）来给它上色、定型。

/* 给平底锅加热 */
.pan {
  background-color: #333; /* 黑色铸铁锅 */
  border-radius: 50%;     /* 圆形平底锅 */
  padding: 20px;
}

/* 煎蛋清：慢慢变白，边缘带点焦黄 */
.egg-white {
  background-color: #ffffff; /* 蛋清熟了变白 */
  border-radius: 60% 40% 70% 30%; /* 不规则的圆形，像流动的蛋清 */
  box-shadow: inset -5px -5px 10px #e6c17a; /* 边缘煎得焦黄酥脆的金边 */
}

/* 煎蛋黄：金黄圆润，处于流动状态（溏心） */
.yolk {
  background-color: #ffcc00; /* 完美的金黄色 */
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 完美的圆形 */
  box-shadow: 0px 5px 10px rgba(0,0,0,0.2); /* 蛋黄鼓起来的立体感 */
}

background-color：就是火候。生蛋清是透明的（transparent），熟了就变成了白色（#fff）。
border-radius：就是蛋在锅里的形状。
box-shadow（阴影）：就是那层诱人的焦边（美拉德反应）。

3. JavaScript：动作与交互（翻面、撒盐、出锅）

JavaScript 让网页“动”起来。在煎蛋时，JS 就是你的铲子和动作。

// 1. 获取煎蛋和调料
const egg = document.querySelector('.egg');
const salt = document.getElementById('salt');

// 2. 撒盐动作
function sprinkleSalt() {
  salt.style.opacity = 1; // 洒下盐粒
  console.log("撒了点盐，味道好极了！");
}

// 3. 翻面动作（点击鸡蛋时触发）
egg.addEventListener('click', function() {
  egg.classList.add('flipped'); // 给鸡蛋加上“翻面”的样式
  console.log("鸡蛋翻面了，两面金黄！");
});