feat: 西班牙语日记学习工具与知识库

knowledge/pronombre.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>代词 — 西班牙语知识库</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <nav class="top-nav">
+    <a class="back" href="../knowledge.html">← 知识库</a>
+    <span class="home">👤 代词</span>
+  </nav>
+
+  <h1>代词</h1>
+  <p class="page-subtitle">《现代西班牙语1》代词体系，共 5 个知识点。</p>
+
+  <div class="article" id="personales">
+    <h2>1. 人称代词（主格）</h2>
+    <div class="article-title-en">Los pronombres personales</div>
+    <table>
+      <tr><th>人称</th><th>单数</th><th>复数</th></tr>
+      <tr><td>第一人称</td><td>yo（我）</td><td>nosotros / nosotras（我们）</td></tr>
+      <tr><td>第二人称</td><td>tú（你）, usted（您）</td><td>vosotros / vosotras（你们）, ustedes（您们）</td></tr>
+      <tr><td>第三人称</td><td>él（他）, ella（她）</td><td>ellos / ellas（他们/她们）</td></tr>
+    </table>
+    <p><strong>用法要点：</strong></p>
+    <ul>
+      <li>西班牙人称代词作主语时常省略，动词变位已表明人称：<em>Estudio español.</em>（我学西语）</li>
+      <li>usted/ustedes 虽为第二人称，但动词按第三人称变位</li>
+      <li>拉美通常用 ustedes 代替 vosotros</li>
+    </ul>
+    <div class="example"><span>Yo soy estudiante. Tú eres profesor. Él es médico.</span><span class="zh">我是学生。你是老师。他是医生。</span><button class="speak-btn" data-text="Yo soy estudiante. Tú eres profesor. Él es médico.">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>省略主语是常态，但为强调或避免歧义时可保留：<em>Ella trabaja aquí.</em></div>
+  </div>
+
+  <div class="article" id="objeto-directo">
+    <h2>2. 宾格代词（直接宾语）</h2>
+    <div class="article-title-en">Los pronombres de objeto directo</div>
+    <table>
+      <tr><th>人称</th><th>单数</th><th>复数</th></tr>
+      <tr><td>第一人称</td><td>me（我）</td><td>nos（我们）</td></tr>
+      <tr><td>第二人称</td><td>te（你）</td><td>os（你们）</td></tr>
+      <tr><td>第三人称</td><td>lo / la（他/她/它）</td><td>los / las（他们/她们/它们）</td></tr>
+    </table>
+    <p><strong>位置：</strong>变位动词前，或紧跟在原形动词后：<em>Lo veo.</em> / <em>Voy a verlo.</em></p>
+    <div class="example"><span>Veo a María. → La veo. Leo libros. → Los leo.</span><span class="zh">我看见玛丽亚 → 我看见她；我读书 → 我读它们</span><button class="speak-btn" data-text="La veo. Los leo.">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>指人直接宾语前要加 a（Veo a María）；宾格代词 lo/la 要随性数变化。</div>
+  </div>
+
+  <div class="article" id="objeto-indirecto">
+    <h2>3. 与格代词（间接宾语）</h2>
+    <div class="article-title-en">Los pronombres de objeto indirecto</div>
+    <table>
+      <tr><th>人称</th><th>单数</th><th>复数</th></tr>
+      <tr><td>第一人称</td><td>me（给我）</td><td>nos（给我们）</td></tr>
+      <tr><td>第二人称</td><td>te（给你）</td><td>os（给你们）</td></tr>
+      <tr><td>第三人称</td><td>le（给他/她/您）</td><td>les（给他们/她们/您们）</td></tr>
+    </table>
+    <p><strong>与格 + 宾格同现：</strong>le/les 变 se：<em>Se lo doy.</em>（我把它给他）</p>
+    <div class="example"><span>Me das el libro. → Me lo das. Te escribo una carta. → Te la escribo.</span><span class="zh">你给我书 → 你把它给我；我给你写信 → 我把它写给你</span><button class="speak-btn" data-text="Me lo das. Te la escribo.">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>le/les + lo/la/los/las 时，le/les 必须改为 se，不能写 le lo。</div>
+  </div>
+
+  <div class="article" id="demostrativos-pron">
+    <h2>4. 指示代词</h2>
+    <div class="article-title-en">Los pronombres demostrativos</div>
+    <table>
+      <tr><th>距离</th><th>阳性</th><th>阴性</th><th>中性</th></tr>
+      <tr><td>近</td><td>éste / éstos</td><td>ésta / éstas</td><td>esto</td></tr>
+      <tr><td>中</td><td>ése / ésos</td><td>ésa / ésas</td><td>eso</td></tr>
+      <tr><td>远</td><td>aquél / aquéllos</td><td>aquélla / aquéllas</td><td>aquello</td></tr>
+    </table>
+    <p>中性形式 esto/eso/aquello 指代事物或概念，无复数、无性变化。</p>
+    <div class="example"><span>¿Qué es esto? Eso es importante. Aquello no me gusta.</span><span class="zh">这是什么？那很重要。那个我不喜欢。</span><button class="speak-btn" data-text="¿Qué es esto? Eso es importante. Aquello no me gusta.">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>现代西班牙语皇家学院已允许指示代词不加重音，但教材中 éste/ése 通常仍带重音以区别形容词。</div>
+  </div>
+
+  <div class="article" id="interrogativos">
+    <h2>5. 疑问代词</h2>
+    <div class="article-title-en">Los pronombres interrogativos</div>
+    <table>
+      <tr><th>疑问词</th><th>含义</th><th>示例</th></tr>
+      <tr><td>qué</td><td>什么</td><td>¿Qué estudias?</td></tr>
+      <tr><td>quién / quiénes</td><td>谁</td><td>¿Quién es ella?</td></tr>
+      <tr><td>cuál / cuáles</td><td>哪一个</td><td>¿Cuál prefieres?</td></tr>
+      <tr><td>cuánto/a/os/as</td><td>多少</td><td>¿Cuánto cuesta?</td></tr>
+      <tr><td>dónde</td><td>哪里</td><td>¿Dónde vives?</td></tr>
+      <tr><td>cuándo</td><td>什么时候</td><td>¿Cuándo llegas?</td></tr>
+      <tr><td>cómo</td><td>怎样</td><td>¿Cómo estás?</td></tr>
+    </table>
+    <div class="example"><span>¿Qué haces? ¿Quién es tu amigo? ¿Dónde está la biblioteca?</span><span class="zh">你在做什么？谁是你的朋友？图书馆在哪里？</span><button class="speak-btn" data-text="¿Qué haces? ¿Quién es tu amigo? ¿Dónde está la biblioteca?">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>直接/间接疑问句中的疑问词都必须带重音：<em>No sé qué hacer.</em>（我不知道做什么）</div>
+  </div>
+
+  <script src="../speech.js"></script>
+  <script>
+    document.addEventListener('click', function(e) {
+      var btn = e.target.closest('.speak-btn');
+      if (btn) {
+        var lang = btn.dataset.lang || 'es';
+        var text = btn.dataset.text;
+        if (text) speakText(text, lang);
+      }
+    });
+  </script>
+</body>
+</html>