链接元素与表格元素的应用

链接元素

<a>标签定义超链接，主要用于从一个页面跳转到另一个页面
最重要的属性是 href 属性，它用于指示链接的目标

链接元素的常用属性

属性	描述	举例
`href`	用于指向跳转页面的 url	`href="https://www.baidu.com"`
`target`	用于定义打开页面的方式	`target="_blank"`
`download`	用于自定义下载文件名	`download="demo1.html"`
`type`	用于设置链接文档的类型	`type="image/jpeg"`

链接元素的功能

通过设置不同的herf属性，链接元素可以实现不同的功能

当href="url"时，可以通过点击链接元素打开新的页面
当href="mailto:abc@a.com"时，可以自动打开设备默认的邮件管理软件，发送邮件
当href=tel:123时，可以打开设备的拨号软件，进行链接所指的号码进行拨号

链接元素中锚点的作用

锚点，故名思意可以起到锚的作用，即定位的作用。锚点主要在页面中，进行指定位置的跳转。如在页面顶部，设置跳转到页面底部的锚点。或在页面底部，设置跳转到页面顶部的锚点。帮助用户减少，翻页面的时间。具体的使用如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#foot">跳转到底部 </a>
    <div style="margin-top: 1000px" id="foot">我在最下面</div>
  </body>
</html>

需要注意的是，在链接元素中，href 的属性值是，需要跳转到元素的 #+id

表格元素

<table>标签定义 HTML 表格，HTML 表格除了 table 元素以外，还需要用到 tr,th,td 等元素。

名称	作用
`tbody`	用于定义表格主体，如果没有添加，浏览器会自动补齐
`thead`	用于定义表头
`tfoot`	用于定义表格尾部
`th`	用于定义表头
`tr`	用于定义表格的行
`td`	用于定义表格单元

常用属性

属性	描述
`border`	添加表格框
`cellpadding`	设置单元格内边距
`cellspacing`	设置单元格边框间隙
`align`	设置单元格内容水平居中
`width`	设置宽度
`height`	设置高度
`colspan`	设置跨列合并
`rowspan`	设置跨行合并

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table
      border="1"
      width="600"
      cellspacing="0"
      cellpadding="5"
      height="200"
      align="center"
    >
      <caption>
        公司排班表
      </caption>
      <thead>
        <tr>
          <th></th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
          <th>周日</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>张二</td>
          <td>李二</td>
          <td>王二</td>
          <td>孙二</td>
          <td>赵二</td>
          <td rowspan="9">值班</td>
          <td rowspan="9">值班</td>
        </tr>
        <tr>
          <td>张一</td>
          <td>李一</td>
          <td>王一</td>
          <td>孙一</td>
          <td>赵一</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>李三</td>
          <td>王三</td>
          <td>孙三</td>
          <td>赵三</td>
        </tr>
        <tr>
          <td>张四</td>
          <td>李四</td>
          <td>王四</td>
          <td>孙四</td>
          <td>赵四</td>
        </tr>
        <tr>
          <td colspan="6" align="center">中午休息</td>
        </tr>
        <tr>
          <td rowspan="4">下午</td>
          <td>张一</td>
          <td>李一</td>
          <td>王一</td>
          <td>孙一</td>
          <td>赵一</td>
        </tr>
        <tr>
          <td>张四</td>
          <td>李四</td>
          <td>王四</td>
          <td>孙四</td>
          <td>赵四</td>
        </tr>
        <tr>
          <td>张二</td>
          <td>李二</td>
          <td>王二</td>
          <td>孙二</td>
          <td>赵二</td>
        </tr>
        <tr>
          <td>张三</td>
          <td>李三</td>
          <td>王三</td>
          <td>孙三</td>
          <td>赵三</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

显示效果如下：