HTML常用元素：链接元素&表格元素

一、链接元素常用的三种功能

1.通过链接访问不同的页面

语法：
<a href="想要调转的URL地址" target="跳转的方式">显示的超文本</a>

说明：跳转的方式 target 常用的有在新的窗口打开使用_blank 属性，使用_self 或是省略不写表示在当前窗口打开。

实例：
<a href="https://www.baidu.com/" target="_black">点击此处在新的窗口跳往百度</a>

显示效果：
<a href="https://www.baidu.com/" target="_black">点击此处在新的窗口跳往百度</a>

2.通过链接下载文件

语法：
<a href="想要下载的文件" download="定义下载文件的名称">显示的超文本</a>

实例：
<a href="https://www.php.cn/static/images/logo.png" download="PHP中文网Logo图片">PHP中文网Logo</a>

显示效果：
<a href="https://www.php.cn/static/images/logo.png" download="PHP中文网Logo图片">PHP 中文网 Logo</a>

3.通过链接实现拨打电话的功能

语法：
<a href="tel:电话号码">显示的超文本</a>

说明：通常在手机端网页上使用该功能

实例：
<a href="tel:12306">打电话订票</a>

显示效果：
<a href="tel:12306">打电话订票</a>

4.通过链接实现发邮件的功能

语法：
<a href="mailto:邮箱地址">显示的超文本</a>

说明：此功能需要电脑安装了对应的邮件系统才能生效

实例：
<a href="mailto:123456@qq.com">点击此处给我发邮件</a>

显示效果：
<a href="mailto:123456@qq.com">点击此处给我发邮件</a>

5.通过链接实现锚点功能

语法：
<a href="#锚点名称">显示的超文本</a>

说明：锚点能在一个页面中定位跳转到对应的位置，常用与在一个页面中实现快速定位跳转，比如页面内的导航、TAB 标签等，非常的实用。

实例：

<a href="#md">跳到当前页面的md锚点处</a>
<h2 id="md" style="margin-top:1000px">这里是md锚点处</h2>

显示效果：
<a href="#md">跳到当前页面的 md 锚点处</a>

<h2 id="md" style="margin-top:1000px">这里是md锚点处</h2>

二、对表格进行行与列合并时经常用到的属性

表格的常用标签：

<table>
    <caption>
    表格标题
    </caption>
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>X</td>
        <td>X</td>
        <td>X</td>
        <td>X</td>
    </tr>
    </tbody>
</table>

说明： 1.表格使用 Table 标签来创建 2.表头使用 thead 标签（一个表中只有一个） 3.表格主体使用 tbody 标签（一个表中可以有多个） 4.表格标题使用 caption 标签

表格的常用属性：

序号	属性名称	说明
1	border 属性	用来控制表格的边框
2	width 属性与 height 属性	分别用来控制表格的宽度和高度
3	align 属性	用来控制表格的对齐方式（通常设为 center）
4	cellspacing 属性	用来控制表格单元格边框之间的间隙（通常设为 0）
5	cellpadding 属性	用来设置表格单元格的内边距（设置后比较美观）
6	bocolor 属性	用来设置背景颜色

说明：以上属性中除 border 属性、cellpadding 属性和 cellspacing 属性只能适用于 table 元素外，其余属性适用元素不限。

对表格进行行与列合并时经常用到的属性

序号	属性名称	说明
1	rowspan	用于对表格的行进行合并,合并几行就写上对应的数字几
2	colspan	用于对表格的列进行合并,合并几列就写上对应的数字几
3	colgroup	用于对表格的列进行分组管理，如对列设置不同的颜色

说明：
1.对于合并了的行或列，需要删除掉
2.对于行或列的合并，都需要在对应的单元格中操作（写在其中）
3.经测试，表头与主体之间不能进行行的合并操作

三、商品列表小案例演示

代码如下所示：

<table
      border="1"
      width="500"
      height="60"
      align="center"
      cellspacing="0"
      cellpadding="5"
      bgcolor="#fef"
    >
      <caption>
        <colgroup>
          <col span="5" style="background-color: bisque" />
          <col style="background-color: aqua" />
        </colgroup>
        购物车
      </caption>
      <thead bgcolor="#1495E7">
        <tr>
          <th>店铺</th>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>金额</th>
          <th>合计金额</th>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td rowspan="2">A店铺</td>
          <td>上衣</td>
          <td>50</td>
          <td>2</td>
          <td>100</td>
          <td rowspan="2">200</td>
        </tr>
        <tr>
          <!-- <td>B1</td> -->
          <td>裤子</td>
          <td>100</td>
          <td>1</td>
          <td>100</td>
          <!-- <td></td> -->
        </tr>
        <tr>
          <td rowspan="3">B店铺</td>
          <td>牛奶</td>
          <td>5</td>
          <td>10</td>
          <td>50</td>
          <td rowspan="3">350</td>
        </tr>
        <tr>
          <!-- <td>B1</td> -->
          <td>巧克力</td>
          <td>10</td>
          <td>10</td>
          <td>100</td>
          <!-- <td></td> -->
        </tr>
        <tr>
          <!-- <td>B1</td> -->
          <td>零食</td>
          <td>500</td>
          <td>4</td>
          <td>200</td>
          <!-- <td></td> -->
        </tr>
        <tr bgcolor="#C84244">
          <td colspan="5" align="right">总计金额：</td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td> -->
          <td>550</td>
        </tr>
      </tbody>
    </table>

效果图如下所示：