HTML 中存在一些标签，看似简单，实则在用法上有很多需要注意的细节，比如a、img、table等等，本文就这些标签的用法做一个简要的梳理。

一、a 标签

a 标签可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接，简而言之它是用于做页面跳转动作的。

它有一些很重要的属性。

href 属性

href 是 a 标签最重要的属性，用来指定跳转的链接或目标，它的值有以下几种常用的写法

可以是地址
- baidu.com
- baidu.com
- //baidu.com （这是无协议的写法，它会继承当前页面的协议）
可以是路径
- 绝对路径，如/a/b/c.html
- 相对路径，如d.html、./d.html
伪协议
- javascript:code; （点击后会执行:后面的代码）
- javascript:; （点击后不做任何动作，用于实现类似的奇葩需求）
- mailto:xxxxxx@yyy.com （向该地址发送邮件）
- tel:13612345678 （在手机上访问时，可以直接拨打号码）
某元素的 id
- 写为 #xxx，点击后会跳转到页内具有该 id 的元素位置
空值
- 点击后会刷新当前页面，并非没有动作

target 属性

target 属性有一些特定的值，其含义如下

值	含义
_self	默认值，在当前窗口打开页面
_blank	在新的窗口或标签页打开页面
_parent	在父级窗口中打开页面，一般是相对于`<iframe>`窗口来说的
_top	在最顶层窗口打开，不管嵌套了多少层`<iframe>`
其他 window 或 iframe 的 name 值	在相应的窗口打开

download 属性

download 是一个布尔属性，其作用是下载目标页面，但是并非所有浏览器都支持，尤其是手机浏览器。

二、img 标签

img 标签的作用是发出 get 请求，来展示一张图片，它具有alt、src、height、width等属性。

alt 属性的作用是当图片加载失败时显示替代文字，一般写对于图片的描述，便于读者理解内容
src 是图片资源的地址
width、height 用来设置图片的宽和高，只需指定其中一个值即可，另一个值会根据图片的原视宽高比例自动适应

大多时候我们希望在手机上浏览图片时，图片也可以自行适应手机的宽度，而无需来回拖动，也就是说我们需要图片是响应式的，这时只需用 CSS 设置图片的样式为max-width: 100%即可。

此外，还有两个和 img 标签相关的事件也很重要，分别是 onload 事件和 onerror 事件，表示图片加载成功和加载失败。

三、table 标签

table 标签的作用是创建一个表格，它的用法非常复杂，与其相配合使用的子标签也很多，具体如下

table 标签	一级子标签	二级子标签	三级子标签
table	thead	tr	th（表头数据）、td（普通数据）
	tbody	tr	th、td
	tfoot	tr	th、td

下面举例来说明其用法

<table>
    <thead>
      <tr>
        <th></th>
        <th>小明</th>
        <th>小华</th>
        <th>小芳</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>语文</th>
        <td>85</td>
        <td>93</td>
        <td>77</td>
      </tr>
      <tr>
        <th>数学</th>
        <td>95</td>
        <td>90</td>
        <td>88</td>
      </tr>
      <tr>
        <th>英语</th>
        <td>95</td>
        <td>93</td>
        <td>97</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总分</th>
        <td>275</td>
        <td>276</td>
        <td>262</td>
      </tr>
    </tfoot>
  </table>

效果如下：

用 CSS 为每个数据加上边框：发现每个单元格之间都有空隙，更改 table 标签的 CSS

table{
  border-collapse: collapse;
  border-spacing: 0;
}

结果：

HTML学习笔记 - 重点标签的用法