search

博客列表 >HTML+CSS 基础测试题（附带答案）

HTML+CSS 基础测试题（附带答案）

晴天
晴天原创
2020年04月08日 16:58:457388浏览

11 期第一周测试题

满分 100, 同学们测试一下自己可以得多少分? 考试时间要求 90 分钟之内完成, 80 分为合格

[toc]

1. 单选题

每题 5 分,共 25 分

  • (1). phpStudy 是___b__

    • a:前端集成开发环境; b: php 集成开发环境;

  • (2). 小皮面板是___b___

    • a: Linux 系统; b: 主机管理系统;

  • (3). html 元素是由___b__描述的

    • a: 属性; b: 标签

  • (4). css 的功能是___b____

    • a: 控制页面元素的行为; b: 控制页面元素的样式

  • (5). <table>是____a___类型的元素

    • a: 块级; b: 行内

2. 填空题

每题 5 分,共 40 分

  1. html 元素的三大通用属性是: id, class 和 ___style_____;
  2. html5 是创建页眉使用<header>元素, 页脚使用__<footer></footer>____元素
  3. 表单按钮中设置提交类型使用的属性是: ___formmeathed_______,处理脚本的属性是:_____formaction________;
  4. <a>元素除了页面跳转外, 还可以实现发邮件,打电话, ____下载____和____锚点______;
  5. 设置字体图标,如果使用unicode方式,应该使用的字体属性是__@font-face_____
  6. <meta charset="UTF-8" />的意思是: _________设置默认字符编码集格式__________________________

3. 编程题

第一题: 20 分, 第二题 15 分, 共: 35 分

  1. 写一个用户注册表单,要求用到文本框,密码框,单选框,复选框, 下拉列表, 复合列表, 文本域, 提交按钮

HTML 部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户注册</title>
  7.     <link rel="stylesheet" href="register.css" />
  8.   </head>
  9.   <body>
  10.     <form action="" method="post" id="register"></form>
  11.     <fieldset form="register">
  12.       <legend>用户注册</legend>
  13.       <!-- 必填项 -->
  14.       <main>
  15.         <!-- 用户名 -->
  16.         <section>
  17.           <label for="username">用户名：</label>
  19.           <input
  20.             type="text"
  21.             id="username"
  22.             name="username"
  23.             form="register"
  24.             placeholder="请输入6-10位用户名"
  25.             minlength="6"
  26.             maxlength="10"
  27.             required
  28.             autofocus
  29.           />
  30.           <label for="username"><span class="iconfont">&#xe623;</span></label>
  31.         </section>
  32.         <!-- 密码 -->
  33.         <section>
  34.           <label for="password">密码：</label>
  35.           <input
  36.             type="password"
  37.             id="password"
  38.             name="password"
  39.             form="register"
  40.             placeholder="请输入8-16位密码"
  41.             minlength="8"
  42.             maxlenth="16"
  43.             required
  44.           />
  45.           <label for="password"><span class="iconfont">&#xe632;</span></label>
  46.         </section>
  47.         <!-- 邮箱 -->
  48.         <section>
  49.           <label for="email">邮箱：</label>
  50.           <input
  51.             type="email"
  52.             id="email"
  53.             name="email"
  54.             form="register"
  55.             placeholder="请输入邮箱"
  56.             required
  57.           />
  58.           <label for="email"><span class="iconfont">&#xe72d;</span></label>
  59.         </section>
  60.         <!-- 年龄 -->
  61.         <section>
  62.           <label for="age">年龄：</label>
  63.           <input
  64.             type="number"
  65.             max="60"
  66.             min="18"
  67.             value="20"
  68.             form="register"
  69.             id="age"
  70.             name="age"
  71.           />
  72.           <label for="age"><span class="iconfont">&#xe69d;</span></label>
  73.         </section>
  74.         <!-- 性别 -->
  75.         <section>
  76.           <label for="secret">性别：</label>
  77.           <div class="gender">
  78.             <input
  79.               type="radio"
  80.               name="gender"
  81.               id="male"
  82.               form="register"
  83.               value="male"
  84.             />
  85.             <label for="male">男</label>
  86.             <input
  87.               type="radio"
  88.               name="gender"
  89.               id="female"
  90.               value="female"
  91.               form="register"
  92.             />
  93.             <label for="female">女</label>
  94.             <input
  95.               type="radio"
  96.               name="gender"
  97.               id="secret"
  98.               form="register"
  99.               value="secret"
  100.               checked
  101.             />
  102.             <label for="secret">保密</label>
  103.           </div>
  104.         </section>
  105.         <!-- 兴趣 -->
  106.         <section>
  107.           <label for="">兴趣：</label>
  108.           <div class="hobby">
  109.             <input
  110.               type="checkbox"
  111.               name="hobby[]"
  112.               form="register"
  113.               id="shoot"
  114.               value="shoot"
  115.               checked
  116.             /><label for="shoot">摄影</label>
  117.             <input
  118.               type="checkbox"
  119.               name="hobby[]"
  120.               form="register"
  121.               id="travel"
  122.               value="travel"
  123.             /><label for="travel">旅游</label>
  124.             <input
  125.               type="checkbox"
  126.               name="hobby[]"
  127.               form="register"
  128.               id="programme"
  129.               value="programme"
  130.               checked
  131.             /><label for="programme">编程</label>
  132.           </div>
  133.         </section>
  134.         <!-- 意向课程 -->
  135.         <section>
  136.           <label for="teacher">意向课程：</label>
  137.           <input
  138.             type="text"
  139.             id="teacher"
  140.             name="teacher"
  141.             form="register"
  142.             list="table"
  143.             required
  144.           />
  145.           <datalist id="table">
  146.             <option value="HTML开发与实战" label="HTML开发与实战"></option>
  147.             <option
  148.               value="JavaScript开发与实战"
  149.               label="JavaScript开发与实战"
  150.             ></option>
  151.             <option value="CSS3开发与实战" label="CSS3开发与实战"></option>
  152.             <option value="PHP开发与实战" label="PHP开发与实战"></option>
  153.             <option value="MySQL开发与实战" label="MySQL开发与实战"></option>
  154.           </datalist>
  155.         </section>
  156.         <!-- 报名课程 -->
  157.         <section>
  158.           <label for="">报名课程：</label>
  159.           <select name="enlist" id="enlist" form="register">
  160.             <optgroup label="前端">
  161.               <option value="HTML开发与实战" label="HTML开发与实战"></option>
  162.               <option value="CSS3开发与实战" label="CSS3开发与实战"></option>
  163.               <option
  164.                 value="JavaScript开发与实战"
  165.                 label="JavaScript开发与实战"
  166.               ></option>
  167.             </optgroup>
  168.             <optgroup label="后端">
  169.               <option value="PHP开发与实战" label="PHP开发与实战"></option>
  170.               <option value="MySQL开发与实战" label="MySQL开发与实战"></option>
  171.               <option
  172.                 value="Laravel开发与实战"
  173.                 label="Laravel开发与实战"
  174.               ></option>
  175.             </optgroup>
  176.             <optgroup label="全选">
  177.               <option value="全选选择" label="全部选择"></option>
  178.             </optgroup>
  179.           </select>
  180.         </section>
  181.         <!-- 留言 -->
  182.         <section>
  183.           <label for="">给我留言：</label>
  184.           <textarea
  185.             name="say"
  186.             id="say"
  187.             form="register"
  188.             cols="30"
  189.             rows="10"
  190.             placeholder="说点什么吧..."
  191.             required
  192.           ></textarea>
  193.         </section>
  194.         <!-- 提交 -->
  195.         <button
  196.           form="register"
  197.           formmethod="POST"
  198.           formaction="register.php"
  199.           formtarget="_black"
  200.         >
  201.           提交
  202.         </button>
  203.       </main>
  204.     </fieldset>
  205.   </body>
  206. </html>

CSS 部分

  1. @font-face {
  2.   font-family: "iconfont"; /* project id 1741431 */
  3.   src: url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.eot");
  4.   src: url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.eot?#iefix") format("embedded-opentype"),
  5.     url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.woff2") format("woff2"),
  6.     url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.woff") format("woff"), url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.ttf")
  7.       format("truetype"),
  8.     url("//at.alicdn.com/t/font_1741431_zqb14mva9sj.svg#iconfont") format("svg");
  9. }
  10. .iconfont {
  11.   font-family: "iconfont" !important;
  12.   font-size: 16px;
  13.   font-style: normal;
  14.   -webkit-font-smoothing: antialiased;
  15.   -moz-osx-font-smoothing: grayscale;
  16. }
  17. fieldset {
  18.   border: none;
  19.   border: 5px solid lightblue;
  20.   border-radius: 30px;
  21.   width: 500px;
  22.   margin: auto;
  23.   margin-top: 20px;
  24. }
  25. legend {
  26.   text-align: center;
  27.   font-size: 1.5rem;
  28. }
  29. span {
  30. }
  31. .gender {
  32.   display: inline;
  33. }
  34. .hobby {
  35.   display: inline;
  36. }
  1. 写一个商品信息表,要求用到表格区域划分, 表格单元的行与列的合并等
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>商品信息表</title>
  7.     <style>
  8.       table {
  9.         width: 300px;
  10.         border: 3px solid lightblue;
  11.         border-radius: 5px;
  12.         color: lightcoral;
  13.       }
  15.       caption {
  16.         text-align: center;
  17.       }
  18.       th,
  19.       tr,
  20.       td {
  21.         border: 1px solid lightblue;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <table boder="3" cellspacing="0" cellpadding="5">
  27.       <caption>
  28.         商品信息表
  29.       </caption>
  30.       <thead>
  31.         <th>区域</th>
  32.         <th>商品名</th>
  33.         <th>原价</th>
  34.         <th>会员价</th>
  35.       </thead>
  36.       <tbody>
  37.         <tr>
  38.           <td rowspan="3">零食区</td>
  39.           <td>薯片</td>
  40.           <td>10</td>
  41.           <td>5</td>
  42.         </tr>
  43.         <tr>
  44.           <td>饼干</td>
  45.           <td>40</td>
  46.           <td>8</td>
  47.         </tr>
  48.         <tr>
  49.           <td>瓜子</td>
  50.           <td>8</td>
  51.           <td>3</td>
  52.         </tr>
  53.       </tbody>
  54.     </table>
  55.   </body>
  56. </html>
上一条：git push文件到远程服务器失败，git pull抓取也失败。下一条：【MySQL】使用docker配置主从复制(主库和从库都是全新的情况)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多