HTML基础-04-链接（＜a＞跳转到URL，文档内跳转，发送邮件）taget属性（新窗口打开，跳出框架）图片链接

玄德公笔记

已于 2022-11-18 23:41:06 修改

阅读量1.6k

点赞数

分类专栏： # HTML基础教程文章标签： html 前端添加链接页内跳转图片链接

于 2022-05-28 15:25:53 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/125018481

版权

HTML基础教程专栏收录该内容

10 篇文章 3 订阅

订阅专栏

文章目录

1. 添加链接 < a >
2. taget属性< target >
- 2.1 新窗口打开链接（target="_blank"）
- 2.2 跳出框架（target="_top"）
3. 图片链接

1. 添加链接 < a >

1.1 跳转到URL（href=“URL”）

用<a> 定义一个超链接

语法

<a href="url">显示部分</a>

示例

<a href="https://blog.csdn.net/xingzuo_1840">玄德公</a>

1.2 文档内跳转（href=“#跳转ID”）

说明：HTML文档中插入ID，“#ID”跳转到该位置

语法

<a href="#跳转ID">跳转入口</a>
<a id="跳转ID">跳转到的位置</a>

这个跳转可以从一个页面跳到另一个页面

<a href="http://www.xuandegong.com/html/#跳转ID">跳转入口</a>

示例
点击 “查看张飞的信息”，页面跳到下边“张飞的信息”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
</head>
<body>

<p>
<a href="#ZhangFei">查看张飞的信息</a>
</p>

<h2>刘备的信息</h2>
<p>姓刘名备字玄德，吧啦吧啦吧啦……</p>

<h2>诸葛亮的信息</h2>
<p>复姓诸葛单名亮字孔明，号卧龙，吧啦吧啦吧啦……</p>

<h2>关羽的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2><a id="ZhangFei">张飞的信息</a></h2>
<p>吧啦吧啦吧啦……</p>

<h2>赵云的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2>庞统的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2>马超的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2>黄忠的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2>魏延的信息</h2>
<p>吧啦吧啦吧啦……</p>

<h2>姜维的信息</h2>
<p>吧啦吧啦吧啦……</p>


</body>
</html>

1.3 发送邮件（href=“相关信息”）

<a href="mailto:发送给谁?cc=抄送给谁&bcc=暗抄送给谁&subject=标题&body=邮件内容" target="_top">发送邮件!</a>

标题和内容中的空格使用20%。

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<p>
这是电子邮件链接：
<a href="mailto:GuanYu@xishu.com?cc=ZangFei@xishu.com&bcc=ZhuGeLiang@xishu.com&subject=2022年福利&body=2022年好事连连，心想事成" target="_top">发送邮件!</a>
</p>
</body>
</html>

2. taget属性< target >

2.1 新窗口打开链接（target=“_blank”）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<a href="https://blog.csdn.net/xingzuo_1840" target="_blank">玄德公</a>

</body>
</html>

2.2 跳出框架（target=“_top”）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<a href="https://blog.csdn.net/xingzuo_1840" target="_top">点击这里，跳出框架!</a> 

</body>
</html>

3. 图片链接

说明：点击图片进入链接，实际就是在链接中套嵌了一个img元素

语法

<a href="目标url">
<img  border="边框宽度" src="图片地支" alt="标题" width="100" height="100"></a>

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<p>诸葛亮的图片链接:
<a href="https://blog.csdn.net/xingzuo_1840">
<img  border="5" src="https://p0.ssl.qhimgs1.com/sdr/400__/t0146ca81c57055a2ae.jpg" alt="HTML 教程" width="100" height="100"></a></p>

</body>
</html>