Blogger Information
Blog 10
fans 0
comment 0
visits 5557
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3.19作业下拉框
手机用户1615433136
Original
447 people have browsed it

制作一张课程表

  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>课程表</title>
  8. </head>
  9. <body>
  10. <table
  11. border="1"
  12. width="90%"
  13. cellspacing="0"
  14. cellpadding="5"
  15. align="center"
  16. >
  17. <caption>
  18. <h3>武汉市刚花小学一年级课程表</h3>
  19. </caption>
  20. <thead>
  21. <tr bgcolor="lightcyan">
  22. <th>时间</th>
  23. <th>星期一</th>
  24. <th>星期二</th>
  25. <th>星期三</th>
  26. <th>星期四</th>
  27. <th>星期五</th>
  28. </tr>
  29. </thead>
  30. <tbody align="center">
  31. <tr>
  32. <th rowspan="3" bgcolor="lightskyblue">上午</th>
  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. </tr>
  46. <tr>
  47. <td>语文</td>
  48. <td>语文</td>
  49. <td>英语</td>
  50. <td>体育</td>
  51. <td>数学</td>
  52. </tr>
  53. </tbody>
  54. <tbody>
  55. <tr align="center" bgcolor="#dedede">
  56. <td colspan="6">中午休息</td>
  57. </tr>
  58. </tbody>
  59. <tbody align="center">
  60. <tr>
  61. <th rowspan="4" bgcolor="lightgreen">下午</th>
  62. <td>数学</td>
  63. <td>语文</td>
  64. <td>英语</td>
  65. <td>数学</td>
  66. <td>数学</td>
  67. </tr>
  68. <tr>
  69. <td>语文</td>
  70. <td>数学</td>
  71. <td>音乐</td>
  72. <td>体育</td>
  73. <td>英语</td>
  74. </tr>
  75. </tbody>
  76. <tfoot>
  77. <tr bgcolor="lightskyblue">
  78. <td align="center">备注</td>
  79. <td colspan="5" align="center">
  80. 每天下午16:00 - 17:00,写完作业再回家
  81. </td>
  82. </tr>
  83. </tfoot>
  84. </table>
  85. </body>
  86. </html>

常用的表单控件

  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>Document</title>
  8. </head>
  9. <body>
  10. <form action="" style="display: grid; gap: 0.5em">
  11. <div>
  12. <label for="username">账号:</label>
  13. <input type="text" id="username" />
  14. </div>
  15. <div>
  16. <label for="password">密码:</label>
  17. <input type="password" id="password" />
  18. </div>
  19. <div>
  20. <label for="email">邮箱:</label>
  21. <input type="email" name="email" id="email" />
  22. </div>
  23. <div>
  24. <label for="secret">性别:</label>
  25. <input type="radio" name="gender" value="male" id="male" /><label for="male"></label>
  26. <input type="radio" name="gender" value="female" id="female" /><label for="female"></label>
  27. <input type="radio" name="gender" value="secret" id="secret" /><label for="secret">保密</label>
  28. </div>
  29. <div>
  30. <label>爱好</label>
  31. <input type="checkbox" name="hobby[]" id="programmer" checked><label for="programmer">编程</label>
  32. <input type="checkbox" name="hobby[]" id="game"><label for="game">游戏/label>
  33. <input type="checkbox" name="hobby[]" id="shot"><label for="shot">摄影</label>
  34. <input type="checkbox" name="hobby[]" id="trave"><label for="trave">旅游</label>
  35. </div>
  36. <select name="level" id="">
  37. <option value="1">铜牌</option>
  38. <option value="2">银牌</option>
  39. <option value="3">金牌</option>
  40. <option value="4" selected>钻石</option>
  41. </select>
  42. <div>
  43. <label for="">输入关键字</label>
  44. <input type="search" name="search" id="" list="my-key">
  45. <datalist id="my-key">
  46. <option value="html"></option>
  47. <option value="css"></option>
  48. <option value="javacript"></option>
  49. </datalist>
  50. </div>
  51. <div>
  52. <button type="submit">提交</button>
  53. </div>
  54. </form>
  55. </body>
  56. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
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