作业 1:制作一张课程表或商品列表,用户信息表,要求用到行与列的合并

作业要求：

作业成果：

作业效果：

代码详情：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>作业1:班级课程表</title>
  8.   </head>
  9.   <style>
  10.     tr {
  11.       text-align: center;
  12.     }
  13.   </style>
  14.   <body>
  15.     <table
  16.       border="1"
  17.       width="40%"
  18.       align="center"
  19.       cellspacing="0"
  20.       cellpadding="5"
  21.     >
  22.       <caption style="font-size: 20px">
  23.         班级课程表
  24.       </caption>
  25.       <tr id="1" bgcolor="e0fcff">
  26.         <td>时间</td>
  27.         <td>星期一</td>
  28.         <td>星期二</td>
  29.         <td>星期三</td>
  30.         <td>星期四</td>
  31.         <td>星期五</td>
  32.       </tr>
  33.       <tr id="2">
  34.         <td rowspan="3" bgcolor="#88cdf9">上午</td>
  35.         <td>语文</td>
  36.         <td>数学</td>
  37.         <td>音乐</td>
  38.         <td>体育</td>
  39.         <td>英语</td>
  40.       </tr>
  41.       <tr id="3">
  42.         <td>语文</td>
  43.         <td>数学</td>
  44.         <td>音乐</td>
  45.         <td>体育</td>
  46.         <td>英语</td>
  47.       </tr>
  48.       <tr id="4">
  49.         <td>语文</td>
  50.         <td>数学</td>
  51.         <td>音乐</td>
  52.         <td>体育</td>
  53.         <td>英语</td>
  54.       </tr>
  55.       <tr id="5">
  56.         <td colspan="6" align="center" bgcolor="#dfdedf">中午休息</td>
  57.       </tr>
  58.       <tr id="6">
  59.         <td rowspan="2" align="center" bgcolor="#88cdf9">下午</td>
  60.         <td>语文</td>
  61.         <td>数学</td>
  62.         <td>音乐</td>
  63.         <td>体育</td>
  64.         <td>英语</td>
  65.       </tr>
  66.       <tr id="7">
  67.         <td>语文</td>
  68.         <td>数学</td>
  69.         <td>音乐</td>
  70.         <td>体育</td>
  71.         <td>英语</td>
  72.       </tr>
  73.       <tr id="8">
  74.         <td colspan="6" bgcolor="#90ee90">
  75.           备注:每天下午16:00~17:00写完作业再回家
  76.         </td>
  77.       </tr>
  78.     </table>
  79.   </body>
  80. </html>

作业 2：制作一张用户注册表单 ，要求用到常用的表单控件

作业要求：

  • 要求用到常用的表单控件

    作业成果：

    作业效果：

    详细代码：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>作业02-用户注册表</title>
    8. </head>
    9. <style>
    10.   div {
    11.     padding: 10px;
    12.   }
    13. </style>
    14. <body>
    15.   <h1>新用户注册登记表</h1>
    16.   <form action="" method="post">
    17.     <fieldset>
    18.       <legend>1.用户账号信息(必填):</legend>
    19.       <!-- 单行文本框 -->
    20.       <div>
    21.         <label for="username">注册账号:</label>
    22.         <input
    23.           type="text"
    24.           id="username"
    25.           autofocus
    26.           required
    27.           placeholder="必须是6-8位数"
    28.           maxlength="8"
    29.         />
    30.       </div>
    31.       <!-- 密码框 -->
    32.       <div>
    33.         <label for="password">用户密码:</label>
    34.         <input
    35.           type="password"
    36.           id="password"
    37.           required
    38.           placeholder="必须是字母+数字的组合"
    39.         />
    40.       </div>
    41.     </fieldset>
    42.     <fieldset>
    43.       <legend>2.其他个人信息</legend>
    44.       <!-- 单选框 -->
    45.       <div>
    46.         <label for="">性别:</label>
    47.         <input type="radio" name="gender" value="male" id="male" />
    48.         <label>男</label>
    49.         <input type="radio" name="gender" value="female" id="female" />
    50.         <label>女</label>
    51.         <input
    52.           type="radio"
    53.           name="gender"
    54.           value="secret"
    55.           id="secret"
    56.           checked
    57.         />
    58.         <label>保密</label>
    59.       </div>
    60.       <!-- 多选框 -->
    61.       <div>
    62.         <label for="">爱好:</label>
    63.         <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
    64.         <input type="checkbox" name="hobby[]" id="meishi" /><label
    65.           for="meishi"
    66.           >美食</label
    67.         >
    68.         <input type="checkbox" name="hobby[]" id="lvyou" /><label for="lvyou"
    69.           >旅游</label
    70.         >
    71.         <input type="checkbox" name="hobby[]" id="shuma" /><label for="shuma"
    72.           >数码</label
    73.         >
    74.         <input type="checkbox" name="hobby[]" id="biancheng" checked /><label
    75.           for="biancheng"
    76.           >编程</label
    77.         >
    78.       </div>
    79.       <!-- 下拉列表 -->
    80.       <div>
    81.         <label for="">目前的会员身份</label>
    82.         <select name="level" id="">
    83.           <option value="1" selected>不是会员</option>
    84.           <option value="2">铜牌会员</option>
    85.           <option value="3">银牌会员</option>
    86.           <option value="4">钻石会员</option>
    87.         </select>
    88.       </div>
    89.       <!-- 多行文本框 - 文本域 -->
    90.       <div>
    91.         <label for="jieshao">自我介绍:</label>
    92.         <textarea
    93.           name="jieshao"
    94.           id="jieshao"
    95.           cols="22"
    96.           rows="5"
    97.           placeholder="介绍一下你自己的经历"
    98.         ></textarea>
    99.       </div>
    100.     </fieldset>
    101.     <fieldset>
    102.       <legend>3.附件上传</legend>
    103.       <!-- 文件上传 -->
    104.       <div>
    105.         <label for="">照片上传:</label>
    106.         <input type="file" name="userimg" />
    107.         <input type="submit" value="点击上传图片" />
    108.       </div>
    109.     </fieldset>
    111.     <fieldset>
    112.       <legend>4.其他补充信息</legend>
    113.       <!-- 日期选择控件 -->
    114.       <div>
    115.         <label for="">生日日期:</label>
    116.         <input type="date" name="depart" />
    117.       </div>
    118.       <!-- 电子邮箱 -->
    119.       <div>
    120.         <label for="email">邮箱地址:</label>
    121.         <input
    122.           type="email"
    123.           name="email"
    124.           id="email"
    125.           placeholder="demo@xxx.com"
    126.         />
    127.       </div>
    128.       <!-- datalist 搜索框 自定义输入+预选 -->
    129.       <div>
    130.         <label for="">邀请人:</label>
    131.         <input type="search" name="search" list="my-key" />
    132.         <datalist id="my-key">
    133.           <option value="刘德华"></option>
    134.           <option value="张家辉"></option>
    135.           <option value="郭富城"></option>
    136.         </datalist>
    137.       </div>
    138.     </fieldset>
    139.     <div>
    140.       <input type="submit" name="touxiang" value="提交表单" />
    141.     </div>
    142.   </form>
    143. </body>
    144. </html>

更多相关文章

  1. 0402作业
  2. 0407作业-留言板、字符串和数组的常用方法
  3. 0406作业-dom元素的增删改查
  4. 0318作业-
  5. 马哥架构班第四周作业
  6. 如何使用 Spark 3.0 中新加的 Structured Streaming UI 来进行异
  7. 来自 Facebook 的 Spark 大作业调优经验
  8. 0401作业
  9. js作业一常识类

随机推荐

  1. 浅析Binder(六)——Java服务启动
  2. Android查询：模拟键盘鼠标事件（adb shell
  3. Android NavigationBar隐藏与浮层
  4. 创建 Android 库
  5. 带weight的LinearLayout嵌套RecyclerView
  6. [Android]Toolbar使用详解（三）——源码解析
  7. RK3288[android 7.1]调试笔记 去掉桌面上
  8. android静态图片和动态壁纸
  9. Android(安卓)Studio 自动检查依赖库是否
  10. android-apt plugin is incompatible wit