html实现一个试卷页面

目标效果

目标效果

知识点

<input>的输入类型

  • <input type="text"> 定义供文本输入的单行输入字段。
  • <input type="radio"> 定义单选按钮。
  • <input type="checkbox">定义复选框。
  • <input type="button> 定义按钮。

HTML标签

  • <textarea>标签定义输入文本框
    rows和cols属性分别定义文本框的行数和列数。

实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>试卷</title>
    </head>
    <body>
        <header>
            <h1>统一建模语言理论测试</h1>
            考试科目:统一建模语言<br>
            时间:100分钟<br>
            得分:<br>
            班级(必填):
            <input type="text" name="class" value=""><br>
            学号(必填):
            <input type="text" name="number" value=""><br>
            姓名(必填):
            <input type="text" name="name" value=""><br>
        </header>
        <p>
            <h4>一、填空题(每空5分,共20分)</h4><br>
            <ol>
                <li>
                    UML的中文全称是:<br>
                    <input type="text" name="key1.1" value=""><br>
                </li>
                <li>
                    对象最突出的特征是:<br>
                    <input type="text" name="key1.2.1" value="">
                    <input type="text" name="key1.2.2" value="">
                    <input type="text" name="key1.2.3" value="">
                    <br>
                </li>
            </ol>
        </p>
        <p>
            <h4>二、选择题(每题10分,共20分)</h4><br>
            <ol>
                <li>
                    UML与软件工程的关系是:<br>
                    <input type="radio" name="key2.1" value="A">(A)UML就是软件工程<br>
                    <input type="radio" name="key2.1" value="B">(B)UML参与到软件工程中软件开发过程的几个阶段<br>
                    <input type="radio" name="key2.1" value="C">(C)UML于软件工程无关<br>
                    <input type="radio" name="key2.1" value="D">(D)UML是软件工程的一部分<br>
                </li>
                <li>
                    Java语言支持:<br>
                    <input type="radio" name="key2.2" value="A">(A)单继承<br>
                    <input type="radio" name="key2.2" value="B">(B)多继承<br>
                    <input type="radio" name="key2.2" value="C">(C)单继承和多继承都支持<br>
                    <input type="radio" name="key2.2" value="D">(D)单继承和多继承都不支持<br>
                </li>
            </ol>
        </p>
        <p>
            <h4>三、多项选择题(每题10分,共20分)</h4><br>
            <ol>
                <li>
                    用例的力度分为以下哪三种:<br>
                    <input type="checkbox" name="key3.1" value="A">(A)概述级<br>
                    <input type="checkbox" name="key3.1" value="B">(B)需求级<br>
                    <input type="checkbox" name="key3.1" value="C">(C)用户目标级<br>
                    <input type="checkbox" name="key3.1" value="D">(D)子功能级<br>
                </li>
                <li>
                    类图由以下哪三部分组成:<br>
                    <input type="checkbox" name="key3.2" value="A">(A)名称(Name)<br>
                    <input type="checkbox" name="key3.2" value="B">(B)属性(Attribute)<br>
                    <input type="checkbox" name="key3.2" value="C">(C)操作(Operation)<br>
                    <input type="checkbox" name="key3.2" value="D">(D)方法(Function)<br>
                </li>
            </ol>
        </p>
        <p>
            <h4>四、判断题(每空10分,共20分)</h4><br>
            <ol>
                <li>
                    用例图只是用于和客户交流和沟通的,用于确定需求。
                    <input type="radio" name="key4.1" value="true">
                    <input type="radio" name="key4.1"value="false">
                    <br>
                </li>
                <li>
                    在状态图中,终止状态在一个状态图中允许有任意多个。
                    <input type="radio" name="key4.2" value="true">
                    <input type="radio" name="key4.2" value="false">
                    <br>
                </li>
            </ol>
        </p>
        <p>
            <h4>五、简答题(每空10分,共20分)</h4><br>
            <ol>
                <li>
                    简述什么是模型以及模型的表现形式?<br>
                    <textarea name="key5.1" value="" rows="5" cols="30"></textarea>
                    <br>
                </li>
            </ol>
        </p>
        <p>
            <input type="button" name="calcScore" value="计算分数">
            <br>
            <hr>
        </p>
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,885评论 0 11
  • 本文主要是起笔记的作用,内容来自慕课网. 认识HTML、CSS、JavaScript 学习web前端开发基础技术需...
    0o冻僵的企鹅o0阅读 691评论 3 7
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 2,131评论 2 21
  • 差不多晚上十点,我迷迷糊糊快要睡着了,眼睛拼命睁开就闭上了,这是昨晚失眠带来的后遗症。突然一个激灵,你要起来不能...
    祺小白阅读 169评论 0 0