第2天 html标签及属性

一、标签分类

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

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

html代码如下：

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

更多相关文章

  1. HTML表格标签及合并行列使用
  2. HTML表格实战：制作商品信息表格
  3. 0629作业
  4. 前端作业-表单
  5. 注册表单练习
  6. 作业提交2021630
  7. 表单列表作业提交
  8. 0628作业
  9. 6/29号作业

随机推荐

  1. Android(安卓)Activity基础概念
  2. 共享Android开发手册
  3. Android事件分发
  4. Android(安卓)Studio学习之安装插件
  5. Android中gravity的各种效果图
  6. Android(安卓)Service
  7. 通用（任何android机型）Root教程（完整版！附砖
  8. Xamarin.Android使用教程之创建第一个And
  9. Android studio导入Github的项目
  10. 键盘设备三星在Android上的改进对Develop