HTML常用标签

0. 绪论

本文主要由以下几个部分组成：

• a 标签的用法
• img 标签的用法
• table 标签的用法
• 其他感想

另附参考资料如下：
[1] 方方老师的前端体系课，杭州饥人谷教育有限公司
[2] mdn官方文档（英文版）
[3] 网道HTML教程

1. a标签的用法

<a> 为英文“anchor”（锚点）之意。该标签的作用是创建到外部网页、内部锚点、文件、电子邮箱等的超链接，以便跳转。

1.1 a标签的属性

常用属性有四：

• href
• target
• download
• rel=noopener

其中，rel=noopener还没学到，所以暂时不表，以下部分展开剖析前三个属性的用法及作用。

1.2 href属性

例1–跳转外面的网站：

<a href="//www.baidu.com">百度</a>

在本例中，href用于指向外部网页百度。当href用于指向外部网页时，可以有如下几种指定方式：

• http://www.baidu.com
• https://www.baidu.com
• //www.baidu.com

前两个指定了协议：http://或https://。像百度、Google等明确支持https协议的直接复制域名即可，但相当多的网站你并不知道它是否支持https协议，所以推荐使用第三种：//www.baidu.com，即两个斜杠。该做法可以补全协议，默认为HTTP。如果HTTP不通，就转向HTTPS协议。

例2–内部跳转

<a href="/a/b/c">c</a>

这种写法可以用于表示网页内部之间的跳转，比如从b站的首页跳转到鬼畜区。这里涉及到两处知识：

• 绝对路径：表示该文件完全的存储位置。比如存放在D盘的books文件中的“js指南.pdf”文件，其绝对路径是“D:\books\js指南.pdf”
• 相对路径：表示该文件相对 的存储位置。比如存放在D盘的books文件中的“js指南.pdf”文件，在我已经使用我的电脑定位到D盘时，其相对D盘的路径就是“books\js指南\.pdf”。

例3—伪协议

<a href="javascript:;">c</a>

该段代码的作用是令a标签什么都不做的作用，有时候非常有用。

此外，href属性的取值还可以是id选择器，用于跳转到内部锚点。也可以是mailto:（用于发送邮件）、tel等。

1.3 target属性

按照MDN官方的话说，target属性指定了打开新标签的位置（Where to display the linked URL）。它有四个值：

• _self: 当前窗口（默认值）
• _blank：在新窗口中打开
• _parent：上层窗口打开，这通常用于从父窗口打开的子窗口
• _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self

1.4 download属性

可以让用户保存该网页，而不是跳转到这该网页。有些浏览器不支持，不太常用。

2. img标签的用法

<img>标签可以用于插入图片。其原理是发送一个get请求，然后展示一张图片。

该标签可以承载很多属性。但较常用的属性有四：

• src
• alt
• height
• width

图片加载时，有两个事件发生。这与后面学到JavaScript时有关系：

• onload
• onerror

在写JavaScript相关博客时会对这一部分进行补充。

2.1 src属性

这是img标签必备的属性。别的属性可以没有，但这个必须有，否则没有图片显示。src的值是图片的url链接。

用法示例：

<img src="/media/cc0-images/grapefruit-slice-332-332.jpg">

2.2 alt属性

加载网页时有时会遇到图片无法加载的情况 ，原因有网络不正常、src地址写错等等，然后显示一个图片加载错误。如下图所示：

这时候，如果用户把鼠标移上去的话，可不可以显示点什么呢？

如果指定了alt属性的话，就会显示替代文字。该属性的作用是如果图片加载错误，那么就替代显示文字。用例如下：

<img src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grape fruit slice atop a pile of other slices">

2.3 height与width

这二者是指定图片的高度与宽度。

2.4 如何将img标签变成响应式

在CSS代码中加一句话：

{
	max-width: 100%;
}

2.5 其他重点

<img>是可替换元素。

3. table标签用法

用于给网页做表格展示。示例如下（来自MDN）：

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

最终展现效果如下图：

从示例中我们可以看出，<table>标签不能单独使用，必须包含包括一些元素才能使用。可以被包括在<table>下的标签有：

• <caption>：表格说明信息，显示表格下面。例如“表3-1”。可选
• <thead>：表头，可选。
• <tbody>：表体，虽然也是可选，但一般当作必选用。
• <tr>：包括在<tbody>之下，定义一行(row)表格。至少有一个
• <th>：包括在<tr>之下，一般用于表格第一行，用于提示信息
• <td>：包括在<tr>之下，一般用于存放数据。
• <tfoot>：表尾，可选。

使

表格可以用于展示数据表格，甚至可以用于网页布局。

其相关的CSS样式有三：

• table-layout
• border-collapse
• border-spacing

5. 其他感想

1. 由于上一个数字不吉利，所以跳过；
2. 由于篇幅限制（不想太长），这里只写前三个标签。其他的会另开一篇博客更新。
3. 写一道面试会问到的题目：可替代元素(replaced elements)。

5.1 可替代元素

根据方应杭老师的说法，该部分面试考到的可能性是30%。为避免后面遗忘，所以这里写一下这部分的博客。

可替换元素，根据MDN的定义，指的是展现效果不是由 CSS 来控制的（a replaced element is an element whose representation is outside the scope of CSS）元素。也就是说，该类元素不会受当前文档样式的影响。CSS可以控制它们的位置，而不会控制它们的内容。

这类元素有：

• <img>
• <video>
• <embed>
• <iframe>