四、超链接

最新推荐文章于 2024-11-16 14:45:11 发布

ChengMeng11

最新推荐文章于 2024-11-16 14:45:11 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/ChengMeng11/article/details/104915712

本文详细介绍了HTML中超链接的使用，包括普通链接、锚链接和功能链接的基本语法及用法，以及URL的组成和作用。通过实例展示了如何创建页面内、页面间锚链，以及实现特殊功能的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、超链接

1.简介

使用超链接可以从一个页面跳转到另一个页面，实现页面之间的跳转

当鼠标移动超链接文本上时，鼠标箭头会变成一只小手

超链接有三种类型：

普通链接/页面间链接：跳转到另一个页面
锚链接：跳转到锚点（同一个页面的某个位置）
功能链接：实现特殊功能（发邮件，下载）

2.基本用法

使用 <a>标签创建超链接

语法格式：

<a href="链接地址" target="链接打开的位置">链接文本或图像</a>

常见属性:

href链接地址或路径:链接地址

_self自身，当前，默认值 
_blank空白、新的页面   
_parent父层框架 
_top顶层框架 自定义

路径分类：

相对路径

相对于当页面所在的路径为参照,不是以根开始的

./ 当前路径

…/ 表示上级路径
绝对路径:

以根开始的路径

[file:///D:/software/b.html](file:///D:/software/b.html)

https://www.baidu.com

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
	<br>
	<a href="http://www.baidu.com" target="_blank">百度</a>
	<hr>


	<a href="d:/software/b.html" target="_blank">b</a>
	<br>
	<a href="./c.html">c</a>
	<hr>
	<a href="../d.html">d</a>
	<hr>
	<a href="../../f.html">f</a>

</body>
</html>

案例：

在这里插入图片描述

3.锚链接

3.1简介

点击链接后跳转到页面的指定位置（锚点anchor）

锚链接的分类

页面内的锚链接
页面间的锚链接

3.2 页面内的锚链

步骤：

1、定义锚点（标记）

<a name="锚点名称">目标位置</a>

2、链接锚点

<a href="#锚点名称">链接文本</a>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="#first">简介</a></li>
		<li><a href="#second">HTML版本</a></li>
		<li><a href="#three">特点</a></li>
		<li><a href="#four">编辑方式</a></li>
		<li><a href="#five">整体结构</a></li>
		<li><a href="#six">相关要求</a></li>
	</ol>
	


    <p>
    <a name="first">简介</a>
    </p>
    <P>
    HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
    <p>  
    自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
    </P>
    <p><a name="second">HTML版本</a></p>
    <p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。 
    </p>
    <p>HTML历史上有如下版本：  
    ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
    ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br> 
    ③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
    ④HTML 4.0：1997年12月18日，W3C推荐标准。<br> 
    ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br> 
    ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
    </p>

    <p><a name="three">特点</a></p>
    <p>
    超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4] 
    简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4] 
    可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4] 
    平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4] 
    通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
    </p>

    <p><a name="four">编辑方式</a></p>
    <p>
    HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7] 
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7] 
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
    </p> 


    <p><a name="five">整体结构</a></p>
    <p>
    一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10] 
    标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
    </p>

    <p><a name="six">相关要求</a></p>
    <p>
    在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9] 
    文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
    html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9] 
    超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
    一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“&nbsp（注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9] 
    标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“&nbsp（注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9] 
    标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9] 
    HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
    </p>
</body>
</html>

案例：

在这里插入图片描述

3.3页面间的锚链接

<a href="目标页面#锚点名称">链接文本</a>

页面间的锚链接相当于在另一个地方只用将锚链接点设置好，就可以直接跳转到你想要的内容的位置。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
		<li><a href="锚链接.html#first">简介</a></li>
		<li><a href="锚链接.html#second">HTML版本</a></li>
		<li><a href="锚链接.html#three">特点</a></li>
		<li><a href="锚链接.html#four">编辑方式</a></li>
		<li><a href="锚链接.html#five">整体结构</a></li>
		<li><a href="锚链接.html#six">相关要求</a></li>
	</ol>
</body>
</html>

案例：

在这里插入图片描述

4.功能链

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="../img/heihei.gif">点击此处下载图片</a>
	<hr>

	<a href="mailto:3013750538@qq.com">联系我们</a>


</body>
</html>

案例：

在这里插入图片描述

5.URL （此处内容了解便可）

5.1简介

URL：Uniform Resource Locator 统一资源定位器,用来定位资源所在的位置，常见的就是网址

1、https://www.baidu.com/img/bd_logo1.png?name=tom&age=2&sex=male 
2、https://www.w3school.com.cn/html/html_quotation_elements.asp 
3、file:///C:/Users/Administrator/Desktop/project/code/09.%E5%B8%B8%E7%94%A8%E6%A0%87%E7%A D%BE3.html 
4、http://www.sxgjpx.net/ 
5、ftp://10.255.254.253/

5.2组成

1、https://www.w3school.com.cn/html5/index.asp 
2、http://www.sxgjpx.net 
3、file:///C:/Users/Administrator/Desktop/project/code/18.%E5%8A%9F%E8%83%BD%E9%93%BE%E6%8 E%A5.html 
4、ftp://10.255.254.253/ 
5、https://www.baidu.com/img/bd_logo1.png

一个完整的URL由8个部分组成：

协议：prococol 如

1、http:超文本传输协议，用来访问WEB网站Hyper text Transfer protocol

2、https:更加安全的协议 SSL安全套接子层

3、ftp文件传输协议，用来访问服务器上的文件，实现文件的上传和下载File Transfer protocol

4、file:文件协议，用来访问本地文件
主机名hostname服务器地址或服务器Netbios名称,如www.baidu.com ftp://10.255.254.254
端口：port位于主机名的后面，使用冒号进行分隔

1、不同的协议使用不同的端口，如http使用80端口,https使用的443端口,ftp使用20和21 ，如果使用的是默认端口，则端口可以省略
2、如果使用的不是默认端口，则必须指定端口http://59.49.32.213:7070/
路径：path目标文件所在的路径结构，如:https://www.bilibili.com/video/av93425449//
资源resource要访问的目标文件，如bd_logo1.png
查询字符串：query string 也称为参数

在资源后面使用?开头的一组名称/值

名称和值之间以=分隔，多个表达式之间用&分隔，如:?name=tom&age=2&sex=male
锚点anchor，在资源后面使用#开头的文本，如#6
身份认证authentication,指定身份信息，如：ftp://账户:密码@ftp.bbshh010.com