
什么是 HTML 链接?
在 HTML 中,链接是用于在网页中,创建超链接的 HTML 元素。
允许用户点击后跳转到其他页面、文件、电子邮件地址或页面内的特定位置。
外部链接
指向其他网站的链接,当用户点击该链接时,会跳转到外部网站。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<!-- 这是一个指向开创者教程的外部链接 -->
<a href="https://www.kaicz.com">访问开创者教程</a>
</body>
</html>
在上述代码中,<a>标签是超链接标签,href属性指定了链接的目标地址,即用户点击链接后要跳转的页面。
内部链接
指向同一网站内其他页面的链接,可帮助用户在网站内部进行导航。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<!-- 假设当前页面为 index.html,点击链接会跳转到 about.html 页面 -->
<a href="about.html">关于我们</a>
</body>
</html>
这里的<href>属性值是相对路径,指向同一目录下的 about.html 页面。
锚点链接
用于在同一页面内跳转到指定位置,通常用于长页面的导航。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<!-- 跳转到页面中 id 为 section2 的元素位置 -->
<a href="#section2">跳转到第二部分</a>
<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>
<h2 id="section2">第二部分</h2>
<p>这是第二部分的内容。</p>
</body>
</html>
在这个例子中,<href>属性值以 # 开头,后面跟着目标元素的 id 值。当用户点击链接时,页面会滚动到具有相应 id 的元素位置。
电子邮件链接
用于创建一个可以直接打开邮件客户端并填写收件人地址的链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<!-- 点击链接会打开邮件客户端并填写收件人地址 -->
<a href="mailto:example@example.com">发送邮件</a>
</body>
</html>
mailto:是电子邮件链接的协议,后面跟着收件人的电子邮件地址。
下载链接
指向一个文件,用户点击链接后可以下载该文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
</head>
<body>
<!-- 点击链接会下载 example.pdf 文件 -->
<a href="example.pdf" download>下载 PDF 文件</a>
</body>
</html>
download属性是 HTML5 新增的属性,用于指示浏览器下载链接指向的文件,而不是在浏览器中打开。
评论区 0
发表评论
教程介绍
HTML 超文本标记语言,一种用于创建网页的标准标记语言,在浏览器上运行和解析。
60
章节
215
阅读
0
评论