1 在 HTML 页面中，标签嵌套结构中，标签之间的关系有哪些？

参考答案

嵌套结构中，外层元素称为父元素，内层元素称为子元素；多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素；平级结构互为兄弟元素。

2 设计如图 - 1 所示的，百度热搜的页面显示。

EXERCISE - 图1

图 - 1

参考答案

创建 homework.html, 文件内容如下：

  3. 1.  <!DOCTYPE html>
  4. 2.  <head>
  5. 3.      <meta charset="UTF-8">
  6. 4.      <title>Document</title>
  7. 5.  </head>
  8. 6.  <body>
  9. 7.      <h3>百度热搜</h3>
  10. 8.      <ol>
  11. 9.          <li><a href="#">钟南山谈何时中国可以完全开放热</a></li>
  12. 10.          <li><a href="#">十一假期出行价格开始跳水</a></li>
  13. 11.          <li><a href="#">新疆霍尔果斯新增2例无症状热</a></li>
  14. 12.          <li><a href="#">真实的长津湖战役到底什么样</a></li>
  15. 13.          <li><a href="#">这个假期你被网红景点骗了吗</a></li>
  16. 14.      </ol>
  17. 15.  </body>
  18. 16.  </html>

3 创建如图 - 2 所示，使用表格显示内容的页面。

EXERCISE - 图2

图 - 2

参考答案

创建 homework.html, 文件内容如下：

  3. 1.  <!DOCTYPE html>
  4. 2.  <html lang="en">
  5. 3.  <head>
  6. 4.      <meta charset="UTF-8">
  7. 5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. 6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. 7.      <title>学员列表</title>
  10. 8.  </head>
  11. 9.  <body>
  12. 10.   <table border="1">
  13. 11.       <tr>
  14. 12.           <th>ID</th>
  15. 13.           <th>姓名</th>
  16. 14.           <th>年龄</th>
  17. 15.           <th>籍贯</th>
  18. 16.           <th>毕业院校</th>
  19. 17.       </tr>
  20. 18.       <tr>
  21. 19.           <td>1</td>
  22. 20.           <td>张三</td>
  23. 21.           <td>23</td>
  24. 22.           <td>河北</td>
  25. 23.           <td>河北师范大学</td>
  26. 24.       </tr>
  27. 25.       <tr>
  28. 26.           <td>2</td>
  29. 27.           <td>李四</td>
  30. 28.           <td>25</td>
  31. 29.           <td>山东</td>
  32. 30.           <td>山东大学</td>
  33. 31.       </tr>
  34. 32.       <tr>
  35. 33.           <td>3</td>
  36. 34.           <td>王五</td>
  37. 35.           <td>30</td>
  38. 36.           <td>北京</td>
  39. 37.           <td>北京航空航天大学</td>
  40. 38.       </tr>
  41. 39.       <tr>
  42. 40.           <td>4</td>
  43. 41.           <td>杨琪</td>
  44. 42.           <td>28</td>
  45. 43.           <td>北京</td>
  46. 44.           <td>中央财经大学</td>
  47. 45.       </tr>
  48. 46.   </table>   
  49. 47.  </body>
  50. 48.  </html>

4 使用表单标签设计如图 - 3 所示页面。

EXERCISE - 图3

图 - 3

参考答案

  3. 1.  <!DOCTYPE html>
  4. 2.  <html lang="en">
  5. 3.  <head>
  6. 4.    <meta charset="UTF-8">
  7. 5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. 6.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9. 7.    <title>Document</title>
  10. 8.  </head>
  11. 9.  <body>
  12. 10.    <h1>增加管理员</h1>
  13. 11.    <!-- table>tr*6>td*3 -->
  14. 12.    <table>
  15. 13.      <tr>
  16. 14.        <td>姓名:</td>
  17. 15.        <td><input type="text"></td>
  18. 16.        <td>十个字符以内</td>
  19. 17.      </tr>
  20. 18.      <tr>
  21. 19.        <td>密码:</td>
  22. 20.        <td>
  23. 21.          <input type="password">
  24. 22.        </td>
  25. 23.        <td>十个字符以内</td>
  26. 24.      </tr>
  27. 25.      <tr>
  28. 26.        <td>性别:</td>
  29. 27.        <td>
  30. 28.          <input type="radio">男士
  31. 29.          <input type="radio"">女士
  32. 30.   </td>
  33. 31.   <td></td>
  34. 32.   </tr>
  35. 33.   <tr>
  36. 34.   <td>角色:</td>
  37. 35.   <td>
  38. 36.   <input type="checkbox">超级管理员 <br>
  39. 37.   <input type="checkbox">账单管理员
  40. 38.   </td>
  41. 39.   <td>请至少选择一个角色</td>
  42. 40.   </tr>
  43. 41.   <tr>
  44. 42.   <td>头像:</td>
  45. 43.   <td><input type="file"></td>
  46. 44.   <td></td>
  47. 45.   </tr>
  48. 46.   <tr>
  49. 47.   <td></td>
  50. 48.   <td>
  51. 49.   <input type="submit" value="保存">
  52. 50.   <input type="reset">
  53. 51.   </td>
  54. 52.   <td></td>
  55. 53.   </tr>
  56. 54.   </table>
  57. 55.  </body>
  58. 56.  </html>

https://tts.tmooc.cn/ttsPage/NTD/NTDTN202109/WEBBASE/DAY01/EXERCISE/01/index_answer.html