链接通过 <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>
尝试一下
路径是指链接中 href 属性的属性值。
HTML 中链接的路径分为两种:绝对路径 和 相对路径。
绝对路径:
相对路径:
空链接的存在,是为了更好的看到链接最终的展示效果。
一般将 href 属性的值设为 # 或者 javascript:; 表示空链接,即 href="#" 或者 href="javascript:;"。
设置为 # 时点击空链接,页面会进行刷新,但仍然会停留在当前页面。
设置为 javascript:; 时点击空链接,页面不会进行刷新,仍然会停留在当前页面。
空链接示例:
<a href="#">笔记本代码(bjbcode.com)</a>
<a href="javascript:;">笔记本代码(bjbcode.com)</a>
尝试一下
使用 target 属性,可以控制链接的文档在浏览器中打开的位置。
属性值 | 描述 |
---|---|
_self | 在当前窗口打开:当前页面会被链接的文档取代 |
_blank | 在新窗口中打开 |
_parent | 在父框架中打开 |
_top | 跳出框架 |
<!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 属性没有属性值,即未对下载文件指定名称,浏览器会引用下载的文件的文件名,包含后缀 (.img, .pdf, .txt, .html 等) 。
点击链接下载图片:
<a href="img/logo.png" download="logo.png">
<img src="img/logo.png" alt="笔记本代码">
</a>
尝试一下
几乎所有的 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 编码参考手册 。