博客列表 >1209—列表、表单、表格

1209—列表、表单、表格

Y的博客
Y的博客原创
2020年12月10日 17:59:52641浏览

1.表单

有序列表

  1. <ol>
  2. <li>牛奶</li>
  3. <li>面包</li>
  4. <li>可乐</li>
  5. </ol>

无序列表

  1. <ul>
  2. <li>洗发水</li>
  3. <li>沐浴露</li>
  4. <li>洗面奶</li>
  5. </ul>

自定义列表

  1. <dl>
  2. <dt>电脑:</dt>
  3. <dd>MacBook</dd>
  4. <dt>手机:</dt>
  5. <dd>iPhone11</dd>
  6. <dt>平板:</dt>
  7. <dd>iPad</dd>
  8. <dt>电话:</dt>
  9. <dd>手机号:<a href="tel:120">120</a></dd>
  10. <dd>邮箱号:<a href="mailto:120@163.com">120@163.com</a></dd>
  11. </dl>

2.表单

  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="style/form.css">
  8. </head>
  9. <body>
  10. <h3 class="title">用户注册</h3>
  11. <!-- action处理表单的脚本,method表单的提交类型 -->
  12. <form action="" method="POST" class="register" enctype="multipart/form-data">
  13. <label for="usernam">账号:</label>
  14. <input type="text" id="username" name="username" value="" placeholder="用户名" required>
  15. <label for="usernam">邮箱:</label>
  16. <input type="email" id="emali"" name="emali" value="" placeholder="@.com" required>
  17. <label for="usernam">密码:</label>
  18. <input type="password"" id="password"" name="password" value="" placeholder="不少于6位" required>
  19. <label for="female">性别:</label>
  20. <div>
  21. <input type="radio" name="gender" value="male" id="male" checked><label for="male"></label>
  22. <input type="radio" name="gender" value="female" id="female"><label for="female"></label>
  23. </div>
  24. <label for="#">兴趣:</label>
  25. <div>
  26. <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label>
  27. <input type="checkbox" name="hobby[]" value="book" id="book" checked><label for="book">看书</label>
  28. <input type="checkbox" name="hobby[]" value="photo" id="photo" checked><label for="photo">摄影</label>
  29. </div>
  30. <label for="">学历</label>
  31. <select name="edu" id="edu">
  32. <option value="1">初中</option>
  33. <option value="2">高中</option>
  34. <option value="3">大学</option>
  35. <option value="4">研究生</option>
  36. </select>
  37. <button>提交</button>
  38. </form>

</body>
</html>


3.表格

  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="style/table.css">
  8. </head>
  9. <body>
  10. <table class="lesson">
  11. <caption>课程表</caption>
  12. <thead>
  13. <tr>
  14. <th colspan="2"></th>
  15. <th>星期一</th>
  16. <th>星期二</th>
  17. <th>星期三</th>
  18. <th>星期四</th>
  19. <th>星期五</th>
  20. </tr>
  21. </thead>
  22. <tbody>
  23. <tr>
  24. <td rowspan="4">上午</td>
  25. <td></td>
  26. <td>语文</td>
  27. <td>数学</td>
  28. <td>英语</td>
  29. <td>体育</td>
  30. <td>美术</td>
  31. </tr>
  32. <tr>
  33. <td></td>
  34. <td>语文</td>
  35. <td>数学</td>
  36. <td>英语</td>
  37. <td>体育</td>
  38. <td>美术</td>
  39. </tr>
  40. <tr>
  41. <td></td>
  42. <td>语文</td>
  43. <td>数学</td>
  44. <td>英语</td>
  45. <td>体育</td>
  46. <td>美术</td>
  47. </tr>
  48. <tr>
  49. <td></td>
  50. <td>语文</td>
  51. <td>数学</td>
  52. <td>英语</td>
  53. <td>体育</td>
  54. <td>美术</td>
  55. </tr>
  56. <tr>
  57. <td colspan="7">课间休息</td>
  58. </tr>
  59. <tr>
  60. <td rowspan="4">下午</td>
  61. <td></td>
  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. <td>美术</td>
  75. </tr>
  76. <tr>
  77. <td></td>
  78. <td>课外活动</td>
  79. <td colspan="4"></td>
  80. </tr>
  81. </tbody>
  82. </table>
  83. </body>
  84. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议