HTML 超链接 a 标签

简介: HTML 超链接 a 标签

HTML 标签中,a 标签用于定义超链接,作用是从一个页面链接到另一个页面。

在 a 标签中有两个常用的属性:

- href  属性,用于指定链接目标的 url 地址(必须属性)。当为标签应用 href 属性时,它就具有了超链接的功能。

- target 属性,用于指定链接页面的打开方式,其中 \_self 为默认值,表示从当前页面打开,_blank  属性为在新窗口中打开。

href 属性:

1. 外部链接
<a href="http://www.baidu.com">百度一下</a>
2. 内部链接
<a href="./home.html">首页</a>
 
网站内部页面之间的互相链接,直接链接内部页面名称即可。
3. 空链接
<a href="#">首页</a>
 
如果当时没有确定链接目标时使用。
4. 下载链接
<a href="./img/heart.zip">下载</a>
 
如果 href 里面地址是一个文件或者压缩包,就会下载这个文件。

 target 属性:

1. _self 属性值,默认值,表示在当前页面打开链接
<a href="http://www.baidu.com" target="_self">百度一下</a>

   

2. _blank 属性值,表示在新页面打开链接
<a href="http://www.baidu.com" target="_blank">百度一下</a>

   

3. _top 属性值,表示在顶层窗口中打开
 
one.html 页面内容
<p>我是第一层页面</p>
<iframe src="./two.html"></iframe>
 
two.html 页面内容
<p>我是第二层页面</p>
<iframe src="./three.html"></iframe>
 
three.html 页面内容
<p>我是第三层页面</p>
<a href="http://www.baidu.com" target="_top">百度一下</a>
 
点击后,会在第一层页面中打开链接,并清除所有框架。

 

4. _parent 属性值,表示在父级窗口中打开
 
one.html 页面内容
<p>我是第一层页面</p>
<iframe src="./two.html"></iframe>
 
two.html 页面内容
<p>我是第二层页面</p>
<iframe src="./three.html"></iframe>
 
three.html 页面内容
<p>我是第三层页面</p>
<a href="http://www.baidu.com" target="_parent">百度一下</a>
 
点击后,会在第二层页面中打开链接。


相关文章
|
13天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
22小时前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
22小时前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
7天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
12 1
|
7天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
23 1
|
7天前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
10 0
|
9天前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
13天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
|
16天前
|
前端开发 JavaScript
HTML图像标签的深入解析与应用
HTML图像标签的深入解析与应用
18 1
|
16天前
|
前端开发 SEO
HTML链接标签的深入解析与应用
HTML链接标签的深入解析与应用
16 0