一、html 表格实战

制作一张课程表，或者商品列表，用户信息表，要求用到行与列的合并。

实现效果图：

1表格实战-课程表

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>作业：课程表</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       width="50%"
  12.       align="center"
  13.       border="1px"
  14.       cellpadding="5"
  15.       cellspacing="0"
  16.     >
  17.       <caption>
  18.         <h3>合肥市第一小学六（六）班课程表</h3>
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="lightcyan">
  22.           <!-- th：是添加了加粗和居中样式的td，td的加强版，适合做表头标题 -->
  23.           <th colspan="2">时间</th>
  24.           <th>星期一</th>
  25.           <th>星期二</th>
  26.           <th>星期三</th>
  27.           <th>星期四</th>
  28.           <th>星期五</th>
  29.         </tr>
  30.       </thead>
  32.       <!-- 表主体1：上午四节课 -->
  33.       <tbody align="center">
  34.         <tr>
  35.           <td rowspan="4" bgcolor="lightblue" style="font-weight: bold">
  36.             上午
  37.           </td>
  38.           <td>1</td>
  39.           <td>数学</td>
  40.           <td>数学</td>
  41.           <td>语文</td>
  42.           <td>英语</td>
  43.           <td>数学</td>
  44.         </tr>
  45.         <tr>
  46.           <td>2</td>
  47.           <td>体育</td>
  48.           <td>语文</td>
  49.           <td>数学</td>
  50.           <td>数学</td>
  51.           <td>英语</td>
  52.         </tr>
  53.         <tr>
  54.           <td>3</td>
  55.           <td>语文</td>
  56.           <td>美术</td>
  57.           <td>英语</td>
  58.           <td>语文</td>
  59.           <td>美术</td>
  60.         </tr>
  61.         <tr>
  62.           <td>4</td>
  63.           <td>语文</td>
  64.           <td>思维</td>
  65.           <td>外教</td>
  66.           <td>体育</td>
  67.           <td>体育</td>
  68.         </tr>
  69.       </tbody>
  71.       <!-- 表主体2：中午休息 -->
  72.       <tbody align="center">
  73.         <tr bgcolor="lightgray">
  74.           <td colspan="7">中午休息</td>
  75.         </tr>
  76.       </tbody>
  78.       <!-- 表主体3：下午三节课。与上午课程类似 -->
  79.       <tbody align="center">
  80.         <tr>
  81.           <td rowspan="3" bgcolor="lightblue" style="font-weight: bold">
  82.             下午
  83.           </td>
  84.           <td>5</td>
  85.           <td>外教</td>
  86.           <td>体育</td>
  87.           <td>语文</td>
  88.           <td>音乐</td>
  89.           <td>语文</td>
  90.         </tr>
  91.         <tr>
  92.           <td>6</td>
  93.           <td>音乐</td>
  94.           <td>品德</td>
  95.           <td>阅读</td>
  96.           <td>品德</td>
  97.           <td>语文</td>
  98.         </tr>
  99.         <tr>
  100.           <td>7</td>
  101.           <td>课外活动</td>
  102.           <td>课外活动</td>
  103.           <td>课外活动</td>
  104.           <td>课外活动</td>
  105.           <td>课外活动</td>
  106.         </tr>
  107.       </tbody>
  109.       <!-- 表尾：底部备注 -->
  110.       <tfoot>
  111.         <tr bgcolor="lightgreen">
  112.           <td>备注：</td>
  113.           <!-- 从第2列开始水平合并6列 -->
  114.           <td colspan="6">每天下午17:00~18:00写完作业再回家</td>
  115.         </tr>
  116.       </tfoot>
  117.     </table>
  118.   </body>
  119. </html>

二、html 表单实战

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

实现效果图：

2表单实战-注册表单

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>作业:用户注册表单</title>
  8.   </head>
  9.   <body>
  10.     <form action="" style="display: grid; gap: 0.5em; width: 25%" method="POST">
  11.       <fieldset>
  12.         <legend>必填项</legend>
  13.         <div>
  14.           <label for="account">账号：</label>
  15.           <input
  16.             type="text"
  17.             id="account"
  18.             autofocus
  19.             required
  20.             placeholder="5~20个字符，字母或汉字"
  21.           />*
  22.         </div>
  24.         <div>
  25.           <label for="password">密码：</label>
  26.           <input
  27.             type="password"
  28.             id="password"
  29.             required
  30.             placeholder="6~20个字符，字母+数字"
  31.           />*
  32.         </div>
  34.         <div>
  35.           <label for="email">邮箱：</label>
  36.           <input
  37.             type="email"
  38.             name="email"
  39.             id="email"
  40.             required
  41.             placeholder="demo@mail.com"
  42.           />*
  43.         </div>
  44.       </fieldset>
  46.       <div style="margin-left: 5%">
  47.         <label for="secret">性别：</label>
  48.         <input type="radio" name="gender" value="male" id="male" /><label
  49.           for="male"
  50.           >男</label
  51.         >
  52.         <input type="radio" name="gender" value="female" id="female" /><label
  53.           for="female"
  54.           >女</label
  55.         >
  56.         <input
  57.           type="radio"
  58.           name="gender"
  59.           value="secret"
  60.           id="secret"
  61.           checked
  62.         /><label for="secret">保密</label>
  63.       </div>
  65.       <div style="margin-left: 5%">
  66.         <label>爱好：</label>
  67.         <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  68.           for="programmer"
  69.           >编程</label
  70.         >
  71.         <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  72.           >游戏</label
  73.         >
  74.         <input type="checkbox" name="hobby[]" id="sport" checked /><label
  75.           for="sport"
  76.           >运动</label
  77.         >
  78.         <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  79.           >旅游</label
  80.         >
  81.       </div>
  83.       <div style="text-align: center">
  84.         <button type="submit">提交</button>
  85.       </div>
  86.     </form>
  87.   </body>
  88. </html>
  89. ```

更多相关文章

  1. 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
  2. 关于表格和表单的简易写法
  3. HTML中表格和表单的应用实例 (MD)
  4. HTML中表格和表单的应用实例
  5. 第二天作业(课程表)
  6. HTML表格与表单的标签与属性
  7. 课程表 与 表单制作
  8. php学习日记——课程表
  9. HTML Study 01

随机推荐

  1. 利用一个singleInstance的activity实现音
  2. Android在SDcard建文件夹（在Android中移动
  3. android 适配器Adpter的使用总结 之 Curs
  4. Android获取设备型号和系统版本号、mac地
  5. 鸿洋大神博文Android(安卓)自定义View (
  6. 4.AutoCompleteTextView
  7. 【百度地图-安卓SDK】技术详解集锦
  8. Android(安卓)MediaCodec 解码H264码流播
  9. android基础
  10. 安卓的下拉控件Spinner