今天对HTML常用标签做一些整理，以便更好地理解。

a 标签

a标签可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

属性

• href 全称 hyper reference，意思为超级引用，用于设置超链接地址
• target 指定打开超链接的位置
• download 下载网页，大部分页面不支持这个功能
• rel="noopener" 防止针对 window.opener API 的恶意行为

这里主要介绍一下 href 和 target

href 的取值

网址

• https://google.com
• http://google.com
• //google.com 设置无协议网址，会自动选择协议

路径

• /a/b/c 以及 a/b/c 这里可以使用相对路径，是因为 html 以文件所在目录作为根目录，如果直接双击打开 html 文件，会找不到这个路径
• index.html 以及 ./index.html

伪协议

• javascript:代码; 调用 js 代码，也可以什么都不做
• mailto:邮箱地址 给指定邮箱发邮件
• tel:手机 在手机上点击可以直接使用拨打电话的功能
• #xxx 加id，点击之后自动跳转到指定id的标签位置

target 的取值

内置的名字

• _blank 在外部窗口打开
• _top 在最顶层页面打开
• _parent 在父级区域打开
• _self 在当前页面打开

_top、_parent、_self 三者的区别，这里用内置 iframe 来说明一下：

点击 parent ，页面会在红色区域内打开超链接

点击 top ，页面会在当前页打开超链接

点击 self ，页面会在 self 所在的红色区域内打开超链接

程序员命名

• window 的 name
• iframe 的 name

我们先创建一个 a 标签，给定 target 值为 xxx，然后我们介绍这两者的作用。

关于 window 的 name ，如果有一个窗口名称为 xxx ，那么浏览器就在 xxx 打开超链接，如果这个窗口不存在，那么浏览器会新建一个名为 xxx 的窗口。

关于 iframe 的 name ，我们可以在页面内给一个iframe 设置 name="xxx" ，这时候就会在这个 iframe 打开超链接。

img 标签

img 标签的作用时发出 get 请求，展示一张图片。

属性

• alt 在图片加载失败显示的文本内容
• height 标签自带的高度属性
• width 标签自带的宽度属性
• src 请求图片的地址

事件

• onload 图片加载成功的方法
• onerror 图片加载失败的方法

响应式

为 img 设置样式 max-width: 100% ，高度会根据窗口宽度的改变进行自适应，保持图片等比缩放，这样就可以适应各个分辨率的窗口。

table 标签

相关标签

• table
• thead
• tbody
• tfoot
• tr 表格的一行 table row
• td 表数据
• th 表头

当需要展示具有层级的数据时，我们可以在 table 中嵌套 table 来实现。

thead、tbody、tfoot 三者分别代表 table 标签的 表头部 、表内容、表尾部。table 标签只能有这三个标签，它们可以无序写入，html 会自动进行排序成 thead、tbody、tfoot 的顺序。如果直接在 table 标签中 写入 tr、td、th，html会自动补入 thead 或者 tbody。

相关样式

• table-layout 设置 auto 会根据内容预测每列的宽度，设置 fixed 每列宽度等宽
• border-collapse 控制表格 border 是否合并
• border-spacing 控制表格 border 的间隙

总结

1. 在运行 html 文件时，一定不要双击文件运行，可以通过 http-server 或者 parcel 来运行。
2. a 标签的用法有很多，开发过程中可以多思考超链接的实现方式
3. 在使用 img 标签时，一定不要让图片变形，可以通过设置宽度或高度，让另一个属性自适应。