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作业——试卷篇

推荐阅读

老农民的生存智慧之理财篇

矮个子阔腿裤如何搭配

河堤的拼音词语河堤的拼音

佛山市顺德区欧科电器有限公司招工吗？佛山市顺德区欧科电器有限公司招聘

比亚迪f3不打火这是怎么了比亚迪f3车打不着火怎么办

机械表停了对表的性能有没有影响

超市员工说杀妻嫌犯在6、7日分别买了洗洁精和创可贴,说明什么？

男童被喷泉冲至半空摔地身亡

烂菜叶子可以直接埋土里吗菜枯直接放土里可以吗

烧油的电动车如何打火

壁虎会不会爬到床上壁虎会在家里做窝繁殖吗

中国对销售伪劣化肥罪立案标准的规定有哪些

Win7怎么把电脑变成无线路由器？

为什么喝红豆薏米茶上火

如何在云服务器上安装Windows系统？云服务器怎么装win

鸡蛋怎么才看出熟

联想电脑如何重装系统win10

linux下的格式化命令格式化 linux

LOL艾欧尼亚玩家价值不菲的ID被盗,偷号者新改的ID却让人哭笑不得！你觉得呢？

《汉字找茬王》珅找出17个常见字通关图文攻略找字珅怎么过