今天学习了 < a >/< img >/< table >三种标签 现在详细记录一下三种标签的各种用法！
a标签的用法
作用:
1.< a >标签可以跳转外部页面 比如 <a href="https://baidu.com">百度</a>
2.< a >标签也可以跳转内部锚点. <a href="#xxx">到达xxx位置</a> href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面xxx锚点所在的位置
3.< a >标签还可以跳转邮箱或者电话等 <a href="mailto:.....">邮箱</a> 这里为邮箱链接
<a href="tel:123456789">电话</a> 这里便是电话链接
总的来说< a >标签相当于是一个链接标签
< a >标签的属性有：< a >/ < target >/ < download >/ < rel=noopener >/下面让我们一一介绍
- href 属性 ：href为超链接。它的值应该是一个 URL 或者锚点。可以是网址，路径，伪协议和id。比如以下值
网址
-
<a href="https://baidu.com">百度</a> -
<a href="http://baidu.com">百度</a> -
<a href="baidu.com">百度</a>
路径
-
/a/b/c 以及 a/b/c
-
index.html以及 ./index.html
伪协议
-
javascript:代码；
-
mailto:邮箱
-
tel：电话
id
- herf=#xxx
以上所有都可以在< a >标签中以后面这种形式输入 <a href="以上”>内容</a>
- target 属性 ：属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在
<iframe>里面打开。 内置名字：
-
_blank：新窗口打开
<a href="https://baidu.com target=_barank">新窗口打开示例</a> -
_top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self
<a href="https://baidu.com target=_top">顶层窗口打开示例</a> -
_parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。 <a href="https://baidu.com target=_parent">上层窗口打开示例</a>
-
_self：当前窗口打开，这是默认值。
<a href="https://baidu.com target=_parent">当前窗口打开示例</a>
也可以自己命名：
window的name
iframe的name
注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。
- download 属性 ： 属性表明当前链接用于下载，而不是跳转到另一个 URL。（不是打开页面，而是下载） 伴随而来的问题：不是所有浏览器都支持，尤其是手机浏览器。
img 标签的用法
作用： <img>标签用于插入图片。它是单独使用的，没有闭合标签。<img src="狗子.jpg">
上面代码在网页插入一张图片 狗子.jpg 。src属性指定图片的网址，上例是相对 URL，表示图片与网页在同一个目录。
简单说就是发出get请求，展示一张图片。
< img >标签的属性有< alt >/< height >/< width >/< src > :
-
< alt >属性：< alt >属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
<img src="foo.jpg" alt="比如404图片错误">alt 发生失败时会进行说明
-
< height >/ < width >属性：图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的高度和宽度，单位是像素或百分比。
<img src="狗子.jpg" width="400" height="300">这里表示了"狗子.jpg"图片的高度为300像素，宽度为400像素。
注意： 一定注意不要把图片设置的时候使图片宽高变形，比较建议只设置高或者宽，浏览器会自动根据图片原始大小设置合理宽高。一定要注意！！！！
- < src >属性：为图片地址，是< img >标签的必选属性！！！
<img src="狗子.jpg">
事件：
onload/onerroe:onload ：属性在文档对象加载完成后触发。
onload 通常使用于 <body> 元素中，用于在页面完全载入后执行指定的脚本(包括图片，脚本，css文件等)。
还不是很能理解。。。。。
响应式：
max-width:100%
图片在各种尺寸的设备上都可以有良好的显示为响应式设计
响应式图像的解决方案有很多，JavaScript 和 CSS 都可以实现。这里只介绍语义性最好的 HTML 方法，浏览器原生支持。
这个也是理解简单意思。。。。。
< table >标签的用法
作用： 是一个块级容器标签，所有表格内容都要放在这个标签里面< table >... ... < /table >
<table>相关的标签有:
<table>/<thead>/<tbody>/<tfoot>/<tr>/<td>/<th>
1. <thead>/<tbody>/<tfoot>/:都是块级容器元素，且都是
< table >
< thead >... ...< /thead > 头
< tbody >... ...< /tbody > 表体/内容
< tfoot >... ...< /tfoot > 尾
< /table >
这三个元素都是可选的。如果使用了<thead>，那么`<tbody`>和`<tfoot>`一定在`<thead>`的后面。如果使用了`<tbody>`，那么`<tfoot>`一定在<tbody>后面。大型表格内部可以使用多个`<tbody>`，表示连续的多个部分。
2.<tr>:标签表示表格的一行（table row）。如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
表示表格共有3行
3.<th>/<td>:都用来定义表格的单元格。其中，<th>是标题单元格，<td>是数据单元格。
<table>
<tr>
<th>学号</th><th>姓名</th>
</tr>
<tr>
<td>001</td><td>小啊giao</td>
</tr>
<tr>
<td>002</td><td>张无忌</td>
</tr>
</table>
上面代码中，表格一共有三行。第一行是标题行，所以使用`<th>`；第二行和第三行是数据行，所以使用`<td>`。
相关样式：
- table-layout
- border-collcpse
- border-spacing
