计算机的发展历程可以追溯到几个世纪前，但现代计算机的起源主要是在20世纪。下面是计算机发展历史的时间...

Question

计算机的发展历程可以追溯到几个世纪前，但现代计算机的起源主要是在20世纪。下面是计算机发展历史的时间轴，按重要事件和技术演进的顺序梳理，涵盖了从最初的设想到现代技术的完整过程。

1. 早期计算概念与机械计算（公元前3000年 - 1801年）

公元前3000年：古埃及人使用算盘等工具进行简单的计算，标志着计算历史的开端。
1623年：德国数学家**威廉·许瑟（Wilhelm Schickard）**发明了世界上第一个机械计算器——“计算机钟表”。
1673年：** 莱布尼茨**发明了“步进轮计算机”，它能够进行加减法和乘除法，成为现代计算机的先驱之一。

2. 早期计算机的理论基础与设计（1801年 - 1930年）

1801年：** 约瑟夫·雅各布·雅卡尔**发明了打孔卡片，在织布机中应用这种技术，这为后来的数据处理奠定了基础。
1837年：** 查尔斯·巴贝奇**提出了“分析机”概念，被誉为“计算机之父”。这是第一个设计上的计算机，虽然未完全建成，但它有程序控制、算术逻辑单元等现代计算机的基本元素。
1843年：** 阿达·洛夫莱斯**（Ada Lovelace）撰写了世界上第一份计算机程序，被称为世界首位程序员。

3. 电子计算机的初步实现（1930年 - 1945年）

1937年：** 艾伦·图灵**提出了“图灵机”理论，奠定了现代计算机科学的基础，图灵机被视为计算可行性的标准模型。
1941年：** 康拉德·茨泽（Konrad Zuse）**在德国制造了Z3计算机，世界上第一台可编程电子计算机。
1945年：** ENIAC（电子数值积分计算机）诞生，它是第一台真正意义上的全电子计算机。由约翰·莫克利和普雷斯珀·艾克特**发明，具有超过17,000个真空管。

4. 计算机的商用化与发展（1946年 - 1960年）

1950年代：出现了第一代真空管计算机，且其规模庞大，成本高昂，性能有限。
1951年：** UNIVAC I**是世界上第一台商业化计算机，广泛用于企业和政府机关。
1956年：** IBM**推出了第一台商业计算机IBM 305 RAMAC，具有硬盘驱动器，开创了数据存储的新时代。

5. 集成电路与个人计算机的崛起（1960年 - 1980年）

1960年代：第二代计算机采用晶体管，显著提升了计算机的性能与可靠性。
1965年：** 摩尔定律**提出，预测集成电路的晶体管数量将每两年翻一番，极大地促进了计算机的发展。
1970年代初期：微处理器的发明推动了计算机的个人化发展。Intel 4004，发布于1971年，是第一个商业化的微处理器。
1975年：** Altair 8800**发布，成为世界上第一台商业化个人计算机，开始普及家庭计算机的概念。

6. 个人计算机的普及与互联网的兴起（1980年 - 2000年）

1981年：** IBM个人计算机**发布，它采用开放的架构，迅速成为全球标准，并导致了PC（个人计算机）市场的爆炸式增长。
1984年：** 苹果公司推出了具有图形用户界面的Macintosh**计算机，创新了计算机操作方式。
1990年：** 万维网**（WWW）的发明，使互联网迅速进入大众视野，开启了信息化时代。
1995年：** Windows 95**操作系统发布，它结合了图形用户界面（GUI）与多任务操作，极大改善了用户体验。

7. 21世纪的快速发展与人工智能（2000年 - 至今）

2000年代初：移动计算兴起，智能手机成为计算机发展的重要组成部分，许多计算任务不再局限于台式机或笔记本。
2007年：** 苹果公司推出iPhone**，开启了智能手机的新时代，移动互联网的普及与应用层面发生了巨变。
2010年：云计算逐渐兴起，Amazon Web Services (AWS) 推出了商业化云服务，推动了全球计算资源的共享。
2015年：人工智能的突破性进展，深度学习在图像识别、语音识别等领域取得了显著成效。
2020年代：量子计算开始进入实验和应用阶段，预计将成为下一个计算革命。

结论：

计算机的发展经历了从简单的机械设备到庞大的电子计算机，再到如今的小型化、网络化、智能化的计算机系统的演进。每个技术的突破都带来了全新的计算能力和应用场景，推动了社会、科技和经济的变革。随着人工智能、量子计算、物联网等前沿技术的崛起，计算机将继续在未来改变世界的面貌。

<介绍计算机发展历史，用html渲染页面排版设计要现代化，要有交互动画，中文内容显示。
#每个节点历史需要详细、并且用一个具有相关性的SVG图标辅助阅读
#视觉效果需要超越现代化审美风格，具有未来感
#动画交互需要具备趣味性、符合交互原则、动画要细腻 >

Answer 1

下面是一份完整的 HTML 文件示例，展示了一个现代化、未来感十足且带有细腻交互动画的“计算机发展历程”时间轴页面。页面中每个历史节点均配有一个内嵌的 SVG 图标，图标风格与内容相关，页面采用渐变背景、悬停动画以及点击展开效果，既美观又富有趣味性。

你可以将以下代码保存为一个 HTML 文件，然后在浏览器中查看效果：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>计算机发展历程</title>
  <style>
    /* 基础重置与背景 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: radial-gradient(ellipse at bottom, #1b2735, #090a0f);
      color: #ffffff;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
    }
    header {
      text-align: center;
      padding: 2rem 1rem;
      background: linear-gradient(90deg, #00d4ff, #ff00e0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    header h1 {
      font-size: 2.5rem;
    }
    /* 时间轴容器 */
    #timeline {
      width: 90%;
      max-width: 1000px;
      margin: 2rem auto;
      position: relative;
    }
    /* 每个大节 */
    .timeline-section {
      margin-bottom: 3rem;
      padding: 1rem;
    }
    .timeline-section h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
      border-left: 4px solid #ff00e0;
      padding-left: 1rem;
    }
    /* 每个时间节点 */
    .timeline-item {
      display: flex;
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.1);
      margin: 1rem 0;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s ease, background 0.3s ease;
      cursor: pointer;
    }
    .timeline-item:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.02);
    }
    .timeline-icon {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #00d4ff, #ff00e0);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1rem;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      transition: transform 0.5s ease;
    }
    /* 悬停图标旋转动画 */
    .timeline-item:hover .timeline-icon {
      transform: rotate(360deg);
    }
    .timeline-content {
      padding: 1rem;
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .timeline-content h3 {
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
      color: #00d4ff;
    }
    .timeline-content p {
      font-size: 1rem;
      text-align: justify;
    }
    /* 初始时详情仅显示部分，多余内容点击展开 */
    .timeline-content .more {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }
    .timeline-item.active .timeline-content .more {
      max-height: 300px; /* 根据内容高度可调 */
    }
    /* “阅读更多”按钮 */
    .read-more {
      margin-top: 0.5rem;
      font-size: 0.9rem;
      color: #ff00e0;
      text-decoration: underline;
      cursor: pointer;
    }
    /* 节点初入场动画 */
    .timeline-item {
      opacity: 0;
      transform: translateX(50px);
      animation: fadeIn 0.6s forwards;
    }
    .timeline-item:nth-child(odd) {
      animation-delay: 0.2s;
    }
    @keyframes fadeIn {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>计算机发展历程</h1>
  </header>

  <section id="timeline">
    <!-- 1. 早期计算概念与机械计算（公元前3000年 - 1801年） -->
    <div class="timeline-section">
      <h2>早期计算概念与机械计算（公元前3000年 - 1801年）</h2>
      
      <!-- 节点：古埃及算盘 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：算盘（简化版） -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="10" y="10" width="44" height="44" fill="none" stroke="#fff" stroke-width="4" />
            <circle cx="22" cy="22" r="3" fill="#fff"/>
            <circle cx="42" cy="22" r="3" fill="#fff"/>
            <circle cx="22" cy="42" r="3" fill="#fff"/>
            <circle cx="42" cy="42" r="3" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>公元前3000年 — 古埃及算盘</h3>
          <p>古埃及人利用算盘等简单工具进行计算，开启了人类对数字运算的探索之路。</p>
          <div class="more">
            <p>这些早期的计算工具为后世数学和工程技术的发展奠定了基础，体现了人类智慧在漫长历史中的不断积累和传承。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：许瑟的计算机钟表 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：钟表图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="30" stroke="#fff" stroke-width="4" fill="none"/>
            <line x1="32" y1="32" x2="32" y2="15" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="32" x2="45" y2="32" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1623年 — 许瑟的机械计算器</h3>
          <p>德国数学家威廉·许瑟发明了世界上第一个机械计算器——“计算机钟表”，标志着机械化计算时代的开始。</p>
          <div class="more">
            <p>这种早期机器虽简单，但已体现出程序控制的雏形，为后来的机械和电子计算机设计提供了启示。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：莱布尼茨步进轮计算机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：交叉线图标，象征运算结构 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="28" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="4" x2="32" y2="60" stroke="#fff" stroke-width="4"/>
            <line x1="4" y1="32" x2="60" y2="32" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1673年 — 莱布尼茨步进轮计算机</h3>
          <p>莱布尼茨发明的步进轮计算机能够进行加、减、乘、除等运算，为现代计算机的原理奠定了基础。</p>
          <div class="more">
            <p>这种设计体现了机械与逻辑的结合，被后世视为计算机诞生的重要先驱之一。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 2. 早期计算机的理论基础与设计（1801年 - 1930年） -->
    <div class="timeline-section">
      <h2>早期计算机的理论基础与设计（1801年 - 1930年）</h2>

      <!-- 节点：打孔卡片 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：打孔卡片 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="12" y="12" width="40" height="40" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="22" cy="22" r="3" fill="#fff"/>
            <circle cx="42" cy="22" r="3" fill="#fff"/>
            <circle cx="22" cy="42" r="3" fill="#fff"/>
            <circle cx="42" cy="42" r="3" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1801年 — 打孔卡片的诞生</h3>
          <p>约瑟夫·雅各布·雅卡尔发明了打孔卡片技术，最初应用于织布机，为数据存储和处理提供了全新思路。</p>
          <div class="more">
            <p>这一发明不仅在纺织业掀起变革，更为后来的计算机数据输入方法奠定了技术基础。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：巴贝奇的分析机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：齿轮与十字交叉，象征设计与逻辑 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="10" fill="none" stroke="#fff" stroke-width="4"/>
            <path d="M32 2 L32 12" stroke="#fff" stroke-width="4"/>
            <path d="M32 52 L32 62" stroke="#fff" stroke-width="4"/>
            <path d="M2 32 L12 32" stroke="#fff" stroke-width="4"/>
            <path d="M52 32 L62 32" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1837年 — 分析机构想</h3>
          <p>查尔斯·巴贝奇提出了具有程序控制、算术逻辑单元等基本元素的“分析机”概念，被誉为“计算机之父”。</p>
          <div class="more">
            <p>尽管未能完全建成，但其设计思想启发了后世计算机体系结构的发展，并奠定了程序设计的理论基础。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：阿达·洛夫莱斯 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：简化的钢笔图形，象征程序编写 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <path d="M10 54 L54 10" stroke="#fff" stroke-width="4"/>
            <path d="M10 54 L10 44 L20 54" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1843年 — 阿达·洛夫莱斯与第一程序</h3>
          <p>阿达·洛夫莱斯撰写了世界上第一份计算机程序，被誉为首位程序员，她的工作预示了编程语言的曙光。</p>
          <div class="more">
            <p>她对分析机的深刻洞见和对未来计算可能性的预测，为计算机科学的发展注入了无限想象力。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 3. 电子计算机的初步实现（1930年 - 1945年） -->
    <div class="timeline-section">
      <h2>电子计算机的初步实现（1930年 - 1945年）</h2>

      <!-- 节点：图灵机理论 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：电脑芯片样式，象征图灵机 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="16" y="16" width="32" height="32" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="16" x2="32" y2="8" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="48" x2="32" y2="56" stroke="#fff" stroke-width="4"/>
            <line x1="16" y1="32" x2="8" y2="32" stroke="#fff" stroke-width="4"/>
            <line x1="48" y1="32" x2="56" y2="32" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1937年 — 图灵机理论</h3>
          <p>艾伦·图灵提出了图灵机理论，为后来的计算可行性和计算机科学奠定了坚实的理论基础。</p>
          <div class="more">
            <p>这一理论不仅揭示了算法的本质，也为现代计算机的设计提供了抽象模型和逻辑框架。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：Z3计算机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：简化电脑外形，象征Z3 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="14" y="14" width="36" height="36" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="32" cy="32" r="4" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1941年 — Z3计算机</h3>
          <p>康拉德·茨泽在德国制造了Z3计算机，成为世界上第一台可编程电子计算机，开启了电子计算时代。</p>
          <div class="more">
            <p>Z3的出现标志着由机械转向电子技术的重大转变，推动了计算机从理论走向实际应用的进程。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：ENIAC -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：真空管图形，象征ENIAC -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <ellipse cx="32" cy="32" rx="20" ry="10" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="12" y1="32" x2="52" y2="32" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1945年 — ENIAC问世</h3>
          <p>ENIAC的诞生标志着全电子计算机时代的来临，其超过17,000个真空管的设计为未来计算机发展奠定了硬件基础。</p>
          <div class="more">
            <p>由约翰·莫克利和普雷斯珀·艾克特发明的ENIAC，不仅体积庞大，也为科学计算和军事应用打开了新的大门。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 4. 计算机的商用化与发展（1946年 - 1960年） -->
    <div class="timeline-section">
      <h2>计算机的商用化与发展（1946年 - 1960年）</h2>

      <!-- 节点：真空管计算机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：真空管示意图 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="22" y="10" width="20" height="44" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="32" cy="20" r="3" fill="#fff"/>
            <circle cx="32" cy="44" r="3" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1950年代 — 真空管计算机</h3>
          <p>第一代电子计算机主要采用真空管技术，虽然体积庞大且成本高昂，但为电子计算机的发展铺平了道路。</p>
          <div class="more">
            <p>在这一时期，计算机主要用于科学计算和军事研究，奠定了后续技术进步的基础。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：UNIVAC I -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：电脑机箱图形 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="20" y="10" width="24" height="44" fill="none" stroke="#fff" stroke-width="4"/>
            <rect x="26" y="20" width="12" height="4" fill="#fff"/>
            <rect x="26" y="30" width="12" height="4" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1951年 — UNIVAC I</h3>
          <p>作为世界上第一台商业化计算机，UNIVAC I被广泛应用于企业和政府机构，开启了计算机商用时代。</p>
          <div class="more">
            <p>其出现推动了数据处理技术的普及，使得计算机逐步走出科研实验室，服务于社会各个领域。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：IBM 305 RAMAC -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：硬盘驱动器图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="14" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="32" cy="32" r="4" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1956年 — IBM 305 RAMAC</h3>
          <p>IBM推出了第一台配备硬盘驱动器的商业计算机，开创了数据存储的新时代。</p>
          <div class="more">
            <p>这一创新使得大容量数据存储和快速检索成为可能，对后来的信息时代产生了深远影响。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 5. 集成电路与个人计算机的崛起（1960年 - 1980年） -->
    <div class="timeline-section">
      <h2>集成电路与个人计算机的崛起（1960年 - 1980年）</h2>

      <!-- 节点：晶体管计算机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：晶体管符号 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <polygon points="32,10 22,30 42,30" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="30" x2="32" y2="54" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1960年代 — 晶体管计算机</h3>
          <p>第二代计算机采用晶体管技术，大大提升了性能和可靠性，同时降低了能耗和体积。</p>
          <div class="more">
            <p>晶体管的出现使得电子设备更加紧凑，为后续集成电路的普及提供了技术前提。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：摩尔定律 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：集成电路与上升箭头 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="16" y="16" width="32" height="32" fill="none" stroke="#fff" stroke-width="4"/>
            <path d="M20,44 L44,20" stroke="#fff" stroke-width="4"/>
            <path d="M44,20 L38,20 L38,26" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1965年 — 摩尔定律</h3>
          <p>摩尔定律预言集成电路上晶体管数量将每两年翻一番，这一理论极大地推动了电子技术的飞速发展。</p>
          <div class="more">
            <p>这一预测成为半导体行业发展的风向标，激励着不断突破芯片性能极限的技术革新。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：Intel 4004 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：微处理器图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="14" y="14" width="36" height="36" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="32" cy="32" r="6" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1971年 — Intel 4004</h3>
          <p>Intel 4004的问世标志着微处理器时代的来临，为个人计算机的普及奠定了硬件基础。</p>
          <div class="more">
            <p>作为世界上第一个商业化微处理器，4004的出现开启了计算机小型化和普及化的新纪元。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：Altair 8800 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：个人计算机外形 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="16" y="16" width="32" height="24" fill="none" stroke="#fff" stroke-width="4"/>
            <rect x="24" y="42" width="16" height="6" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1975年 — Altair 8800</h3>
          <p>Altair 8800作为第一台商业化的个人计算机，开启了家庭和个人计算时代。</p>
          <div class="more">
            <p>它的问世让计算机不再局限于大型机构，而是走进了千家万户，推动了整个行业的变革。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 6. 个人计算机的普及与互联网的兴起（1980年 - 2000年） -->
    <div class="timeline-section">
      <h2>个人计算机的普及与互联网的兴起（1980年 - 2000年）</h2>

      <!-- 节点：IBM个人计算机 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：电脑显示器图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="12" y="12" width="40" height="28" fill="none" stroke="#fff" stroke-width="4"/>
            <rect x="20" y="44" width="24" height="6" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1981年 — IBM个人计算机</h3>
          <p>IBM个人计算机采用开放式架构，迅速成为全球标准，引发了PC市场的爆炸式增长。</p>
          <div class="more">
            <p>这一发展推动了计算机从专业设备向大众消费品转变，极大地改变了工作和生活方式。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：Macintosh -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：苹果轮廓图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <path d="M32,10 C40,10 50,20 50,30 C50,40 40,50 32,50 C24,50 14,40 14,30 C14,20 24,10 32,10 Z" fill="none" stroke="#fff" stroke-width="4"/>
            <path d="M38,12 C38,16 34,18 32,18" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1984年 — Macintosh</h3>
          <p>苹果公司推出的Macintosh采用图形用户界面，彻底改变了人与计算机的交互方式。</p>
          <div class="more">
            <p>其直观、友好的操作界面不仅开创了个人计算机的全新体验，更引领了设计美学的革新。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：万维网 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：网络地球图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="14" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="18" x2="32" y2="46" stroke="#fff" stroke-width="2"/>
            <line x1="18" y1="32" x2="46" y2="32" stroke="#fff" stroke-width="2"/>
            <line x1="22" y1="22" x2="42" y2="42" stroke="#fff" stroke-width="2"/>
            <line x1="42" y1="22" x2="22" y2="42" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1990年 — 万维网</h3>
          <p>万维网的诞生使互联网迅速普及，开启了信息化时代，并彻底改变了人类沟通方式。</p>
          <div class="more">
            <p>这一划时代的发明让全球信息共享成为可能，促进了商业、文化和社会各领域的深刻变革。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：Windows 95 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：窗口图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="14" y="14" width="36" height="36" fill="none" stroke="#fff" stroke-width="4"/>
            <line x1="14" y1="32" x2="50" y2="32" stroke="#fff" stroke-width="4"/>
            <line x1="32" y1="14" x2="32" y2="50" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>1995年 — Windows 95</h3>
          <p>Windows 95操作系统的发布结合了图形用户界面与多任务操作，极大改善了用户体验。</p>
          <div class="more">
            <p>这一操作系统的成功推广不仅推动了PC市场的成熟，也成为计算机普及的重要里程碑。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

    <!-- 7. 21世纪的快速发展与人工智能（2000年 - 至今） -->
    <div class="timeline-section">
      <h2>21世纪的快速发展与人工智能（2000年 - 至今）</h2>

      <!-- 节点：移动计算 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：智能手机图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="20" y="10" width="24" height="44" fill="none" stroke="#fff" stroke-width="4"/>
            <rect x="26" y="14" width="12" height="4" fill="#fff"/>
            <circle cx="32" cy="50" r="2" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>2000年代初 — 移动计算</h3>
          <p>智能手机和移动设备的兴起改变了人们获取和处理信息的方式，打破了台式机的局限。</p>
          <div class="more">
            <p>这一趋势推动了计算技术的普及和便捷化，成为数字时代的重要组成部分。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：iPhone -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：圆角智能手机图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <rect x="18" y="8" width="28" height="48" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="4"/>
            <circle cx="32" cy="52" r="2" fill="#fff"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>2007年 — iPhone问世</h3>
          <p>苹果推出的iPhone开启了智能手机新时代，推动移动互联网和应用生态的飞速发展。</p>
          <div class="more">
            <p>这一革新不仅改变了通信方式，也重塑了整个消费电子产业和人们的生活习惯。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：云计算 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：云朵图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <path d="M20 40 Q12 32 20 24 Q24 16 32 16 Q40 16 44 24 Q52 24 52 32 Q60 32 60 40 Q60 48 52 48 H20 Q12 48 12 40 Q12 40 20 40 Z" fill="none" stroke="#fff" stroke-width="4"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>2010年 — 云计算兴起</h3>
          <p>Amazon Web Services等云服务的推出使全球计算资源得以共享，推动了分布式计算的发展。</p>
          <div class="more">
            <p>云计算技术不仅改变了企业的IT架构，还促进了数据中心、物联网和大数据时代的到来。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：人工智能突破 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：神经网络图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="16" cy="16" r="4" fill="#fff"/>
            <circle cx="48" cy="16" r="4" fill="#fff"/>
            <circle cx="16" cy="48" r="4" fill="#fff"/>
            <circle cx="48" cy="48" r="4" fill="#fff"/>
            <line x1="16" y1="16" x2="48" y2="48" stroke="#fff" stroke-width="2"/>
            <line x1="48" y1="16" x2="16" y2="48" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>2015年 — 人工智能突破</h3>
          <p>深度学习技术在图像、语音等领域取得显著成果，人工智能进入高速发展阶段。</p>
          <div class="more">
            <p>这一突破不仅重塑了信息处理方式，也催生了自动驾驶、智能家居等新兴应用领域。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>

      <!-- 节点：量子计算 -->
      <div class="timeline-item">
        <div class="timeline-icon">
          <!-- SVG：量子原子图标 -->
          <svg width="40" height="40" viewBox="0 0 64 64">
            <circle cx="32" cy="32" r="4" fill="#fff"/>
            <ellipse cx="32" cy="32" rx="20" ry="8" fill="none" stroke="#fff" stroke-width="2"/>
            <ellipse cx="32" cy="32" rx="8" ry="20" fill="none" stroke="#fff" stroke-width="2"/>
            <ellipse cx="32" cy="32" rx="18" ry="10" fill="none" stroke="#fff" stroke-width="2"/>
          </svg>
        </div>
        <div class="timeline-content">
          <h3>2020年代 — 量子计算探索</h3>
          <p>量子计算开始进入实验与应用阶段，被认为将引发下一次计算革命。</p>
          <div class="more">
            <p>随着量子算法和硬件技术的不断突破，未来量子计算有望彻底改变传统计算的模式和效率。</p>
          </div>
          <div class="read-more">阅读更多</div>
        </div>
      </div>
    </div>

  </section>

  <script>
    // 为每个时间节点的“阅读更多”添加点击事件，实现展开/收起详情的交互动画
    document.querySelectorAll('.timeline-item').forEach(item => {
      const readMore = item.querySelector('.read-more');
      const moreContent = item.querySelector('.more');
      readMore.addEventListener('click', (e) => {
        // 阻止冒泡，避免触发父级点击动画
        e.stopPropagation();
        item.classList.toggle('active');
        readMore.textContent = item.classList.contains('active') ? '收起详情' : '阅读更多';
      });
      // 同时点击整个节点也可触发展开/收起效果
      item.addEventListener('click', () => {
        item.classList.toggle('active');
        if(item.classList.contains('active')){
          readMore.textContent = '收起详情';
        } else {
          readMore.textContent = '阅读更多';
        }
      });
    });
  </script>
</body>
</html>

说明

页面设计
页面采用深色渐变背景与霓虹色调（蓝/紫/粉）的高对比配色，突出未来感与现代科技风格。各节标题以醒目的左侧边框标示。
交互动画
每个时间节点在页面加载时都有一个由右向左的淡入动画，悬停时节点微微放大、背景变亮，而图标则伴随360°旋转；点击“阅读更多”或整个节点可展开/收起详细描述，动画平滑细腻。
SVG 图标
每个节点配有一个与内容相关的内嵌 SVG 图标（例如算盘、钟表、芯片、智能手机等），辅助用户直观理解事件内容。

你可以根据需要进一步调整文字、动画时长、颜色和图标细节，来满足更高的视觉和交互要求。

计算机的发展历程可以追溯到几个世纪前，但现代计算机的起源主要是在20世纪。下面是计算机发展历史的时间...

Pregunta