超级链接| 学习笔记

简介: 快速学习超级链接。

开发者学堂课程【零基础学前端 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> 中先写入文字“点击我跳转页面”,先运行查看结果

image.png

接下来想要跳转到一个 images.html 企鹅图片下 

输入代码

<a href= “images.html”>点击我跳转页面</a>

会出现如下

image.png

单击后会自动跳转到企鹅图片

那么除了文字,图像也可以做超级链接

修改代码

<a href

= “link.html”><img src = “images/Penguins.jpg”></a>

<imgsrc= “http://www.mldn.cn/files/system/logo_1422951708.gif”>

运行结果如图,图片可以点击,点击后跳转到上个页面

image.png

接下来用一个新的窗口打开我们下一个页面,修改代码

<a href= “images.html” target= “_blank”>点击我跳转页面</a>

会发现单击打开后,会出现新的页面

image.png

target= “_blank” 是用一个新的窗口打开我的下一个页面。有的时候是我们特意设置打开的方式,比如新的栏目用新建页面打开,或者友情链接。

超链接实例:

<a href = “http://www.mldn.cn” title= “点击” target= “_blank”>魔乐科技</a>

image.png

title 就是鼠标停留点击时显示信息.

此外超级链接一定要注意它的路径问题,如果路径写的不对,打开的内容也会出现问题,要确定路径是相对路径还是绝对路径

相关文章
|
10天前
|
移动开发 JavaScript 前端开发
H5超链接
H5超链接
|
23天前
将一个图片作为一个超链接
将一个图片作为一个超链接。
29 6
|
5月前
|
前端开发 搜索推荐 索引
【零基础入门前端系列】—网页标题、段落标记、强制换行、水平线(二)
【零基础入门前端系列】—网页标题、段落标记、强制换行、水平线(二)
|
Web App开发 前端开发
网页|如何实现网页变灰效果
网页|如何实现网页变灰效果
118 0
|
JavaScript 前端开发 API
前端|获取网页中鼠标选中文字
前端|获取网页中鼠标选中文字
227 0
|
前端开发 UED
CSS样式小项目实战 - 网页变色小按钮
CSS样式小项目实战 - 网页变色小按钮
146 0
CSS样式小项目实战 - 网页变色小按钮
|
移动开发
H5在网页中拖放图片
H5中实现拖放效果,常用的实现方法是利用事件drag和drop
123 0