初学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

相关文章

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程:创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do

全面解析Golang 中的 Gorilla CORS 中间件正确用法

《全面解析Golang中的GorillaCORS中间件正确用法》Golang中使用gorilla/mux路由器配合rs/cors中间件库可以优雅地解决这个问题,然而,很多人刚开始使用时会遇到配... 目录如何让 golang 中的 Gorilla CORS 中间件正确工作一、基础依赖二、错误用法(很多人一开

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

Java Stream流之GroupBy的用法及应用场景

《JavaStream流之GroupBy的用法及应用场景》本教程将详细介绍如何在Java中使用Stream流的groupby方法,包括基本用法和一些常见的实际应用场景,感兴趣的朋友一起看看吧... 目录Java Stream流之GroupBy的用法1. 前言2. 基础概念什么是 GroupBy?Stream

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时

MySQL 强制使用特定索引的操作

《MySQL强制使用特定索引的操作》MySQL可通过FORCEINDEX、USEINDEX等语法强制查询使用特定索引,但优化器可能不采纳,需结合EXPLAIN分析执行计划,避免性能下降,注意版本差异... 目录1. 使用FORCE INDEX语法2. 使用USE INDEX语法3. 使用IGNORE IND