HTML作业——试卷篇 HTML作业——试卷篇

前言###
今天尝试了一下HTML的任务作业，属于现学现卖，果不其然，就会有各种问题出现。但是同时也是有收获和成果的，下面就来讲讲我是如何完成这个作业的吧。
作业简述###
使用纯html实现考试页面（不使用任何css/js），使用正确合适的标签做出如下的页面效果。内容需要完全一样，但页面样式仅供参考：

文章图片
目标格式格式分析###
一眼看去，整个页面可以分为三大块：标题部分（统一建模语言理论测试）、试卷信息部分（考试科目、时间、姓名等等）和试卷内容部分。
那么就可以用三对标签来将它们分区。
下面通过文字的行间距我们可看出，试卷信息部分行间距较小，同时会出现文字和输入文本框同行的情况，所以这里可以采用标签处理同行情况，并用来控制换行。
而在试卷内容部分，可以看到大题间的行距较大，小题间基本是以有序列表的形式实现的因此可以每道大题分一个区，在区内采用有序列表实现小题的表现形式。
最下面有一个要注意的地方，就是那个计算分数的按钮。
因为没有具体的功能介绍，所以我猜测这个按钮的作用是在完成作答后，点击即可获得分数，也就是说相当于提交按钮，那么前面的试卷内容中的答案（、</code>标签中的内容）就应该是被提交的内容，也就是说整个试卷信息和试卷内容部分应该放在一个<code><form></code>标签中。<br> 至此，试卷格式分析完成，可以开始编写HTML文件了。<br /> 我的HTML代码###<br /> <blockquote><code> <title>统一建模语言理论测试 - 锐客网</title><body>统一建模语言理论测试<form action="这里待定！！！需要一个URL." method="post">考试科目：统一建模语言<br/> 时间：100分钟<br/> 得分：<br/><label>班级（必填）：</label><input type = "text" name = "class" /><label>学号（必填）：</label><input type = "text" name = "stuId" /><label>姓名（必填）：</label><input type = "text" name = "stuName" /><br /> 一、填空题（每空五分，共20分）<br /> <ol><li>UML的中文全称是：</li> <input type = "text" name = "UMLName" /><li>对象的突出特征是：</li><input type = "text" name = "CharOfObj" /> <input type = "text" name = "CharOfObj" /> <input type = "text" name = "CharOfObj" /></ol>二、选择题（每题10分，共20分）<br /> <ol><li>UML与软件工程的关系是：</li><input type = "radio" name = "UMLAndSP" id="1A"/> <label for = "1A">(A)UML就是软件工程</label><input type = "radio" name = "UMLAndSP" id="1B"/> <label for = "1B">(B)UML参与到软件工程中软件开发的几个阶段</label><input type = "radio" name = "UMLAndSP" id="1C"/> <label for = "1C">(C)UML与软件工程无关</label><input type = "radio" name = "UMLAndSP" id="1D"/> <label for = "1D">(D)UML是软件工程中的一部分</label><li>Java语言支持：</li><input type = "radio" name = "JavaSup" id="2A"/> <label for = "2A">(A)单继承</label><input type = "radio" name = "JavaSup" id="2B"/> <label for = "2B">(B)多继承</label><input type = "radio" name = "JavaSup" id="2C"/> <label for = "2C">(C)单继承和多继承都支持</label><input type = "radio" name = "JavaSup" id="2D"/> <label for = "2D">(D)单继承和多继承都不支持</label></ol>三、多项选择题（每题10分，共20分）<br /> <ol><li>用例的粒度分为以下哪三种：</li><input type = "checkbox" name = "userLev" id="M1A"/> <label for = "M1A">(A)概述级</label><input type = "checkbox" name = "userLev" id="M1B"/> <label for = "M1B">(B)需求级</label><input type = "checkbox" name = "userLev" id="M1C"/> <label for = "M1C">(C)用户目标级</label><input type = "checkbox" name = "userLev" id="M1D"/> <label for = "M1D">(D)子功能级</label><li>类图由以下哪三部分组成：</li><input type = "checkbox" name = "classMap" id="M2A"/> <label for = "M2A">(A)名称（Name）</label><input type = "checkbox" name = "classMap" id="M2B"/> <label for = "M2B">(B)属性（Attribute）</label><input type = "checkbox" name = "classMap" id="M2C"/> <label for = "M2C">(C)操作（OPration）</label><input type = "checkbox" name = "classMap" id="M2D"/> <label for = "M2D">(D)方法（Function）</label></ol>四、判断题（每题10分，共20分）<br /> <ol><li> 用例图只是用于和客户交流和共同的，用于确定需求。 <label for = "J1T">true:</label> <input name = "judge1" id ="J1T" type = "radio"> <label for = "J1F">false:</label> <input name = "judge1" id ="J1F" type = "radio"></li><li> 在状态图中，终止状态在一个状态图中允许有任意多个。 <label for = "J2T">true:</label> <input name = "judge2" id ="J2T" type = "radio"> <label for = "J2F">false:</label> <input name = "judge2" id ="J2F" type = "radio"></li></ol>五、简答题（每题10分，共20分）<br /> <ol><li>简述什么是模型以及模型的表现形式？ <textarea cols = "20" rows = "5">
效果图如下###

文章图片

文章图片
最终效果遗留问题###
【HTML作业——试卷篇】可以看到和原图对比基本内容和格式都还原了，但是有一点我一直没解决掉：小题号相对于大题号的缩进问题不知该如何解决/(ㄒoㄒ)/。
我尝试了通过嵌套列表的形式，但是有序列表并不支持汉字序号，而无序列表会多出来一个 · 在题号前面。如果通过定义样式将点 · 隐藏，那么整体的缩进都会受到影响。最后只有通过加空格的方式没有尝试，我觉得这个一定能成功，但是感觉正确的方式不会是这样。所以也希望能看到这篇文章的大神，给些建议，看看这个问题如何解决，谢谢！

HTML作业——试卷篇

推荐阅读

揭秘太监阉割全过程太监净身过程

弥猴桃怎么催熟

中国四大盐场分布图中国盐场

深圳求水山庄好玩

奇怪近义词词语奇怪近义词

500大卡需要走多少步

威能壁挂炉f20排除方法是什么故障,这个就要看的功率了

新生儿吃多少奶粉新生儿奶粉喝多少毫升

g27方向盘g27方向盘安装

火影水门大战九尾是第几集

asp.net mvc验证

软考时间几个小时，软考答案一般要多久才出

描写天空的诗句有哪些

马桶里堵了硬物取不出

手机怎么连接腾达无线网卡，腾达无线网卡无法连接到这个网络

阴香根的功效与作用

生产工艺记录做错分析报告

巴黎世家鸭舌帽洗了掉色严重正常吗巴黎世家鸭舌帽洗了掉色严重

winform可行性分析

新手如何养好锦鲤，新手养锦鲤入门基础教程