表格

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       align="center"
  13.       width="450"
  14.       cellspacing="0"
  15.       cellpadding="5"
  16.     >
  17.       <caption>
  18.         <h3>小学六年级课程表</h3>
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="#e5e5e5">
  22.           <th>时间</th>
  23.           <th>周一</th>
  24.           <th>周二</th>
  25.           <th>周三</th>
  26.           <th>周四</th>
  27.           <th>周五</th>
  28.         </tr>
  29.       </thead>
  30.       <tbody>
  31.         <tr>
  32.           <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  33.           <td>数学</td>
  34.           <td>语文</td>
  35.           <td>语文</td>
  36.           <td>英语</td>
  37.           <td>体育</td>
  38.         </tr>
  39.         <tr>
  40.           <!-- <td></td> -->
  41.           <td>语文</td>
  42.           <td>法制</td>
  43.           <td>科学</td>
  44.           <td>数学</td>
  45.           <td>数学</td>
  46.         </tr>
  47.         <tr>
  48.           <!-- <td></td> -->
  49.           <td>音乐</td>
  50.           <td>语文</td>
  51.           <td>英语</td>
  52.           <td>电脑</td>
  53.           <td>数学</td>
  54.         </tr>
  55.         <tr>
  56.           <!-- <td></td> -->
  57.           <td>语文</td>
  58.           <td>语文</td>
  59.           <td>语文</td>
  60.           <td>语文</td>
  61.           <td>语文</td>
  62.         </tr>
  63.         <tr>
  64.           <td colspan="6" align="center">中午休息</td>
  65.           <!-- <td></td>
  66.           <td></td>
  67.           <td></td>
  68.           <td></td>
  69.           <td></td> -->
  70.         </tr>
  71.         <tr>
  72.           <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  73.           <td>电脑</td>
  74.           <td>电脑</td>
  75.           <td>电脑</td>
  76.           <td>电脑</td>
  77.           <td>电脑</td>
  78.         </tr>
  79.         <tr>
  80.           <!-- <td></td> -->
  81.           <td>电脑</td>
  82.           <td>电脑</td>
  83.           <td>电脑</td>
  84.           <td>电脑</td>
  85.           <td>电脑</td>
  86.         </tr>
  87.         <tr>
  88.           <!-- <td></td> -->
  89.           <td>电脑</td>
  90.           <td>电脑</td>
  91.           <td>电脑</td>
  92.           <td>电脑</td>
  93.           <td>电脑</td>
  94.         </tr>
  95.       </tbody>
  96.       <tfoot>
  97.         <tr bgcolor="#e5e5e5">
  98.           <td>备注：</td>
  99.           <td colspan="5" align="center">哈哈哈哈</td>
  100.           <!-- <td></td>
  101.           <td></td>
  102.           <td></td>
  103.           <td></td> -->
  104.         </tr>
  105.       </tfoot>
  106.     </table>
  107.   </body>
  108. </html>

表单

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       body {
  9.         text-align: center;
  10.         background-color: #efe;
  11.       }
  12.       .login {
  13.         display: inline-block;
  14.         margin-top: 2em;
  15.       }
  16.       .login h2 {
  17.         padding: 0.5em 1.5em;
  18.         background-color: lightgreen;
  19.         box-shadow: 3px 3px 3px #888;
  20.         border-top-left-radius: 1em;
  21.         border-bottom-right-radius: 1em;
  22.       }
  23.       .login input {
  24.         border: none;
  25.         border-bottom: 1px solid;
  26.         background-color: lightblue;
  27.         outline: none;
  28.       }
  29.       .login .button {
  30.         border: none;
  31.         outline: none;
  32.         background-color: seagreen;
  33.         color: white;
  34.         width: 20%;
  35.         height: 2.2em;
  36.         margin-top: 1em;
  37.         margin-left: auto;
  38.       }
  39.       .login .reset {
  40.         width: 20%;
  41.         height: 2.2em;
  42.         border: none;
  43.         outline: none;
  44.         margin-top: 1em;
  45.         margin-left: auto;
  46.         background-color: seagreen;
  47.         color: white;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <form action="" method="get" class="login">
  53.       <h2>用户注册</h2>
  54.       <div>
  55.         <label for="username">用户名：</label
  56.         ><input
  57.           type="text"
  58.           name="username"
  59.           value=""
  60.           id="username"
  61.           placeholder="不能为空"
  62.           required
  63.         />
  64.       </div>
  65.       <br />
  66.       <div>
  67.         <label for="password">密码：</label>
  68.         <input
  69.           type="text"
  70.           name="password"
  71.           value=""
  72.           placeholder="不能为空"
  73.           required
  74.         />
  75.         <button onclick="showPassword(this,this.form.password)">查看</button>
  76.       </div>
  77.       <br />
  78.       <div>
  79.         <label for="email">邮箱：</label>
  80.         <input
  81.           type="email"
  82.           name="email"
  83.           id="email"
  84.           placeholder="不能为空"
  85.           required
  86.         />
  87.       </div>
  88.       <br />
  89.       <div>
  90.         <label for="secret">性别：</label>
  92.         <input type="radio" name="sex" id="male" value="male" />
  93.         <label for="male">男</label>
  95.         <input type="radio" name="sex" id="female" value="female" />
  96.         <label for="female">女</label>
  98.         <input
  99.           type="radio"
  100.           type="radio"
  101.           name="sex"
  102.           id="secret"
  103.           value="secret"
  104.           checked
  105.         /><label for="secret">保密</label>
  106.       </div>
  107.       <br />
  108.       <div>
  109.         <label for="">爱好：</label>
  110.         <input type="checkbox" name="hobby[]" id="game" value="game" checked />
  111.         <label for="game">游戏</label>
  113.         <input type="checkbox" name="hobby[]" id="trave" value="trave" />
  114.         <label for="trave">旅游</label>
  116.         <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
  117.         <label for="shoot">摄影</label>
  119.         <input type="checkbox" name="hobby[]" id="other" value="other" />
  120.         <label for="other">其他</label>
  121.       </div>
  122.       <br />
  123.       <div>
  124.         <label for="">LOL等级：</label>
  125.         <select name="level" id="">
  126.           <option value="1">黑铁</option>
  127.           <option value="2" selected>青铜</option>
  128.           <option value="3">白银</option>
  129.         </select>
  130.       </div>
  131.       <br />
  132.       <div>
  133.         <button type="submit" class="button">提交</button>
  134.         <button type="reset" class="reset">重置</button>
  135.         <!-- <button type="button">按钮</button> -->
  136.       </div>
  137.     </form>
  138.     <script>
  139.       function showPassword(btn, ele) {
  140.         if (ele.type === "password") {
  141.           ele.type = "text";
  142.           btn.textContent = "隐藏";
  143.         } else {
  144.           ele.type = "password";
  145.           btn.textContent = "显示";
  146.         }
  147.       }
  148.     </script>
  149.   </body>
  150. </html>

更多相关文章

  1. android asm.jar
  2. Android(安卓)3.0，将为对战iPad归来
  3. 手机或android设备连接电脑，但是adb devices找不到设备。
  4. android 签名
  5. js 判断当前操作系统 ios, android, 电脑端
  6. BlueStacks让 Android(安卓)应用跑在 Windows 平台上!
  7. Android平板低迷，与iPAD差在哪里？
  8. android 修改电脑盘符名称 USB连接电脑默认连接方式
  9. Android下使用Socket连接网络电脑

随机推荐

  1. android:layout_width="match_parent"
  2. android java和js交互
  3. Android视频桌面，动态桌面开发
  4. 在Android上模拟MetroUI
  5. android 音乐信息乱码处理
  6. Android模拟器无法启动
  7. Android实现页面跳转
  8. 获取本机 Android 默认sha1 秘钥
  9. 【转】Android kernel启动流程
  10. Libcurl库移植指南(下)--编译支持https的