01 · HTML 保留信息
<h1>黄梅戏分享会</h1>标题和时间没有改变。HTML 标记内容是什么，不只决定外观。
进阶观察 · 从本课知识向前一步
内容不变，网页能变成什么样？
点击切换外观，再展开内容。区分文字本身、呈现方式和点击后的变化。
先看效果
02 · CSS 改变外观
#poster.alternate { background: #fff0db; }这条规则指定另一种背景；具体选择器语法将在 CSS 单元学习。
03 · JavaScript 响应操作
document.querySelector('#poster').classList.toggle('alternate');找到海报，点击按钮时切换样式标记。这里先辨认分工，脚本语法将在后续课程展开。
思考
如果 AI 生成的页面截图与目标一模一样，能否据此断定“展开内容”按钮也正常？还缺哪一种证据？
展开参考分析
不能。截图反映某一时刻的视觉状态，不能证明点击、键盘操作和内容切换。还要实际触发操作，核对变化与预期是否一致。
研究观察：生成代码、视觉相似与交互正确，是不同的评价对象。
研究与本课的联系
Design2Code 研究从网页截图生成代码，并分别评估视觉元素与布局。Vision2Web 将评价延伸到交互、多页面及更完整的网站任务；它在此作为预印本介绍，不等同于已经普遍可靠的产品能力。我们的演示是手写对照，不是模型实时生成。
完整源码：展开、修改与运行
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>内容不变，网页能变成什么样？</title>
<style>
body { margin:16px; color:#183347; background:white; font:20px/1.5 "Times New Roman",SimSun,serif; }
h1,h2 { font-family:"Times New Roman",SimHei,sans-serif; }
button,input,select { font:inherit; max-width:100%; }
button { margin:4px 0; cursor:pointer; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:18px/1.5 Consolas,SimSun,monospace; }
:focus-visible { outline:3px solid #b56220; outline-offset:3px; }
#poster { padding:24px; border-left:8px solid teal; background:#edf8f5; }
#poster.alternate { border-color:#a34b18; background:#fff0db; }
#poster.alternate h1 { color:#963b17; }
</style>
</head>
<body>
<button id="switch" type="button">切换外观</button>
<article id="poster">
<h1>黄梅戏分享会</h1>
<p>周三 14:00 · A208</p>
<details>
<summary>活动内容</summary>
<p>唱腔赏析、服饰介绍与交流。</p>
</details>
</article>
<script>
document.querySelector('#switch').addEventListener('click', () => {
document.querySelector('#poster').classList.toggle('alternate');
});
</script>
</body>
</html>