超级链接
当你在网页上点击某些文字或者图片时,会跳转到另外的网页中去,这就是因为给这些文字或图片加了超链接。
超级链接是将网页和网页连接到一起的方法,是互联网“成网”的原因。
在HTML网页中,超级链接使用a标签来实现。
因为超级链接是指向另一个固定的网页的,就相当于抛出了一个锚,所以a就是anchor(锚)的首字母,超级链接就是用a标签。
a标签有一个href属性,这个属性用来指向另一个网页,这个属性的值就是要跳转的网页的地址。
a标签之间的文字,在浏览器中默认是蓝色的,而且文字下面有一个下划线。当你用鼠标指向这些文字时,光标会自动变为一个小手的形状。
比如,我之前写了一个图片标签.html的网页,现在我又在同一个目录里面,创建了一个超级链接.html的网页:
现在我用vscode打开超级链接.html,写一个a标签:
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title超级链接/title/headbodyahref=图片标签.html去看图片标签网页/a/body/html
在这个a标签上,我给它的href属性值是图片标签.html,也就是要跳转到的网页是图片标签.html。
在浏览器中打开超级链接.html,效果如下:
当我点击去看图片标签网页这几个文字时,就会跳转到图片标签.html这个网页:
此时当你点击浏览器地址栏左边的箭头按钮←时,就会回退到刚才的超级链接.html这个网页。这时去看图片标签网页这几个文字就会变成紫色了,这是因为浏览器默认会把已经点击过的超级链接的文字改变为颜色。
当然你也可以在图片标签.html这个网页中写一个a标签,地址是超级链接.html,这样点击这个a标签时,会跳转到超级链接.html这个网页。
你自己动手操作一遍试试。
超级链接并不是把一个新的网页内嵌到当前这个网页中,而是在当前网页中输入了新网页的网址,方便用户点击它时完成页面的跳转。
href属性支持相对路径和绝对路径
a标签的href属性的值可以是相对路径,也可以是绝对路径。
a标签的title属性
a标签的title属性用于设置鼠标的悬停文本。
比如:
ahref=图片标签.htmltitle=超漂亮哦!去看图片标签网页/a
当你鼠标悬停在去看图片标签网页这行字上面时,就会在下面出现超漂亮哦!这几个字。
在新窗口中打开网页
刚才的网页,点击超级链接后,跳转到的新网页会覆盖到原来的网页,那么如何在浏览器的新窗口中打开网页呢?
将a标签的target属性设置为blank,即可在新标签页中打开网页。
如:
ahref=图片标签.htmltarget=blanktitle=超漂亮哦!去看图片标签网页/a
在HTML4时代,blank前面还有一个下划线。即:
ahref=图片标签.htmltarget=_blanktitle=超漂亮哦!去看图片标签网页/a
在HTML5时代,你沿用HTML4的写法,用_blank也是不会报错的。
target就是目标的意思,blank就是空白的意思,顾名思义,target=blank就是让你在新的空白页面打开要跳转到的网页。
关于target属性,你也在a标签上添加上,自己去看看效果。
给图片设置超级链接
给图片设置超级链接,只需要用a标签包裹img标签即可。
比如我想点击故宫的图片,让页面跳转到百度首页,代码如下:
ahref=