我们可以把做一道煎鸡蛋的过程，拆解为网页设计的三个核心要素：
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("鸡蛋翻面了，两面金黄！");
});
addEventListener('click')：就像你用铲子去碰（点击）那个鸡蛋。
classList.add('flipped')：鸡蛋翻面了！
总结：一盘完美的煎鸡蛋
没有 HTML：你巧妇难为无米之炊，连鸡蛋（数据）都没有。
没有 CSS：你得到了一个生鸡蛋，蛋清蛋黄混成一团，没有温度，没有颜值。
没有 JavaScript：鸡蛋就静静地躺在锅里，你没法翻面，没法撒盐，也没法把它装盘吃掉。
只有三者结合，你才能在浏览器里“闻到”这盘煎鸡蛋的香味！
SOCIAL SHARE CARD GENERATOR