HTML:UML试卷

需求

现在我们有这样一个需求:
使用纯HTML(不含CSS/JS)制作以下网页


UML试卷

分析

仔细分析网页元素可以看到:

  • 标题应该用<h2>标签(具体用<h1>或是<h2><h3>不重要)
  • 文本框使用<input type="text">
  • 文本可以使用<span>(不用也可以)
  • 单选框使用<input type="radio">
  • 复选框使用<input type="checkbox">
  • 文本区域可以使用<textarea>
  • “计算分数”按钮使用<input type="button">
  • 最后有个水平线,使用<hr />

编码

可以得到类似下面的HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>UML Test</title>
</head>

<body>
    <header>
        <h2>统一建模语言理论测试</h2>

        <span>考试科目:统一建模语言</span><br/>
        <span>考试时间:100分钟</span><br/>
        <span>得分:</span><br/>
    </header>

    <form>
        <span>班级(必填):</span><input id="class" type="text" name="班级"><br />
        <span>学号(必填):</span><input id="number" type="text" name="学号"><br />
        <span>姓名(必填):</span><input id="name" type="text" name="姓名"><br />
        
... ...
        <input type="button" name="submit" value="计算分数" id="submit" />
    </form>
    <hr />
</body>
</html>

代码这里就不详细解释了,需要完整代码的请看这里

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

推荐阅读更多精彩内容

  • 今天我们来写个这样的试卷吧 来,看下这张试卷,恩恩,是纯html滴。怎么开始写呢?我们来分析一下: 一. 结构是...
    星期六1111阅读 4,210评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,205评论 4 61
  • 清风拂过岗 海浪拥过沙 嫩芽抱过枝 彩蝶吻过花 幼妖爱过人 痴心妖,美人 回首往昔数年情 不悔痴心 如今形同陌路客...
    十十伍阅读 1,612评论 0 0
  • 这一段其实很有意思,里面提出了很多有趣的概念。 比如:两者、同出、玄、众妙之门。 “此两者”中的两者指的是哪两者?...
    瀚海侯阅读 13,399评论 17 13
  • 前言# 初步了解过lua的人都知道,lua和c交互式通过虚拟栈来实现的,这个栈造就了lua的神奇,那么我们今天来看...
    AlbertS阅读 10,552评论 3 3