HTML + CSS(在线HTML测试)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestOnLine</title>
    <!--    连接JS-->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="TestOnLine.js" defer="defer"></script>

    <style>
        body {
            background-color: gray;
            margin-left: 250px;
        }

        h1 {
            text-align: center;
            margin-top: 100px;
            color: #FFA500;
        }


        input {
            margin-top: 10px;
            background-color: white;
            border: none;
            border-bottom: black 1px solid;
            outline: none;

        }

        textarea {
            height: 100px;
            width: 500px;
        }

        li {
            color: black;
            font-size: 13px;
            list-style: none;
        }

        #btn {
            background-color: #FFA500;
            color: white;
            padding: 5px 10px;
            margin-left: 380px;
            margin-top: 16px;
            margin-bottom: 20px;
        }

        .xin-xi {
            text-align: center;
        }

        .ti-mu {
            margin-left: 100px;
        }

        .all {
            background-color: white;
            width: 800px;
            /*设置阴影*/
            box-shadow: 10px 10px 15px black;
        }

        .line {
            width: 600px;
            border: #FFA500 1.5px solid;
        }
    </style>
</head>
<body>
<div class="all">
    <h1>
        HTML 在线测试
    </h1>
    <!--    隔离线 hr-->
    <hr class="line">

    <!--        信息填写部分-->
    <div class="xin-xi">
        <tr>
            <td>学号:</td>
            <td><input type="text" name="ID" placeholder="请输入学号"></td>
            <td>姓名:</td>
            <td><input type="text" name="Nmae" id="aaa" placeholder="请输入姓名"></td>
            <td>班级</td>
            <td><select name="Class">
                <option value="0">--请选择--</option>
                <option value="1">2020级软件一班</option>
                <option value="2">2020级软件二班</option>
                <option value="3">2020级软件三班</option>
                <option value="4">2020级软件四班</option>
                <option value="5">2020级软件五班</option>
            </select></td>
        </tr>
    </div>
    <!--题目部分-->
    <div class="ti-mu">
        <!--        第一类题目单选题部分-->
        <h3>一、单选题(5分一个/共20分)</h3>
        <ul>
            <h4>1.下面哪一项的电子邮件链接是正确的? (  )</h4>
            <li><input type="radio" name="xz01" value="A">A.xxx.com.cn</li>
            <li><input type="radio" name="xz01" value="B">B.xxx@.net</li>
            <li><input type="radio" name="xz01" value="C">C.xxx@com</li>
            <li><input type="radio" name="xz01" value="D">D.xxx@xxx.co</li>
        </ul>

        <ul>
            <h4> 2.下列哪一项是在新窗口中打开网页文档? (  )</h4>
            <li><input type="radio" name="xz02" value="A">A. _self</li>
            <li><input type="radio" name="xz02" value="B">B. _blank</li>
            <li><input type="radio" name="xz02" value="C">C. _top</li>
            <li><input type="radio" name="xz02" value="D">D. _parent</li>
        </ul>

        <ul>
            <h4> 3.在一个框架组的属性面板中,不能设置下面哪一项。(  )</h4>
            <li><input type="radio" name="xz03" value="A"> A.边框颜色</li>
            <li><input type="radio" name="xz03" value="B"> B.子框架的宽度或者高度</li>
            <li><input type="radio" name="xz03" value="C"> C.边框宽度</li>
            <li><input type="radio" name="xz03" value="D"> D.滚动条</li>
        </ul>

        <ul>
            <h4>4.cSS样式表不可能实现(  )功能。</h4>
            <li><input type="radio" name="xz04" value="A"> A.将格式和结构分离</li>
            <li><input type="radio" name="xz04" value="B"> B.一个csS文件控制多个网页</li>
            <li><input type="radio" name="xz04" value="C"> C.控制图片的精确位置</li>
            <li><input type="radio" name="xz04" value="D"> D.兼容所有的浏览器</li>
        </ul>
        <!--    多选题部分-->
        <h3>二、多选题(5分一个/共20分)</h3>
        <ul>
            <h4>1. 以下哪些是HTML5新增的标签 ? ( ABCD )</h4>
            <li><input type="checkbox" id="t11" name="dx011" value="A">A.video</li>
            <li><input type="checkbox" id="t12" name="dx012" value="B">B.email</li>
            <li><input type="checkbox" id="t13" name="dx013" value="C">C.section</li>
            <li><input type="checkbox" id="t14" name="dx014" value="D">D.number</li>
        </ul>
        <ul>
            <h4>2. 以下那些不是HTML5新增的属性 ? ( BC )</h4>
            <li><input type="checkbox" id="t21" name="dx02" value="A">A.iframe里面seamless属性</li>
            <li><input type="checkbox" id="t22" name="dx02" value="B">B.table里面algin属性</li>
            <li><input type="checkbox" id="t23" name="dx02" value="C">C.button里面的border属性</li>
            <li><input type="checkbox" id="t24" name="dx02" value="D">D.link里面的sizes属性</li>
        </ul>
        <ul>
            <h4>3. HTML5有哪些优点? (ABCD)</h4>
            <li><input type="checkbox" id="t31" name="dx03" value="A">A. 兼容性强。</li>
            <li><input type="checkbox" id="t32" name="dx03" value="B">B. 可用于手机系统android和os开发。</li>
            <li><input type="checkbox" id="t33" name="dx03" value="C">C. HTML5开发能提供更快、更简便的服务,代码可高度重用,服务发布方便。</li>
            <li><input type="checkbox" id="t34" name="dx03" value="D">D. HTML5其突出的特点就是强化了web页的表现性,追加了本地数据库,可以用作离线应用的开发。</li>
        </ul>
        <ul>
            <h4>4. HTML5有那些缺点? (ABC)</h4>
            <li><input type="checkbox" id="t41" name="dx04" value="A">A. 不能用于手机端开发。</li>
            <li><input type="checkbox" id="t42" name="dx04" value="B">B. 依赖浏览器 资源利用难。</li>
            <li><input type="checkbox" id="t43" name="dx04" value="C">C. 交互有限 运转速度难。</li>
            <li><input type="checkbox" id="t44" name="dx04" value="D">D. 用户标识 个性化功能难。</li>
        </ul>
        <!--    填空题部分-->
        <h3>三、填空题(5分一个/共20分)</h3>
        <ul>
            <!--            像素-->
            <h4>1. 表格的宽度可以用百分比和____(1)____两种单位来设置。</h4>
            (1)<input type="text" name="tk01">
        </ul>
        <ul>
            <!--            编码-->
            <h4>2. 文件头标签包括关键字、描述、____(2)____、基础和链接等。</h4>
            (2)<input type="text" name="tk02">
        </ul>
        <ul>
            <!--            脚本语言-->
            <h4>3.实现网页交互性的核心技术是____(3)____。</h4>
            (3)<input type="text" name="tk03">
        </ul>
        <ul>
            <!--            iframe-->
            <h4>4. 浮动框架的标签是____(4)____。</h4>
            (4)<input type="text" name="tk04">
        </ul>

        <!--    判断题部分-->
        <h3>四、判断题(5分一个/共20分)</h3>
        <ul>
            <h4>1.在HTML表格中,表格的列数等于第一行中TH与TD 的colspan属性的和。(错)</h4>
            <li><input type="radio" id="ok11" name="pd01">正确 <input type="radio" id="ok12" name="pd01">错误</li>
        </ul>
        <ul>
            <h4>2.css中的color属性用于设置HTML元素的背景颜色。 (错)</h4>
            <li><input type="radio" id="ok21" name="pd02">正确 <input type="radio" id="ok22" name="pd02">错误</li>
        </ul>
        <ul>
            <h4>3.在HTML表格中,在TR、TD或TH标记符中使用align属性可以控制单元格内容的垂直对齐。 (对)</h4>
            <li><input type="radio" id="ok31" name="pd03">正确 <input type="radio" id="ok32" name="pd03">错误</li>
        </ul>
        <ul>
            <h4>4.GIF格式的图象最多可以显示1024种颜色。 (错)</h4>
            <li><input type="radio" id="ok41" name="pd04">正确 <input type="radio" id="ok42" name="pd04">错误</li>
        </ul>
        <!--    简答题部分-->
        <h3>五、简答题(10分一个/20分)</h3>
        <!--        1.简述你对CSS盒子模型的理解
        CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
        网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。-->
        <ul>
            <h4>1.简述你对CSS盒子模型的理解 ? </h4>
            <textarea name="jd01"></textarea>
        </ul>
        <!--        2.HTML5表单新增的input输入类型有哪些
        Autocomplete属性,autofocus属性,form属性,表单重写属性,height与width属性,list属性,min、max和step属性,multiple属性,pattern属性,placeholder属性,required属性-->
        <ul>
            <h4>2.HTML5表单新增的input输入类型有哪些 ?</h4>
            <textarea name="jd02"></textarea>
        </ul>
    </div>
    <!--    划线-->
    <hr class="line">
    <!--    提交按钮-->
    <div class="ti-jiao">
        <button type="button" id="btn"> 提交试卷</button>
    </div>
</div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值