当然,还是先说一下本次任务的要求:使用 纯html 实现考试页面(不使用任何 css/js),下图所示,使用正确合适的标签做出如下的页面效果。内容需要完全一样,但页面样式仅供参考。
首先还是对考试页面进行一个分析,我们可以将其划分为6大章节,分别为:试卷描述以及个人相关信息、 填空题、 选择题、多项选择题、判断题、 简答题。每个章节我们可以用
<section></section>
进行定义,下面我们来具体实现每个章节。
- 试卷描述以及个人相关信息的实现
<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>
- 填空题的实现
<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>
- 选择题的实现
<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>
- 多项选择题的实现
<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>
- 判断题的实现
<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>
- 简答题的实现
<section>
<p>五、简答题(每题20分,共20分)</p>
<label>1.简述什么是模型以及模型的表现形式?<textarea rows="5" ></textarea></label>
<p><button type="submit">计算分数</button></p>
</section>
我们来看一下实现后的效果: