html-UML试卷的实现

今天我们来写个这样的试卷吧

UML试卷是这样的

来，看下这张试卷，恩恩，是纯html滴。
怎么开始写呢？我们来分析一下：

一. 结构是怎样的？

初步划分为7个部分：

1. 最上面的试卷名称和学生要填写的信息为一部分

• 填空题为第二部分
• 选择题为第三部分
• 多项选择题为第四部分
• 判断题为第五部分
• 简答题为第六部分
• 最后的用来计算成绩的按钮为第七部分

二. 每一部分主要应该用什么标签？

1. 第一部分是这张试卷的头部，应该用<header></header>标签，试卷名称最合适的应该<h1></h1>标签了，下面要填写的信息就是<input />了。

• 第二到六的每一部分应该是一个<section></section>了，而每个标题自然是<h3></h3>了，下面的具体题目应该就是<ol></ol>有序列表了。
  以填空题为例我们来看下代码吧

<section>  
    <header>   
       <h3>一、填空题(每空５分，共20分)</h3>
    </header>  
    <ol>       
      <li>UML的中文名称是：<br>   
       <input type="text" title="Fill_blank_1"/>
      </li>
      <li>对象最突出的特征是： 
        <input type="text" title="Fill_blank_2_(1)"/>
        <input type="text" title="Fill_blank_2_(2)"/>
        <input type="text" title="Fill_blank_2_(3)"/> 
      </li>
   </ol>
</section>

• 最后一部分按钮自然就是<footer></footer>里面的一个<button></button>了。

三.标签说明

h5中新标签

header—标签定义文档的页眉（介绍信息）
section—定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
footer—定义页面或章节的尾部

文字相关：

h — 定义标题1至标题6 h1, h2, h3, h4, h5, h6，文字大小依次减小
p — html段落标签p
div — html层的块标签
span —定义部分区块

*** 列表相关***

ul—无序列表
ol—有序列表
li—列表项

表单相关

• form -- html表单标签form

• select -- 定义可选择的html表单select
• textarea -- 定义一个多行的文字输入域textarea
• input -- 定义一个表单的输入域input，不同的type对应不同的输入样式,下面为具体的type值
  • text—文本域
  • password—密码框
  • checkbox—复选框
  • radio—单选框
  • submit—按钮

好了，详细的源代码请见我的github