HTML+CSS+JS从0到入门教程：”（超详细版）#

作者：Roka
发布于：芦花家 (roka.ink)
愿你能与重要的人，有一天能够再次相遇。

📖 教程简介#

欢迎来到芦花家！本教程专为前端零基础的朋友准备，我们将以《可塑性记忆》的世界为素材，一步步搭建一个名为 “艾拉的记忆小屋” 的静态网站，并逐步添加样式和简单交互。通过这个项目，你将系统掌握HTML、CSS、基础JavaScript，最终发布一个属于自己的回忆网站。

📥 准备工作

一个文本编辑器（推荐 VS Code）—— 可以去官网免费下载。

一个现代的浏览器（Chrome / Edge / Firefox）—— 用于预览页面。

一颗愿意动手的心 —— 这最重要！

📑 目录#

第一篇：HTML基础（静态页面骨架）#

1. 初见HTML：第一个页面与基本结构#

1.1 HTML是什么？#

HTML 的全称是 HyperText Markup Language（超文本标记语言）。它不是编程语言，而是一种标记语言，用来描述网页的结构和内容。你可以把HTML想象成房子的骨架：标签就是承重墙、梁和柱，浏览器（比如Chrome）会把HTML“翻译”成我们看到的漂亮页面。

1.2 第一个HTML页面#

步骤1：创建项目文件夹

在你的电脑上找一个合适的位置（比如桌面），新建一个文件夹，命名为 aira-memory-house（艾拉的记忆小屋）。这个文件夹将存放我们所有的网站文件。

步骤2：创建首页文件

打开 VS Code（或其他编辑器），点击“文件” → “新建文件”，然后输入以下代码：

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>艾拉的记忆小屋</title>
6
  </head>
7
  <body>
8
    欢迎来到艾拉的记忆小屋。
9
  </body>
10
</html>

步骤3：保存文件

按 Ctrl+S（Windows）或 Command+S（Mac）保存文件。在弹出的对话框中，找到刚才创建的 aira-memory-house 文件夹，将文件命名为 index.html，点击保存。

步骤4：用浏览器打开

在文件夹中找到 index.html，双击它，就会用默认浏览器打开。你应该看到页面上显示“欢迎来到艾拉的记忆小屋。”。恭喜！你已经创建了人生第一个网页！

1.3 详细解释每一行#

让我们逐行理解刚才的代码：

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器“这个文件使用的是HTML5标准”。必须放在第一行。
<html>：这是整个页面的根元素，所有其他元素都要放在它里面。
<head>：这个标签里放的是页面的元信息（meta data），比如字符编码、页面标题、样式链接等。这些内容不会直接显示在页面上，但对浏览器很重要。
<meta charset="utf-8">：设置字符编码为UTF-8，这样中文才不会乱码。
<title>：这个标签里的文字会显示在浏览器的标签页上，也是搜索引擎结果中的标题。
<body>：这个标签里的所有内容都会显示在浏览器窗口中，是用户能看到的部分。

小贴士：HTML标签通常是成对出现的，比如 <html> 和 </html>，前者叫开始标签，后者叫结束标签。有些标签是自闭合的，比如 <meta>，不需要结束标签。

1.4 小剧场：司的日记#

现在我们来添加一点《可塑性记忆》的味道。修改 <body> 里的内容，像这样：

1
<body>
2
  <!-- 司的日记：第一天上班 -->
3
  <h1>水柿司的日记</h1>
4
  <p>今天，我开始了在SAI终端服务部门的工作。</p>
5
  <p>虽然是被父母安排进来的，但遇见艾拉之后，我开始觉得这份工作有着特别的意义。</p>
6
</body>

保存后刷新浏览器，你会看到：

一个很大的标题“水柿司的日记”。
两个段落文字。

这里用到了两个新标签：

<h1>：一级标题，通常用于页面主标题。
<p>：段落，会自动在前后添加一些空白。
：注释，不会显示在页面上，用来给代码做笔记。

1.5 本章项目任务#

确保你已经创建了 aira-memory-house 文件夹和 index.html。
把上面的代码完整复制进去，保存并预览。
练习：在页面中添加一句你最喜欢的《可塑性记忆》台词，并用 <h2> 作为小标题。例如：
```
1
<h2>经典台词</h2>
2
<p>“越是美好的回忆，有时可能会令人越痛苦。”</p>
```

2. 文本标签：标题、段落、强调与引用#

2.1 标题系列 `<h1>`~`<h6>`#

HTML提供了六级标题，从 <h1> 到 <h6>，重要性递减。通常一个页面只有一个 <h1>，用来放网站名称或文章主标题，下面的章节用 <h2>、<h3> 等。

示例：

1
<h1>艾拉的记忆小屋</h1>
2
<h2>关于艾拉</h2>
3
<h3>基本资料</h3>
4
<h2>关于司</h2>

2.2 段落与换行#

<p>：段落，会自动在前后添加外边距。
<br>：换行（空标签，不需要结束标签）。如果你想在一段文字中强制换行，可以用它。
<hr>：水平分割线，用于分隔内容。

示例：

1
<p>这是第一段。<br>这是同一段中换行的部分。</p>
2
<hr>
3
<p>这是分割线下面的第二段。</p>

2.3 强调与引用#

<strong>：表示强调，浏览器通常显示为加粗。
<em>：表示语气加重，浏览器通常显示为斜体。
<blockquote>：长引用（块级元素），浏览器通常会缩进显示。
<q>：短引用（内联元素），浏览器会自动添加引号。

示例：

1
<p>艾拉常说：<q>我知道了</q>，这是她的口头禅。</p>
2
<blockquote>
3
  “越是美好的回忆，有时可能会令人越痛苦。”<br>
4
  —— 艾拉（第3话）
5
</blockquote>

2.4 字符实体#

有些字符在HTML中有特殊含义（比如 < 用来开始标签），如果想在页面上显示它们，需要使用字符实体。常用实体：

显示结果	实体名称	实体编号
`<`	`<`	`<`
`>`	`>`	`>`
`&`	`&`	`&`
`"`	`"`	`"`
`©`	`©`	`©`
空格	` `	` `

示例：

1
<p>在HTML中，用 &lt;h1&gt; 表示一级标题。</p>
2
<p>&copy; 2026 芦花家</p>

2.5 项目任务：丰富首页内容#

现在我们来完善首页，让它更像一个真正的纪念网站。打开 index.html，把 <body> 里的内容替换成下面这段：

1
<body>
2
  <h1>艾拉的记忆小屋</h1>
3
  <p>欢迎来到艾拉的记忆小屋。这里记录着<strong>水柿司</strong>与<strong>艾拉</strong>的点点滴滴。</p>
4

5
  <h2>关于这个小屋</h2>
6
  <p>这是一个用HTML搭建的粉丝网站，致敬《可塑性记忆》中那些温暖而感伤的瞬间。</p>
7

8
  <blockquote>
9
    “越是美好的回忆，有时可能会令人越痛苦。”<br>
10
    —— 艾拉（第3话）
11
  </blockquote>
12

13
  <p>但即使如此，我们仍要珍惜每一个瞬间。</p>
14
  <hr>
15
  <p>&copy; 2026 芦花家</p>
16
</body>

保存后刷新浏览器，看看效果。

练习：

用 <em> 强调“珍惜每一个瞬间”这几个字。
在底部版权信息后面添加一句“愿你能与重要的人重逢”，并用 <br> 换行。

3. 链接与导航：让页面互联#

3.1 超链接 `<a>`#

超链接是Web的灵魂，它让我们可以在不同页面之间跳转。基本语法：

1
<a href="目标地址">链接文字</a>

href 是必须的属性，指定链接的目标。
如果想在新标签页打开链接，可以加上 target="_blank"。

示例：

1
<a href="https://www.bilibili.com">去B站看《可塑性记忆》</a>
2
<a href="about.html" target="_blank">关于本站（新标签页打开）</a>

3.2 相对路径与绝对路径#

绝对路径：完整的网址，比如 https://example.com/page.html。
相对路径：相对于当前文件的位置。比如：
- page.html：同一目录下的文件。
- folder/page.html：下一级目录 folder 中的文件。
- ../page.html：上一级目录中的文件。

因为我们所有的页面都在同一个文件夹里，所以链接时直接写文件名即可，比如 character.html。

3.3 页面内锚点链接#

如果想跳转到同一个页面的某个位置，可以给目标元素设置一个 id，然后用 #id 作为链接地址。比如我们在目录中就用到了这种技巧。

示例：

1
<h2 id="section1">第一章</h2>
2
...
3
<a href="#section1">回到第一章</a>

3.4 项目任务：创建导航栏#

现在我们要创建几个新的HTML文件，并在每个文件里加上导航栏，方便用户在各页面间跳转。

步骤1：创建新文件

在 aira-memory-house 文件夹中，新建以下文件（可以和 index.html 平级）：

character.html（角色介绍）
timeline.html（剧情时间线）
about.html（关于本站）

步骤2：在每个文件中添加基础结构

每个文件都需要有和 index.html 类似的基础结构。为了节省时间，你可以复制 index.html 的内容，然后修改 <title> 和 <body> 里的内容。例如 character.html 可以这样开始：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>角色介绍 - 艾拉的记忆小屋</title>
6
</head>
7
<body>
8
  <!-- 稍后添加导航和内容 -->
9
</body>
10
</html>

步骤3：在 index.html 中添加导航栏

在 index.html 的 <body> 开头（<h1> 之前）添加以下代码：

1
<nav>
2
  <strong>首页</strong> |
3
  <a href="character.html">角色</a> |
4
  <a href="timeline.html">时间线</a> |
5
  <a href="about.html">关于</a>
6
</nav>

这里我们用 <nav> 标签包裹导航链接，语义更清晰。用 <strong> 把“首页”加粗，表示当前页面是首页（后面会用CSS美化，暂时这样标记）。

步骤4：在其他页面添加导航

类似地，在 character.html、timeline.html、about.html 的 <body> 开头添加导航，并标记当前页。例如在 character.html 中：

1
<nav>
2
  <a href="index.html">首页</a> |
3
  <strong>角色</strong> |
4
  <a href="timeline.html">时间线</a> |
5
  <a href="about.html">关于</a>
6
</nav>

步骤5：测试链接

保存所有文件，然后打开 index.html，点击导航中的“角色”，应该能跳转到 character.html。如果点击后出现404错误，请检查文件名是否一致，大小写也要注意（有些服务器区分大小写）。

3.5 小剧场：链接的寓意#

艾拉和司通过Giftia与人类之间的联系，就像超链接一样，将不同的世界连接起来。每一个链接都是一次相遇。

4. 图片与多媒体：插入图像和视频#

4.1 图像 `<img>`#

<img> 标签用于在页面中插入图片。它是一个空标签，不需要结束标签。常用属性：

src：图片的路径（相对或绝对）。
alt：替代文本，当图片无法显示时显示，也对屏幕阅读器友好（非常重要！）。
width / height：设置图片宽高（单位像素，建议只设置一个，另一个等比缩放）。

示例：

1
<img src="images/aira.png" alt="艾拉微笑" width="200">

4.2 准备图片#

在项目文件夹中创建一个新的文件夹，命名为 images。然后准备两张角色图片（可以从网上找《可塑性记忆》的官方图片，注意版权，仅供学习使用），分别命名为 aira.png 和 tsukasa.png，放入 images 文件夹。如果没有真实图片，也可以用占位图代替（比如用 https://via.placeholder.com/200 的在线占位图，但后续无法离线预览）。

4.3 项目任务：角色页插入图片#

打开 character.html，在 <nav> 后面添加以下内容：

1
<main>
2
  <h2>角色介绍</h2>
3

4
  <h3>艾拉</h3>
5
  <figure>
6
    <img src="images/aira.png" alt="艾拉" width="200">
7
    <figcaption>艾拉 - Giftia</figcaption>
8
  </figure>
9
  <p>终端服务部门的Giftia，搭档是水柿司。性格内向，不善表达，但内心温柔。</p>
10

11
  <h3>水柿司</h3>
12
  <figure>
13
    <img src="images/tsukasa.png" alt="水柿司" width="200">
14
    <figcaption>水柿司 - 人类</figcaption>
15
  </figure>
16
  <p>因考试失利被父母安排进入SAI公司，成为艾拉的搭档。逐渐走进艾拉的内心。</p>
17
</main>

这里我们用了 <figure> 和 <figcaption> 标签，它们是一对好搭档，用来把图片和标题关联起来，语义更好。

保存后预览 character.html，应该能看到图片和文字。如果图片没显示，检查路径是否正确，图片文件名是否一致。

4.4 音频与视频（可选）#

如果想插入音频或视频，可以用 <audio> 和 <video> 标签。例如：

1
<audio controls src="audio/ost.mp3"></audio>
2

3
<video controls width="400">
4
  <source src="video/trailer.mp4" type="video/mp4">
5
  <source src="video/trailer.webm" type="video/webm">
6
  您的浏览器不支持 video 标签。
7
</video>

controls 属性会显示播放控件。我们暂时不在项目中使用，但你可以了解。

5. 列表：无序、有序与自定义列表#

5.1 无序列表 `<ul>`#

无序列表用 <ul> 包裹，每个列表项用 <li>。通常用于并列的项目，比如角色的喜好。

示例：

1
<ul>
2
  <li>甜食</li>
3
  <li>发呆</li>
4
  <li>口头禅：“我知道了”</li>
5
</ul>

5.2 有序列表 `<ol>`#

有序列表用 <ol> 包裹，每个列表项也用 <li>，会自动编号。适合有顺序的步骤。

示例：

1
<ol>
2
  <li>相遇</li>
3
  <li>搭档磨合</li>
4
  <li>游乐园约会</li>
5
</ol>

5.3 自定义列表 `<dl>`#

自定义列表用于术语解释，包含 <dt>（术语）和 <dd>（描述）。

示例：

1
<dl>
2
  <dt>Giftia</dt>
3
  <dd>拥有感情的机器人，寿命约为81920小时。</dd>
4
  <dt>终端服务部门</dt>
5
  <dd>负责回收寿命将尽的Giftia的部门。</dd>
6
</dl>

5.4 项目任务：丰富角色页#

在 character.html 中，为每个角色添加档案列表。修改艾拉的部分：

1
<h3>艾拉</h3>
2
<figure>...</figure>
3
<p>终端服务部门的Giftia，搭档是水柿司。性格内向，不善表达，但内心温柔。</p>
4
<h4>艾拉档案</h4>
5
<ul>
6
  <li>喜欢：甜食、发呆</li>
7
  <li>讨厌：被当作小孩</li>
8
  <li>口头禅：“我知道了”</li>
9
</ul>

同样为司添加档案：

1
<h4>司档案</h4>
2
<ul>
3
  <li>喜欢：照顾人、努力</li>
4
  <li>特长：做饭</li>
5
  <li>梦想：和艾拉一起工作到最后</li>
6
</ul>

再添加一个有序列表，列出主要剧情步骤：

1
<h4>主要剧情步骤</h4>
2
<ol>
3
  <li>第1话：在商场电梯相遇</li>
4
  <li>第2话：第一次回收任务</li>
5
  <li>第3话：游乐园约会</li>
6
  <li>第13话：摩天轮上的告别</li>
7
</ol>

以及一个自定义列表，解释一些术语：

1
<h4>术语解释</h4>
2
<dl>
3
  <dt>Giftia</dt>
4
  <dd>拥有感情的机器人，寿命约为81920小时。</dd>
5
  <dt>终端服务部门</dt>
6
  <dd>负责回收寿命将尽的Giftia的部门。</dd>
7
</dl>

保存后预览，看看列表的默认样式。

6. 表格：用表格展示剧情时间线#

6.1 表格基础#

表格由 <table> 标签创建，里面包含行 <tr> 和单元格 <td>（或表头 <th>）。<caption> 可以添加表格标题。

基本结构：

1
<table>
2
  <caption>表格标题</caption>
3
  <tr>
4
    <th>表头1</th>
5
    <th>表头2</th>
6
  </tr>
7
  <tr>
8
    <td>数据1</td>
9
    <td>数据2</td>
10
  </tr>
11
</table>

6.2 合并单元格#

colspan：跨列合并。例如 <td colspan="2"> 表示这个单元格占据两列。
rowspan：跨行合并。例如 <td rowspan="3"> 表示这个单元格占据三行。

6.3 表格语义化#

为了更好地结构和样式，可以使用 <thead>（表头）、<tbody>（表身）、<tfoot>（表尾）来分组。

6.4 项目任务：创建时间线页#

打开 timeline.html，在 <nav> 后面添加一个表格，展示《可塑性记忆》动画各话的信息。为了看得清楚，我们可以先给表格加一个简单的边框（用 border="1" 属性），后期会用CSS美化。

1
<main>
2
  <h2>剧情时间线</h2>
3

4
  <table border="1" cellpadding="5" cellspacing="0">
5
    <caption>《可塑性记忆》动画剧情</caption>
6
    <thead>
7
      <tr>
8
        <th>话数</th>
9
        <th>标题</th>
10
        <th>关键事件</th>
11
      </tr>
12
    </thead>
13
    <tbody>
14
      <tr><td>第1话</td><td>你与你的相遇</td><td>司与艾拉在商场电梯相遇，开始搭档。</td></tr>
15
      <tr><td>第2话</td><td>不想让你见到</td><td>第一次回收任务：妮娜与百花千寻。</td></tr>
16
      <tr><td>第3话</td><td>两人共度的时光</td><td>司约艾拉去游乐园，关系拉近。</td></tr>
17
      <tr><td>第4话</td><td>无法传达的话语</td><td>满对司产生误会。</td></tr>
18
      <tr><td>第5话</td><td>凝视着你的背影</td><td>扎克的过去揭晓。</td></tr>
19
      <tr><td>第6话</td><td>终于察觉的心意</td><td>司意识到自己对艾拉的感情。</td></tr>
20
      <tr><td>第7话</td><td>想要守护的人</td><td>艾拉的寿命问题浮出水面。</td></tr>
21
      <tr><td>第8话</td><td>理所当然的事情</td><td>司决定陪伴艾拉到最后。</td></tr>
22
      <tr><td>第9话</td><td>向星海许愿</td><td>两人看流星雨。</td></tr>
23
      <tr><td>第10话</td><td>再会</td><td>艾拉与过去的搭档重逢。</td></tr>
24
      <tr><td>第11话</td><td>约定的日子</td><td>艾拉向司坦白剩余时间不多。</td></tr>
25
      <tr><td>第12话</td><td>未能传递的话语</td><td>艾拉开始出现故障。</td></tr>
26
      <tr><td>第13话</td><td>愿你能与重要的人重逢</td><td>摩天轮上的告别，艾拉被回收。</td></tr>
27
    </tbody>
28
    <tfoot>
29
      <tr><td colspan="3">全13话 · 一段难忘的记忆</td></tr>
30
    </tfoot>
31
  </table>
32
</main>

保存后预览，你会看到一个带边框的表格。border="1" 只是临时查看，后面会用CSS彻底美化。

7. 语义化标签：重构页面结构#

7.1 为什么需要语义化？#

之前我们用了 <nav>、<main>、<figure> 等标签，这些就是语义化标签。它们让代码更容易阅读，对搜索引擎优化（SEO）和屏幕阅读器也更友好。接下来我们将所有页面都用语义化标签重新整理。

7.2 常用语义化标签#

<header>：页眉，通常包含网站标题、导航等。
<nav>：导航区域。
<main>：页面主要内容，每个页面只能有一个。
<article>：独立的内容块，比如一篇博客文章。
<section>：文档中的节，通常有标题。
<aside>：侧边栏或补充内容。
<footer>：页脚，包含版权、联系方式等。

7.3 项目任务：重构所有页面#

我们将以 index.html 为例，展示最终结构。其他页面仿照修改。

index.html 最终版：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>艾拉的记忆小屋 - 首页</title>
6
</head>
7
<body>
8
  <header>
9
    <h1>艾拉的记忆小屋</h1>
10
    <nav>
11
      <strong>首页</strong> |
12
      <a href="character.html">角色</a> |
13
      <a href="timeline.html">时间线</a> |
14
      <a href="about.html">关于</a>
15
    </nav>
16
  </header>
17

18
  <main>
19
    <article>
20
      <h2>关于这个小屋</h2>
21
      <p>这是一个用HTML搭建的粉丝网站，致敬《可塑性记忆》中那些温暖而感伤的瞬间。</p>
22
    </article>
23

24
    <section>
25
      <h2>经典台词</h2>
26
      <blockquote>
27
        “越是美好的回忆，有时可能会令人越痛苦。”<br>
28
        —— 艾拉（第3话）
29
      </blockquote>
30
    </section>
31

32
    <section>
33
      <h2>最新动态</h2>
34
      <p>网站刚刚建立，后续会添加更多内容。</p>
35
    </section>
36
  </main>
37

38
  <footer>
39
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
40
  </footer>
41
</body>
42
</html>

character.html 的结构类似，把 <main> 里的内容用 <section> 划分。注意 <main> 内不要包含页眉和页脚。

timeline.html 和 about.html 同样重构。

完成这一步后，所有页面的骨架就搭建好了。下一阶段我们将用CSS为它们穿上漂亮的外衣。

第二篇：CSS入门（给页面穿上衣服）#

8. CSS初探：样式怎么加？#

8.1 什么是CSS？#

CSS（Cascading Style Sheets，层叠样式表）用来控制HTML元素的外观，比如颜色、字体、大小、间距、布局等。语法很简单：

1
选择器 {
2
  属性: 值;
3
  属性: 值;
4
}

例如：

1
p {
2
  color: red;
3
  font-size: 16px;
4
}

8.2 三种添加方式#

内联样式：直接在HTML标签中用 style 属性。不推荐，因为难以维护。
```
1
<p style="color: red;">这是一段红色文字。</p>
```
内部样式表：在HTML文件的 <head> 里用 <style> 标签。适合单个页面。
```
1
<style>
2
  p { color: red; }
3
</style>
```
外部样式表：创建单独的 .css 文件，然后用 <link> 引入。推荐，因为多个页面可以共用同一份样式。

8.3 项目任务：创建外部CSS文件#

步骤1：创建CSS文件夹和文件

在 aira-memory-house 文件夹中新建一个文件夹，命名为 css。然后在 css 文件夹里新建一个文件，命名为 style.css。

步骤2：在HTML中引入CSS

打开每个HTML文件，在 <head> 中添加以下行（通常在 <title> 后面）：

1
<link rel="stylesheet" href="css/style.css">

这样所有页面都会应用 style.css 中的样式。

步骤3：写一条测试样式

在 style.css 中输入：

1
body {
2
  background-color: #f0f8ff;  /* 淡蓝色背景 */
3
}

保存后刷新任意页面，如果背景变成了淡蓝色，说明CSS引入成功。

9. 选择器与颜色：精准选中元素#

9.1 基础选择器#

元素选择器：直接写标签名，如 p、h1，会选中所有该标签。
类选择器：以点开头，如 .my-class，选中所有具有该 class 属性的元素。
ID选择器：以井号开头，如 #my-id，选中具有该 id 的元素（ID在页面中必须唯一）。

示例：

1
p { color: blue; }               /* 所有段落文字变蓝 */
2
.highlight { background: yellow; } /* class="highlight" 的元素背景变黄 */
3
#main-title { font-size: 30px; }   /* id="main-title" 的元素字体变大 */

9.2 组合选择器#

后代选择器：用空格分隔，如 nav a 选中 <nav> 内的所有 <a>。
子选择器：用 > 分隔，如 nav > a 只选中 <nav> 的直接子元素 <a>。
相邻兄弟选择器：用 + 分隔，如 h2 + p 选中紧接在 <h2> 后面的 <p>。

9.3 颜色表示法#

颜色名：如 red、blue、lightgray。
十六进制：如 #ff0000（红色），#00ff00（绿色），#0000ff（蓝色）。每两位表示红、绿、蓝的亮度（00~ff）。常用简写：#f00 等价于 #ff0000。
RGB：rgb(255,0,0) 表示红色。
RGBA：rgba(255,0,0,0.5) 表示半透明红色（最后一个参数是透明度，0~1）。

9.4 项目任务：为页面添加基础配色#

在 style.css 中，先设置全局样式：

1
/* 全局样式 */
2
body {
3
  font-family: sans-serif;      /* 无衬线字体，更现代 */
4
  line-height: 1.6;             /* 行高，让文字更易读 */
5
  color: #333;                  /* 深灰色文字 */
6
  background-color: #f9f9f9;    /* 浅灰背景 */
7
  margin: 0;                    /* 去掉默认外边距 */
8
  padding: 0;
9
}
10

11
/* 导航样式 */
12
nav {
13
  background-color: #2c3e50;    /* 深蓝灰色 */
14
  padding: 10px;
15
  text-align: center;
16
}
17
nav a {
18
  color: white;
19
  text-decoration: none;        /* 去掉下划线 */
20
  margin: 0 10px;
21
}
22
nav a:hover {
23
  text-decoration: underline;   /* 鼠标悬停时出现下划线 */
24
}
25
nav strong {
26
  color: #ffcc00;               /* 当前页标记为金色 */
27
  margin: 0 10px;
28
}
29

30
/* 页脚样式 */
31
footer {
32
  text-align: center;
33
  padding: 20px;
34
  background-color: #2c3e50;
35
  color: white;
36
  margin-top: 40px;
37
}

保存后刷新页面，看看导航和页脚的变化。注意我们还没给 <main> 加样式，所以内容区还是默认样式。

10. 文本与字体：让文字更好看#

10.1 字体相关属性#

font-family：指定字体族，可以写多个备选，如 "Helvetica", "Arial", sans-serif。
font-size：字体大小，常用单位 px（像素）、em（相对父元素）、rem（相对根元素）。
font-weight：字重，normal（400）、bold（700）或数字（100~900）。
font-style：normal 或 italic（斜体）。
text-align：对齐方式，left、center、right。
text-decoration：装饰，如下划线 underline、删除线 line-through。
line-height：行高，可以设倍数如 1.5，或像素值。

10.2 项目任务：美化文本#

在 style.css 中添加以下规则：

1
/* 主内容区域 */
2
main {
3
  max-width: 1000px;
4
  margin: 20px auto;   /* 上下20px，左右自动（水平居中） */
5
  padding: 0 20px;
6
}
7

8
/* 标题样式 */
9
h1 {
10
  font-size: 2.5rem;
11
  color: #2c3e50;
12
  text-align: center;
13
  margin-top: 20px;
14
}
15
h2 {
16
  font-size: 2rem;
17
  color: #34495e;
18
  border-bottom: 2px solid #ddd;
19
  padding-bottom: 5px;
20
}
21
h3 {
22
  font-size: 1.5rem;
23
  color: #2c3e50;
24
}
25
h4 {
26
  font-size: 1.2rem;
27
  color: #555;
28
}
29

30
/* 引用样式 */
31
blockquote {
32
  font-style: italic;
33
  background-color: #ecf0f1;
34
  padding: 15px 20px;
35
  border-left: 5px solid #3498db;
36
  margin: 20px 0;
37
}
38

39
/* 段落样式 */
40
p {
41
  margin-bottom: 15px;
42
}

保存后，观察首页和角色页的文字变化。

11. 盒子模型：边距、边框与内边距#

11.1 盒子模型概念#

每个HTML元素都可以看作一个矩形盒子，从内到外包含：

内容（content）：文本、图片等实际内容。
内边距（padding）：内容与边框之间的空白。
边框（border）：围绕内边距的线。
外边距（margin）：盒子与其他元素之间的空白。

在浏览器开发者工具中，可以看到盒子的具体尺寸（按F12打开）。

11.2 常用属性#

width / height：设置内容区域的宽高。
padding：内边距，可以写1个值（四周相同）、2个值（上下、左右）、4个值（上、右、下、左）。
border：边框，如 border: 1px solid black;（宽度、样式、颜色）。
margin：外边距，写法同 padding。

11.3 项目任务：为内容添加留白#

我们已经为 <main> 设置了内边距和最大宽度，现在为角色卡片添加边框和内边距，让它们看起来更精致。

在 style.css 中添加：

1
/* 角色卡片区域（假设我们给角色部分加了类，稍后修改HTML） */
2
.character-card {
3
  border: 1px solid #ddd;
4
  border-radius: 8px;          /* 圆角边框 */
5
  padding: 15px;
6
  margin-bottom: 20px;
7
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 轻微的阴影 */
8
  background-color: white;
9
}
10

11
.character-card img {
12
  max-width: 100%;             /* 确保图片不超过卡片宽度 */
13
  height: auto;
14
  display: block;              /* 去掉图片底部的间隙 */
15
  margin: 0 auto 10px;         /* 水平居中，下边距10px */
16
}
17

18
.character-card figcaption {
19
  text-align: center;
20
  font-style: italic;
21
  color: #666;
22
}

但我们的HTML中还没有给角色部分添加类，所以需要修改 character.html，为每个角色的外层包裹一个带类的 div 或 section。例如：

1
<section class="character-card">
2
  <h3>艾拉</h3>
3
  <figure>...</figure>
4
  ...
5
</section>

同样为司也加上 character-card 类。这样样式才会生效。

12. 背景与渐变：为页面增添氛围#

12.1 背景属性#

background-color：背景色。
background-image：背景图，如 url('image.jpg')。
background-repeat：是否重复，no-repeat、repeat-x 等。
background-position：背景图位置，如 center center。
background-size：背景图大小，如 cover（覆盖整个区域）、contain（完整显示）。

12.2 渐变#

线性渐变：linear-gradient(方向, 颜色1, 颜色2, ...)。方向可以是 to bottom、45deg 等。

示例：

1
background: linear-gradient(135deg, #a8ede0, #fed6e3);

12.3 项目任务：给页眉添加渐变背景#

修改 style.css 中的 header 样式：

1
header {
2
  background: linear-gradient(135deg, #a8ede0, #fed6e3);
3
  padding: 20px;
4
  text-align: center;
5
}
6
header h1 {
7
  margin: 0;
8
  color: white;
9
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);  /* 文字阴影 */
10
}

注意：之前我们在 header 里只放了 <h1> 和 <nav>，但导航现在是在 <header> 内部吗？是的，按照语义，导航应该放在 <header> 里。所以我们需要调整HTML：把 <nav> 移到 <header> 里面，并去掉 nav 之前的独立背景色，让导航继承 header 的背景。但导航背景色可能太深，需要调整。

为了保持导航清晰，我们可以给 <nav> 设置半透明背景，或者保留原有的深色背景。这里我们保留导航的深色背景，但让它和渐变头部区分开。

修改后的 header 部分HTML：

1
<header>
2
  <h1>艾拉的记忆小屋</h1>
3
  <nav>
4
    <!-- 链接不变 -->
5
  </nav>
6
</header>

CSS调整：把原来对 nav 的背景色和 header 的背景色分开。导航的背景色保留深色，但改为半透明？或者不透明。为了美观，我们让导航背景色为深色半透明，文字白色。

1
header {
2
  background: linear-gradient(135deg, #a8ede0, #fed6e3);
3
  padding: 20px;
4
  text-align: center;
5
}
6
header h1 {
7
  margin: 0 0 10px;
8
  color: white;
9
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
10
}
11
nav {
12
  background-color: rgba(44, 62, 80, 0.8);  /* 半透明深色 */
13
  padding: 10px;
14
  border-radius: 30px;          /* 圆角 */
15
  display: inline-block;        /* 让导航宽度根据内容调整 */
16
}

保存后刷新，看看效果。

13. 布局基础：浮动与Flexbox#

13.1 浮动（float）#

浮动常用于图文混排，比如让图片向左浮动，文字环绕。但复杂布局现在多用Flexbox。

示例：

1
img {
2
  float: left;
3
  margin-right: 15px;
4
}

13.2 Flexbox 布局#

Flexbox（弹性盒）是一维布局模型，可以轻松实现水平或垂直排列、对齐、分布。常用属性：

在父容器设置 display: flex;
flex-direction：主轴方向，row（水平）、column（垂直）。
justify-content：主轴对齐方式，如 center、space-between。
align-items：交叉轴对齐方式，如 center、stretch。
flex-wrap：是否换行，wrap 允许换行。

13.3 项目任务：用Flexbox排列角色卡片#

我们希望角色页的卡片并排显示，而不是上下堆叠。修改 character.html，将两个角色卡片用一个容器包裹，并给容器添加类 character-list。

HTML修改：

1
<div class="character-list">
2
  <section class="character-card">
3
    <!-- 艾拉内容 -->
4
  </section>
5
  <section class="character-card">
6
    <!-- 司内容 -->
7
  </section>
8
</div>

然后在CSS中添加：

1
.character-list {
2
  display: flex;
3
  flex-wrap: wrap;
4
  gap: 30px;          /* 卡片之间的间距，较新属性，简便 */
5
  margin-top: 20px;
6
}
7
.character-card {
8
  flex: 1 1 300px;    /* 每个卡片最小300px，允许放大 */
9
  /* 之前的卡片样式保持不变 */
10
}

现在刷新角色页，两个卡片应该并排显示，如果窗口变窄，卡片会自动换行。

14. 响应式设计：让网站在手机上也好看#

14.1 视口设置#

在HTML的 <head> 中，必须添加视口元标签，告诉浏览器如何控制页面尺寸：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

我们已经在前面的章节中添加过了，检查一下每个页面的 <head> 中是否有这一行。

14.2 媒体查询#

媒体查询可以根据不同的屏幕尺寸应用不同的样式。语法：

1
@media (max-width: 600px) {
2
  /* 当屏幕宽度小于等于600px时，这里的样式生效 */
3
  body {
4
    background-color: lightblue;
5
  }
6
}

14.3 项目任务：添加响应式规则#

为了让网站在手机上更友好，我们添加一些媒体查询：

1
/* 小屏幕（手机） */
2
@media (max-width: 600px) {
3
  nav a, nav strong {
4
    display: block;       /* 导航链接堆叠显示 */
5
    margin: 5px 0;
6
  }
7
  .character-list {
8
    flex-direction: column;  /* 卡片堆叠 */
9
  }
10
  h1 {
11
    font-size: 2rem;      /* 标题小一点 */
12
  }
13
  h2 {
14
    font-size: 1.5rem;
15
  }
16
  main {
17
    padding: 10px;
18
  }
19
}

保存后，在浏览器中拖动窗口变小，观察导航和卡片的变化。也可以用手机模拟器测试（按F12，点击手机图标）。

第三篇：项目美化实战#

15. 美化首页：打造温馨的欢迎页#

首页已经有一些基本样式，我们可以进一步丰富。比如给首页的 <article> 添加一个特殊背景，让引用更突出。

在CSS中添加：

1
/* 首页特色 */
2
.home-article {
3
  background-color: white;
4
  padding: 30px;
5
  border-radius: 10px;
6
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
7
  margin-bottom: 30px;
8
}

然后在 index.html 中，给 <article> 添加类 home-article。注意首页的 <article> 现在是“关于这个小屋”部分，加上类后样式生效。

我们还可以给首页的“最新动态”部分也加点样式，比如用虚线边框。

16. 美化角色页：卡片式设计#

我们已经完成了卡片的基本样式，现在可以微调，比如让卡片悬停时有点效果：

1
.character-card:hover {
2
  transform: translateY(-5px);
3
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
4
  transition: all 0.3s ease;
5
}

这样鼠标悬停时卡片会微微上浮，增加互动感。

17. 美化时间线页：表格样式与斑马纹#

去掉之前加的 border="1" 属性，完全用CSS控制表格样式。修改 timeline.html，去掉 <table> 标签里的 border 等属性，只保留结构和内容。

然后在CSS中添加表格样式：

1
/* 表格样式 */
2
table {
3
  width: 100%;
4
  border-collapse: collapse;   /* 合并边框，避免双线 */
5
  margin: 20px 0;
6
  font-size: 1rem;
7
}
8
caption {
9
  font-size: 1.2rem;
10
  font-weight: bold;
11
  margin-bottom: 10px;
12
  color: #2c3e50;
13
}
14
th, td {
15
  padding: 12px 15px;
16
  text-align: left;
17
  border-bottom: 1px solid #ddd;
18
}
19
th {
20
  background-color: #2c3e50;
21
  color: white;
22
}
23
tr:nth-child(even) {
24
  background-color: #f2f2f2;   /* 偶数行浅灰 */
25
}
26
tr:hover {
27
  background-color: #e0e0e0;    /* 悬停高亮 */
28
}
29
tfoot td {
30
  text-align: center;
31
  font-weight: bold;
32
  background-color: #ecf0f1;
33
}

保存后，时间线页的表格会变得美观很多。

18. 美化关于页：嵌入视频与布局#

关于页我们计划嵌入一段视频。如果没有真实的视频嵌入代码，可以使用 <video> 标签播放本地视频，或者用占位。我们先用一个示例的B站嵌入代码（需要替换为真实链接）。为了布局，我们给视频添加一些样式，使其居中并适应屏幕。

在 about.html 的 <main> 中添加：

1
<h2>关于本站</h2>
2
<p>这是一个粉丝制作的《可塑性记忆》纪念网站...</p>
3

4
<h3>回忆放映室</h3>
5
<div class="video-wrapper">
6
  <iframe width="560" height="315"
7
          src="https://www.youtube.com/embed/dQw4w9WgXcQ"
8
          title="示例视频 - 请替换为真实链接"
9
          frameborder="0"
10
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
11
          allowfullscreen>
12
  </iframe>
13
</div>

然后添加CSS：

1
.video-wrapper {
2
  position: relative;
3
  padding-bottom: 56.25%; /* 16:9 比例 */
4
  height: 0;
5
  overflow: hidden;
6
  max-width: 100%;
7
  margin: 20px 0;
8
}
9
.video-wrapper iframe {
10
  position: absolute;
11
  top: 0;
12
  left: 0;
13
  width: 100%;
14
  height: 100%;
15
}

这段CSS让视频容器保持16:9比例，并让 iframe 填满，实现响应式视频。

第四篇：JavaScript入门与弹幕留言墙#

19. JavaScript初体验：变量、事件与DOM操作#

19.1 什么是JavaScript？#

JavaScript（简称JS）是一种脚本语言，能让网页动态交互。它可以：

修改HTML和CSS（DOM操作）。
响应用户操作（点击、输入等）。
与服务器通信（Ajax）。

19.2 引入JS#

和CSS类似，JS可以写在HTML内部（<script> 标签），也可以外部文件引入。推荐外部文件。

步骤1：创建JS文件夹和文件

在项目文件夹中新建 js 文件夹，里面创建 main.js。

步骤2：在HTML中引入

在每个页面的 </body> 结束标签之前添加：

1
<script src="js/main.js"></script>

这样确保JS在页面加载完后执行。

19.3 基本语法#

变量：let 声明变量，const 声明常量。
函数：function 函数名() { ... } 或箭头函数 () => { ... }。
事件监听：用 addEventListener 给元素绑定事件。

19.4 操作DOM#

document.querySelector('选择器')：获取第一个匹配的元素。
document.querySelectorAll('选择器')：获取所有匹配的元素（类数组）。
element.textContent：获取或设置文本内容。
element.innerHTML：获取或设置HTML内容。
element.style.属性：修改行内样式。

19.5 项目任务：添加一个简单的问候弹窗#

在首页添加一个按钮，点击后弹窗显示“欢迎来到艾拉的记忆小屋”。

首先在 index.html 的 <main> 内合适位置添加一个按钮：

1
<button id="greet-btn">点击问候</button>

然后在 main.js 中写入：

1
// 获取按钮元素
2
const btn = document.querySelector('#greet-btn');
3

4
// 添加点击事件监听
5
btn.addEventListener('click', function() {
6
  alert('欢迎来到艾拉的记忆小屋！');
7
});

保存后，打开首页点击按钮，应该能看到弹窗。

20. 弹幕留言墙：让访客留下弹幕#

20.1 设计思路#

我们创建一个新页面 danmu.html（或者放在“关于”页里，但为了清晰，我们单独建一个页面）。页面上有一个输入框、一个“发射”按钮，以及一个容器用于显示弹幕。用户输入文字后，点击发射，会在容器右侧生成一条弹幕，向左移动，直到消失。

20.2 步骤#

步骤1：创建 danmu.html

复制其他页面的基础结构，修改导航，添加“弹幕墙”链接。主体内容如下：

1
<main>
2
  <h2>弹幕留言墙</h2>
3
  <p>写下你想对艾拉或司说的话，让它像弹幕一样飘过吧！</p>
4

5
  <div id="danmu-container" style="position: relative; height: 400px; border: 2px dashed #ccc; overflow: hidden; background: #f0f0f0; margin-bottom: 20px;"></div>
6

7
  <input type="text" id="danmu-input" placeholder="输入你的弹幕" style="width: 300px; padding: 8px;">
8
  <button id="send-danmu">发射</button>
9
</main>

步骤2：在 main.js 中添加弹幕逻辑

1
// 获取元素
2
const container = document.getElementById('danmu-container');
3
const input = document.getElementById('danmu-input');
4
const sendBtn = document.getElementById('send-danmu');
5

6
// 发射弹幕函数
7
function sendDanmu() {
8
  const text = input.value.trim();
9
  if (text === '') return;  // 如果输入为空，不操作
10

11
  // 创建弹幕元素
12
  const danmu = document.createElement('div');
13
  danmu.textContent = text;
14
  danmu.style.position = 'absolute';
15
  danmu.style.right = '0';   // 初始位置在容器最右边（我们将用left动画，所以先设left为容器宽度）
16
  danmu.style.top = Math.random() * (container.clientHeight - 30) + 'px'; // 随机高度，30是估计的弹幕高度
17
  danmu.style.color = '#' + Math.floor(Math.random()*16777215).toString(16); // 随机颜色
18
  danmu.style.whiteSpace = 'nowrap';  // 不换行
19
  danmu.style.fontSize = '20px';
20
  danmu.style.fontWeight = 'bold';
21
  danmu.style.textShadow = '1px 1px 2px rgba(0,0,0,0.3)';
22
  danmu.style.zIndex = '100';
23

24
  // 将弹幕添加到容器
25
  container.appendChild(danmu);
26

27
  // 获取容器宽度
28
  const containerWidth = container.clientWidth;
29
  // 设置初始left为容器宽度（从右边开始）
30
  danmu.style.left = containerWidth + 'px';
31

32
  // 动画：每隔20ms向左移动2px
33
  let left = containerWidth;
34
  const interval = setInterval(() => {
35
    left -= 2;
36
    danmu.style.left = left + 'px';
37
    // 如果弹幕完全移出左侧，清除定时器并移除元素
38
    if (left < -danmu.clientWidth) {
39
      clearInterval(interval);
40
      danmu.remove();
41
    }
42
  }, 20);
43

44
  // 清空输入框
45
  input.value = '';
46
}
47

48
// 给按钮绑定事件
49
sendBtn.addEventListener('click', sendDanmu);
50

51
// 可选：按回车也发射
52
input.addEventListener('keypress', function(e) {
53
  if (e.key === 'Enter') {
54
    sendDanmu();
55
  }
56
});

步骤3：测试

打开 danmu.html，输入文字，点击发射，应该能看到彩色弹幕从右向左移动。

21. 弹幕动起来：简单动画效果#

上面的实现是用 setInterval 手动控制位置，但现代CSS动画更流畅。我们可以用CSS动画替代JS动画。

修改JS，不再用 setInterval，而是添加一个CSS类，让弹幕通过 animation 移动。

步骤1：定义CSS动画

在 style.css 中添加：

1
@keyframes danmuMove {
2
  from {
3
    transform: translateX(0);
4
  }
5
  to {
6
    transform: translateX(-100vw);  /* 向左移动一个屏幕宽度 */
7
  }
8
}
9
.danmu {
10
  position: absolute;
11
  white-space: nowrap;
12
  font-size: 20px;
13
  font-weight: bold;
14
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
15
  animation: danmuMove 8s linear forwards;  /* 8秒匀速，结束后保持最后一帧 */
16
  z-index: 100;
17
}

注意：-100vw 是基于视口的，但我们的容器是固定宽度的，所以需要用容器宽度。为了精确，我们可以用JS计算容器宽度并设置动画时移出距离。但简单起见，我们可以让弹幕从右边界移动到左边界，用 right 和 left 属性。更简单：用 transform: translateX(-100%) 移动自身宽度，但这只能移出自身，不能移出容器。所以这里我们用JS计算距离会更准确。

实际上，我们可以用 transform: translateX(-容器宽度)，但容器宽度需在JS中设置。我们可以用CSS变量传递。

一种简单方案：继续用JS动画，但改用 requestAnimationFrame 以获得更好的性能。但为了教学，我们保留 setInterval 版本，因为它直观易懂。

或者，我们介绍另一种方法：使用 Web Animations API，但可能超出入门范围。所以我们就保留 setInterval 版本，并说明这是基础实现，后续可以优化。

第五篇：项目整合与发布#

22. 项目检查与优化#

检查所有链接：确保每个页面导航都能正确跳转。
验证HTML和CSS：可以用W3C验证工具（https://validator.w3.org/）检查是否有语法错误。
检查图片路径：确保所有图片都能显示。
代码注释：适当添加注释，方便以后修改。
文件整理：确保所有文件都在正确的位置，没有多余文件。

23. 部署到GitHub Pages#

注册/登录GitHub（如果没有账号）。
创建新仓库：点击右上角加号，选择“New repository”，仓库名可以叫 aira-memory-house，选择公开（Public），其他默认。
上传文件：进入仓库，点击“Add file” → “Upload files”，将项目文件夹中的所有文件和文件夹拖进去，然后提交。
开启GitHub Pages：进入仓库“Settings”，找到左侧“Pages”，在“Branch”下拉选择 main 或 master，文件夹选 / (root)，然后点击“Save”。稍等几分钟，页面会显示你的网站地址，例如 https://你的用户名.github.io/aira-memory-house/。
访问测试：用浏览器打开该地址，确认网站运行正常。

24. 继续前行：下一步学什么？#

恭喜！你已经完成了从零到入门的HTML/CSS/JS学习，并拥有了一个属于自己的回忆网站。接下来你可以：

深入学习CSS：Grid布局、动画、过渡、预处理器（Sass）。
深入学习JavaScript：ES6+特性、异步编程、Fetch API、DOM高级操作。
学习前端框架：React、Vue，提高开发效率。
学习版本控制：Git和GitHub的基本使用。
探索后端：学习Node.js，让你的留言板真正能存储数据。

推荐资源：

MDN Web Docs（最权威的Web技术文档）
W3School（中文入门教程）
《可塑性记忆》官方设定集（假设）

🎁 完整项目代码#

为了方便你直接使用，下面附上所有文件的最终代码。请按照以下结构创建文件。

文件结构#

1
aira-memory-house/
2
├── index.html
3
├── character.html
4
├── timeline.html
5
├── about.html
6
├── danmu.html
7
├── css/
8
│   └── style.css
9
├── js/
10
│   └── main.js
11
└── images/
12
    ├── aira.png
13
    └── tsukasa.png

📄 index.html#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="一个纪念《可塑性记忆》的粉丝网站，记录艾拉与司的故事。">
7
  <meta name="author" content="Roka">
8
  <title>艾拉的记忆小屋 - 首页</title>
9
  <link rel="stylesheet" href="css/style.css">
10
</head>
11
<body>
12
  <header>
13
    <h1>艾拉的记忆小屋</h1>
14
    <nav>
15
      <strong>首页</strong>
16
      <a href="character.html">角色</a>
17
      <a href="timeline.html">时间线</a>
18
      <a href="about.html">关于</a>
19
      <a href="danmu.html">弹幕墙</a>
20
    </nav>
21
  </header>
22

23
  <main>
24
    <article class="home-article">
25
      <h2>关于这个小屋</h2>
26
      <p>这是一个用HTML、CSS和JavaScript搭建的粉丝网站，致敬《可塑性记忆》中那些温暖而感伤的瞬间。</p>
27
      <p>在这里，你可以了解<strong>水柿司</strong>与<strong>艾拉</strong>的故事，回顾动画中的经典场景，也可以留下你的弹幕，与同好分享感动。</p>
28
    </article>
29

30
    <section class="quote-section">
31
      <h2>经典台词</h2>
32
      <blockquote>
33
        “越是美好的回忆，有时可能会令人越痛苦。”<br>
34
        —— 艾拉（第3话）
35
      </blockquote>
36
      <blockquote>
37
        “谢谢你，能够为我流泪。”<br>
38
        —— 艾拉（第13话）
39
      </blockquote>
40
    </section>
41

42
    <section class="welcome-section">
43
      <h2>欢迎留言</h2>
44
      <p>点击下面的按钮，或者去<a href="danmu.html">弹幕墙</a>留下你想说的话。</p>
45
      <button id="greet-btn" class="btn">点击问候</button>
46
    </section>
47
  </main>
48

49
  <footer>
50
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
51
  </footer>
52

53
  <script src="js/main.js"></script>
54
</body>
55
</html>

📄 character.html#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="一个纪念《可塑性记忆》的粉丝网站，记录艾拉与司的故事。">
7
  <meta name="author" content="Roka">
8
  <title>艾拉的记忆小屋 - 角色介绍</title>
9
  <link rel="stylesheet" href="css/style.css">
10
</head>
11
<body>
12
  <header>
13
    <h1>艾拉的记忆小屋</h1>
14
    <nav>
15
      <a href="index.html">首页</a>
16
      <strong>角色</strong>
17
      <a href="timeline.html">时间线</a>
18
      <a href="about.html">关于</a>
19
      <a href="danmu.html">弹幕墙</a>
20
    </nav>
21
  </header>
22

23
  <main>
24
    <h2>角色介绍</h2>
25

26
    <div class="character-list">
27
      <section class="character-card">
28
        <h3>艾拉</h3>
29
        <figure>
30
          <img src="images/aira.png" alt="艾拉" width="200">
31
          <figcaption>艾拉 - Giftia</figcaption>
32
        </figure>
33
        <p>终端服务部门的Giftia，搭档是水柿司。性格内向，不善表达，但内心温柔。</p>
34
        <h4>艾拉档案</h4>
35
        <ul>
36
          <li>喜欢：甜食、发呆</li>
37
          <li>讨厌：被当作小孩</li>
38
          <li>口头禅：“我知道了”</li>
39
        </ul>
40
      </section>
41

42
      <section class="character-card">
43
        <h3>水柿司</h3>
44
        <figure>
45
          <img src="images/tsukasa.png" alt="水柿司" width="200">
46
          <figcaption>水柿司 - 人类</figcaption>
47
        </figure>
48
        <p>因考试失利被父母安排进入SAI公司，成为艾拉的搭档。逐渐走进艾拉的内心。</p>
49
        <h4>司档案</h4>
50
        <ul>
51
          <li>喜欢：照顾人、努力</li>
52
          <li>特长：做饭</li>
53
          <li>梦想：和艾拉一起工作到最后</li>
54
        </ul>
55
      </section>
56
    </div>
57

58
    <section class="story-steps">
59
      <h3>主要剧情步骤</h3>
60
      <ol>
61
        <li>第1话：在商场电梯相遇</li>
62
        <li>第2话：第一次回收任务</li>
63
        <li>第3话：游乐园约会</li>
64
        <li>第13话：摩天轮上的告别</li>
65
      </ol>
66
    </section>
67

68
    <section class="terms">
69
      <h3>术语解释</h3>
70
      <dl>
71
        <dt>Giftia</dt>
72
        <dd>拥有感情的机器人，寿命约为81920小时。</dd>
73
        <dt>终端服务部门</dt>
74
        <dd>负责回收寿命将尽的Giftia的部门。</dd>
75
      </dl>
76
    </section>
77
  </main>
78

79
  <footer>
80
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
81
  </footer>
82

83
  <script src="js/main.js"></script>
84
</body>
85
</html>

📄 timeline.html#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="一个纪念《可塑性记忆》的粉丝网站，记录艾拉与司的故事。">
7
  <meta name="author" content="Roka">
8
  <title>艾拉的记忆小屋 - 剧情时间线</title>
9
  <link rel="stylesheet" href="css/style.css">
10
</head>
11
<body>
12
  <header>
13
    <h1>艾拉的记忆小屋</h1>
14
    <nav>
15
      <a href="index.html">首页</a>
16
      <a href="character.html">角色</a>
17
      <strong>时间线</strong>
18
      <a href="about.html">关于</a>
19
      <a href="danmu.html">弹幕墙</a>
20
    </nav>
21
  </header>
22

23
  <main>
24
    <h2>剧情时间线</h2>
25

26
    <table class="timeline-table">
27
      <caption>《可塑性记忆》动画剧情</caption>
28
      <thead>
29
        <tr>
30
          <th>话数</th>
31
          <th>标题</th>
32
          <th>关键事件</th>
33
        </tr>
34
      </thead>
35
      <tbody>
36
        <tr><td>第1话</td><td>你与你的相遇</td><td>司与艾拉在商场电梯相遇，开始搭档。</td></tr>
37
        <tr><td>第2话</td><td>不想让你见到</td><td>第一次回收任务：妮娜与百花千寻。</td></tr>
38
        <tr><td>第3话</td><td>两人共度的时光</td><td>司约艾拉去游乐园，关系拉近。</td></tr>
39
        <tr><td>第4话</td><td>无法传达的话语</td><td>满对司产生误会。</td></tr>
40
        <tr><td>第5话</td><td>凝视着你的背影</td><td>扎克的过去揭晓。</td></tr>
41
        <tr><td>第6话</td><td>终于察觉的心意</td><td>司意识到自己对艾拉的感情。</td></tr>
42
        <tr><td>第7话</td><td>想要守护的人</td><td>艾拉的寿命问题浮出水面。</td></tr>
43
        <tr><td>第8话</td><td>理所当然的事情</td><td>司决定陪伴艾拉到最后。</td></tr>
44
        <tr><td>第9话</td><td>向星海许愿</td><td>两人看流星雨。</td></tr>
45
        <tr><td>第10话</td><td>再会</td><td>艾拉与过去的搭档重逢。</td></tr>
46
        <tr><td>第11话</td><td>约定的日子</td><td>艾拉向司坦白剩余时间不多。</td></tr>
47
        <tr><td>第12话</td><td>未能传递的话语</td><td>艾拉开始出现故障。</td></tr>
48
        <tr><td>第13话</td><td>愿你能与重要的人重逢</td><td>摩天轮上的告别，艾拉被回收。</td></tr>
49
      </tbody>
50
      <tfoot>
51
        <tr><td colspan="3">全13话 · 一段难忘的记忆</td></tr>
52
      </tfoot>
53
    </table>
54
  </main>
55

56
  <footer>
57
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
58
  </footer>
59

60
  <script src="js/main.js"></script>
61
</body>
62
</html>

📄 about.html#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="一个纪念《可塑性记忆》的粉丝网站，记录艾拉与司的故事。">
7
  <meta name="author" content="Roka">
8
  <title>艾拉的记忆小屋 - 关于本站</title>
9
  <link rel="stylesheet" href="css/style.css">
10
</head>
11
<body>
12
  <header>
13
    <h1>艾拉的记忆小屋</h1>
14
    <nav>
15
      <a href="index.html">首页</a>
16
      <a href="character.html">角色</a>
17
      <a href="timeline.html">时间线</a>
18
      <strong>关于</strong>
19
      <a href="danmu.html">弹幕墙</a>
20
    </nav>
21
  </header>
22

23
  <main>
24
    <article class="about-article">
25
      <h2>关于本站</h2>
26
      <p>这是一个粉丝制作的《可塑性记忆》纪念网站，旨在通过HTML、CSS和JavaScript的学习，重温动画中的感动。</p>
27
      <p>所有素材版权归原制作方所有，本站仅供学习交流使用。</p>
28
      <p>作者：<strong>Roka</strong> · 芦花家 (roka.ink)</p>
29
    </article>
30

31
    <section class="video-section">
32
      <h3>回忆放映室</h3>
33
      <p>下面嵌入的是《可塑性记忆》的OP《朝霞与星空》的MV（示例，请替换为真实视频）：</p>
34
      <div class="video-wrapper">
35
        <!-- 请替换为真实的嵌入代码，这里仅作示例 -->
36
        <iframe width="560" height="315"
37
                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
38
                title="示例视频 - 请替换为真实链接"
39
                frameborder="0"
40
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
41
                allowfullscreen>
42
        </iframe>
43
      </div>
44
      <p class="video-note">※ 此处为示例视频，实际可替换为《可塑性记忆》相关视频</p>
45
    </section>
46

47
    <section class="contact-section">
48
      <h3>联系我</h3>
49
      <p>如果你有任何问题或建议，欢迎通过以下方式联系我：</p>
50
      <ul>
51
        <li>GitHub: <a href="https://github.com/YS-110509" target="_blank">YS-110509</a></li>
52
        <li>博客: <a href="https://roka.ink" target="_blank">芦花家</a></li>
53
      </ul>
54
    </section>
55
  </main>
56

57
  <footer>
58
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
59
  </footer>
60

61
  <script src="js/main.js"></script>
62
</body>
63
</html>

📄 danmu.html#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <meta name="description" content="一个纪念《可塑性记忆》的粉丝网站，记录艾拉与司的故事。">
7
  <meta name="author" content="Roka">
8
  <title>艾拉的记忆小屋 - 弹幕留言墙</title>
9
  <link rel="stylesheet" href="css/style.css">
10
</head>
11
<body>
12
  <header>
13
    <h1>艾拉的记忆小屋</h1>
14
    <nav>
15
      <a href="index.html">首页</a>
16
      <a href="character.html">角色</a>
17
      <a href="timeline.html">时间线</a>
18
      <a href="about.html">关于</a>
19
      <strong>弹幕墙</strong>
20
    </nav>
21
  </header>
22

23
  <main>
24
    <h2>弹幕留言墙</h2>
25
    <p>写下你想对艾拉或司说的话，让它像弹幕一样飘过吧！</p>
26

27
    <div id="danmu-container" class="danmu-container"></div>
28

29
    <div class="danmu-controls">
30
      <input type="text" id="danmu-input" placeholder="输入你的弹幕" class="danmu-input">
31
      <button id="send-danmu" class="btn">发射</button>
32
      <button id="clear-danmu" class="btn btn-secondary">清空</button>
33
    </div>
34

35
    <div class="danmu-tips">
36
      <p>💡 小贴士：弹幕会从右向左移动，随机颜色，试试看！</p>
37
    </div>
38
  </main>
39

40
  <footer>
41
    <p>&copy; 2026 芦花家 · 愿你能与重要的人重逢</p>
42
  </footer>
43

44
  <script src="js/main.js"></script>
45
</body>
46
</html>

🎨 css/style.css#

1
/* ===== 全局样式 ===== */
2
* {
3
  margin: 0;
4
  padding: 0;
5
  box-sizing: border-box;
6
}
7

8
body {
9
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
10
  line-height: 1.6;
11
  color: #333;
12
  background-color: #f9f9f9;
13
  display: flex;
14
  flex-direction: column;
15
  min-height: 100vh;
16
}
17

18
/* ===== 头部与导航 ===== */
19
header {
20
  background: linear-gradient(135deg, #a8ede0, #fed6e3);
21
  padding: 20px;
22
  text-align: center;
23
}
24

25
header h1 {
26
  margin: 0 0 15px 0;
27
  color: white;
28
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
29
  font-size: 2.5rem;
30
}
31

32
nav {
33
  background-color: rgba(44, 62, 80, 0.85);
34
  padding: 12px;
35
  border-radius: 40px;
36
  display: inline-block;
37
  backdrop-filter: blur(5px);
38
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
39
}
40

41
nav a, nav strong {
42
  color: white;
43
  text-decoration: none;
44
  margin: 0 15px;
45
  padding: 5px 10px;
46
  border-radius: 20px;
47
  transition: all 0.3s ease;
48
}
49

50
nav a:hover {
51
  background-color: rgba(255, 255, 255, 0.2);
52
  text-decoration: none;
53
}
54

55
nav strong {
56
  background-color: #ffcc00;
57
  color: #2c3e50;
58
  font-weight: bold;
59
}
60

61
/* ===== 主内容区域 ===== */
62
main {
63
  flex: 1;
64
  max-width: 1200px;
65
  margin: 30px auto;
66
  padding: 0 20px;
67
  width: 100%;
68
}
69

70
/* ===== 标题样式 ===== */
71
h1 {
72
  font-size: 2.5rem;
73
  color: #2c3e50;
74
}
75

76
h2 {
77
  font-size: 2rem;
78
  color: #34495e;
79
  border-bottom: 3px solid #ddd;
80
  padding-bottom: 10px;
81
  margin-bottom: 20px;
82
}
83

84
h3 {
85
  font-size: 1.5rem;
86
  color: #2c3e50;
87
  margin: 20px 0 10px;
88
}
89

90
h4 {
91
  font-size: 1.2rem;
92
  color: #555;
93
  margin: 15px 0 5px;
94
}
95

96
/* ===== 段落与引用 ===== */
97
p {
98
  margin-bottom: 15px;
99
}
100

101
blockquote {
102
  font-style: italic;
103
  background-color: #ecf0f1;
104
  padding: 15px 20px;
105
  border-left: 5px solid #3498db;
106
  margin: 20px 0;
107
  border-radius: 0 8px 8px 0;
108
}
109

110
/* ===== 列表样式 ===== */
111
ul, ol, dl {
112
  margin: 10px 0 20px 20px;
113
}
114

115
li, dd {
116
  margin-bottom: 5px;
117
}
118

119
dt {
120
  font-weight: bold;
121
  color: #2c3e50;
122
  margin-top: 10px;
123
}
124

125
/* ===== 链接样式 ===== */
126
a {
127
  color: #3498db;
128
  text-decoration: none;
129
  transition: color 0.3s;
130
}
131

132
a:hover {
133
  color: #2980b9;
134
  text-decoration: underline;
135
}
136

137
/* ===== 按钮样式 ===== */
138
.btn {
139
  display: inline-block;
140
  background-color: #3498db;
141
  color: white;
142
  border: none;
143
  padding: 10px 20px;
144
  border-radius: 30px;
145
  cursor: pointer;
146
  font-size: 1rem;
147
  transition: background-color 0.3s, transform 0.2s;
148
  border: none;
149
}
150

151
.btn:hover {
152
  background-color: #2980b9;
153
  transform: translateY(-2px);
154
}
155

156
.btn-secondary {
157
  background-color: #95a5a6;
158
}
159

160
.btn-secondary:hover {
161
  background-color: #7f8c8d;
162
}
163

164
/* ===== 页脚样式 ===== */
165
footer {
166
  text-align: center;
167
  padding: 20px;
168
  background-color: #2c3e50;
169
  color: white;
170
  margin-top: 40px;
171
}
172

173
/* ===== 首页特有样式 ===== */
174
.home-article {
175
  background-color: white;
176
  padding: 30px;
177
  border-radius: 10px;
178
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
179
  margin-bottom: 30px;
180
}
181

182
.quote-section {
183
  background-color: white;
184
  padding: 20px;
185
  border-radius: 10px;
186
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
187
  margin-bottom: 30px;
188
}
189

190
.welcome-section {
191
  text-align: center;
192
  padding: 20px;
193
}
194

195
/* ===== 角色页样式 ===== */
196
.character-list {
197
  display: flex;
198
  flex-wrap: wrap;
199
  gap: 30px;
200
  margin: 30px 0;
201
}
202

203
.character-card {
204
  flex: 1 1 300px;
205
  border: 1px solid #ddd;
206
  border-radius: 10px;
207
  padding: 20px;
208
  background-color: white;
209
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
210
  transition: all 0.3s ease;
211
}
212

213
.character-card:hover {
214
  transform: translateY(-5px);
215
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
216
}
217

218
.character-card img {
219
  max-width: 100%;
220
  height: auto;
221
  display: block;
222
  margin: 0 auto 15px;
223
  border-radius: 10px;
224
}
225

226
.character-card figcaption {
227
  text-align: center;
228
  font-style: italic;
229
  color: #666;
230
  margin-bottom: 15px;
231
}
232

233
.character-card ul {
234
  margin-left: 0;
235
  list-style-position: inside;
236
}
237

238
.story-steps, .terms {
239
  background-color: white;
240
  padding: 20px;
241
  border-radius: 10px;
242
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
243
  margin: 30px 0;
244
}
245

246
/* ===== 时间线页表格样式 ===== */
247
.timeline-table {
248
  width: 100%;
249
  border-collapse: collapse;
250
  margin: 20px 0;
251
  font-size: 1rem;
252
  background-color: white;
253
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
254
  border-radius: 10px;
255
  overflow: hidden;
256
}
257

258
.timeline-table caption {
259
  font-size: 1.2rem;
260
  font-weight: bold;
261
  margin-bottom: 15px;
262
  color: #2c3e50;
263
}
264

265
.timeline-table th,
266
.timeline-table td {
267
  padding: 12px 15px;
268
  text-align: left;
269
  border-bottom: 1px solid #ddd;
270
}
271

272
.timeline-table th {
273
  background-color: #2c3e50;
274
  color: white;
275
  font-weight: bold;
276
}
277

278
.timeline-table tr:nth-child(even) {
279
  background-color: #f2f2f2;
280
}
281

282
.timeline-table tr:hover {
283
  background-color: #e0e0e0;
284
}
285

286
.timeline-table tfoot td {
287
  text-align: center;
288
  font-weight: bold;
289
  background-color: #ecf0f1;
290
}
291

292
/* ===== 关于页样式 ===== */
293
.about-article {
294
  background-color: white;
295
  padding: 30px;
296
  border-radius: 10px;
297
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
298
  margin-bottom: 30px;
299
}
300

301
.video-section {
302
  background-color: white;
303
  padding: 20px;
304
  border-radius: 10px;
305
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
306
  margin: 30px 0;
307
}
308

309
.video-wrapper {
310
  position: relative;
311
  padding-bottom: 56.25%; /* 16:9 比例 */
312
  height: 0;
313
  overflow: hidden;
314
  max-width: 100%;
315
  margin: 20px 0;
316
  border-radius: 10px;
317
}
318

319
.video-wrapper iframe {
320
  position: absolute;
321
  top: 0;
322
  left: 0;
323
  width: 100%;
324
  height: 100%;
325
}
326

327
.video-note {
328
  font-size: 0.9rem;
329
  color: #666;
330
  font-style: italic;
331
  text-align: center;
332
}
333

334
.contact-section {
335
  background-color: white;
336
  padding: 20px;
337
  border-radius: 10px;
338
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
339
  margin: 30px 0;
340
}
341

342
/* ===== 弹幕墙样式 ===== */
343
.danmu-container {
344
  position: relative;
345
  height: 400px;
346
  border: 2px dashed #ccc;
347
  overflow: hidden;
348
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
349
  margin-bottom: 20px;
350
  border-radius: 10px;
351
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
352
}
353

354
.danmu-controls {
355
  display: flex;
356
  gap: 10px;
357
  margin: 20px 0;
358
  flex-wrap: wrap;
359
}
360

361
.danmu-input {
362
  flex: 1;
363
  min-width: 250px;
364
  padding: 12px 15px;
365
  border: 2px solid #ddd;
366
  border-radius: 30px;
367
  font-size: 1rem;
368
  transition: border-color 0.3s;
369
}
370

371
.danmu-input:focus {
372
  outline: none;
373
  border-color: #3498db;
374
}
375

376
.danmu-tips {
377
  background-color: #ecf0f1;
378
  padding: 15px;
379
  border-radius: 10px;
380
  margin: 20px 0;
381
  color: #2c3e50;
382
}
383

384
/* ===== 弹幕元素样式（JS动态创建） ===== */
385
.danmu-item {
386
  position: absolute;
387
  white-space: nowrap;
388
  font-size: 20px;
389
  font-weight: bold;
390
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
391
  z-index: 100;
392
  pointer-events: none; /* 让弹幕不阻挡点击 */
393
  user-select: none;    /* 防止选中 */
394
  animation: danmuMove 8s linear forwards;
395
}
396

397
@keyframes danmuMove {
398
  from {
399
    transform: translateX(100%);
400
  }
401
  to {
402
    transform: translateX(-100%);
403
  }
404
}
405

406
/* ===== 响应式设计 ===== */
407
@media (max-width: 768px) {
408
  header h1 {
409
    font-size: 2rem;
410
  }
411

412
  nav {
413
    display: flex;
414
    flex-wrap: wrap;
415
    justify-content: center;
416
    border-radius: 20px;
417
  }
418

419
  nav a, nav strong {
420
    margin: 5px 10px;
421
  }
422

423
  h2 {
424
    font-size: 1.5rem;
425
  }
426

427
  .character-list {
428
    flex-direction: column;
429
  }
430

431
  .character-card {
432
    flex: 1 1 auto;
433
  }
434

435
  .timeline-table {
436
    font-size: 0.9rem;
437
  }
438

439
  .timeline-table th,
440
  .timeline-table td {
441
    padding: 8px 10px;
442
  }
443

444
  .danmu-controls {
445
    flex-direction: column;
446
  }
447

448
  .danmu-input {
449
    width: 100%;
450
  }
451
}
452

453
@media (max-width: 480px) {
454
  main {
455
    padding: 0 10px;
456
  }
457

458
  h1 {
459
    font-size: 1.8rem;
460
  }
461

462
  nav a, nav strong {
463
    margin: 3px 5px;
464
    font-size: 0.9rem;
465
  }
466

467
  blockquote {
468
    padding: 10px 15px;
469
    font-size: 0.95rem;
470
  }
471

472
  .timeline-table {
473
    font-size: 0.8rem;
474
  }
475

476
  .timeline-table th,
477
  .timeline-table td {
478
    padding: 6px 8px;
479
  }
480
}

📄 js/main.js#

1
// ===== 页面加载完成后执行 =====
2
document.addEventListener('DOMContentLoaded', function() {
3

4
  // ===== 首页问候按钮 =====
5
  const greetBtn = document.getElementById('greet-btn');
6
  if (greetBtn) {
7
    greetBtn.addEventListener('click', function() {
8
      alert('欢迎来到艾拉的记忆小屋！愿你能与重要的人重逢。');
9
    });
10
  }
11

12
  // ===== 弹幕功能 =====
13
  const danmuContainer = document.getElementById('danmu-container');
14
  const danmuInput = document.getElementById('danmu-input');
15
  const sendBtn = document.getElementById('send-danmu');
16
  const clearBtn = document.getElementById('clear-danmu');
17

18
  if (danmuContainer && danmuInput && sendBtn) {
19

20
    // 发射弹幕函数
21
    function sendDanmu() {
22
      const text = danmuInput.value.trim();
23
      if (text === '') {
24
        alert('请输入弹幕内容！');
25
        return;
26
      }
27

28
      // 创建弹幕元素
29
      const danmu = document.createElement('div');
30
      danmu.className = 'danmu-item';
31
      danmu.textContent = text;
32

33
      // 随机颜色（生成鲜艳的颜色）
34
      const hue = Math.floor(Math.random() * 360);
35
      danmu.style.color = `hsl(${hue}, 100%, 70%)`;
36

37
      // 随机大小 (18-28px)
38
      const size = Math.floor(Math.random() * 10) + 18;
39
      danmu.style.fontSize = size + 'px';
40

41
      // 随机垂直位置 (10% - 90%)
42
      const topPercent = Math.floor(Math.random() * 80) + 10;
43
      danmu.style.top = topPercent + '%';
44

45
      // 随机动画时长 (6-12秒)
46
      const duration = (Math.floor(Math.random() * 6) + 6).toFixed(1);
47
      danmu.style.animation = `danmuMove ${duration}s linear forwards`;
48

49
      // 添加到容器
50
      danmuContainer.appendChild(danmu);
51

52
      // 动画结束后移除元素
53
      danmu.addEventListener('animationend', function() {
54
        danmu.remove();
55
      });
56

57
      // 清空输入框
58
      danmuInput.value = '';
59
    }
60

61
    // 点击发射按钮
62
    sendBtn.addEventListener('click', sendDanmu);
63

64
    // 按回车键发射
65
    danmuInput.addEventListener('keypress', function(e) {
66
      if (e.key === 'Enter') {
67
        sendDanmu();
68
      }
69
    });
70

71
    // 清空所有弹幕
72
    if (clearBtn) {
73
      clearBtn.addEventListener('click', function() {
74
        while (danmuContainer.firstChild) {
75
          danmuContainer.removeChild(danmuContainer.firstChild);
76
        }
77
      });
78
    }
79
  }
80

81
  // ===== 为当前页面的导航链接添加高亮 =====
82
  // 这个功能已经在HTML中用<strong>手动实现了，但也可以用JS自动处理
83
  // 以下是可选的自动高亮代码（注释掉，因为我们已经手动标记）
84
  /*
85
  const currentPage = window.location.pathname.split('/').pop() || 'index.html';
86
  const navLinks = document.querySelectorAll('nav a');
87
  navLinks.forEach(link => {
88
    const linkHref = link.getAttribute('href');
89
    if (linkHref === currentPage) {
90
      const strong = document.createElement('strong');
91
      strong.textContent = link.textContent;
92
      link.parentNode.replaceChild(strong, link);
93
    }
94
  });
95
  */
96

97
  // ===== 为所有外部链接添加新标签打开 =====
98
  const externalLinks = document.querySelectorAll('a[href^="http"]');
99
  externalLinks.forEach(link => {
100
    if (!link.href.includes(window.location.hostname)) {
101
      link.setAttribute('target', '_blank');
102
      link.setAttribute('rel', 'noopener noreferrer');
103
    }
104
  });
105

106
  // ===== 图片加载失败时的备用提示 =====
107
  const images = document.querySelectorAll('img');
108
  images.forEach(img => {
109
    img.addEventListener('error', function() {
110
      // 如果图片加载失败，显示一个简单的替代文本
111
      this.style.display = 'none';
112
      const errorMsg = document.createElement('p');
113
      errorMsg.textContent = `[图片加载失败: ${this.alt}]`;
114
      errorMsg.style.color = '#999';
115
      errorMsg.style.fontStyle = 'italic';
116
      this.parentNode.insertBefore(errorMsg, this.nextSibling);
117
    });
118
  });
119

120
  console.log('艾拉的记忆小屋 - 欢迎你！');
121
});

🖼️ 图片文件说明#

请准备两张角色图片，命名为：

aira.png - 艾拉的图片
tsukasa.png - 水柿司的图片

放入 images/ 文件夹中。如果没有合适的图片，可以使用以下在线占位图临时替代（但需要联网）：

在 character.html 中临时修改图片路径为在线占位图：

1
<img src="https://via.placeholder.com/200x200?text=艾拉" alt="艾拉" width="200">
2
<img src="https://via.placeholder.com/200x200?text=水柿司" alt="水柿司" width="200">

💌 结语#

感谢你跟随Roka完成这段从零到入门的HTML旅程。希望这个以《可塑性记忆》为背景的项目，能让你在学习技术的同时，也重温那份感动。如果你有任何问题或作品展示，欢迎在评论区留言。

愿你能与重要的人，有一天能够再次相遇。

欢迎回家~

HTML+CSS+JS从0到入门教程：”（超详细版）#

📖 教程简介#

📑 目录#

第一篇：HTML基础（静态页面骨架）#

第二篇：CSS入门（给页面穿上衣服）#

第三篇：项目美化实战#

第四篇：JavaScript入门与弹幕留言墙#

第五篇：项目整合与发布#

第一篇：HTML基础（静态页面骨架）#

1. 初见HTML：第一个页面与基本结构#

1.1 HTML是什么？#

1.2 第一个HTML页面#

1.3 详细解释每一行#

1.4 小剧场：司的日记#

1.5 本章项目任务#

2. 文本标签：标题、段落、强调与引用#

2.1 标题系列 <h1>~<h6>#

2.2 段落与换行#

2.3 强调与引用#

2.4 字符实体#

2.5 项目任务：丰富首页内容#

3. 链接与导航：让页面互联#

3.1 超链接 <a>#

3.2 相对路径与绝对路径#

3.3 页面内锚点链接#

3.4 项目任务：创建导航栏#

3.5 小剧场：链接的寓意#

4. 图片与多媒体：插入图像和视频#

4.1 图像 <img>#

4.2 准备图片#

4.3 项目任务：角色页插入图片#

4.4 音频与视频（可选）#

5. 列表：无序、有序与自定义列表#

5.1 无序列表 <ul>#

5.2 有序列表 <ol>#

5.3 自定义列表 <dl>#

5.4 项目任务：丰富角色页#

6. 表格：用表格展示剧情时间线#

6.1 表格基础#

6.2 合并单元格#

6.3 表格语义化#

6.4 项目任务：创建时间线页#

7. 语义化标签：重构页面结构#

7.1 为什么需要语义化？#

7.2 常用语义化标签#

7.3 项目任务：重构所有页面#

第二篇：CSS入门（给页面穿上衣服）#

8. CSS初探：样式怎么加？#

8.1 什么是CSS？#

8.2 三种添加方式#

8.3 项目任务：创建外部CSS文件#

9. 选择器与颜色：精准选中元素#

9.1 基础选择器#

9.2 组合选择器#

9.3 颜色表示法#

9.4 项目任务：为页面添加基础配色#

10. 文本与字体：让文字更好看#

10.1 字体相关属性#

10.2 项目任务：美化文本#

11. 盒子模型：边距、边框与内边距#

11.1 盒子模型概念#

11.2 常用属性#

11.3 项目任务：为内容添加留白#

12. 背景与渐变：为页面增添氛围#

12.1 背景属性#

12.2 渐变#

12.3 项目任务：给页眉添加渐变背景#

13. 布局基础：浮动与Flexbox#

13.1 浮动（float）#

13.2 Flexbox 布局#

13.3 项目任务：用Flexbox排列角色卡片#

14. 响应式设计：让网站在手机上也好看#

14.1 视口设置#

14.2 媒体查询#

14.3 项目任务：添加响应式规则#

第三篇：项目美化实战#

15. 美化首页：打造温馨的欢迎页#

16. 美化角色页：卡片式设计#

17. 美化时间线页：表格样式与斑马纹#

2.1 标题系列 `<h1>`~`<h6>`#

3.1 超链接 `<a>`#

4.1 图像 `<img>`#

5.1 无序列表 `<ul>`#

5.2 有序列表 `<ol>`#

5.3 自定义列表 `<dl>`#