今天我們來寫個(gè)這樣的試卷吧
UML試卷是這樣的
來，看下這張?jiān)嚲?，恩恩，是純html滴。
怎么開始寫呢？我們來分析一下：
一. 結(jié)構(gòu)是怎樣的？
初步劃分為7個(gè)部分：
- 最上面的試卷名稱和學(xué)生要填寫的信息為一部分
- 填空題為第二部分
- 選擇題為第三部分
- 多項(xiàng)選擇題為第四部分
- 判斷題為第五部分
- 簡(jiǎn)答題為第六部分
- 最后的用來計(jì)算成績(jī)的按鈕為第七部分
二. 每一部分主要應(yīng)該用什么標(biāo)簽？
- 第一部分是這張?jiān)嚲淼念^部，應(yīng)該用
<header></header>標(biāo)簽，試卷名稱最合適的應(yīng)該<h1></h1>標(biāo)簽了，下面要填寫的信息就是<input />了。
- 第二到六的每一部分應(yīng)該是一個(gè)
<section></section>了，而每個(gè)標(biāo)題自然是<h3></h3>了，下面的具體題目應(yīng)該就是<ol></ol>有序列表了。
以填空題為例我們來看下代碼吧
<section>
<header>
<h3>一、填空題(每空５分，共20分)</h3>
</header>
<ol>
<li>UML的中文名稱是：<br>
<input type="text" title="Fill_blank_1"/>
</li>
<li>對(duì)象最突出的特征是：
<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>里面的一個(gè)<button></button>了。
三.標(biāo)簽說明
h5中新標(biāo)簽
header—標(biāo)簽定義文檔的頁(yè)眉（介紹信息）
section—定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。
footer—定義頁(yè)面或章節(jié)的尾部
文字相關(guān)：
h — 定義標(biāo)題1至標(biāo)題6 h1, h2, h3, h4, h5, h6，文字大小依次減小
p — html段落標(biāo)簽p
div — html層的塊標(biāo)簽
span —定義部分區(qū)塊
*** 列表相關(guān)***
ul—無序列表
ol—有序列表
li—列表項(xiàng)
表單相關(guān)
- form -- html表單標(biāo)簽form
- select -- 定義可選擇的html表單select
- textarea -- 定義一個(gè)多行的文字輸入域textarea
-
input -- 定義一個(gè)表單的輸入域input，不同的type對(duì)應(yīng)不同的輸入樣式,下面為具體的type值
- text—文本域
- password—密碼框
- checkbox—復(fù)選框
- radio—單選框
- submit—按鈕
好了，詳細(xì)的源代碼請(qǐng)見我的github
