超文本与超链接基础
在深入了解锚元素之前,理解超文本概念十分必要。超文本是指在浏览器中显示并包含超链接的文本内容,而超链接(简称链接)使用户能够在不同页面、文档甚至同一页面的不同部分之间进行跳转。href 属性的功能与应用
href 属性用于定义链接目标资源的地址,指示用户访问的目标页面位置。基本语法
<a href="目标地址">链接文本</a>
其中 href 为包含目标地址的属性,"链接文本"是用户可见的可点击文本内容。页面间链接示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<h1>欢迎访问主页面</h1>
<p>
<a href="second.html">跳转到第二页</a>
</p>
</body>
</html>
功能说明:此代码创建了一个超链接,点击后将在当前浏览器标签页中打开指定的 second.html 文件。target 属性的定位功能
target 属性用于指定链接的打开位置,为用户提供更灵活的浏览体验。
基本应用示例
<!DOCTYPE html>
<html>
<head>
<title>target属性应用示例</title>
</head>
<body>
<p>点击<a href="https://www.ebingou.cn/biancheng/htmlcss/" target="_blank">此链接</a>新开窗口访问代码号HTML教程首页。</p>
</body>
</html>
注意事项:target 属性需要与 href 属性配合使用。如不指定 target 属性,链接将在当前页面打开。新标签页打开链接
使用 target="_blank" 属性可在新浏览器标签页中打开链接:
<a href="https://www.ebingou.cn/biancheng/htmlcss/" target="_blank">访问示例网站</a>
功能说明:target="_blank" 指令指示浏览器在新标签页中打开链接,同时保持原页面不受影响。链接样式的自定义
可通过HTML body元素的相关属性自定义链接的视觉表现:
<body bgcolor="red" text="black" link="blue" alink="#FFFF00" vlink="#FF00FF">
样式说明:此代码设置页面背景为红色,普通文本为黑颜色,未访问链接显示蓝颜色,活动链接显示黑颜色,已访问链接显示粉红色。图像链接的实现
锚元素不仅支持文本链接,也可用于创建图像超链接:
<a href="https://www.ebingou.cn/">
<img src="https://www.ebingou.cn/skin/ymxz/static/images/logo.png" alt="代码号html标志" width="170" height="57">
</a>
功能说明:图像被包含在 <a> 标签内,使图像成为可点击的超链接,点击后将跳转到指定网站。
特殊功能链接
电子邮件链接
<a href="mailto:203435035@qq.com">发送邮件</a>
功能说明:mailto: 协议会启动用户默认的邮件客户端,并自动填写收件人地址。电话链接
<a href="tel:+861000000000">联系我们</a>
功能说明:tel: 协议在支持通话功能的设备上会提示拨打电话。链接的默认视觉表现
未访问链接:蓝色带下划线
已访问链接:紫色带下划线
活动链接:红色带下划线
页面内锚点链接
使用锚点可实现同一页面内的快速定位:
<a href="#section1">跳转到第一部分</a>
...
<h2 id="section1">第一部分内容</h2>
功能说明:点击"跳转到第一部分"链接后,页面会自动滚动到具有相同id值的标题位置。
JavaScript 执行链接
通过 javascript: 协议,可以在锚元素中执行JavaScript代码:
<a href="javascript:alert('欢迎访问代码号!');">点击此处</a>
功能说明:点击链接后会显示包含"欢迎访问代码号!"信息的浏览器提示框。其他重要属性
| 属性 | 描述 |
|---|---|
| href | 定义链接目标地址 |
| target | 指定链接打开方式 |
| download | 触发文件下载而非导航 |
| hreflang | 声明目标文档的语言 |
| rel | 定义当前文档与目标文档的关系 |
| media | 指定目标资源优化的设备类型 |
| type | 定义链接内容的MIME类型 |
文件下载示例
<a href="file.pdf" download>下载PDF文档</a>
功能说明:download 属性提示浏览器下载指定文件而不是直接打开。rel 属性应用
<a href="https://www.ebingou.cn" rel="noopener noreferrer" target="_blank">外部链接</a>
功能说明:rel="noopener noreferrer" 在新标签页中打开外部链接时提供安全保障,防止潜在的安全风险。浏览器兼容性
| 浏览器 | Chrome |
IE |
Firefox |
Opera |
Safari |
| <a> | 支持 | 支持 | 支持 | 支持 | 支持 |
无论是文本链接、图像链接还是页面内导航,掌握锚元素的使用方法是Web开发人员需要具备的重要技能之一,对于构建结构清晰、导航便捷的网站具有重要意义。
Chrome
IE
Firefox
Opera
Safari