超级链接| 学习笔记

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

开发者学堂课程【零基础学前端 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 就是鼠标停留点击时显示信息.

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

相关文章
|
8月前
|
Web App开发
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
|
4月前
|
移动开发 JavaScript 前端开发
H5超链接
H5超链接
|
5月前
|
搜索推荐 网络架构 UED
什么是超链接?
本文介绍超链接的基本概念及其在网络中的重要性。超链接作为Web的核心组成部分,由蒂姆·伯纳斯·李在1989年提出,与URL、HTTP共同构成Web的三大支柱。通过链接,用户能轻松从一个文档跳转至另一个文档。文章探讨了不同类型的链接,包括内部链接、外部链接与传入链接,并介绍了锚点链接的功能。此外,还强调了链接对于用户体验及搜索引擎优化(SEO)的重要性,以及如何合理构建链接以提升网站的可用性和搜索引擎排名。最后,提供了进一步学习资源,帮助读者深入了解URL结构与超链接的实际应用。
321 3
|
前端开发 搜索推荐 开发者
Typecho-handsome主题页脚美化
handsome主题中页脚美化,如下图所示, 可以让主题的页脚更加具有个性化
310 1
Typecho-handsome主题页脚美化
|
前端开发 UED
CSS样式小项目实战 - 网页变色小按钮
CSS样式小项目实战 - 网页变色小按钮
162 0
CSS样式小项目实战 - 网页变色小按钮
|
前端开发
整活系列(二)——整一个好看的毛玻璃登陆页面
昨天刷某站下饭的时候,看见了一个好看的登陆页面,于是昨天晚上用代码实现了一下,今天就拿出来分享给大家。
html+css实战166-显示隐藏
html+css实战166-显示隐藏
90 0
html+css实战166-显示隐藏
|
JavaScript 开发者
jQuery特效_隐藏与显示 | 学习笔记
快速学习jQuery特效_隐藏与显示
308 0
jQuery特效_隐藏与显示 | 学习笔记