博客列表 >表格、表单以及简单的地图显示(iframe)

表格、表单以及简单的地图显示(iframe)

Nicole
Nicole原创
2021年03月31日 20:13:55583浏览

作业内容:1. 制作一张课程表,或者商品列表,用户信息表,要求用到行与列的合并 2. 制作 一张用户注册表单 ,要求用到常用的表单控件

1.制作一张课程表

笔记:
制作表格应用<table>标签,其中<tr>表示行,<td>表示列。

<border>表示表格边框。
cellspacing可以设置表格边框,可设置为0,将表格边框折叠。
cellpadding可设置表格内容和表格边框的距离。

<caption>标签可对表格标题进行设置。可在style中将font-weight设置为bolder,加粗表格标题。设置margin-bottom,使得表格标题和表格有距离,使表格更美观。

其中rowspan和colspan可对表格的行和列单元格进行合并,用法就是找到要合并的单元格位置起点设置要合并的单元格数量。

  1. <table border="1" cellspacing="0" cellpadding="5" width="80%">
  2. <caption style="font-weight: bolder; margin-bottom: 1em;">课程表</caption>
  3. <tr>
  4. <th>时间</th>
  5. <th>星期一</th>
  6. <th>星期二</th>
  7. <th>星期三</th>
  8. <th>星期四</th>
  9. <th>星期五</th>
  10. </tr>
  11. <tr>
  12. <td rowspan="2" bgcolor="lightblue">上午</td>
  13. <td>语文</td>
  14. <td>数学</td>
  15. <td>英语</td>
  16. <td>体育</td>
  17. <td>美术</td>
  18. </tr>
  19. <tr>
  20. <td>政治</td>
  21. <td>音乐</td>
  22. <td>历史</td>
  23. <td>英语</td>
  24. <td>数学</td>
  25. </tr>
  26. <tr>
  27. <td rowspan="2" bgcolor="lightgreen">下午</td>
  28. <td>语文</td>
  29. <td>英语</td>
  30. <td>历史</td>
  31. <td>数学</td>
  32. <td>美术</td>
  33. </tr>
  34. <tr>
  35. <td>政治</td>
  36. <td>数学</td>
  37. <td>美术</td>
  38. <td>英语</td>
  39. <td>数学</td>
  40. </tr>
  41. <tr>
  42. <td colspan="6" bgcolor="red">备注:早上8点上课,下午两点开始上课。</td>
  43. </tr>
  44. </table>

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 style="display: grid; gap: 0.5em;">
  11. <!-- 文本输入框 -->
  12. <fieldset>
  13. <legend>必填项</legend>
  14. <div>
  15. <label for="username">帐号:</label>
  16. <input type="text" id="username" placeholder="不能为空">
  17. </div>
  18. <div>
  19. <label for="password">密码:</label>
  20. <input type="password" id="password" placeholder="必须同时包含字母和数字">
  21. </div>
  22. <div>
  23. <label for="email">邮箱:</label>
  24. <input type="email" id="email" placeholder="格式为:xxx@xx.com">
  25. </div>
  26. </fieldset>
  27. <!-- 单选按钮:多选1 -->
  28. <div>
  29. <label for="secret">性别:</label>
  30. <input type="radio" name="gender" value="male" id="male" /><label for="male"></label>
  31. <input type="radio" name="gender" value="female" id="female" /><label for="female"></label>
  32. <input type="radio" name="gender" value="secret" id="secret" /><label for="female">保密</label>
  33. </div>
  34. <!-- 复选框 -->
  35. <div>
  36. <label for="">爱好</label>
  37. <input type="checkbox" name="hobby[]" id="programmer" checked><label for="programmer">编程</label>
  38. <input type="checkbox" name="hobby[]" id="game" ><label for="game">游戏</label>
  39. <input type="checkbox" name="hobby[]" id="shot" ><label for="shot">摄影</label>
  40. </div>
  41. <!-- 下拉列表 -->
  42. <select name="level" id="">
  43. <option value="1">铜牌会员</option>
  44. <option value="2">银牌会员</option>
  45. <option value="3" selected>金牌会员</option>
  46. <option value="4">钻石会员</option>
  47. </select>
  48. <!-- 输入框+下拉列表 -->
  49. <div>
  50. <label for="">关键字:</label>
  51. <input type="search" name="search" id="" list="key"/>
  52. <datalist id="key">
  53. <option value="html"></option>
  54. <option value="css"></option>
  55. <option value="javascript"></option>
  56. </datalist>
  57. </div>
  58. <div>
  59. <button>提交</button>
  60. </div>
  61. </form>
  62. </body>
  63. </html>

3.简单的地图显示

  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>map</title>
  8. </head>
  9. <body>
  10. <a href="https://j.map.baidu.com/61/g" target="map">北京</a>
  11. <a href="https://j.map.baidu.com/5f/7" target="map">合肥</a>
  12. <a href="https://j.map.baidu.com/45/g" target="map">上海</a>
  13. <hr/>
  14. <iframe srcdoc="<em>地图显示区</em>" frameborder="1" width="500" height="500" name="map"></iframe>
  15. </body>
  16. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议