const { useState } = React; // --- Components --- const SectionHeader = ({ icon, title, subtitle, color }) => ( <div className={`flex items-center gap-3 mb-6 pb-2 border-b-2 ${color}`}> <div className={`p-2 rounded-lg text-white ${color.replace('border-', 'bg-')}`}> <i className={`fas ${icon} text-xl`}>

{title}

{subtitle}

); const CognitiveMap = () => { return (
{/* Central Node */}
海水资源
Na & Cl
{/* Branch 1: Sodium */}
钠 (典型金属)
Na → Na₂O/Na₂O₂ → NaOH → Na₂CO₃/NaHCO₃
{/* Branch 2: Chlorine */}
氯 (典型非金属)
Cl₂ → HCl/HClO → NaCl/Ca(ClO)₂
{/* Branch 3: Mole */}
物质的量 (微观宏观桥梁)
N/Nₐ m/M V/Vm cV
{/* Connecting Lines for Reactions (Implicit) */}
焰色试验
漂白原理
); }; const AccordionItem = ({ title, children }) => { const [isOpen, setIsOpen] = useState(false); return (
<button className="w-full py-4 px-6 flex justify-between items-center hover:bg-gray-50 transition-colors text-left" onClick={() => setIsOpen(!isOpen)} > {title} <i className={`fas fa-chevron-down transition-transform duration-300 ${isOpen ? 'transform rotate-180' : ''} text-gray-400`}> <div className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}>
{children}
); }; const CoreConcepts = () => { return (
  • 现象口诀： 浮（密度小）、熔（放热、熔点低）、游（生成气体）、响（剧烈）、红（生成碱）。
  • 本质： 钠原子失去最外层电子给水电离出的H⁺。
  • 离子方程式： 2Na + 2H₂O = 2Na⁺ + 2OH⁻ + H₂↑
  • 成分复杂性：
    分子：Cl₂（黄绿色）、H₂O、HClO（漂白、弱酸）；
    离子：H⁺（酸性）、Cl⁻（沉淀）、ClO⁻、OH⁻（极少）。
  • 新制 vs 久置： 新制氯水有氧化性、漂白性；久置氯水（光照分解后）变成稀盐酸，只有酸性。
n = m / M 质量关系
n = N / Nₐ 微粒数关系
n = V / Vm 气体体积(标况)
c = n / V 溶液浓度
); }; const DeepDive = () => { return (
{/* Pitfall 1 */}

坑点一：互滴现象不同

场景： 碳酸钠溶液与稀盐酸互滴。

  • 酸滴入盐（开始无气泡）：
    H⁺少：CO₃²⁻ + H⁺ → HCO₃⁻
    H⁺多：HCO₃⁻ + H⁺ → H₂O + CO₂↑
  • 盐滴入酸（立即有气泡）：
    H⁺过量：CO₃²⁻ + 2H⁺ → H₂O + CO₂↑

应用：不用试剂鉴别Na₂CO₃和HCl。

{/* Pitfall 2 */}

坑点二：Nₐ 的三大陷阱

  1. 条件陷阱： “标况”只针对气体。水、乙醇、SO₃在标况下非气态，不能用22.4 L/mol。
  2. 状态陷阱： “常温常压”下气体摩尔体积不是22.4 L/mol。
  3. 结构陷阱： 7.8g Na₂O₂ (0.1mol) 含有的离子数是 0.3Nₐ（2Na⁺ + O₂²⁻），而非0.4Nₐ。
); }; const ThinkingModels = () => { return (
{/* Model 1 */}

价-类二维图

预测性质与转化

构建方法：

横轴（物质类别）： 单质 → 氧化物 → 酸/碱 → 盐

纵轴（化合价）： 低价态 → 中间价态 → 高价态

氯元素示例：

  • -1价：HCl (氢化物), NaCl (盐)
  • 0价：Cl₂ (单质)
  • +1价：HClO (酸), NaClO (盐)
  • +5/+7价：HClO₃, HClO₄ (高价含氧酸)
{/* Model 2 */}

差量法

巧解计算题

核心思想：

利用化学反应前后物质的质量或体积的差值与反应物/生成物的计量关系求解。

典例： 2Na₂O₂ + 2CO₂ = 2Na₂CO₃ + O₂

固体增重分析：相当于吸收了CO₂中的"CO"，放出"O"。增重 = m(CO) = 28g/mol × n(Na₂O₂)。

); }; const ClassicCases = () => { const cases = [ { id: 1, title: "Na₂O₂的性质与电子转移", question: "关于反应 2Na₂O₂ + 2H₂O = 4NaOH + O₂↑，下列说法正确的是（ ）", options: [ { label: "A", text: "Na₂O₂是氧化剂，H₂O是还原剂" }, { label: "B", text: "每生成1mol O₂，转移2mol电子" }, { label: "C", text: "Na₂O₂中阴阳离子个数比为1:1" }, { label: "D", text: "反应后溶液中滴加酚酞，溶液变红且不褪色" } ], logic: [ "1. 标价态：Na₂O₂中O为-1价。产物NaOH中O为-2价，O₂中O为0价。H₂O中元素价态未变。", "2. 析本质：这是Na₂O₂自身的歧化反应。Na₂O₂既是氧化剂又是还原剂，H₂O仅作反应物。A错。", "3. 算电子：-1价O升至0价生成O₂。生成1mol O₂ (2个O原子)，需2mol O原子各失1e⁻。故转移2mol电子。B对。", "4. 查结构：Na₂O₂由2个Na⁺和1个O₂²⁻构成，离子比为2:1。C错。", "5. 辨现象：Na₂O₂具有强氧化性（漂白性），溶液先变红后褪色。D错。" ], variant: "变式：若将Na₂O₂投入FeCl₂溶液中，会观察到什么现象？（提示：产生气体+红褐色沉淀）" }, { id: 2, title: "Na₂CO₃与NaHCO₃的鉴别与转化", question: "下列关于Na₂CO₃和NaHCO₃的说法中，正确的是（ ）", options: [ { label: "A", text: "热稳定性：Na₂CO₃ < NaHCO₃" }, { label: "B", text: "等质量的两种固体与足量盐酸反应，Na₂CO₃产生CO₂多" }, { label: "C", text: "除去Na₂CO₃固体中的NaHCO₃，可用加热法" }, { label: "D", text: "可用Ca(OH)₂溶液鉴别二者" } ], logic: [ "1. 稳定性：NaHCO₃受热易分解，Na₂CO₃稳定。A错。", "2. 产气量：M(Na₂CO₃)=106, M(NaHCO₃)=84。等质量m时，n(NaHCO₃)大，故NaHCO₃产气多。B错。", "3. 除杂：利用NaHCO₃的热不稳定性，加热转化为Na₂CO₃。C对。", "4. 鉴别：二者均与Ca(OH)₂反应生成白色沉淀CaCO₃（NaHCO₃+Ca(OH)₂也能沉淀）。不能鉴别。D错。" ], variant: "变式：如何不用任何试剂鉴别Na₂CO₃溶液和稀盐酸？（互滴法）" }, { id: 3, title: "氯水的成分与性质探究", question: "向新制氯水中分别进行下列操作，现象及结论正确的是（ ）", options: [ { label: "A", text: "加入AgNO₃溶液，产生白色沉淀，说明氯水含有Cl⁻" }, { label: "B", text: "加入石蕊试液，溶液变红，说明氯水呈酸性" }, { label: "C", text: "将鲜花放入氯水中，鲜花褪色，说明Cl₂有漂白性" }, { label: "D", text: "光照氯水，有气泡产生，该气体是Cl₂" } ], logic: [ "1. 沉淀：Cl₂ + H₂O ⇌ H⁺ + Cl⁻ + HClO。Cl⁻ + Ag⁺ = AgCl↓。A对。", "2. 变色：含有H⁺变红，但含有HClO（强氧化性）会使红色褪去。现象应是先红后褪。B错。", "3. 漂白：Cl₂本身无漂白性，是反应生成的HClO漂白。干燥Cl₂不能使干燥红纸褪色。C错。", "4. 分解：2HClO =(光)= 2HCl + O₂↑。产生的气体是氧气。D错。" ], variant: "变式：久置氯水与新制氯水相比，pH值如何变化？（酸性增强，pH减小）" }, { id: 4, title: "阿伏加德罗常数(Nₐ)的陷阱", question: "设Nₐ为阿伏加德罗常数的值，下列说法正确的是（ ）", options: [ { label: "A", text: "标准状况下，22.4 L H₂O 含有的分子数为 Nₐ" }, { label: "B", text: "1 mol/L K₂SO₄溶液中含有的K⁺数目为 2Nₐ" }, { label: "C", text: "常温常压下，32 g O₂ 和 O₃ 的混合气体中含有的氧原子数为 2Nₐ" }, { label: "D", text: "2.4 g Mg 与足量盐酸反应，转移的电子数为 0.1Nₐ" } ], logic: [ "1. 标况状态：标况下H₂O是液体，不能用22.4L/mol计算。A错。", "2. 缺体积：只给了浓度，没有溶液体积，无法计算微粒数目。B错。", "3. 质量守恒：O₂和O₃均由O原子构成。32g混合物即32g O原子。n(O) = 32/16 = 2mol。C对。", "4. 电子转移：Mg为+2价金属。2.4g Mg = 0.1mol。转移电子 = 0.1 × 2 = 0.2mol。D错。" ], variant: "变式：标况下 22.4L Cl₂ 与足量 Fe 反应，转移电子数是多少？（提示：Cl₂是氧化剂，0价变-1价，转移2mol e⁻，与生成物FeCl₃无关）" }, { id: 5, title: "物质的量浓度配制误差分析", question: "配制 480 mL 1.0 mol/L NaOH溶液时，下列操作会导致所配浓度偏低的是（ ）", options: [ { label: "A", text: "选用 500 mL 容量瓶进行配制" }, { label: "B", text: "定容时俯视刻度线" }, { label: "C", text: "转移溶液前容量瓶内有少量蒸馏水" }, { label: "D", text: "定容摇匀后发现液面低于刻度线，又加水补齐" } ], logic: [ "1. 仪器规格：无480mL容量瓶，必须选500mL。计算溶质时也应按500mL计算。这是正确操作。A错。", "2. 定容读数：俯视 → 液面低 → V偏小 → c偏高。B错。", "3. 瓶底存水：不影响溶质n，也不影响最终溶液体积V。无影响。C错。", "4. 摇匀补水：摇匀后部分溶液粘在瓶塞下方，液面下降属正常。补水会导致V偏大 → c偏低。D对。" ], variant: "思考：若称量NaOH固体时，砝码和药品位置放反（使用了游码），浓度如何变化？（m偏小 → c偏低）" } ]; return (
{cases.map((item, index) => (
典例 {index + 1}

{item.title}

{item.question}

{item.options.map(opt => (

{opt.label}. {opt.text}

))}

解题逻辑：

{item.logic.map((line, i) => (

{line}

))}
变式

{item.variant}

))}
); }; const App = () => { return (

化学必修一 · 第二章

海水中的重要元素——钠和氯

© 2025 高中化学教学设计 · Teacher's Toolkit

); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();