Centos网络时好时超时问题解决

保存和加载模型,路径问题

  返回  

Web前端开发笔记——第二章 HTML语言 第四节 超链接标签

2021/8/21 16:12:48 浏览:

目录

  • 前言
  • 一、超链接标签
    • (一)链接其它子网页
    • (二)链接其它站点
    • (三)虚拟超链接
  • 二、从当前页面链接到指定位置
  • 三、链接的访问情况
  • 四、在新窗口中打开链接
  • 例题
  • 结语


前言

本节介绍超链接标签即a标签的用法以及相关应用例题。

一、超链接标签

a标签,也叫超链接标签,在图片或者文字上使用,或者可以用在导航栏上,点击后跳到新的页面,以供用户浏览。超链接表示为<a href ="网址">文字或图片</a>,这里的"href=“是该标签的属性即超链接,通过赋值符号”=",来对该属性进行赋值,而网址是要跳转的目标网址。

<a href ="网址">文字或图片</a>

它有几种应用情况:
1、链接到本站点的其它子网页;
2、链接到其它站点;
3、虚拟超链接。

(一)链接其它子网页

这种情况,是在主页中点击文字或者图片,使其跳转到其它子网页。表示为<a href ="文件名">文字或图片</a>,属性的赋值号后跟子网页的文件名,使href属性取值。
例如下图在主页面中点击"国际",链接至国际栏目子网页中:
在这里插入图片描述

(二)链接其它站点

而当点击文字或者图片后,若想链接至其它站点,表示为<a href ="网页地址">文字或图片</a>,即创建一个指向网站的超链接,属性的赋值号后跟跳转网页的地址,使href属性取值,且在地址中要使用https协议。

例如像这样是错误的:<a href="www.baidu.com">百度一下</a>
正确写法:<a href="http://www.baidu.com">百度一下</a>

例如登录csdn,使用qq登录,这里的qq图标点击后跳转至qq登录页面,在这里a标签的作用就是创建一个指向qq登录页面的超链接:
在这里插入图片描述在这里插入图片描述

(三)虚拟超链接

虚拟超链接,表示为<a href ="#">文字或图片</a>,属性的赋值号后跟#,它不会链接到其它网址,即还未设计的链接,可以理解为空链接

二、从当前页面链接到指定位置

当需要通过a标签跳转到指定页面位置时,需要使用虚拟超链接并在跳转位置的a标签加上id属性,即虚拟超链接的取值与跳转位置的a标签id属性取值是一样。
例如,下列html代码中,我们点击查看数据库原理与应用或者查看QT Creator就会跳转至指定的栏目03和06中:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>直接跳转:</p>
		<a href="#03">查看数据库原理与应用</a>
		<a href="#06">查看QT Creator</a>
		<hr />
		<h2>栏目 01</h2>
		<p>Web前端开发</p>
		<h2>栏目 02</h2>
		<p>计算机网络</p>
		<h2><a id="03">栏目 03</h2>
		<p>数据库原理与应用</p>
		<h2>栏目 04</h2>
		<p>c++程序设计</p>
		<h2>栏目 05</h2>
		<p>c语言</p>
		<h2><a id="06">栏目 06</a></h2>
		<p>QT Creator</p>
	</body>
</html>

运行结果:
点击查看QT Creator,跳转至栏目06:
在这里插入图片描述

三、链接的访问情况

默认情况下,即在未进行CSS的样式编辑的情况下,链接会以不同字体颜色的形式展示其浏览情况:
未访问的链接显示为蓝色字体且带有下划线;
访问过的链接显示为紫色字体且带有下划线;
当点击链接时,链接会显示为红色字体且带有下划线。
在这里插入图片描述

四、在新窗口中打开链接

在a标签内添加上target属性,且target="_blank",当点击这个超链接时浏览器则会新建一个窗口解析这个链接并打开。

<a href ="网址" target="_blank">文字或图片</a>

例如,下列html代码中,在新的窗口中打开百度链接:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href ="https://www.baidu.com" target="_blank">百度一下</a>
	</body>
</html>

运行结果如下:
在这里插入图片描述点击“百度一下”后,新窗口自动弹出:
在这里插入图片描述

例题

例、完成下列网页设计,其中导航栏里链接首页的其它子网页,且子网页中可以跳转文章,文章暂且不用编辑目录即可,另外还可以返回csdn主页和进行百度搜索,效果图如下:
在这里插入图片描述

1、创建站点文件夹,编辑主页html代码,即主页.html文件,如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
	</head>
	<body>
		<h1>首页</h1>
		<h2>导航栏</h2>
		<hr />
		<pre>
			<a href="Web前端开发.html">Web前端开发</a><br />
			<a href="计算机网络.html">计算机网络</a><br />
			<a href="数据库原理与应用.html">数据库原理与应用</a><br />
			<a href="QT Creator.html">QT Creator</a><br />
			<hr />
			<a href="https://www.csdn.net/">返回csdn主页</a>
			<a href="https://www.baidu.com">未找到需要,百度一下</a>
		</pre>
	</body>
</html>

2、对四个子网页编辑,分别是Web前端开发.html、计算机网络.html、数据库原理与应用.html和QT Creator.html四个html文件,其实代码都大同小异,如下;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Web前端开发</h1>
		<p><a href="#">Web前端开发笔记——第一章 Web前端概论</a></p>
		<p><a href="#">Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性</a></p>
		<p><a href="#">Web前端开发笔记——第二章 HTML语言 第二节 基本标签</a></p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>计算机网络实验</h1>
		<p><a href="#">*(绝对可以安装成功的HUAWEI eNSP模拟器)计算机网络实验(华为eNSP模拟器)——第一章 华为eNSP安装教程</a></p>
		<p><a href="#">计算机网络实验(华为eNSP模拟器)——第二章 VRP通用路由平台介绍</a></p>
		<p><a href="#">计算机网络实验(华为eNSP模拟器)——第三章 配置IP地址和网关</a></p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>数据库原理与应用</h1>
		<p><a href="#">数据库原理与应用(SQL Server)笔记 第一章 数据定义语言和数据操纵语言</a></p>
		<p><a href="#">数据库原理与应用(SQL Server)笔记 第二章 简单数据查询</a></p>
		<p><a href="#">数据库原理与应用(SQL Server)笔记 第三章 连接查询</a></p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>QT Creator</h1>
		<p><a href="#">QT Creator应用程序开发——01简单按钮显示</a></p>
	</body>
</html>

3、都保存好后,此时创建的站点文件夹里面有了五个html文件,如下:
在这里插入图片描述创建的文件夹中,五个html文件:
在这里插入图片描述4、用浏览器打开主页.html,这里我用的是火狐:
在这里插入图片描述5、然后我们测试下导航栏功能,点击不同的栏目是否可以进行跳转:
在这里插入图片描述我们发现是没有问题的,其它也是一样:
在这里插入图片描述在这里插入图片描述在这里插入图片描述当点击其中的文章时,我们发现无法跳转,因为定义是虚拟超链接。
在这里插入图片描述6、测试是否能跳转至csdn官网和百度搜索,点击导航栏下方的“返回csdn主页”和“未找到需要,百度一下”,如下:
在这里插入图片描述百度也是可以的:
在这里插入图片描述达到了题设要求!


结语

以上就是全部内容,篇幅较长,感谢您的阅读和支持,若有表述或代码中有不当之处,望指出!您的指出和建议能给作者带来很大的动力!!!

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号