a 标签

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

    属性：

        

a标签常用属性

href：

href：此属性属性值为你想要跳转的超链接。

href常见取值

网址那一栏的，//google.com  这个地址的作用就是，你当前页面网址的协议是什么，它就会自动继承你当前这个网页是http 还是https 。

而用//google.com 这种形式写网址的好处就是，你不用担心因为 https 或者http的写错，而导致程序报错。

href 的属性值还可以编写我们的JS代码。

比如：

当我们运行这段代码，然后点击这个超链接的时候，页面就会有下面的弹出框显示。

或者，我们还可以用JS来实现一个点击了之后，什么动作都不会做的a 标签。

比如下面这样：

Q：有人可能觉得疑惑，为啥这样就能实现点击了之后没有动作发生呢？我把a 标签的href 里面的值清空，或者设置为#号不是一样什么都不会发生吗？

A：

也就是说，其他a 标签的写法，不管你咋写，它都会做一件你不想要的事情。

只有 javascript:； 这样的写法，才是真正的实现，点击了之后，啥都不做。

id值:

点击了这个链接之后，id值为xxx的p标签，就会显示在页面顶部。

mailto:邮箱：

这个属性用于点击了之后给这mailto: 后面的邮箱发消息。

tel:手机号:

这个属性的作用就是，当你在手机上点击这个a标签的时候，你手机上的拨号界面就会自动弹出，然后这个属性里的手机号就已经在拨号面板上了。

target:

target：此属性用于设置你要在哪个窗口打开网页。

1：target="_blank " 用于到一个新窗口打开网页。

2：_self：target属性的默认值，即在当前页面打开。

3：_top： 如果你当前页面里面还包含一个iframe 页面的话，如果这个iframe 页面里如果有一个a 标签的target 属性值是 _top 的话，那我们点击时，就会在包裹着iframe 页面的最外层页面打开这个新网址。

4：_parent：如果_top 是跳到最顶层的页面的话，那_parent  就是跳转到包裹这个

a标签所在页面上一级页面。

target='xxx'的时候如果有一个叫xxx 的窗口，就使用这个窗口打开我这个网址

如果没有的话，那我就新建一个叫做 xxx 的窗口。

Q：那我这里两个网址都设置的是xxx 的名字会有什么结果？

A：结果其实我上面已经讲到了。

如果有一个叫xxx 的页面，那我就在这个页面打开网址。

如果没有，我就新建一个叫做xxx 的页面。也就是说，其实当比如你先 点击google标签，然后新建一个名叫xxx 的页面。

然后我再点击baidu 的那个超链接。

之前用来打开google.com的那个页面就变成了百度的页面了。

也就是说，target设置相同名字的话，后面打开的网址会覆盖掉前面打开的网址，在同一个页面打开来。

img标签

作用：

它的效果就是将这个图片给显示出来。

Q：不过我这里只看到它展示了一张图片，我怎么没有看到它在发出get请求呢？

A：我们需要打开开发者工具。

切换到Network那一栏，关掉Preserve log .然后刷新一下。

就可以看到war.png 是通过GET方法获取到的。

所以：img 标签会发送一个GET请求，请求到了之后再展示图片。

属性：

alt ：

alt是alternative(可选择的) 的简写。

它的作用就是，如果我的图片加载失败了，我就显示alt 里的内容。

测试代码如下：

显示结果：

height&width:

显示结果：

如果只写宽度，高度会自适应。反之亦然

这里因为同时指定了宽高，但是这个宽高并不是它原始的宽高比例，改变了它的比例就发现它就变形了。而图片变形的情况是绝对绝对要避免发生的。

事件：

这个事件是用来监听图片是否加载成功。

如果加载成功就调用 onload .否则，调用 onerror.

测试代码如下：

成功：

失败：

Q：那这两个函数到底有啥功能，就给我看一下文字？？

A：其实我们可以用其，来在图片加载失败的时候 进行挽救。

比如我这里先准备好这样的一张，404.png ，用于在图片加载失败的时候显示

显示效果：

响应式：

设置了这个属性之后，无论你怎么拖动网页，这个图片都是完整的显示在你这个页面上。

table标签

效果：

Q：像这种有两个表头的table 应该怎样编写呢？

A：

可以看到表头就用<th> </th> 标签来包裹住

完整代码如下：

上面这段代码的运行结果如下：

注意：thead ,tfoot , 和tbody 这三个标签的顺序可以随意放置，它最终显示的排序结果还是严格按照头，身子， 尾部来放置的。

table相关的样式：

table_layout:

border-collapse：

如何去掉间隙？

加上border-collapse:collapse 就可以。

另外可以用 border-spacing属性来控制间隔。

效果：