六、HTML图片标签¶

6.1 准备工作-下载图片¶

1、打开任意图片搜索站点，复制一张公网图片的直链地址，例如 https://bucketbucket1.oss-cn-beijing.aliyuncs.com/imag/image-20250518214148465.png。

<img class="mimg vimgld" width="186" height="331" alt="示例图片" src="https://bucketbucket1.oss-cn-beijing.aliyuncs.com/imag/image-20250518214148465.png">

2、同时准备一张本地图片放到 html-study 文件夹下，并命名为 1.jpg。

6.2 HTML图片标签演示¶

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为5-HTML图片标签.html

<!DOCTYPE html>
<html>
    <h2>插入公网图片</h2>
    <img src="https://bucketbucket1.oss-cn-beijing.aliyuncs.com/imag/image-20250518214148465.png">

    <h2>插入本地图片</h2>
    <img width="400px"  height="500px" src="./1.jpg">
</html>

2、双击【5.HTML图片标签.html】

七、HTML表格标签¶

7.1 HTML表格的基本结构¶

一个完整的表格通常由以下标签组成：

标签	含义
`<table>`	表格容器
`<tr>`	表格行（table row）
`<td>`	表格单元格（table data）
`<th>`	表头单元格（table header）

7.1.1 最基础的表格写法¶

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-0基础表格HTML表格.html

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
</table>

2、双击【6-0基础表格HTML表格.html】，默认无边框展示

7.2 表头标签 th¶

表头通常用于第一行或第一列，默认会加粗并居中显示。

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-1表头标签HTML表格.html

<table>
  <tr>
    <th>课程</th>
    <th>老师</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>李老师</td>
  </tr>
</table>

2、双击【6-1表头标签HTML表格.html】，默认无边框展示

7.3 表格标题 caption¶

可以给表格添加标题说明。

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-2表格标题HTML表格.html

<table>
  <caption>学生信息表</caption>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
</table>

2、双击【6-2表格标题HTML表格.html】，默认无边框展示

7.4 表格的语义结构：thead、tbody、tfoot¶

为了让表格结构更清晰，HTML5 推荐使用：

标签	含义
`<thead>`	表头区域
`<tbody>`	表格主体
`<tfoot>`	表格底部

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-3表格语义结构HTML表格.html

<table border="1">
  <caption>成绩表</caption>

  <thead>
    <tr>
      <th>姓名</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>小红</td>
      <td>90</td>
      <td>95</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>85</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>平均分</td>
      <td>87.5</td>
      <td>91.5</td>
    </tr>
  </tfoot>
</table>

2、双击【6-3表格语义结构HTML表格.html】

7.5 合并单元格¶

表格中经常需要合并行或列。

7.5.1 合并列：colspan¶

<tr>
  <td colspan="2">合并两列</td>
</tr>

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-4合并列HTML表格.html

<table border="1">
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td colspan="2">张三：优秀</td>
  </tr>
</table>

2、双击【6-4合并列HTML表格.html】

7.5.2 合并行：rowspan¶

<tr>
  <td rowspan="2">张三</td>
  <td>数学：90</td>
</tr>
<tr>
  <td>英语：95</td>
</tr>

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6-5合并行HTML表格.html

<table border="1">
  <tr>
    <th>姓名</th>
    <th>成绩</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>数学：90</td>
  </tr>
  <tr>
    <td>英语：95</td>
  </tr>
</table>

2、双击【6-5合并行HTML表格.html】

7.6 综合案例¶

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为6.HTML表格.html

<!DOCTYPE html>
<html>
    <!--  使用html实现一个表格 -->
    <!--  使用table实现一个表格 -->
    <!--  tr 表示行 -->
    <!--  th 表示表头 -->
    <!--  td 表示数据单元格 -->
    <table width="100%" border="1">
        <caption>水果价格表</caption>
        <!-- 表头不是必须的 -->
        <tr>
            <th></th>
            <th>商品</th>
            <th>价格</th>
            <th>剩余</th>
        </tr>
        <!-- 一个tr表示一行 -->
        <tr>
            <td>水果</td>
            <td>苹果</td>
            <td>6</td>
            <td>10kg</td>
        </tr>
        <tr>
            <td>水果</td>
            <td>西瓜</td>
            <td>3</td>
            <td>20kg</td>
        </tr>
    </table>
</html>

2、双击【6.HTML表格.html】

7.7 表格标签总结¶

标签	作用
table	表格容器
tr	行
td	普通单元格
th	表头单元格
caption	表格标题
thead	表头结构
tbody	表格主体
tfoot	表格底部
colspan	合并列
rowspan	合并行

HTML 内容展示实战：图片标签与表格标签