链接元素的功能以及表格属性和应用

链接元素的功能

在html中，使用<a>标签来实现在html中创建超级链接的作用，超级链接的使用场景有很多种，例如页面与页面之间的跳转，网站与网站之间的跳转，打开邮箱,发送邮件，点击拨打电话等等，下面列举几个常用的<a>标签属性：

1、常用属性：

属性	描述	举例
`href`	指向链接页面的 URL	`href="http://baidu.com"`
`target`	打开 URL 的页面来源	`target=_self_blank_top_parent`
`download`	自定义下载文件名	`download="demo1.jpg"`
`type`	设置链接文档的 MIME 类型	`type="image/jpeg"`

在上述这些属性中，最常用到的是hret属性，其中hret属性当中有多个属性值，下面列举几个常用的hret属性值：

属性值	描述
`href="url（网址）"`	指向链接页面的 URL（网址）
`href="mailto: 8888888@qq.com"`	打开邮箱,发送邮件
`href="tel:1358888****"`	点击后,会询问用户是否要拨打电话
`href="outline.md"`	若浏览器不能解析的文档, 会直接下载

以上就是hret属性的常用属性值，在日常使用中，我们可能还会遇到点击链接需要新建窗口打开目标地址，这里需要用到两个target属性：
1、target"_self"此属性是指在当前窗口打开链接。
2、target"_blank"此属性是指在新窗口打开链接。

2、锚点的使用

在我们浏览网页时经常会看到网站上有“回到顶部”这样的按钮，点击后，页面会从网站的最下方回到网站的最上方，要实现这种效果，就需要使用到锚点，锚点在网站的布局中会经产用到，要实现锚点效果需要<a>标签配合id去使用，代码演示如下：

<!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="#maodian">去到底部</a>
    <h1 id="dingbu">这里是顶部</h1>
    <h1 id="maodian" style="margin-top: 20000px">这里是底部</h1>
    <a href="#dingbu">回到顶部</a>
  </body>
</html>

锚点链接演示

表格属性和应用

表格是我们经常见到的一种数据的展现形式，在日后的工作中使用频率也是相当的高，在编写数据库的时候，做数据归类的时候都会用到，例如购物车，程序后台的表单以及数据统计等等，下面列举一些常用的表格标签：

序号	标签名	描述	使用平率
1	`<table>`	创建自定义表格	经常使用，必须掌握
2	`<tbody>`	定义表格主体, 允许定义多次	经常使用，必须掌握
3	`<tr>`	在自定义表格中代表行	经常使用，必须掌握
4	`<th>`	在表格中作为表头使用，有自动加粗效果	经常使用，必须掌握
5	`<td>`	在自定义表格中代表列	经常使用，必须掌握
6	`<caption>`	定义表格标题	经常使用，但可以用其他方式代替
6	`<tfoot>`	定义表格底, 只需定义一次	经常使用，但可以用其他方式代替
6	`<col>`	给一个或多个列添加属性	不常用
6	`<colgroup>`	将多个`<col>`元素分组管理	不常用

以上是做表格时经常会用到的标签，当然，一个完整的表格只有标签组成是远远不够的，还得需要属性的加持，才能使表格看起来美观和规范，下面列举一些常用的表格属性：

序号	属性	适用元素	描述
1	`border`	`<table>`	添加表格框
2	`cellpadding`	`<table>`	设置单元格内边距
3	`cellspacing`	`<table>`	设置单元格边框间隙
4	`align`	不限	设置单元格内容水平居中
5	`bgcolor`	不限	设置背景色
6	`width`	不限	设置宽度
7	`height`	不限	设置高度
8	`colspan`	`<td>/<th>`	规定单元格可横跨的列数
9	`rowspan`	`<td>/<th>`	设置单元格可横跨的行数

以上表格属性仅供参考，由于现在课程还没有涉及到css，后期还是推荐使用css去使用。
下面奉上一个表格的小案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>第一个表格小案例</title>
  </head>
  <body>
    <!-- 表格 -->
    <table width="1000px" border="1px" cellspacing="0" align="center">
      <caption
        style="font-size: 1.5rem; margin-bottom: 10px; color: rgb(238, 107, 20)"
      >
        购物车
      </caption>
      <!-- 表格头部 -->
      <tr style="background-color: cadetblue">
        <th>ID</th>
        <th>品名</th>
        <th>单价/元</th>
        <th>单位</th>
        <th>数量</th>
        <th>金额/元</th>
      </tr>
      <!-- 表格主体 -->
      <tbody align="center">
        <tr>
          <td>1</td>
          <td>iphone</td>
          <td>4980</td>
          <td>部</td>
          <td>1</td>
          <td>4980</td>
        </tr>
        <tr bgcolor="#49C8E8">
          <td>2</td>
          <td>iPad</td>
          <td>3800</td>
          <td>台</td>
          <td>1</td>
          <td>3800</td>
        </tr>
        <tr>
          <td>3</td>
          <td>oppo findX2pro</td>
          <td>5900</td>
          <td>部</td>
          <td>1</td>
          <td>5900</td>
        </tr>
        <tr bgcolor="#49C8E8">
          <td>4</td>
          <td>小米电视大师版</td>
          <td>29000</td>
          <td>台</td>
          <td>1</td>
          <td>29000</td>
        </tr>
        <tr style="font-size: 1.3rem; color: rgb(214, 73, 73)">
          <td colspan="5">总价</td>
          <td>43680元</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

展示效果如图：
第一个表格