用HTML实现试卷页面

用纯HTML实现如下页面：

exam.png
页面构成分析如下图：
试卷.png

试卷名称：

<div>
    <h1>统一建模语言理论测试</h1>
</div>

试卷卷头

<div>
    <div>考试科目：统一建模语言</div>
    <div>时间：100分钟</div>
    <div><label for="score">得分：</label><input type="text" id="score"></div>
    <div><label for="class">班级（必填）：</label><input type="text" id="class"></div>
    <div><label for="number">学号（必填）：</label><input type="text" id="number"></div>
    <div><label for="name">姓名（必填）：</label><input type="text" id="name"></div>
</div>

<label>标签为 input 元素定义标注,其中for值与相关<input>标签id 一致

填空题

<div>
    <h4>一、 填空题（每空5分，共20分）</h4>
    <ol>
        <li>
            <span> UML的中文全称是：</span>
            <div><input type="text" id="fillBlank-1"></div>
        </li>
        <li>
            <span> 对象最突出的特征是：</span>
            <div><input type="text" id="fillBlank-2"></div>
        </li>
    </ol>
</div>

选择题

<div>
    <h4>二、选择题（每题10分，共20分）</h4>
    <ol>
        <li>
            <span> UML与软件工程的关系是：</span>
            <div><input type="radio" name="selectOne-1" value="A">(A)UML就是软件工程</div>
            <div><input type="radio" name="selectOne-1" value="B">(B)UML参与到软件工程中软件开发过程的几个阶段</div>
            <div><input type="radio" name="selectOne-1" value="C">(C)UML与软将工程无关</div>
            <div><input type="radio" name="selectOne-1" value="D">(D)UML是软件工程的一部分</div>
        </li>
        <li>
            <span>Java语言支持：</span>
            <div><input type="radio" name="selectOne-2" value="A">(A)单继承</div>
            <div><input type="radio" name="selectOne-2" value="B">(B)多继承</div>
            <div><input type="radio" name="selectOne-2" value="C">(C)单继承和多继承都支持</div>
            <div><input type="radio" name="selectOne-2" value="D">(D)单继承和多继承都不支持</div>
        </li>
    </ol>
</div>

当<input>标签的"type=radio"时，name 属性值相等的<input>标签构成单选关系组

多项选择题

<div>
    <h4>三、多项选择题（每题10分，共20分）</h4>
    <ol>
        <li>
            <span>用例的粒度分为以下哪三种：</span>
            <div><input type="checkbox" id="selectMore_1_A" value="A">(A)概述级</div>
            <div><input type="checkbox" id="selectMore_1_B" value="B">(B)需求级</div>
            <div><input type="checkbox" id="selectMore_1_C" value="C">(C)用户目标级</div>
            <div><input type="checkbox" id="selectMore_1_D" value="D">(D)子功能级</div>
        </li>
        <li>
            <span>类图由以下哪三部分组成：</span>
            <div><input type="checkbox" id="selectMore_2_A" value="A">(A)名称(Name)</div>
            <div><input type="checkbox" id="selectMore_2_B" value="B">(B)属性(Attribute)</div>
            <div><input type="checkbox" id="selectMore_2_C" value="C">(C)操作(Operation)</div>
            <div><input type="checkbox" id="selectMore_2_D" value="D">(D)方法(Function)</div>
        </li>
    </ol>
</div>

判断题

<div>
    <h4>四、 判断题（每题10分，共20分）</h4>
    <ol>
        <li>
            <span>用例图只是用于和客户交流和沟通的，用于确定需求。</span>
            <div><input type="radio" name="judge-1" value="true">对</div>
            <div><input type="radio" name="judge-1" value="false">错</div>
        </li>
        <li>
            <span>在状态图中终止状态在一个状态图中允许有任意多个。</span>
            <div><input type="radio" name="judge-2" value="true">对</div>
            <div><input type="radio" name="judge-2" value="false">错</div>
        </li>
    </ol>
</div>

简答题

<div>
    <h4>五、 简答题（每题20分，共20分）</h4>
    <ol>
        <li>
            <span> 简述什么是模型以及模型的表现形式？</span>
            <textarea name="summary"  cols="30" rows="10"></textarea>
        </li>
    </ol>
</div>

计算分数

<div>
    <button type="submit">计算分数</button>
</div>

代码点这里
效果图点这里