HTML超链接标签——a标签、锚点、base标签、假链接标签
目录
一、a标签
1.什么是a标签?
2.a标签中的属性:
3.注意点:
二、锚点
1.什么是锚点?
2.如何实现锚点?
3.要想实现通过a标签跳转到指定的位置分为两步:(重点!!!)
4.格式:
5.注意点:
三、base标签
1.base标签是什么?
2.注意点:
四、假链接标签
1.什么是假链接?
2.假链接存在的意义:
3.假链接的格式:
一、超链接标签——a标签
什么是超链接?
- HTML文本之所以被称为超文本,就是因为它具有普通文本所不具有的超链接功能。我们在浏览HTML文档时,可以通过点击关键字(一个超链接),来跳转页面。
- 要让超链接能够正常工作,就需要有一种方法来定位Internet上的资源,这是通过URL来实现的。URL全称是Uniform Resource Locator,统一资源定位符。URL由三部分组成:协议,主机名称,文件目录和文件名。例如:http//www.sunxin.org/video/video.asp,http即表明用的是超文本传输协议,从主机名(域名)为vwvw.sunxin.org的服务器上访问video目录下的video.asp文件。
- 建立一个链接的语法如下:<a href="URL">…</a>
- 属性href用于指定链接的目标,目标地址由URL定位,在开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。
1.什么是a标签?
a标签的作用:用于控制页面与页面之间跳转的
a标签的格式:<a href="URL">需要展现给用户查看的内容</a>
示例:<a href="http://www.w3school.com.cn">This is a link</a>
注释:在 href 属性中指定链接的地址。
2.a标签中的属性:
- a标签中有一个target的属性:专门用于控制如何跳转
target属性值:
_self:用于在当前选项卡中跳转,不新建界面跳转,默认就是_self
_blank:用于在新的选项卡中跳转,新建界面。
_parent:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
-top:这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。
- a标签中还有一个title属性:a标签中的title和img标签中的title一样,都是用来控制鼠标悬停时显示的提示文本的。
3.注意点:
1.a标签不仅可以让文字点击,还可以让图片也能够被点击
如:文字:
<a href="https://www.baidu.com/">百度</a>
图片:
<a href="https://baike.baidu.com/item/%E5%8D%8E%E6%99%A8%E5%AE%87/6064097?fr=aladdin"><img src="花花.jpg"width=" 150"></a>
2.一个a标签必须有一个href属性,给href属性赋值,否则a标签不知道要跳转到什么地方
3.通过a标签的href属性指定一个URL地址,那么必须在地址前面加上http://或者https://
4.a标签的href属性除了可以指定一个网络地址以外,还可以指定一个本地地址(找本地的.html文件)。有相对路径和绝对路径两种方式:
例如:
<a href="img标签.html">img标签</a> <!--相对路径-->
<a href="../img标签.html">img标签</a> <!--相对路径--><a href="iF:\学习资料\计算机学习资料\BS\10 BS实践\02 HTML\HTML学习\代码\img标签.html">img标签</a> <!--绝对路径-->
需要注意的是:
由于绝对路径是自己电脑上的路径,是固定的,在别人的电脑上不一定有此相同的路径,因此用绝对路径的方式可能导致找不到相应的链接而出问题,所以在实际应用中要避免使用绝对路径,尽量使用相对路径。
二、锚点
1.什么是锚点?
锚点:是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
英文名:anchor
锚点用法:锚点用id属性来设置,一个a标签如果设置id属性(或者name属性--现在较多不支持),那么就是页面的一个锚点。简单理解:前边说到a标签是用于界面间跳转的超链接,那么锚点就是通过a标签的id属性,实现当前界面内部位置的跳转。
2.如何实现锚点?
要想通过a标签跳转到指定的位置,那么必须告诉a标签一个独一无二的身份证号码,这样a标签才能在当前界面中找到需要跳转到的目标位置。
简单理解即:(1)需要一个标记;(2)跳转到标记
如何给HTML中的标签绑定一个独一无二的身份证号呢?
在HTML中,每一个标签都有一个名称叫做id的属性,这个属性就是用来给标签指定一个独一无二的身份证号码的。
3.要想实现通过a标签跳转到指定的位置分为两步:(重点!!!)
3.1给目标位置的标签添加一个id属性,然后指定一个独一无二的值
3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
4.格式:
<!--在需要跳转的地方,对应独一无二的目标位置id--><a href="#center">跳转到中部</a><!--给目标位置添加一个id属性,唯一标识这个位置--><h2 id="center">我是中部</h2>
5.注意点:
1.通过我们的a标签跳转到指定的位置,是没有过渡动画的,直接一下子就跳转到指定位置。如果需要有滚动过渡动画的,就不能用a标签做
2.a标签除了可以跳转到当前界面的指定位置之外,还可以在跳转到其他界面的时候直接跳转到其他界面的指定位置。
三、base标签
1.base标签是什么?
base标签:专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开:
例如: <base target="_blank"> 就表示让所有的超链接都新建一个页面打开。
2.注意点:
1.base标签必须写在head标签的开始标签和结束标签之间;
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来制定。
代码示例:
<head><base target="_blank"></head><body><!--这俩在a标签中没有指定target属性,会按照base标签中的_blank来执行,也就是会新建一个界面--><a href="https://www.baidu.com/">百度</a><a href="https://www.baidu.com/s?ie=UTF-8&wd=%E6%B7%98%E5%AE%9D">淘宝</a><!--这个在a标签中指定了target属性,会按照a标签中的_self来执行,也就是不新建一个界面--><a href="https://www.baidu.com/"target="_self">百度</a></body>
四、假链接标签
1.什么是假链接?
就是点击之后不会跳转的链接。
2.假链接存在的意义:
在企业开发前期,其他界面都没有写出来,那么我们就不知道应该跳转到什么地方,所以只能用假链接来代替。(个人觉得相当于只有博客名的占位博客)
当项目后期其他界面都已经完成时再将假链接替换为真链接。
3.假链接的格式:
(1)#
(2)javascript
两者之间的区别:
# 的假链接会自动回到网页的顶部,而JavaScript的假链接不会自动回到网页顶部
HTML超链接标签——a标签、锚点、base标签、假链接标签相关推荐
- a标签里面设置onclick_HTML学习笔记:各种常用标签
今天是刘小爱自学Java的第76天. 感谢你的观看,谢谢你. 话不多说,继续html的学习: 昨天学习了最基础的文本标签及属性,除此之外还有很多其它标签,今天逐一学习. 一.链接标签(a标签) a标签 ...
- 链接标签(anchor)和锚点定位
一.链接标签 HTML中创建超链接只需要用标签环绕需要被链接的对象即可,基本原格式如下: <a href="跳转目标" target="目标窗口的弹出方式" ...
- 如何用html语言定位img,html经常使用标签(图像标签img,连接标签a,锚点定位,及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...
- 【Web】HTML(No.03)HTML标签 (一) 标题标签、段落标签、水平线标签、换行标签、div/span标签、图像标签、链接标签、base标签、特殊字符标签、注释标签、文本格式化标签
HTML标签分类 在HTML页面中,带有"< >"符号的元素被称为HTML标签,如上面提到的 HTML.head.body都是HTML骨架结构标签.所谓标签就是放在&q ...
- html中a标签如何进行锚点,a标签中的锚点使用方法
今天要和大家分享的是a标签中的锚点的使用方法 在html5中,标签有一种用途,是能够在当前文档中用来作为一个标记,提供一个可以直接衔接的标签. 例如,一个大的文档可能有好几个部分,我们可以在文档的顶部 ...
- HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST
URL地址 就是我们所说的网址:www.jd.com 浏览器内核,渲染引擎 Ie内核:triteent 谷歌/欧鹏:blink 火狐:gecko 苹果:webkit 渲染引擎是出现兼容性的根本问题 - ...
- Web学习第二天——HTML的基本标签(媒体标签、链接标签、列表标签、表格标签、表单标签)
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
- HTML链接标签和表格的使用
HTML链接标签和表格的使用 HTML链接标签和表格的使用 HTML链接标签和表格的使用 一.转义字符 二.行内元素和块级元素 三.web浏览器(以下是拥有自己内核的) 四.超链接标签 五.跑马灯标签 ...
- 浅谈<a href=“ “ target=“ “> </a>链接标签
链接标签<a>通常用于进行页面跳转,其中有两个主要属性,分别为href和target. href用于指定链接内容的地址,是超链接标签的必要属性,当href有值时,超链接标签就有了链接的功能 ...
最新文章
- eNSP中浮动路由的配置
- (28)SpringBoot启动时的Banner设置【从零开始学Spring Boot】
- eeglab教程系列(10)-绘制ERP图像
- python选课系统_【精选】在Monash读Data Science,人人都拥有这样一份选课指南。
- css3学习 理论之渐变
- 8086CPU汇编寻址写法
- 2018 前端开发框架对比
- VS转换到 COFF 期间失败 文件无效或损坏
- Linux 各种压缩类型文件 解压命令 整理 tar.bz2 tar.gz tgz等等
- 停掉一台服务器,Nginx响应慢(转载)
- php二维数组按照键值排序的方法
- 五分钟带你玩转rabbitmq(八)【真实案例】消息消费失败如何处理?
- 变送器故障码与解决办法剖析汇总
- esp8266作为wifi中继器
- 黎曼Zeta函数,人类文明永恒的纪念
- 零基础怎么学好3D建模?只需要了解下面几点
- org.dom4j.Document的主要用法
- 面试中如何回答“你的缺点是什么?”
- 自己写Shader-翻书效果
- IOS之数据持久化二(归档与反归档)