Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML+CSS 基础测试题（附带答案）
Blogger Information
Blog 47
fans 1
comment 0
visits 53061
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML+CSS 基础测试题（附带答案）
晴天
Original
7367 people have browsed it

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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post