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

knowledge/fonetica.html

@@ -0,0 +1,189 @@
+<!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》语音部分，共 8 个知识点。点击 🔊 可听发音。</p>
+
+  <div class="article" id="alfabeto">
+    <h2>1. 字母表与发音</h2>
+    <div class="article-title-en">El alfabeto español</div>
+    <p>西班牙语字母表共 <strong>29 个字母</strong>，其中 ch、ll、ñ 为西班牙语特有字母（1994 年西班牙皇家语言学院将 ch、ll 并入字母表，但传统教材仍单独列示）。</p>
+    <table>
+      <tr><th>字母</th><th>名称</th><th>示例</th><th>发音</th></tr>
+      <tr><td>A a</td><td>a</td><td>amigo</td><td><button class="speak-btn" data-text="amigo">🔊</button></td></tr>
+      <tr><td>B b</td><td>be</td><td>bueno</td><td><button class="speak-btn" data-text="bueno">🔊</button></td></tr>
+      <tr><td>C c</td><td>ce</td><td>casa</td><td><button class="speak-btn" data-text="casa">🔊</button></td></tr>
+      <tr><td>Ch ch</td><td>che</td><td>chico</td><td><button class="speak-btn" data-text="chico">🔊</button></td></tr>
+      <tr><td>D d</td><td>de</td><td>día</td><td><button class="speak-btn" data-text="día">🔊</button></td></tr>
+      <tr><td>E e</td><td>e</td><td>escuela</td><td><button class="speak-btn" data-text="escuela">🔊</button></td></tr>
+      <tr><td>F f</td><td>efe</td><td>familia</td><td><button class="speak-btn" data-text="familia">🔊</button></td></tr>
+      <tr><td>G g</td><td>ge</td><td>gracias</td><td><button class="speak-btn" data-text="gracias">🔊</button></td></tr>
+      <tr><td>H h</td><td>hache</td><td>hola</td><td><button class="speak-btn" data-text="hola">🔊</button></td></tr>
+      <tr><td>I i</td><td>i</td><td>idea</td><td><button class="speak-btn" data-text="idea">🔊</button></td></tr>
+      <tr><td>J j</td><td>jota</td><td>joven</td><td><button class="speak-btn" data-text="joven">🔊</button></td></tr>
+      <tr><td>K k</td><td>ka</td><td>kilo</td><td><button class="speak-btn" data-text="kilo">🔊</button></td></tr>
+      <tr><td>L l</td><td>ele</td><td>libro</td><td><button class="speak-btn" data-text="libro">🔊</button></td></tr>
+      <tr><td>Ll ll</td><td>elle</td><td>llamar</td><td><button class="speak-btn" data-text="llamar">🔊</button></td></tr>
+      <tr><td>M m</td><td>eme</td><td>madre</td><td><button class="speak-btn" data-text="madre">🔊</button></td></tr>
+      <tr><td>N n</td><td>ene</td><td>noche</td><td><button class="speak-btn" data-text="noche">🔊</button></td></tr>
+      <tr><td>Ñ ñ</td><td>eñe</td><td>niño</td><td><button class="speak-btn" data-text="niño">🔊</button></td></tr>
+      <tr><td>O o</td><td>o</td><td>obra</td><td><button class="speak-btn" data-text="obra">🔊</button></td></tr>
+      <tr><td>P p</td><td>pe</td><td>padre</td><td><button class="speak-btn" data-text="padre">🔊</button></td></tr>
+      <tr><td>Q q</td><td>cu</td><td>queso</td><td><button class="speak-btn" data-text="queso">🔊</button></td></tr>
+      <tr><td>R r</td><td>erre</td><td>pero</td><td><button class="speak-btn" data-text="pero">🔊</button></td></tr>
+      <tr><td>Rr rr</td><td>erre doble</td><td>perro</td><td><button class="speak-btn" data-text="perro">🔊</button></td></tr>
+      <tr><td>S s</td><td>ese</td><td>sí</td><td><button class="speak-btn" data-text="sí">🔊</button></td></tr>
+      <tr><td>T t</td><td>te</td><td>tiempo</td><td><button class="speak-btn" data-text="tiempo">🔊</button></td></tr>
+      <tr><td>U u</td><td>u</td><td>universidad</td><td><button class="speak-btn" data-text="universidad">🔊</button></td></tr>
+      <tr><td>V v</td><td>uve</td><td>vivir</td><td><button class="speak-btn" data-text="vivir">🔊</button></td></tr>
+      <tr><td>W w</td><td>uve doble</td><td>web</td><td><button class="speak-btn" data-text="web">🔊</button></td></tr>
+      <tr><td>X x</td><td>equis</td><td>examen</td><td><button class="speak-btn" data-text="examen">🔊</button></td></tr>
+      <tr><td>Y y</td><td>ye</td><td>yo</td><td><button class="speak-btn" data-text="yo">🔊</button></td></tr>
+      <tr><td>Z z</td><td>zeta</td><td>zapato</td><td><button class="speak-btn" data-text="zapato">🔊</button></td></tr>
+    </table>
+    <div class="tip"><strong>易错提醒：</strong>H 不发音；ñ 发"ni"的鼻音；rr 为颤音，不能出现在词首，词首 r 直接读颤音。</div>
+  </div>
+
+  <div class="article" id="vocales">
+    <h2>2. 元音发音</h2>
+    <div class="article-title-en">Las vocales</div>
+    <p>西班牙语只有 <strong>5 个元音</strong>：a、e、i、o、u。发音固定，不因拼写变化。</p>
+    <table>
+      <tr><th>元音</th><th>分类</th><th>发音提示</th><th>示例</th><th>发音</th></tr>
+      <tr><td>a</td><td>强元音</td><td>类似"啊"，口型大</td><td>casa</td><td><button class="speak-btn" data-text="casa">🔊</button></td></tr>
+      <tr><td>e</td><td>强元音</td><td>类似"诶"，比英语短促</td><td>mesa</td><td><button class="speak-btn" data-text="mesa">🔊</button></td></tr>
+      <tr><td>i</td><td>弱元音</td><td>类似"衣"，短促</td><td>sí</td><td><button class="speak-btn" data-text="sí">🔊</button></td></tr>
+      <tr><td>o</td><td>强元音</td><td>类似"哦"，圆唇</td><td>todo</td><td><button class="speak-btn" data-text="todo">🔊</button></td></tr>
+      <tr><td>u</td><td>弱元音</td><td>类似"乌"，圆唇</td><td>luna</td><td><button class="speak-btn" data-text="luna">🔊</button></td></tr>
+    </table>
+    <div class="tip"><strong>易错提醒：</strong>西班牙语元音没有长音/短音区分，发音时不要拉长。</div>
+  </div>
+
+  <div class="article" id="consonantes1">
+    <h2>3. 辅音发音①（b/v、c、d、g）</h2>
+    <div class="article-title-en">Las consonantes (1)</div>
+    <p><strong>b / v：</strong>发音相同。在停顿或词首读爆破音 [b]，位于元音间读摩擦音 [β]（双唇轻微摩擦）。</p>
+    <div class="example"><span>bien, vivir, haba</span><span class="zh">好，生活，豆子</span><button class="speak-btn" data-text="bien vivir haba">🔊</button></div>
+
+    <p><strong>c：</strong>在 e/i 前读 [θ]（类似英语 think 的 th）或拉美地区读 [s]；在 a/o/u 前读 [k]。</p>
+    <div class="example"><span>cero, casa, como</span><span class="zh">零，房子，我吃</span><button class="speak-btn" data-text="cero casa como">🔊</button></div>
+
+    <p><strong>d：</strong>词首/停顿后读 [d]；元音间读 [ð]（舌尖轻触上齿）。</p>
+    <div class="example"><span>día, nada, ciudad</span><span class="zh">天，没有什么，城市</span><button class="speak-btn" data-text="día nada ciudad">🔊</button></div>
+
+    <p><strong>g：</strong>在 e/i 前读 [x]（类似"哈"）；在 a/o/u 前读 [g]。gui/gue 中 u 不发音。</p>
+    <div class="example"><span>gente, gato, guía</span><span class="zh">人们，猫，指南</span><button class="speak-btn" data-text="gente gato guía">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>gue/gui 的 u 不发音；üe/üi（如 pingüino）中 ü 才发音。</div>
+  </div>
+
+  <div class="article" id="consonantes2">
+    <h2>4. 辅音发音②（h、j、ll、ñ、q、r/rr、z）</h2>
+    <div class="article-title-en">Las consonantes (2)</div>
+    <p><strong>h：</strong>永远不发音。</p>
+    <div class="example"><span>hola, ahora</span><span class="zh">你好，现在</span><button class="speak-btn" data-text="hola ahora">🔊</button></div>
+
+    <p><strong>j：</strong>读 [x]，类似中文"哈"但更用力。</p>
+    <div class="example"><span>joven, jefe</span><span class="zh">年轻的，老板</span><button class="speak-btn" data-text="joven jefe">🔊</button></div>
+
+    <p><strong>ll：</strong>传统读 [ʎ]，多数地区读 [j] 或 [ʒ]，类似"衣"或"日"。</p>
+    <div class="example"><span>llamar, calle</span><span class="zh">呼叫，街道</span><button class="speak-btn" data-text="llamar calle">🔊</button></div>
+
+    <p><strong>ñ：</strong>读 [ɲ]，类似"ni"连读。</p>
+    <div class="example"><span>niño, España</span><span class="zh">男孩，西班牙</span><button class="speak-btn" data-text="niño España">🔊</button></div>
+
+    <p><strong>q：</strong>只出现在 que/qui 中，u 不发音，读 [k]。</p>
+    <div class="example"><span>queso, química</span><span class="zh">奶酪，化学</span><button class="speak-btn" data-text="queso química">🔊</button></div>
+
+    <p><strong>r / rr：</strong>r 在词中读单颤 [ɾ]；词首、n/l/s 后及 rr 读多颤 [r]。</p>
+    <div class="example"><span>pero, perro, río</span><span class="zh">但是，狗，河</span><button class="speak-btn" data-text="pero perro río">🔊</button></div>
+
+    <p><strong>z：</strong>在西班牙读 [θ]，拉美多读 [s]，与 c+e/i 相同。</p>
+    <div class="example"><span>zapato, zorro</span><span class="zh">鞋，狐狸</span><button class="speak-btn" data-text="zapato zorro">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>r 与 rr 是语义对立音位，pero（但是）与 perro（狗）必须区分。</div>
+  </div>
+
+  <div class="article" id="diptongos">
+    <h2>5. 二重元音与三重元音</h2>
+    <div class="article-title-en">Diptongos y triptongos</div>
+    <p><strong>二重元音：</strong>一个强元音 + 一个弱元音，或两个弱元音组成一个音节。</p>
+    <table>
+      <tr><th>组合</th><th>示例</th><th>发音</th></tr>
+      <tr><td>ai / ay</td><td>aire, hay</td><td><button class="speak-btn" data-text="aire hay">🔊</button></td></tr>
+      <tr><td>ei / ey</td><td>seis, rey</td><td><button class="speak-btn" data-text="seis rey">🔊</button></td></tr>
+      <tr><td>oi / oy</td><td>hoy, soy</td><td><button class="speak-btn" data-text="hoy soy">🔊</button></td></tr>
+      <tr><td>ia</td><td>familia</td><td><button class="speak-btn" data-text="familia">🔊</button></td></tr>
+      <tr><td>ie</td><td>tiempo</td><td><button class="speak-btn" data-text="tiempo">🔊</button></td></tr>
+      <tr><td>io</td><td>diario</td><td><button class="speak-btn" data-text="diario">🔊</button></td></tr>
+      <tr><td>ua / ue / uo</td><td>agua, bueno, cuota</td><td><button class="speak-btn" data-text="agua bueno cuota">🔊</button></td></tr>
+      <tr><td>ui / uy</td><td>muy, cuidado</td><td><button class="speak-btn" data-text="muy cuidado">🔊</button></td></tr>
+    </table>
+    <p><strong>三重元音：</strong>弱 + 强 + 弱，如 <em>Uruguay</em>、<em>Paraguay</em>。</p>
+    <div class="example"><span>Uruguay, Paraguay</span><span class="zh">乌拉圭，巴拉圭</span><button class="speak-btn" data-text="Uruguay Paraguay">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>两个强元音不能组成二重元音，须分属两个音节，如 <em>cae</em>（ca-e）。</div>
+  </div>
+
+  <div class="article" id="silabas">
+    <h2>6. 分音节规则</h2>
+    <div class="article-title-en">La división silábica</div>
+    <ol>
+      <li>一个辅音 + 一个元音组成音节：<em>ca-sa, pe-rro</em></li>
+      <li>两个元音之间有一个辅音时，辅音跟后：<em>a-mi-go</em></li>
+      <li>两个辅音之间一般分属两个音节：<em>es-cue-la, can-tar</em></li>
+      <li>辅音连缀 pr、pl、tr、tl、dr、gr、br、cr、fr、fl、gl、cl 不分开：<em>pa-dre, li-bro, cla-se</em></li>
+      <li>ch、ll、rr 作为单个辅音，不分开：<em>chi-co, ca-lle, pe-rro</em></li>
+      <li>二重元音属于同一音节：<em>tie-mpo, cau-sa</em></li>
+      <li>两个强元音分属不同音节：<em>le-er, ca-er</em></li>
+    </ol>
+    <div class="example"><span>es-cue-la, li-bro, tie-mpo</span><span class="zh">学校，书，时间</span><button class="speak-btn" data-text="escuela libro tiempo">🔊</button></div>
+  </div>
+
+  <div class="article" id="acento">
+    <h2>7. 重音规则</h2>
+    <div class="article-title-en">Las reglas de acentuación</div>
+    <table>
+      <tr><th>情况</th><th>规则</th><th>示例</th></tr>
+      <tr><td>以元音或 n/s 结尾</td><td>重音在倒数第二个音节</td><td>casa, joven, lunes</td></tr>
+      <tr><td>以其他辅音结尾</td><td>重音在最后一个音节</td><td>ciudad, español, mujer</td></tr>
+      <tr><td>不符合上述规则</td><td>必须加重音符号</td><td>música, teléfono, lápiz</td></tr>
+    </table>
+    <p>重音符号还用于区分同形词：<em>si</em>（如果）与 <em>sí</em>（是），<em>el</em>（定冠词）与 <em>él</em>（他），<em>tu</em>（你的）与 <em>tú</em>（你）。</p>
+    <div class="example"><span>música, español, lápiz</span><span class="zh">音乐，西班牙语，铅笔</span><button class="speak-btn" data-text="música español lápiz">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>疑问词 qué、dónde、cuándo 永远带重音；关系词 que、donde、cuando 不带。</div>
+  </div>
+
+  <div class="article" id="entonacion">
+    <h2>8. 连读与语调</h2>
+    <div class="article-title-en">Enlace y entonación</div>
+    <p><strong>连读：</strong>词尾辅音与下一词首元音连接：<em>los amigos</em> → lo-sa-mi-gos。</p>
+    <div class="example"><span>los amigos, un hombre</span><span class="zh">朋友们，一个男人</span><button class="speak-btn" data-text="los amigos un hombre">🔊</button></div>
+    <p><strong>陈述句语调：</strong>句末下降。</p>
+    <div class="example"><span>Hoy estudio español.</span><span class="zh">今天我学习西班牙语。</span><button class="speak-btn" data-text="Hoy estudio español.">🔊</button></div>
+    <p><strong>一般疑问句语调：</strong>句末上升。</p>
+    <div class="example"><span>¿Estudias español?</span><span class="zh">你学习西班牙语吗？</span><button class="speak-btn" data-text="¿Estudias español?">🔊</button></div>
+    <div class="tip"><strong>易错提醒：</strong>问句首尾需写倒问号 ¿ 和正问号 ?；选择问句中最后一个选项前语调开始下降。</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>