标签：24 web 网页 25 点击 href 超链接 链接 页面
4 HTML常用标签
4.7 超链接标签（重点）
在HTML标签中，< a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
4.7.1链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写，意为︰锚。
两个属性的作用如下:
href属性必须写
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_ self为默认值，_blank为在新窗口中打开方式。 |
使用_ self 时点击超链接会直接在当前页面显示网页（替换当前窗口），显得不太方面
使用_ blank较好，会打开新的一个页面（会保留原来的网页）去加载
4.7.2 链接分类
- 外部链接：例如< a href="http:// w ww.baidu.com ">百度< /a >。
- 内部链接：网站内部页面之间的相互链接.直接链接内部页面名称即可，例如< a href=" index.html">首页< /a>.
- 空链接：如果当时没有确定链接目标时，< a href="#">首页< /a > .
- 下载链接：如果href里面地址是一个文件或者压缩包，点击就会下载这个文件。
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
把这些元素当文字用
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>1 外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是_self 当前窗口打开 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
<h4>2 内部链接：网站内部页面之家的相互链接</h4>
<a href="gongsijianjie.html">公司简介</a>
<h4>3 空链接：如果当时没有确定链接目标时，使用#</h4>
<a href="#">公司地址</a>
<h4>4 下载链接：地址链接的是 文件 .exe 或者是 zip 等压缩文件</h4>
<a href="img.zip">下载文件</a>
<h4>5 网页元素的链接</h4>
<a href="http://ww.baidu.com"><img src="img.jpg"/></a>
</body>
</html>
网页显示：
其中（细节）：
点击即可跳转页面
- 使用第二个功能，需要添加一个文件gongsijianjie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司简介</title>
</head>
<body>
传智播客公司简介xxxxxxxx.
</body>
</html>
点击，即可跳转到外部链接网页
- 使用第四个功能，添加一个压缩文件（可以在文件中添加，也可以直接在vscode中添加，前面讲过）
点击，就可以直接下载压缩文件，页面左下处会显示
- 使用第五个功能，点击图片会跳转到相应的链接页面
<a href="http://ww.baidu.com"><img src="img.jpg"/></a>
点击图片img.jpg可以跳转到百度链接http://ww.baidu.com
本文链接：https://blog.csdn.net/weixin_51249285/article/details/120916764
标签：24,web,网页,25,点击,href,超链接,链接,页面 来源： https://blog.csdn.net/weixin_51249285/article/details/120916764
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。