初学HTML用法大全指导(四)html中超链接的建立与使用

2024-08-29 14:18

本文主要是介绍初学HTML用法大全指导(四)html中超链接的建立与使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

        上一篇博客我们讲了html脚本语言中最常见到的表格标签的使用方法,这篇博客我们来聊一聊html脚本语言中最长用到的超链接的建立以及使用的方法。超链接在我们平常上网也经常用到,比如你喜欢某个网页标题,然后点击进去就用到的是文字超链接,一些女生喜欢购物,在登录进去某猫或者某狗网站,看到悬挂着精美减价大处理图片,点击图片就进入到我们想到的物品网页,这就是我们常说的图片链接。好了现在我们就来详细说说这些超链接。

      1:文字超链接。标签为<a href="网址/网页">文本文字</a>,这样我们点击文本文字网页就跳转至href属性赋给的网址或者网页地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字超链接</title>
</head>
<body>
<a href="https://www.baidu.com"><b>百度网页</b></a><br/>
<hr>
<a href="demo01.html"><b>自定义网页</b></a>
</body>
</html>

     2:设置图片超链接。设置图片超链接就是把原来<a href="网址/网页">文本文字</a>标签中的文本文字变成<img />标签即可,这样就设置成为了图片超链接。如下述例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片超链接</title>
</head>
<body>
<a href="https://www.baidu.com"><img src="baidu.png" height="100" width="200"/></a>
<hr>
<a href="https://www.tmall.com"><img src="tianmao.PNG" height="100" width="200"/></a>
<hr>
<a href="https://www.jd.com"><img src="jingdong.PNG" height="100" width="200"></a>
<hr>
</body>
</html>


      3:设置在新的窗口打开所选择的超链接,即在<a></a>标签的中的target属性中值设置为_blank,这样所打开的网页就是在浏览器显示时会新打开一个网页。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建窗口打开所选择的超链接网页</title>
</head>
<body bgcolor="gray"><a href="https://www.baidu.com" target="_blank"><b><font color="red" size="20">百度链接</font></b></a><hr><a href="https://www.baidu.com" target="_blank"><img src="baidu.png"/></a><hr>
</body>
</html>


      4:邮箱超链接;在我们浏览网页时,常常会看到“联系我们”的按钮,用户点击这个按钮,一般会弹出一个邮箱超链接的网页,网页会直接跳转到我们需要联系人的邮箱,我们就可以给他发邮件,但是前提是用户所在的浏览器上安装有邮箱的插件。下面我就来演示这个label。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置邮箱超链接</title>
</head>
<body bgcolor="gray"><center><a href="media:498908522@qq.com"><font size="20" color="red">我的邮箱</font></a></center>
</body>
</html>

       5:框架之间的链接;我们有时候在登录某些企业或者校园的网站时,往往在网站网页的左半边部分点击所选择的超链接,会在网站的右半边部分去显示所点击的超链接的内容。其实它就是运用框架技术,把网页分割成几个部分,在某一块A区是所有超链接的文本选项,在某一块B区是所有超链接文本选项所链接的内容,现在我就一个一个来介绍框架之间的链接技术。其标签为<frameset></frameset>,其中frameset标签里面嵌套<frame>标签。

       a):用cols属性将网页窗口可以竖着分割为左右一些部分,用rows属性可以将网页窗口横着分割为上下一些部分,其中分割为几部分要看给cols和rows属性符的值有几个。下面用代码显示rows属性和cols属性,以及它们之间的嵌套。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口分割</title>
</head>
<frameset cols="20%, *"><frame><frameset rows="33%, 33%,*"><frame><frame><frame></frameset>
</frameset>
</html>


      b):用src属性在框架中插入网页,并在框架之间建立连接。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
You are my baby!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
I Love You, Baby!
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
Baby, You look so beautiful!
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
<a href="a.html" target="main">a</a><br/>
<a href="b.html" target="main1">b</a><br/>
<a href="c.html" target="main2">c</a><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架嵌套</title>
</head>
<frameset cols="20%, *"><frame src="d.html"><frameset rows="33%, 33%,*"><frame name="main"><frame name="main1"><frame name="main2"></frameset>
</frameset>
</html>


     6:有时候我们会进入到那样的欺骗网站,其中页面显示与企业官网显示的一模一样可是它就不是企业的官方网站,还有时候我们需要把别人的网页引入到自己网站的窗体的某一部分来显示,这时我们就要用到<iframe></iframe>标签来显示。其中显示窗体的具体大小可以用iframe标签里面的属性height和width属性来调整,用src属性来引入网页的网址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入式框架iframe</title>
</head>
<body>
baidu页面<br/>
<iframe width = "1350" height="650" src="https://www.baidu.com"></iframe>
</body>
</html>







这篇关于初学HTML用法大全指导(四)html中超链接的建立与使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118100

相关文章

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭

使用SQL语言查询多个Excel表格的操作方法

《使用SQL语言查询多个Excel表格的操作方法》本文介绍了如何使用SQL语言查询多个Excel表格,通过将所有Excel表格放入一个.xlsx文件中,并使用pandas和pandasql库进行读取和... 目录如何用SQL语言查询多个Excel表格如何使用sql查询excel内容1. 简介2. 实现思路3

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

c# checked和unchecked关键字的使用

《c#checked和unchecked关键字的使用》C#中的checked关键字用于启用整数运算的溢出检查,可以捕获并抛出System.OverflowException异常,而unchecked... 目录在 C# 中,checked 关键字用于启用整数运算的溢出检查。默认情况下,C# 的整数运算不会自

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

Mybatis官方生成器的使用方式

《Mybatis官方生成器的使用方式》本文详细介绍了MyBatisGenerator(MBG)的使用方法,通过实际代码示例展示了如何配置Maven插件来自动化生成MyBatis项目所需的实体类、Map... 目录1. MyBATis Generator 简介2. MyBatis Generator 的功能3

Python中使用defaultdict和Counter的方法

《Python中使用defaultdict和Counter的方法》本文深入探讨了Python中的两个强大工具——defaultdict和Counter,并详细介绍了它们的工作原理、应用场景以及在实际编... 目录引言defaultdict的深入应用什么是defaultdictdefaultdict的工作原理

使用Python进行文件读写操作的基本方法

《使用Python进行文件读写操作的基本方法》今天的内容来介绍Python中进行文件读写操作的方法,这在学习Python时是必不可少的技术点,希望可以帮助到正在学习python的小伙伴,以下是Pyth... 目录一、文件读取:二、文件写入:三、文件追加:四、文件读写的二进制模式:五、使用 json 模块读写

Python使用qrcode库实现生成二维码的操作指南

《Python使用qrcode库实现生成二维码的操作指南》二维码是一种广泛使用的二维条码,因其高效的数据存储能力和易于扫描的特点,广泛应用于支付、身份验证、营销推广等领域,Pythonqrcode库是... 目录一、安装 python qrcode 库二、基本使用方法1. 生成简单二维码2. 生成带 Log

Python如何使用seleniumwire接管Chrome查看控制台中参数

《Python如何使用seleniumwire接管Chrome查看控制台中参数》文章介绍了如何使用Python的seleniumwire库来接管Chrome浏览器,并通过控制台查看接口参数,本文给大家... 1、cmd打开控制台,启动谷歌并制定端口号,找不到文件的加环境变量chrome.exe --rem