声母韵母组合练习：HTML代码实现及优化

以下是一种可能的实现方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>声母韵母组合练习</title>
    <style>
        #score {
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 24px;
        }
        
        #question {
            margin-top: 50px;
            font-size: 36px;
        }
        
        #answer {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id='score'>积分: 0</div>
    <div id='question'></div>
    <div id='answer'></div>

    <script>
        var score = 0;
        var consonants = ['b', 'p', 'm', 'f', 'd', 't', 'n', 'l', 'g', 'k', 'h', 'j', 'q', 'x', 'zh', 'ch', 'sh', 'r', 'z', 'c', 's', 'y', 'w'];
        var vowels = ['a', 'o', 'e', 'i', 'u', 'v'];
        var correctAudio = new Audio('audio/correct.mp3');
        var incorrectAudio = new Audio('audio/incorrect.mp3');

        function generateRandomQuestion() {
            var randomConsonant = consonants[Math.floor(Math.random() * consonants.length)];
            var randomVowel = vowels[Math.floor(Math.random() * vowels.length)];
            var question = randomConsonant + randomVowel;

            document.getElementById('question').textContent = question;
            document.getElementById('answer').textContent = '';
        }

        function checkAnswer(answer) {
            var question = document.getElementById('question').textContent;

            if (answer === question) {
                document.getElementById('answer').textContent = '图片1 声音1';
                score += 2;
                correctAudio.play();
            } else {
                document.getElementById('answer').textContent = '图片2 声音2';
                score -= 1;
                incorrectAudio.play();
            }

            document.getElementById('score').textContent = '积分: ' + score;
            generateRandomQuestion();
        }

        document.addEventListener('DOMContentLoaded', function() {
            generateRandomQuestion();
        });
    </script>
</body>
</html>

注意事项：

代码中使用了consonants数组存储所有声母，使用vowels数组存储所有韵母。根据需要可以对这两个数组进行修改或扩展。
correctAudio和incorrectAudio为正确和错误时的声音文件，请根据实际情况准备并替换成相应的文件路径。
图片1和图片2需要自行准备并在代码中使用<img>标签来显示，可以使用相应的图片路径替换textContent。
页面加载完成后，会调用generateRandomQuestion()函数生成第一个题目。
用户输入答案后，调用checkAnswer(answer)函数进行验证，并更新积分和生成下一个题目。