开发者学堂课程【零基础学前端 HTML+CSS :超级链接】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/398/detail/5113
超级链接
内容介绍:
一、超链接 (a) 标签
二、示例
一、超链接 (a) 标签
HTML 使用超链接与网络上的另一个文档相连,<a> 标签用于在 HTML 页面中创建超链接。它是成对出现。开始标签和结束标签之间的文字被作为链接来显示。
<a> 标签的常用属性如下:
href: 用于定位需要链接的文档;
target: 定义被链接的文档在何处显示;
title: 定义鼠标停留在链接上提示信息。
target 常用的两个值:
( 1 )_self: 在本窗口打开链接
( 2 )_blank: 在一个新窗口打开链接
写法:<a href= “跳转路径”>文字图像</a>
二、示例:
在 title 中写入超级链接
<!DOCTYPE html>
<html>
<head lang=
”
en
”
<meta charset=
”
UTF-8
”
<title>超级链接</title>]
在 <body></body> 中先写入文字“点击我跳转页面”,先运行查看结果
接下来想要跳转到一个 images.html 企鹅图片下
输入代码
<a href= “images.html”>点击我跳转页面</a>
会出现如下
单击后会自动跳转到企鹅图片
那么除了文字,图像也可以做超级链接
修改代码
<a href
= “link.html”><img src = “images/Penguins.jpg”></a>
<imgsrc= “http://www.mldn.cn/files/system/logo_1422951708.gif”>
运行结果如图,图片可以点击,点击后跳转到上个页面
接下来用一个新的窗口打开我们下一个页面,修改代码
<a href= “images.html” target= “_blank”>点击我跳转页面</a>
会发现单击打开后,会出现新的页面
target= “_blank” 是用一个新的窗口打开我的下一个页面。有的时候是我们特意设置打开的方式,比如新的栏目用新建页面打开,或者友情链接。
超链接实例:
<a href = “http://www.mldn.cn” title= “点击” target= “_blank”>魔乐科技</a>
title 就是鼠标停留点击时显示信息.
此外超级链接一定要注意它的路径问题,如果路径写的不对,打开的内容也会出现问题,要确定路径是相对路径还是绝对路径