HTML及CSS学习笔记 02 - HTML超链接

最新推荐文章于 2024-04-24 14:53:02 发布

chodenke

最新推荐文章于 2024-04-24 14:53:02 发布

阅读量1.3k

点赞数 1

分类专栏： HTML及CSS学习笔记文章标签：超链接 HTML 绝对路径相对路径

本文链接：https://blog.csdn.net/cgl125167016/article/details/88973199

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第二课，介绍HTML中的超链接原理，举例制作超链接；另外介绍绝对路径和相对路径各自的含义

一、超链接

1、URL

1.1、什么是URL

URL是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

1.1、URL的结构

基本URL包含

模式（或称协议），常见的协议有

编码	描述
http	超文本传输协议资源（Hypertext Transfer Protocol）
https	用安全套接字层传送的超文本传输协议
ftp	文件传输协议
mailto	电子邮件地址
ldap	轻型目录访问协议搜索
file	本地或网上分享的文件
news	Usenet新闻组
gopher	Gopher协议
telnet	Telnet协议

服务器名称（或IP地址），后面有时还跟一个冒号和一个端口号。
路径和文件名

2、超链接原理

2.1、在浏览器中输入URL时发生了什么

在浏览器的地址栏输入一个URL
请求发送给服务器，服务器查找被请求的文件
服务器把文件返回给浏览器，浏览器显示文件

2.2、点击超链接时发生了什么

点击超链接和在地址栏中输入URL是一样的，只不过URL已经作为超链接的一部分，事先写在了HTML超链接标签中

点击超链接时，一个文件请求被发送给服务器
服务器把文件返回给浏览器，浏览器用新的文件替换旧的文件

3、<a>标签的使用

3.1、制作超链接

下面是一个超链接的例子：

<body>
 <a href="http://www.baidu.com" title="百度" target="_blank">点击这里，访问百度</a>
</body>

说明：

<a>标签中的a是单词anchor的首字母
写在<a>和</a>之间的部分，就是网页中可点击的超链接文本
<a>标签中的href属性，即是超链接指定要请求的URL，表示当超链接被点击的时候，哪个页面被打开
title属性表示鼠标悬停在超链接文本上后鼠标指针旁的提示文本

target属性表示当超链接被点击的时候，新页面将在什么位置被打开，常见的属性值有

属性值	描述
_blank	在新窗口中打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_parent	在父框架集中打开被链接文档
_top	在整个窗口中打开被链接文档
[自定义框架名称]	在指定的框架中打开被链接文档

3.2、链接文档书签标记

下面是一个文档书签标记的例子：
page-1.html

<body>
 <a href="#tips">访问有用的提示部分</a>
 <br/>...<br/>
 <a id="tips">有用的提示部分</a>
</body>

page-2.html

<body>
 <a href="page-1.html#tips">访问有用的提示部分</a>
</body>

说明：

使用<a>标签创建一个文档书签标记，id属性为该文档书签标记的唯一标识，本例中为tips。
书签不以任何特殊的方式显示。
在当前HTML文档中创建一个到某一文档书签标记的链接，使用href="#[文档书签标记的id属性值]"，本例中为href="#tips"
创建其他页面到当前文档中某一文档书签标记的链接，使用href="[URL]#[文档书签标记的id属性值]"，本例中为href="page-1.html#tips"
<br />标签作用是换行。

二、相对路径和绝对路径

路径是指一个文件存储的位置，分为相对路径和绝对路径。

1、绝对路径

绝对路径向一个特定的服务器上的文件发送请求，href属性值中总是包含协议和服务器，例如：

<a href="file:///C:/Users/codeke/Desktop/page-1.html">访问页面1</a>

或者

<a href="http://www.baidu.com">访问百度</a>

2、相对路径

相对路径是指以当前文件所在位置为参考点而建立的路径，相对路径不指定特定的服务器，href属性值中不包含协议和服务器，例如

<a href="page-1.html">访问页面1</a>

说明：

不包含协议/服务器，浏览器会假设协议和服务器与发出请求的页面相同
当要链接的网页在相同的服务器上时，通常会使用相对路径
相对路径中./表示当前路径
相对路径中../表示上一级路径