第二天 HTML标签与属性

第2天 html标签及属性

一、标签分类

  • 单标签:内容一般由外部引入
  • 双标签:内容在标签之间
    不同类型的标签,属性不同

二、作业:作业内容:写一个商品信息表,要求有id,品名,价格,数量,金额等字段, 最后要有合计,如总数, 总金额,并且商品按品类进行合并显示,要求用到行与列的合并, 别怕失败,多写几次,就对表格的编写就熟练了。
浏览器显示效果:

html代码如下:

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  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>day2表格创建</title>
  8. </head>
  9. <body>
  10. <table border="1px" cellspacing='0' width="90%" align="center">
  11. <caption>
  12. 作业:监控系统设备信息表
  13. </caption>
  14. <!-- 表体 -->
  15. <tbody>
  16. <tr align="center">
  17. <td>序号</td>
  18. <td>品名</td>
  19. <td>品牌</td>
  20. <td>规格</td>
  21. <td>参数</td>
  22. <td>单价</td>
  23. <td>单位</td>
  24. <td>数量</td>
  25. <td>金额</td>
  26. </tr>
  27. <tr align="center">
  28. <td>1</td>
  29. <td>摄像机</td>
  30. <td>海康威视</td>
  31. <td>400万6mm摄像机</td>
  32. <td>400万像素 POE供电</td>
  33. <td>390</td>
  34. <td></td>
  35. <td>28</td>
  36. <td>10920</td>
  37. </tr>
  38. <tr align="center">
  39. <td>2</td>
  40. <td>硬盘</td>
  41. <td>海康威视</td>
  42. <td>6TB</td>
  43. <td>监控专用硬盘</td>
  44. <td>1200</td>
  45. <td></td>
  46. <td>4</td>
  47. <td>4800</td>
  48. </tr>
  49. <tr align="center">
  50. <td>3</td>
  51. <td>录像机</td>
  52. <td>海康威视</td>
  53. <td>32路4盘位</td>
  54. <td>32路NVR</td>
  55. <td>1800</td>
  56. <td></td>
  57. <td>1</td>
  58. <td>1800</td>
  59. </tr>
  60. <tr align="center">
  61. <td>4</td>
  62. <td>网线</td>
  63. <td>海康威视</td>
  64. <td>超五类无氧铜</td>
  65. <td></td>
  66. <td>3600</td>
  67. <td></td>
  68. <td>3</td>
  69. <td>10800</td>
  70. </tr>
  71. <tr align="center">
  72. <td>合计</td>
  73. <td colspan="6"></td>
  74. <td>36</td>
  75. <td>28320</td>
  76. </tr>
  77. </tbody>
  78. </table>
  79. </body>
  80. </html>