HTML 实现试卷

今天来使用纯 HTML 实现一个考试试卷，如下图

需要实现的试卷

实现试卷的头部

代码：

<h1>统一建模语言测试</h1>
<div>
    <div>考试科目： 统一建模语言</div>
    <div id="time">时间： 100分</div>
    <div id="grade">得分： </div>
</div>
<div>
    <div>
        <span>班级（必填）：</span>
        <input type="text" id="class">
    </div>
    <div>
        <span>学号（必填）：</span>
        <input type="text" id="schoolNumber">
    </div>
    <div>
        <span>姓名（必填）：</span>
        <input type="text" id="name">
    </div>
</div>

实现效果如下：

实现试卷头部效果

实现第一大题

第一答题有两个小题所以可以使用 <ol> 来实现。

代码如下：

<h1>统一建模语言测试</h1>
<div>
    <div>考试科目： 统一建模语言</div>
    <div id="time">时间： 100分</div>
    <div id="grade">得分： </div>
</div>
<div>
    <div>
        <span>班级（必填）：</span>
        <input type="text" id="class">
    </div>
    <div>
        <span>学号（必填）：</span>
        <input type="text" id="schoolNumber">
    </div>
    <div>
        <span>姓名（必填）：</span>
        <input type="text" id="name">
    </div>
</div>
<div>
    <h3>一、填空题（每空5分，共20分）</h3>
    <ol>
        <li>
            <span>UML的中文全称是：</span>
            <div><input type="text" id="1-1"></div>
        </li>
        <li>
            <span>对象最突出的特性是：</span>
            <div>
                <input type="text" id="1-1-1">
                <input type="text" id="1-1-2">
                <input type="text" id="1-1-3">
            </div>
        </li>
    </ol>
</div>

实现效果如下：

实现第一答题效果

实现第二大题

第二大题也是两道小题需要 <ol> 标签。还需要使用 <input> 标签里面的 type 应为 radio ，就像这样 <input type="radio">。 radio 是表示单选框，并且需要给每个选项加入相同的 name ，这样才能达到单选的效果。

代码如下：

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

实现效果如下：

实现第二题效果

实现第三大题

需要使用 checkbox 复选框。

<div>
    <h3>三、多项选择（每题10分，共20分）</h3>
    <ol>
        <li>
            <span>用例的粒度分为以下哪三点：</span>
            <div>
                <input type="checkbox" id="checkbox1A" value="A">
                (A)概述题
                <input type="checkbox" id="checkbox1B" value="B">
                (B)需求级
                <input type="checkbox" id="checkbox1C" value="C">
                (C)用户目标级
                <input type="checkbox" id="checkbox1D" value="D">
                (D)子功能级
            </div>
        </li>
        <li>
            <span>类图由以下哪三部分组成：</span>
            <div>
                <input type="checkbox" id="checkbox2A" value="A">
                (A)名称(Name)
                <input type="checkbox" id="checkbox2B" value="B">
                (B)属性(Attribute)
                <input type="checkbox" id="checkbox2C" value="C">
                (C)操作(Operation)
                <input type="checkbox" id="checkbox2D" value="D">
                (D)方法(Function)
            </div>
        </li>
    </ol>
</div>

实现效果如下：

实现第三大题效果

实现第四大题

代码如下：

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

实现效果如下：

实现第四大题效果

实现第五大题和提交按钮

需要使用 <textarea> 标签， <textarea> 是定义多行的文本输入控件。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸。

代码如下：

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

实现效果如下：

实现第五大题和提交按钮效果

最后我们的考试试卷就弄好了，因为不会滚动截屏大家最后整体结果可以看这里 HTML实现考试试卷