|
主题设置

卡片式面板通常用于非白色背景色的主体内

链接标签

链接通过 <a> 标签定义,其结束标签为 </a>

链接示例

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<title>笔记本代码(bjbcode.com)</title> 
	</head>
	<body>
		<p><a href="/page/note/html/html-a.html">链接一</a> 是一个指向本网站中一个页面的链接</p>
		<p><a href="https://www.baidu.com/">链接二</a> 是一个指向万维网上的页面的链接</p>
	</body>
</html>
尝试一下

示例解析

  • HTML 使用标签 <a> 来设置超文本链接,a 是 anchor 的缩写。
  • href 属性来指定链接的 URL ,这是链接的最重要属性,可以是另一个网页的 URL、文件的 URL 或其他资源的 URL 。

链接的属性

  • href 属性(必选)指定链接目标的 URL,这是链接的最重要属性。
  • target 属性(可选):指定链接如何在浏览器中打开。
  • title 属性(可选):提供链接的额外信息,通常在鼠标悬停在链接上时显示。
  • download 属性(可选):定义了链接的下载功能,同时可以指定下载文件的名称。
  • id 属性(可选):为链接提供唯一的标识或标记,以便浏览器在分析和处理页面时,能快速找到链接所在的位置。
  • rel 属性(可选):指定与链接目标的关系,如 nofollow、noopener 等。

href 属性

路径是指链接中 href 属性的属性值。

HTML 中链接的路径分为两种:绝对路径相对路径

绝对路径:

  • 本地绝对路径:比如 file://C:/Users/Documents/html/html-a.html
  • 网络绝对路径:比如 http://www.bjbcode.com/page/note/html/html-a.html

相对路径:

  • 访问当前文件的同级路径:直接写文件名,比如 html-links.html
  • 访问当前文件的下一级目录:/note
  • 访问当前文件的下两级目录:/note/html
  • 访问目录中的指定文件:/note/html/html-a.html
  • 访问当前文件的上一级目录:../html-a.html
  • 访问当前文件的上两级目录:../../html-a.html

空链接

空链接的存在,是为了更好的看到链接最终的展示效果。

一般将 href 属性的值设为 # 或者 javascript:; 表示空链接,即 href="#" 或者 href="javascript:;"

设置为 # 时点击空链接,页面会进行刷新,但仍然会停留在当前页面。

设置为 javascript:; 时点击空链接,页面不会进行刷新,仍然会停留在当前页面。

空链接示例:

<a href="#">笔记本代码(bjbcode.com)</a>
<a href="javascript:;">笔记本代码(bjbcode.com)</a>
尝试一下

target 属性

使用 target 属性,可以控制链接的文档在浏览器中打开的位置。

target 属性值

属性值 描述
_self 在当前窗口打开:当前页面会被链接的文档取代
_blank 在新窗口中打开
_parent 在父框架中打开
_top 跳出框架

target 属性示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>target 属性</title>
	</head>
	<body>
		<a href="http://www.bjbcode.com/" target="_self">在当前窗口打开</a>
		<a href="http://www.bjbcode.com/" target="_blank">在新窗口打开</a>
		<a href="http://www.bjbcode.com/" target="_parent">在父框架中打开</a>
		<a href="http://www.bjbcode.com/" target="_top">跳出框架</a>
	</body>
</html>
尝试一下

download 属性 - 下载链接

download 属性定义了链接的下载功能,同时可以指定下载文件的名称。

若 download 属性没有属性值,即未对下载文件指定名称,浏览器会引用下载的文件的文件名,包含后缀 (.img, .pdf, .txt, .html 等) 。

点击链接下载图片:

<a href="img/logo.png" download="logo.png">
	<img src="img/logo.png" alt="笔记本代码">
</a>
尝试一下

id 属性 - 书签链接

几乎所有的 HTML 标签都有 id 属。

id 属性为链接提供唯一的标识或标记,以便浏览器在分析和处理页面时,能快速找到链接所在的位置。

在同一页面中,多个 id 属性的属性值不能重复。

可以用 HTML 链接搭配 id 属性创建书签,所谓书签,即点击 HTML 链接,可以快速跳转到 id 属性所在的位置。

创建书签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>创建书签</title>
	</head>
	<body>
		<!-- # 代表指向 id 属性,fourth 是 id 属性的名称 -->
		<a href="#fourth">书签:第四章</a>
		<br />
		
		<h2>第一章 远古神墓</h2>
		<p>远古神墓……</p>
		<br />
		
		<h2>第二章 惊艳</h2>
		<p>惊艳……</p>
		<br />
		
		<h2>第三章 小恶魔公主</h2>
		<p>小恶魔公主……</p>
		<br />
		
		<!-- id 属性的名称为 fourth -->
		<h2 id="fourth">第四章 后羿屠龙</h2>
		<p>后羿屠龙……</p>
		<br />
		
		<h2>第五章 暗战</h2>
		<p>暗战……</p>
		<br />
		
		<h2>第六章 血战惊魂</h2>
		<p>血战惊魂……</p>
		<br />
		
		<h2>第七章 调戏公主</h2>
		<p>调戏公主……</p>
	</body>
</html>
尝试一下

id 属性在页面中是不显示的。

书签示例解析

首先,在 HTML 文档中对元素指定 id 属性:

<h2 id="fourth">第四章 后羿屠龙</h2>

然后,在同一个文档中创建指向该元素的链接:

<a href="#fourth">书签:第四章</a>

您也可以在其他页面中创建指向该元素的链接:

<a href="/page/note/html/html-first.html#example-explain">书签示例解析</a>

图像链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,我们可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

所谓链接图像,既是链接,也是图像。

当用户点击该图像时,浏览器立即转入该超链接所指向的地址。

图像链接:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图像链接</title>
	</head>
	<body>
		<a href="http://www.bjbcode.com/" target="_blank">
			<img src="/img/logo.png">
		</a>
	</body>
</html>
尝试一下

有关图像标签的详细内容,请访问 图像标签

邮件链接

邮件链接可以用来发送电子邮件,是一个非常实用的 HTML 功能。

当用户点击邮件链接时,会自动打开当前计算机中默认的电子邮件客户端,例如 OutLook Express、Foxmail 等。

使用邮件链接发送电子邮件存在一个问题,如果用户的计算机上没有安装电子邮件客户端,则无法发送电子邮件。

简单邮件链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单邮件链接</title>
	</head>
	<body>
		<a href="mailto:someone@example.com?Subject=Hello%20Bjbcode" target="_top">发送简单邮件</a>
	</body>
</html>
尝试一下

复杂邮件链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>复杂邮件链接</title>
	</head>
	<body>
		<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Hello%20Bjbcode&body=Welcome%20to%20bjbcode,%20this%20is%20my%20note!" target="_top">发送复杂邮件</a>
	</body>
</html>
尝试一下

邮件链接参数解析

参数 描述
mailto:someone@example.com 定义收件人地址(多个地址之间用 ; 隔开)
cc=someoneelse@example.com 定义抄送人地址(多个地址之间用 ; 隔开)
bcc=andsomeoneelse@example.com 定义密送人地址(多个地址之间用 ; 隔开)
subject=subject text 定义邮件标题
body=body text 定义邮件内容(部分邮件客户端支持 HTML 格式语句)
? 表示参数开始(与 URL 一样,用 ? 表示参数的开始)
& 定义其他参数
%20 %20是一种特殊的编码方式,用于将空格字符转换为 URL 可接受的格式。

如果需要在邮件标题或者内容中添加空格,不能直接输入空格,而要使用 %20 ;同理,换行要使用 %0d%0a 。更多相关内容请访问 URL 编码参考手册

链接拓展

  • a 标签默认不继承父元素的颜色,若要继承父元素的 color 属性,则通过 CSS 设置样式为 color:inherit 。
  • a 标签是行元素,不能对其设置宽高。如果要设置宽高,可以通过 CSS 设置样式为 display:inline-block 或者 display:block 或者 浮动。
  • 虽然行元素内只能容纳文本或其他非块级元素,但是 a 标签特殊,a 标签里面可以嵌套块级元素。
  • 当把鼠标指针移动到网页中的某个链接上时,默认情况下箭头会变为一只小手
  • 默认情况下:
    • 一个未访问过的链接显示为蓝色字体并带有下划线
    • 访问过的链接显示为紫色并带有下划线
    • 点击链接时链接显示为红色并带有下划线

有用的提示

  • 链接中,请始终将正斜杠 / 添加到子文件夹后,这样访问效率更高,就像这样:href="http://www.bjbcode.com/html/"。
  • 假如这样书写链接:href="http://www.bjbcode.com/index.html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠 / 到这个地址,然后创建一个新的请求。