【自学html笔记】关于链接标签＜a＞和＜base＞常见使用方法的整理

deidei~~

于 2023-01-09 14:33:15 发布

阅读量460

点赞数

分类专栏： html5 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_51843898/article/details/128611471

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介：此文章整理了一些关于<a>标签，<base>标签，这些有关链接的标签的使用方法。

文章目录❤️

前言
一、a标签创建超链接方法
二、base标签统一全局a标签的跳转方式
总结

前言

在前端设计的过程中，我们不可能整个网站都停留在一个页面上，对于不同的分区我们可能做在不同的页面中，这时候我们就需要给用户提供这些链接来实现跳转。我们一般使用<a>标签来创建链接。

一、a标签创建超链接方法

a标签有两个基本属性：

href:用于指明要跳转的本地页面地址，或者是网络链接。
target:指明链接的跳转方式。

target的值	对应跳转方式
_self	默认的跳转方式，在当前页面打开
_blank	在一个新窗口中打开链接
_top	在整个窗口中打开
_parent	在父窗口打开
_framename	在指定框架中打开

<!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>
    <p>默认是在本框架下打开链接target=_self:</p>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476">打开csdn主页</a>
    <p>在一个新页面中打开链接target=_blank:</p>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476"target="_blank">打开csdn主页</a>
    <p>在整个窗口中打开打开链接target=_top:</p>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476"target="_top">打开csdn主页</a>
    <p>在父窗口打开链接target=_parent:</p>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476"target="_parent">打开csdn主页</a>
    <p>在整个窗口中打开打开链接target=_framename:</p>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476"target="_framename">打开csdn主页</a>
</body>
</html>

除此之外，href还可以指定跳转到页面中的某一段位置（类似于“目录索引”的功能）。
第一种方式：href属性值为#id名，跳转到带id属性的标签元素处；
第二种方式：href属性值为#name属性的属性值，跳转到带name属性的a标签处。

    <a href="#first">点击此处跳转到id为first的那段文字</a>
    <p>
    　　曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。<br>
    层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；
    正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，
    仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传
    过荷塘的那边去了。<br>
    叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子
    底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。</p>
    <p>
    　　月光如流水一般，静静地泻在这一片叶子和花上。
    薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
    虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣
    眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差
    的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。
    塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
    </p>
    <!--假设这边下面还有很多段文字，如果内容太多，
    翻页查询某一个特定段就不方便，所以用href="#first"来实现段落间的跳转-->
    <p id="first">here is id="first"!</p>

第三种方式：不过如果仅仅使用href=“#”，则会使得页面回到顶部。

第四种方式：除此之外，还可以实现其他页面的锚点跳转，转到指定页面的指定位置：

<!-- 锚点跳转(其他页面) -->
<a href="https://blog.csdn.net/cainiaoyihao_/article/details/115868578#htmltable">锚点跳转——其他页面跳转</a>

二、base标签统一全局a标签的跳转方式

如果在开发过程中a标签的跳转方式是全局统一的，那么为了避免每次用到a标签都要打一遍target，我们可以使用base标签，在head中定义全局链接打开的跳转方式。

<head>
	<meta charset="UTF-8">
	<title>使用base标签规定全局链接打开方式</title>
	<!--点击网页中的所有链接都会在新窗口中打开-->
	<base target="_blank">
</head>
<body>
    <a href="https://www.bilibili.com/">打开bilibili官网</a>
    <a href="https://www.csdn.net/?spm=1011.2415.3001.4476">打开csdn官网
    <a href="./index.html">打开index.html</a></a>
    <!--也可以将图片作为链接的对象，使用户点击图片跳转到对应的地方-->
    <a href="https://www.bilibili.com/">
        <img src="./img/1.png" alt="呜咪">
    </a>
</body>

总结

这就是a标签的常见的使用方法，a标签使得不同页面之间的跳转实现可能，摆脱了文档与文档、页面与页面之间的孤立性，体现“超文本”的特征。更多使用方法可以参考W3 school https://www.w3school.com.cn/tags/tag_a.asp

deidei~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【自学html笔记】关于链接标签＜a＞和＜base＞常见使用方法的整理

在前端设计的过程中，我们不可能整个网站都停留在一个页面上，对于不同的分区我们可能做在不同的页面中，这时候我们就需要给用户提供这些链接来实现跳转。我们一般使用标签来创建链接。这就是a标签的常见的使用方法，a标签使得不同页面之间的跳转实现可能，摆脱了文档与文档、页面与页面之间的孤立性，体现“超文本”的特征。
复制链接

扫一扫