敲黑板啦！做后续事情之前先说一下，不要右键在资源管理器里双击打开你的页面，不要双击打开你的页面，不要双击打开你的页面（重要的事情说三遍）。

正确的打开方式：像用户打开网页一样，通过输入网址打开你的页面。你可以通过命令行yarn global add http-server下载工具，实现通过网址访问页面，下载后你可以执行http-server -c-1命令或者执行它的简化方式hs -c-1

1. `<a>`标签

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

典型的链接:

 <a href="//baidu.com">百度</a>
 <a href="//baidu.com"> <img src="dog.jpg"></a>

注： <a>标签内部不仅可以放置文字，也可以放置段落、文字、图片等其他元素

（1）`<a>`的href取值

网址

 <a href="https://baidu.com">百度1</a>
 <a href="http://baidu.com">百度2</a>
 <a href="//baidu.com">百度3</a>

注：百度3是最高级的，它会自己跳转到https或者http

路径

进入c.html文件的方式：

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

注：/是指http服务的根目录

直接用文件名，在当前目录下寻找

<a href="index.html">index.html</a>
<a href="./index.html">index.html</a>

伪协议

javascript:code;

实现直接执行js代码的<a>：
```
<a href="javascript:alert(1);">JavaScript伪协议</a>
```
实现点击之后没有动作的<a>：
```
<a href="javascript:;">空的伪协议</a>
```
注：其他方法都不能满足什么都不会执行的需求，如：

<a href="">查看</a>

注：页面会自动刷新;

<a href="#">查看</a>

注：页面会自动滚到顶部

id
```
<a href="#xxx">查看</a>  
```
注：自动跳转到指定位置

mailto:邮箱
```
<a href="mailto:xxxxxx@qq.com">发邮件给我</a>  
```
注：让用户向指定的地址发送邮件，不指定邮箱也是可以哒

tel:手机号
```
<a href="tel:137xxxx6597">打电话给我</a>  
```
注：让用户直接拨打指定号码

（2）`<a>`的target功能

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

<a href="https://baidu.com" target="aaa">百度</a> 
<a href="https://iciba.com" target="aaa">爱词霸</a>

注：上面代码中，两个链接都在名为aaa的窗口打开，若浏览器发现没有aaa的窗口，就新建一个窗口，起名为aaa。

`<target>`的内置名字：

_self：在当前窗口打开，也是默认值。
_blank：新窗口打开。
_top：顶层窗口打开，如果当前窗口是顶层窗口的话，这个值等同于_self。
_parent：上层窗口打开，常用于从父窗口打开的子窗口，或者<iframe>里面的链接，如果当前窗口没有上层窗口的话，这个值也等同于_self

下面来看一下<target>里面_parent的效果：

1）先创建a-target-iframe.html文件，内容为：

 <body style="background: red;">
   我是文件iframe
   <iframe src="a-target-iframe-2.html"></iframe>
 </body>

2）创建a-target-iframe-2.html文件，内容为：

<body style="background: yellow;">
  我是iframe2
  <hr />
  里面有a标签
  <a href="//baidu.com" target="_parent">parent</a>
</body>

3）创建a-target.html文件，内容为：

<body>
  <div>
    <iframe 
    width="600"
    height="600"
    src="a-target-iframe.html" frameborder="0"></iframe>
  </div>
</body>

以上代码展示的效果为

当我们点击iframe2里面的parent链接时，链接将会在iframe2的父母录iframe里面打开,效果如下：

`target`的程序员命令

window的name：可以从网页的Console下输入命令window.name，显示当前窗口的名字
iframe的name：创建一个goodbay页面（谐音google+baidu）

<a href="//baidu.com" target="xxx">baidu</a>
<a href="//google.com" target="xxx">google</a>
<iframe
stytle="border: none; width: 100%; height: 800px;"
src=""
name="xxx"
></iframe>

以上代码实现在同一个iframe里面打开两个网址，当然你也可以给两个网址不同的名字，分别对应两个iframe。

2. `img`标签

发出GET请求，展示一张图片。

`img`的属性：

（1）`alt`

<img src="dog.png" alt="一只狗" />

用来设定图片的文字说明，图片加载失败时，用来提示用户，加载成功则不会出现这个备用文本，如：网络错误、内容被屏蔽或链接过期等。

注：src=source去掉元音字母，可以是绝对路径、相对路径或者网络地址

（2）`height`和`width`

图片以原始大小插入网页，而height和width则可以设定显示时的宽高，单位是像素和百分比。

当height和width属性只设置其中一个，另一个没有设置，这时浏览器会根据图片原始大小自动设置对应比例的图片宽度或高度。但是，如果两个属性同时设置，那么图形将会变形，所以我们不使用这两个属性控制图片大小，而用后面会提到的CSS。

`img`的事件：

onload和onerror：

<script>
xxx.onload = function () {
   console.log("图片加载成功");
 };
xxx.onerror = function () {
   console.log("图片加载失败");
 }; 
 </script>

注：用来监测图片是否会加载成功。

xxx.onerror = function () {
   console.log("图片加载失败");
   xxx.src = "/404.jpg";
};

注：当监测到图片失败，可以进行挽救，让用户看到一张有提示的图片，而不是空白，效果如下：

`img`的响应式

网页在不同尺寸的设备上，都能产生良好的显示效果，叫做“响应式设计”。

只需要在<head>里面加上下面一段代码即可：

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

3. `table`标签

`<table>`的相关标签：

<thead>、<tbody>、<tfoot>是<table>的子集元素，顺序无关。
<tr>是表格中的一行，如果表格有 <thead>、<tbody>、<tfoot>，那么<tr>就放在他们里面，否则放在<table>的下一级。
<th>、<td>用来定义表格的单元格，<th>是标题单元格，<td>是数据单元格。

应用示例：

双表头的表格：

效果图：

<tr>作为<table>的下一级：

<table>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>3</td>
  <td>4</td>
</tr>
</table>

效果图：

注：容易发现，浏览器会自动加入<tbody>标签

<td>作为<table>的下一级：
```
<table>
    <td>1</td>
    <td>2</td>
</table>
```
效果图：

注：容易发现，浏览器自动添加了<tbody>和<tr>标签

`<table>`的相关样式：

table-layout
- ```
table{
table-layout: auto;
}
```
  注：根据内容自动分配宽度，可能会出现由于字符数目不同，而导致列不等宽。
- ```
table{
  table-layout: fixed;
  width: 600px;
}
```
  注：和auto一样同是自动对齐，但是fixed会基本等距分布。
border-spacing
border-collapse

表格常应该是collapse（合并的）没有空隙的，这就需要在<head>里面加上以下代码：
```
<style>
table{
  border-spacing: 0;
  border-collapse: collapse;
}
</style>
```

4.总结

上面<img>标签中并没有提到可替换元素，这个点比较受面试官喜爱，这里就不再赘述，因为大家可以点击链接自行阅读更专业的讲解。

100多个HTML的标签并不能一一列举并且掌握，我们可以在学习的过程中根据自己的需求来取舍，遇到坎就去翻阅HTML资料不失为一个好方法。

HTML常用标签

1. `<a>`标签

（1）`<a>`的href取值

网址

路径

进入c.html文件的方式：

伪协议

javascript:code;

id

mailto:邮箱

tel:手机号

（2）`<a>`的target功能

`<target>`的内置名字：

`target`的程序员命令

2. `img`标签

`img`的属性：

（1）`alt`

（2）`height`和`width`

`img`的事件：

`img`的响应式

3. `table`标签

`<table>`的相关标签：

`<table>`的相关样式：

4.总结

end

HTML常用标签

1. <a>标签

（1）<a>的href取值

网址

路径

进入c.html文件的方式：

伪协议

javascript:code;

id

mailto:邮箱

tel:手机号

（2）<a>的target功能

<target>的内置名字：

target的程序员命令

2. img标签

img的属性：

（1）alt

（2）height和width

img的事件：

img的响应式

3. table标签

<table>的相关标签：

<table>的相关样式：

4.总结

end

1. `<a>`标签

（1）`<a>`的href取值

（2）`<a>`的target功能

`<target>`的内置名字：

`target`的程序员命令

2. `img`标签

`img`的属性：

（1）`alt`

（2）`height`和`width`

`img`的事件：

`img`的响应式

3. `table`标签

`<table>`的相关标签：

`<table>`的相关样式：