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

推荐阅读

什么是职场？

百日练，一百天读一百本书，打卡第9天，《你只是看上去很努力》35分钟，理解50%，2000/分钟

空调主机跟遥控器显示温度不同步是怎么回事新科柜机空调不制冷调节温度显示不同步

等闲识得东风面中的东风是什么意思等闲识得东风面释义

redis 集合的底层实现 redis集合存bean

Java中关于Collections集合工具类的详细介绍

福州贵安水世界好玩吗 2023福州贵安水世界门票多少钱一张

蜗居背景音乐歌词蜗居背景音乐歌词翻译

甘肃所有大学名单甘肃省大学排名

雷殿生名字打分99分雷王姓取名

python|python 的生产者和消费者模式

quiet怎么读 quiet怎么造句

龙眼肉罐头做法新鲜的龙眼肉怎么做罐头

海藻面膜敷多长时间好

mysql my.cnf配置模板参考

苹果扣费怎么退 iPhone扣费怎么退款

你认为孤独的根源是什么？

减肥期间,有哪些做起来简单又好吃的减肥食谱？

创维55寸4k智能电视多少钱一台哪个电视牌子好

二甲双胍|糖尿病天天吃二甲双胍，请花5分钟弄清这6个注意事项，很重要