HTML练习——实现一份试卷

练习:

使用纯html实现考试页面(不使用任何css/js),使用正确合适的标签做出如下的页面效果。内容需要完全一样,但页面样式仅供参考:


试卷

分析

按内容将页面划分:

  1. 整个页面的header,剩下的由于都有提交的部分,放到一个form中,作为一个article:


    整体header
  2. 在form/article中,把这部分当作header,因为题目无论怎么换,个人信息都需要填:


    article中的header
  3. 剩下的题目,按大题分成section,没过section中用<ol>承载题目:

    article中的section

  4. 最后,提交按钮作为article/form的footer:


    article中的footer

那么页面的整体结构如下:

页面结构

结果

简书markdown编辑器太凶残了,我就不粘代码了,整体代码在这里,还有效果
html文件中的标签比较多,主要是为了兼顾下个练习中对CSS的使用。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,237评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要...
    DecadeHeart阅读 3,458评论 0 3
  • 2016年8月22日 星期一(不,又要上班了!)天气:阳光暴晒心情:一片无爱 今天是星期一,昨天是星期天,明天是星...
    京妤阅读 671评论 0 1
  • AppBarLayout简介 AppBarLayout是继承LinearLayout实现的一个ViewGroup容...
    So_ProbuING阅读 640评论 0 0