HTML中链接元素和表格要点

链接元素

链接元素常用属性

• href
  指向目标URL，譬如 href="https://baidu.com"
• target
  打开URL的方式,包括以下四种
  • _self
  • _blank
  • _top
  • _parent
• download
  可以指定下载文件并且指定文件名，但是在很多情况下会遇到防盗链设置而失效. 譬如：<a href="" download="php入门到精通">下载文件</a>。目前还没有成功的网络地址。不过本地是可以。如果有成功的网络例子，可以告诉我。
• type
  设置链接文件的MIME类型。譬如type=image/jepg。

href属性值

• href="URL"
  跳转URL指定的地址。譬如href="www.baidu.com"
• href="mailto:xxx@xxx.com"
  打开邮箱客户端，发送邮件
• href="tel:xxxxxxxxxxxxx"
  本地支持的情况下可以打电话
• href="文件名"
  浏览器不能够解析文件的 情况下可以直接下载文件。

target属性值

• target="_self"
  当前窗口打开链接。
• target="_blank"
  新窗口打开链接。
• taget="_parent"
  父窗口打开链接。
• target="_top"
  顶层窗口打开链接。
• target="_name"
  指定名称的窗口，与 iframe 元素配合，譬如用于管理后台。
• target="_#anchor"
  跳转到设置了锚点的元素所在位置。锚点适合用于一个长页面里面的不同位置的精确定位。譬如我们在制作一份长文档的时候，利用锚点可以快速定位。另外vue里面的跳转也用到了锚点。这个后续课程有。
  锚点的使用,href写入#锚点名称，目标元素的id就是锚点名称：

    <a href="#anchorname1">跳转到锚点1位置</a>
    <a href="#anchorname2">跳转到锚点2位置</a>
    -----------
    -----------
    <h2 id="anchorname1">锚点1位置
    <div id="anchorname2">锚点2位置</div>

  我们可以从很多实际网页中看到锚点的用途。譬如：
  医学百科：罗红霉素

表格合并

• 表格行列合并主要涉及两个属性，rowspan和colspan。
  同一个列的不同行合并到一起，用rowspan=”n”，n是合并行数。同时原来位置的行的td必须删除或者注释掉。
  同一个行的不同列合并到一起，用colspan=”n”.其余同上。
  另外在td和table标签内可以设置合并后的效果，这些都属于表格基础知识。可以自行查询。包括align=”left/right/center”,cellspacing=”0/1/2”(表格线宽),cellpadding=”1/2/3/4/5”(表格的padding)。诸如此类。

• 实际案例

    <table border="1" cellspacing="0" cellpadding="10">
      <caption style="font-size: 1.5rem; margin-bottom: 10px">
        2020年9月华强手机专卖店手机销售表
      </caption>
      <thead bgcolor="#eee" style="letter-spacing: 2px">
        <tr>
          <th>厂家编号</th>
          <th>厂商</th>
          <th>品牌</th>
          <th>型号</th>
          <th>价格(元)</th>
          <th>销售数量(台)</th>
          <th>销售金额(元)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="3">1</td>
          <td rowspan="3">苹果</td>
          <td rowspan="3">iPhone</td>
          <td>iPhone 11</td>
          <td>4500</td>
          <td>10</td>
          <td>45000</td>
        </tr>
        <tr>
          <!-- <td>1</td> -->
          <!-- <td>苹果</td> -->
          <!-- <td>iPhone</td> -->
          <td>iPhone 11 Pro Max</td>
          <td>8500</td>
          <td>4</td>
          <td>34000</td>
        </tr>
        <tr>
          <!-- <td>1</td> -->
          <!-- <td>苹果</td> -->
          <td colspan="2" align="center">累计：</td>
          <td>14</td>
          <td>79000</td>
          <!-- <td></td>
          <td></td> -->
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td rowspan="7">2</td>
          <td rowspan="7">华为</td>
          <td rowspan="3">华为</td>
          <td>Nova6</td>
          <td>2500</td>
          <td>4</td>
          <td>10000</td>
        </tr>
        <tr>
          <!-- <td>2</td> -->
          <!-- <td>华为</td> -->
          <!-- <td>华为</td> -->
          <td>Mate30</td>
          <td>4000</td>
          <td>2</td>
          <td>8000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="2" align="center">累计：</td>
          <!-- <td></td> -->
          <td>6</td>
          <td>18000</td>
        </tr>
        <tr>
          <!-- <td>2</td> -->
          <!-- <td>华为</td> -->
          <td rowspan="3">荣耀</td>
          <td>荣耀20</td>
          <td>2000</td>
          <td>10</td>
          <td>20000</td>
        </tr>
        <tr>
          <!-- <td>2</td> -->
          <!-- <td>华为</td> -->
          <!-- <td>荣耀</td> -->
          <td>荣耀9X</td>
          <td>1000</td>
          <td>20</td>
          <td>20000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="2" align="center">累计：</td>
          <!-- <td></td> -->
          <td>30</td>
          <td>40000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="3" align="center">累计：</td>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td>36</td>
          <td>56000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td rowspan="7">3</td>
          <td rowspan="7">小米</td>
          <td rowspan="3">小米</td>
          <td>小米K30</td>
          <td>2000</td>
          <td>10</td>
          <td>20000</td>
        </tr>
        <tr>
          <!-- <td>3</td> -->
          <!-- <td>小米</td> -->
          <!-- <td>小米</td> -->
          <td>小米10至尊版</td>
          <td>5000</td>
          <td>2</td>
          <td>10000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="2" align="center">累计：</td>
          <!-- <td></td> -->
          <td>12</td>
          <td>30000</td>
        </tr>
        <tr>
          <!-- <td>3</td> -->
          <!-- <td>小米</td> -->
          <td rowspan="3">红米</td>
          <td>红米note8Pro</td>
          <td>1500</td>
          <td>20</td>
          <td>30000</td>
        </tr>
        <tr>
          <!-- <td>3</td> -->
          <!-- <td>小米</td> -->
          <!-- <td>红米</td> -->
          <td>红米note8</td>
          <td>1000</td>
          <td>20</td>
          <td>20000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="2" align="center">累计：</td>
          <!-- <td></td> -->
          <td>40</td>
          <td>50000</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td colspan="3" align="center">累计：</td>
          <!-- <td></td> -->
          <!-- <td></td> -->
          <td>52</td>
          <td>80000</td>
        </tr>
      </tbody>
    </table>

效果图：