下面我们写一个简单的网文阅读页 book.html，看看 HTML、CSS 和 JavaScript 是怎么配合的。
HTML 搭骨架
HTML 用成对的 <tag> 标签把标题、段落、链接和按钮组织成树状结构。标签开头还可以带 属性名="属性值"，比如全局唯一的 id、用来归类的 class、定义链接目标的 href。
新建一个 book.html：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>我的阅读页</title>
</head>
<body>
<article>
<h1>我在医院学斩鬼</h1>
<p class="author">作者：夜班乌鸦</p>
<p id="reading-status">还没开始阅读</p>
<button id="start-reading" type="button">开始阅读</button>
</article>
</body>
</html>
用浏览器打开，现在只有浏览器默认的白底黑字排版，点“开始阅读”按钮也不会有任何反应：
CSS 加上样式
在 book.html 的 </head> 前面加上一段 <style> 样式：
<style>
body { background: #f6f1e7; color: #333; font-family: sans-serif; }
article { max-width: 640px; margin: 40px auto; padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.author { color: #888; font-size: 14px; }
button { padding: 8px 16px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
</style>
保存后刷新，HTML 标签一个字没动，但背景变成了米色，正文装进了居中的圆角白卡片里，按钮也变成了蓝底白字：
JavaScript 加上交互
接着在 </body> 前面加上一段 <script> 脚本，监听按钮的点击事件：
<script>
const button = document.getElementById('start-reading');
const status = document.getElementById('reading-status');
button.addEventListener('click', () => {
status.textContent = '正在阅读：第一章 第十三张床';
status.style.color = '#16a34a';
});
</script>
保存刷新后点一下“开始阅读”，文字马上变成绿色的“正在阅读：第一章 第十三张床”：
不过这段 JS 只改了当前浏览器内存里的 DOM，并没有发网络请求把进度存到服务器上。所以只要按 F5 一刷新，文字又会退回“还没开始阅读”。
查看源码 vs 检查元素
看前端代码时有两个常用入口，别搞混了：
- 查看网页源代码（
Ctrl + U）：看到的是服务器刚发过来的原始 HTML 文本。 - 检查元素（
F12→ Elements）：看到的是经过 JS 脚本运行和修改之后的实时 DOM 树。
做安全测试时，我们经常先翻一遍 HTML 注释（<!-- ... -->）和外部引用的 .js 文件，看看开发者有没有留下未公开的后台路径、测试接口或写死的配置；开发者工具里的 Console（控制台） 面板则能直接敲 JS 命令读取页面变量或调函数。