第一期學習路線:任務一----作業(yè)二(完成一個小表單)

1.任務目的:

使用純html實現(xiàn)考試頁面(不使用任何css/js,不要使用table
布局),使用正確合適的標簽做出如下的頁面效果。內容需要完全一樣,但頁面樣式


2.任務過程:

步驟一:觀察試卷要求,確定需要使用的標簽包括有列表標簽以及所有的表單內容。首先進行題目以及考生信息的內容填寫,當需要輸入時,我選擇使用單行輸入< input>,type="text" ,以此來進行考生信息的填寫。

代碼>


Paste_Image.png

運行結果>


Paste_Image.png

步驟二:進行大題題目的編寫。當我需要使用有序列表時發(fā)現(xiàn)有序列表的序號沒有漢子樣式(即type沒有“一”)。所以我放棄使用有序列表,改成使用普通標題的形式。接下來就是一道大題一道大題的進行標簽搭建。首先是第一大題。

代碼>


Paste_Image.png

運行結果>


步驟三:接下來進行選擇題的編寫。使用的標簽內容都有表單的輸入type為"radio",name起成一樣的,在外部使用有序列表標簽。多項選擇題則使的type則用"checkbox“,(判斷題同單選題)

代碼


Paste_Image.png

運行結果

Paste_Image.png

步驟四:填空題,使用< textara >標簽即可。最后使用type為"submit"的input進行分數(shù)計算。value為”計算分數(shù)“。最后的最后使用< hr>標簽進行分隔線。

代碼


Paste_Image.png

運行結果


Paste_Image.png

源代碼以及結果

源代碼


Paste_Image.png

Paste_Image.png

結果


Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容