前言###
今天尝试了一下HTML的任务作业，属于现学现卖，果不其然，就会有各种问题出现。但是同时也是有收获和成果的，下面就来讲讲我是如何完成这个作业的吧。
作业简述###
使用纯html实现考试页面（不使用任何css/js），使用正确合适的标签做出如下的页面效果。内容需要完全一样，但页面样式仅供参考：
目标格式
格式分析###
一眼看去，整个页面可以分为三大块：标题部分（统一建模语言理论测试）、试卷信息部分（考试科目、时间、姓名等等）和试卷内容部分。
那么就可以用三对<div></div>标签来将它们分区。
下面通过文字的行间距我们可看出，试卷信息部分行间距较小，同时会出现文字和输入文本框同行的情况，所以这里可以采用<span></span>标签处理同行情况，并用<br/>来控制换行。
而在试卷内容部分，可以看到大题间的行距较大，小题间基本是以有序列表的形式实现的因此可以每道大题分一个区，在区内采用有序列表实现小题的表现形式。
最下面有一个要注意的地方，就是那个计算分数的按钮。
因为没有具体的功能介绍，所以我猜测这个按钮的作用是在完成作答后，点击即可获得分数，也就是说相当于提交按钮，那么前面的试卷内容中的答案（<input>、<textarea>标签中的内容）就应该是被提交的内容，也就是说整个试卷信息和试卷内容部分应该放在一个<form>标签中。
至此，试卷格式分析完成，可以开始编写HTML文件了。
我的HTML代码###
<head>
<title>统一建模语言理论测试</title>
</head>
<body>
<div name = "title">
<h1>统一建模语言理论测试</h1>
</div>
<form action="这里待定！！！需要一个URL." method="post">
<div name = "testInfo">
<h3>
考试科目：统一建模语言<br/>
时间：100分钟<br/>
得分：<br/>
<!--*************分割线*******************
<span>
<label>班级（必填）：</label><input type = "text" name = "class" /><br/>
<label>学号（必填）：</label><input type = "text" name = "stuId" /><br/>
<label>姓名（必填）：</label><input type = "text" name = "stuName" /><br/>
</span>
************上面的效果和下面一样******-->
<div>
<label>班级（必填）：</label><input type = "text" name = "class" />
</div>
<div>
<label>学号（必填）：</label><input type = "text" name = "stuId" />
</div>
<div>
<label>姓名（必填）：</label><input type = "text" name = "stuName" />
</div>
<!--************分割线********************-->
</h3>
</div>
<div name = "content">
<div name = "fillingQues">
<h3>一、填空题（每空五分，共20分）</h3>
<ol>
<div>
<li>UML的中文全称是：</li>
<input type = "text" name = "UMLName" />
</div>
<div>
<li>对象的突出特征是：</li>
<span>
<input type = "text" name = "CharOfObj" />
<input type = "text" name = "CharOfObj" />
<input type = "text" name = "CharOfObj" />
</span>
</div>
</ol>
</div>
<div name = "SingleChoice">
<h3>二、选择题（每题10分，共20分）</h3>
<ol>
<div>
<li>UML与软件工程的关系是：</li>
<div>
<input type = "radio" name = "UMLAndSP" id="1A"/>
<label for = "1A">(A)UML就是软件工程</label>
</div>
<div>
<input type = "radio" name = "UMLAndSP" id="1B"/>
<label for = "1B">(B)UML参与到软件工程中软件开发的几个阶段</label>
</div>
<div>
<input type = "radio" name = "UMLAndSP" id="1C"/>
<label for = "1C">(C)UML与软件工程无关</label>
</div>
<div>
<input type = "radio" name = "UMLAndSP" id="1D"/>
<label for = "1D">(D)UML是软件工程中的一部分</label>
</div>
</div>
<div>
<li>Java语言支持：</li>
<div>
<input type = "radio" name = "JavaSup" id="2A"/>
<label for = "2A">(A)单继承</label>
</div>
<div>
<input type = "radio" name = "JavaSup" id="2B"/>
<label for = "2B">(B)多继承</label>
</div>
<div>
<input type = "radio" name = "JavaSup" id="2C"/>
<label for = "2C">(C)单继承和多继承都支持</label>
</div>
<div>
<input type = "radio" name = "JavaSup" id="2D"/>
<label for = "2D">(D)单继承和多继承都不支持</label>
</div>
</div>
</ol>
</div>
<div name = "multipleChoice">
<h3>三、多项选择题（每题10分，共20分）</h3>
<ol>
<div>
<li>用例的粒度分为以下哪三种：</li>
<div>
<input type = "checkbox" name = "userLev" id="M1A"/>
<label for = "M1A">(A)概述级</label>
</div>
<div>
<input type = "checkbox" name = "userLev" id="M1B"/>
<label for = "M1B">(B)需求级</label>
</div>
<div>
<input type = "checkbox" name = "userLev" id="M1C"/>
<label for = "M1C">(C)用户目标级</label>
</div>
<div>
<input type = "checkbox" name = "userLev" id="M1D"/>
<label for = "M1D">(D)子功能级</label>
</div>
</div>
<div>
<li>类图由以下哪三部分组成：</li>
<div>
<input type = "checkbox" name = "classMap" id="M2A"/>
<label for = "M2A">(A)名称（Name）</label>
</div>
<div>
<input type = "checkbox" name = "classMap" id="M2B"/>
<label for = "M2B">(B)属性（Attribute）</label>
</div>
<div>
<input type = "checkbox" name = "classMap" id="M2C"/>
<label for = "M2C">(C)操作（OPration）</label>
</div>
<div>
<input type = "checkbox" name = "classMap" id="M2D"/>
<label for = "M2D">(D)方法（Function）</label>
</div>
</div>
</ol>
</div>
<div name = "judge">
<h3>四、判断题（每题10分，共20分）</h3>
<ol>
<div>
<li>
<span>用例图只是用于和客户交流和共同的，用于确定需求。
<label for = "J1T">true:</label>
<input name = "judge1" id ="J1T" type = "radio">
<label for = "J1F">false:</label>
<input name = "judge1" id ="J1F" type = "radio">
</span>
</li>
</div>
<div>
<li>
<span>在状态图中，终止状态在一个状态图中允许有任意多个。
<label for = "J2T">true:</label>
<input name = "judge2" id ="J2T" type = "radio">
<label for = "J2F">false:</label>
<input name = "judge2" id ="J2F" type = "radio">
</span>
</li>
</div>
</ol>
</div>
<div name = "shortAnswer">
<h3>五、简答题（每题10分，共20分）</h3>
<ol>
<div>
<li>
<span>
简述什么是模型以及模型的表现形式？
<textarea cols = "20" rows = "5"></textarea>
</span>
</li>
</div>
</ol>
</div>
</div>
<input type = "submit" value = "计算分数"/>
</form>
</body>
效果图如下###
最终效果
遗留问题###
可以看到和原图对比基本内容和格式都还原了，但是有一点我一直没解决掉：小题号相对于大题号的缩进问题不知该如何解决/(ㄒoㄒ)/。
我尝试了通过嵌套列表的形式，但是有序列表并不支持汉字序号，而无序列表会多出来一个 · 在题号前面。如果通过定义样式将点 · 隐藏，那么整体的缩进都会受到影响。最后只有通过加空格 的方式没有尝试，我觉得这个一定能成功，但是感觉正确的方式不会是这样。所以也希望能看到这篇文章的大神，给些建议，看看这个问题如何解决，谢谢！
网友评论