1. a 标签的用法

---

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的内容。可以是外部网页，可以是内部锚点，也可以是电话邮箱等。

<a>标签有如下属性。

（1）herf属性

href属性给出链接指向的网址或路径或伪协议。

1.<a href="https://baidu.com">百度搜索</a>
<!--定义了一个超级链接。浏览器显示“百度搜索”，文字下面默认会有下划线，表示这是一个链接。
用户点击后，浏览器跳转到百度-->
2.<a href="http://baidu.com">百度搜索</a>
<!--效果同上-->
3.<a href="//baidu.com">百度搜索</a> 
<!--效果同上，最好使用这个方式写网址，上面两种方式写错了会报错，
这种不会，因为它会自动选择使用http还是https-->

4.<a href="/a/b/c.html">c.html</a>
<!--链接了一个文件路径。浏览器显示“c.html”，用户点击后，浏览器跳转到c.html，并显示c.html里面的内容
注意：使用http服务之后，它的根目录就不是硬盘的根目录，而是开启http服务的目录。
因此这第一个“/”就表示开启http服务的目录，而不是硬盘根目录-->
5.<a href="a/b/c.html">c.html</a>
<!--效果同上。如果a前面不加“/”，此时为相对路径，也就是当前目录-->

6.<a href="index.html">网页</a>
7.<a href="./index.html">网页</a>
<!--两种不同的方式都是在当前目录下寻找并打开index.html-->

8.<a href="javascript:alert(1);">JavaScript伪协议</a>
<!--会执行javascript代码。用户点击链接后弹出一个对话框，里面显示“1”，执行了alert(1)-->
9.<a href="javascript:;">空的伪协议</a>
<!--用户点击链接后，页面没有任何变化-->

10.<a href="mailto:e***y@foxmail.com">发邮件给Eason</a>
<!--用户点击“发邮件给Eason”，页面就会呼出邮箱客户端，并自动填写这个邮箱地址-->
11.<a href="tel:137****2627">打电话给Eason</a>
<!--用户点击“打电话给Eason”，页面就会呼出电话，并自动填写这个手机号码-->

12.<a href="#xxx">查看</a>
<!--用户点击“查看”后，页面会跳转到id为xxx的标签上-->

（2）target属性

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

1.<a href="https://baidu.com" target="_blank">百度搜索</a>
<!--在新窗口打开百度搜索-->

2.<a href="https://baidu.com" target="_self">百度搜索</a>
<!--在当前窗口打开百度搜索，这是默认值-->

3.<a href="https://baidu.com" target="_top">百度搜索</a>
<!--在最顶层的窗口打开百度搜索，此处引入新概念“iframe”。如果当前窗口就是顶层窗口，这个值等同于_self-->

4.<a href="https://baidu.com" target="_parent">百度搜索</a>
<!--在父级窗口打开百度搜索，如果当前窗口没有父级窗口，这个值等同于_self-->

（3）download属性

download属性表明当前链接用于下载，而不是跳转到另一个 URL，不过很多浏览器不支持

2.img标签的用法

---

<img>标签发出get请求，展示一张图片。

<img src="dog.png">
<!--src里面可以是网络地址，也可以是相对路径地址-->

<img>标签有如下属性

（1）alt 属性

alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

<img src="dog.png" alt="靓狗照片">
<!--src后面为图片相对路径地址；如果图片加载失败，浏览器会在图片位置，显示文字“靓狗照片”。-->

（2）width 属性，height 属性

图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度

<img src="dog.png" width="666">
<!--注意：写宽度，高度会自适应；高度同理；所以一般宽高只用写一个就可以。
如果同时写宽度和高度，可能会使图片变形（！千万不要让图片变形）-->

<img>标签有两个事件

onload/onerror：监听图片是否加载成功，如果加载成功就调用onload，如果加载失败就调用onerror

    <img id="xxx" src="dog.png" alt="靓狗图片">
    <script>
        xxx.onload = function(){
            console.log("图片加载成功");
        };
        xxx.onerror = function(){
            console.log("图片加载失败");
            xxx.src = "/404.png";<!--如果主图片加载失败，则加载当前目录下的404图片-->
        };
    </script>

<img>标签的响应式用法

让页面中所有的图片都为响应式，可以同时适配不同像素密度、不同大小的屏幕

<style>
        img {
            max-width: 100%;
        }
    </style>

3.table标签的用法

---

<table>是一个块级容器标签，所有表格内容都要放在这个标签里面。

table的相关标签

<thead>、<tbody>、<tfoot>

<table>
  <thead>... ...</thead><!-- 表头 -->
  <tbody>... ...</tbody><!-- 表体 -->
  <tfoot>... ...</tfoot><!-- 表尾 -->
  <!-- 以上三个就是table的一级子元素 -->
</table>

<tr>

<table>
  <tr>...</tr><!-- 表示表格的一行，有几个tr就代表表格有几行 -->
</table>

<th>，<td>

<table>
  <th>...</th><!-- 表示标题单元格 -->
  <td>...</td><!-- 表示数据单元格 -->
</table>

table的相关样式

<style>
 table {
            table-layout: auto;<!-- auto为个性化表间距，fixed为平均表间距 -->
            border-spacing: 0px;<!-- 控制border之间的距离为0 -->
            border-collapse: collapse;<!-- 控制border之间是否合并 -->
        }
</style>