HTML之考试页面的实现

       当然，还是先说一下本次任务的要求：使用 纯html 实现考试页面（不使用任何 css/js），下图所示，使用正确合适的标签做出如下的页面效果。内容需要完全一样，但页面样式仅供参考。

template.png
       首先还是对考试页面进行一个分析，我们可以将其划分为6大章节，分别为：试卷描述以及个人相关信息、 填空题、 选择题、多项选择题、判断题、 简答题。每个章节我们可以用<section></section>进行定义，下面我们来具体实现每个章节。

1. 试卷描述以及个人相关信息的实现

<section>
    <h1>统一建模语言理论测试</h1>
    <p>考试科目：统一建模语言</p>
    <p>时间：100分钟</p>
    <p>得分：</p>
    <label>班级(必填): <input type="text"/></label>
    <br />
    <label>学号(必填): <input type="text"/></label>
    <br />
    <label>姓名(必填): <input type="text"/></label>
</section>

2. 填空题的实现

<section>
    <h3>一、填空题（每空5分，共20分）</h3>
    <p>1.UML的中文全称是：</p>
    <input type="text"/>
    <p>2.对象最突出的特征是：</p>
    <input type="text"/> <input type="text"/> <input type="text"/>
    </section>

3. 选择题的实现

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

4. 多项选择题的实现

<section>
    <h3>三、多项选择题（每题10分，共20分）</h3>
    <p>1.用例的粒度分为以下哪三种：</p>
    <input type="checkbox"/><label>(A)概述级</label>
    <br />
    <input type="checkbox"/><label>(B)需求级</label>
    <br />
    <input type="checkbox"/><label>(C)用户目标级</label>
    <br />
    <input type="checkbox"/><label>(D)子功能级</label>
    <br />
    <p>2.类图由以下哪三部分组成：</p>
    <input type="checkbox" /><label>(A)名称(Name)</label>
    <br />
    <input type="checkbox" /><label>(B)属性(Attribute)</label>
    <br />
    <input type="checkbox" /><label>(C)操作(Operation)</label>
    <br />
    <input type="checkbox" /><label>(D)方法(Function)</label>
</section>

5. 判断题的实现

<section>
    <p>四、判断题（每题10分，共20分）</p>
    <label>1.用例图只是用于和客户交流和沟通的，用于确定需求。 <input type="radio"/><input type="radio"/></label>
    <br />
    <label>2.在状态图中,终止状态在一个状态图中允许有任意多个。 <input type="radio" /><input type="radio" /></label>
</section>

6. 简答题的实现

<section>
    <p>五、简答题（每题20分，共20分）</p>
    <label>1.简述什么是模型以及模型的表现形式？<textarea rows="5" ></textarea></label>
    <p><button type="submit">计算分数</button></p>
</section>

我们来看一下实现后的效果：