小白学html-试卷实现(三)

前面我们已经用html实现了列表和表格,戳这里列表实现表格实现
今天,我们的任务是设计这样一张试卷:

目标图

分析:

这张试卷大致可以分为以下八个部分:试卷名、考试和考生信息、填空题、选择题、多选题、判断题、简答题以及计算分数提交按钮。这几个部分可以用section的形式罗列,在填空题、选择题、多选题、判断题、简答题这几个部分里分别还有各自的小问题,这里可以用有序列表来实现上图中的缩进效果。

  • 对于试卷中标题标签的选择
    标题(Heading)是通过````<h1>-<h6>等标签进行定义的,<h1>定义最大的标题,<h6>定义最小的标题。并且在标题的前后浏览器会自动地添加空行。 根据实际效果,这张试卷里,标题选<h1>,每个章节名选<h3>```.
  • 试卷中换行的实现
    <br> 标签定义换行,<br> 是没有关闭标签的空元素,而在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。因此即使目前<br>在所有浏览器中都是有效的,但从长远上来讲,我们推荐使<br /> (在开始标签中添加斜杠,比如 <br />,即可关闭空元素)。
  • 试卷中输入框的选择
<input type="text"/>                   文本框
<input type="radio" name="single1"/>   单选框
<input type="checkbox">                复选框
 <textarea></textarea>                  文本区域

其中需要注意的是,当inputtype=“radio”时,需要加上相同的name属性才能实现单选。

废话不多说,直接上github吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容