页面链接

最新推荐文章于 2022-03-29 21:46:52 发布

遇事不通请右转

最新推荐文章于 2022-03-29 21:46:52 发布

阅读量318

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_45238600/article/details/103154534

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在之前的学习中，我们了解了标签的基本用法

那么，接下来，本人来介绍下页面链接：
首先，本人现在上一段代码中的最后几段加上一个“锚”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Study Of Title</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>学习右转哥   点赞右转哥</p>
<p>关注右转哥</p>
<p>举报。。。 呸！    给右转哥刷2333！</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->     <!--这种标签是自闭合标签，若是给它双边化，就相当于 “段落标签”-->
<br>学习右转哥   点赞右转哥<br/>
<br>关注右转哥<br/>
<br>举报。。。 呸！    给右转哥刷2333！<br/>

学习右转哥   点赞右转哥<br/>
关注右转哥<br/>
举报。。。 呸！    给右转哥刷2333！<br/>


<!--粗体、斜体-->
<h1>字体样式标签</h1>

粗体：<strong>这里是粗体字</strong>
斜体：<em>这里是斜体字</em>

<br/>
<!--特殊符号-->
<br>空&nbsp格
<br>空&nbsp1&nbsp2&nbsp3&nbsp4格

<br/>
&gt;
<br/>
&lt;
<br/>
&copy;版权所有：右转哥及其粉丝

<!--特殊符号使用方法-->
& ; <!-- Alt + / 即可看到字符 以及 结果-->

<!--img标签学习：
src(必填)：图片地址：
        相对地址（推荐使用）、绝对地址
        ../  上一级目录
alt(必填)：未在该路径下找到该图片的显示结果
-->
<img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">

<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!--在这里，本人加上了一个名为“down”的“锚”-->
<a name="dowm">底部</a>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

</body>
</html>

现在，本人来编写有关页面链接的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<a name="top">顶部</a>

<br>
<!--页面链接-->
<!--a标签
href：必填（表示转到哪个网页）
_blank： 在新标签中打开
_target：在自己的网页中打开
-->
<a href="2.标签学习.html">点击跳转到我只做的第一个页面</a>
<a href="https://www.baidu.com/index.php?tn=monline_3_dg">点击跳转到百度</a>

<br>    <!--换行-->

<!--这里是本人为了展示“锚链接”的作用，专门设置了好多张图片，使得我们能够清晰看到“锚链接”的功能-->
<p>
    <a href="1.MyFirstNet.html">
        <img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.MyFirstNet.html">
        <img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.MyFirstNet.html">
        <img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.MyFirstNet.html">
        <img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">
    </a>
</p>
<p>
    <a href="1.MyFirstNet.html">
        <img src="../resources/image/BingoGirl.jpg" alt="《冰菓》女主：千反田爱榴" title="悬停文字" width="300" height="300">
    </a>
</p>


<!--锚链接
1.需要一个锚标记
2.跳转到标记：#
-->
<!--这里是页面内的跳转-->
<a href="#top">回到顶部</a>
<!--这里是页面间的跳转-->
<br>
<!--这里是页面间的跳转-->
<!-- 在下一行代码中，本人设置“锚”是 down -->
<a href="标签学习.html签学习.html.html#down">跳转到 标签学习 页面</a>


<!--功能型链接
邮件链接：mailto:
QQ链接
-->

<a href="mailto:2283277176@qq.com">点击联系我</a>

<!--QQ推广自动生成的标签-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3049627331&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:3049627331:53" alt="点击这里在线咨询" title="点击这里在线咨询"/>
</a>


</body>
</html>

我们现在来看一下运行结果：

HTML5 网页链接

因为本人电脑录屏功能只能录制当前打开录制功能的窗口，所以之后弹出的窗口本人只能通过截屏的方式展示了：
在这里插入图片描述
在上面的代码中，我们能看到，通过页面链接的知识点，我们可以通过一个链接，跳转到本页面的某位置，或者自己写的一些页面的某位置，或者一些网页。
其实不用多说，大家可能对于这个知识点的重要性已经十分了解了。