H5 <a>超链接，同一页面内部跳转和不同页面间的跳转

最新推荐文章于 2025-03-24 13:59:38 发布
最新推荐文章于 2025-03-24 13:59:38 发布
阅读量4.6w 收藏 74
点赞数 15
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42467563/article/details/83061916
版权

同一页面或者文件间的跳转：

<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<a href="#" name="ding">顶部</a><br/>
<a href="https://www.baidu.com/" title="点击" target="blank">百度一下</a><br/>
<a href="06test.html">test</a><br/>
<a href="#p9">去第九章</a><br/>
<a href="#p8">去第八章</a><br/>
<a href="#p7">去第七章</a><br/>
<a href="#p6">去第六章</a><br/>
<a href="#p5">去第五章</a><br/>
<a href="#p4">去第四章</a><br/>
<a href="#p3">去第三章</a><br/>
<a href="#p2">去第二章</a><br/>
<a href="#p1">去第一章</a><br/>
<a href="#di">去底部</a><br/>


<a href="#" name="p1">第一章</a>
<p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p>
<a href="#" name="p2">第二章</a>
<p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p>
<a href="#" name="p3">第三章</a>
<p>路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现 在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p>
<a href="#" name="p4">第四章</a>
<p>曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。</p>
<a href="#" name="p5">第五章</a>
<p>微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。</p>
<a href="#" name="p6">第六章</a>
<p>光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。</p>
<a href="#" name="p7">第七章</a>
<p>月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。</p>
<a href="#" name="p8">第八章</a>
<p>荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住；只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾；但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。</p>
<a href="#" name="p9">第九章</a>
<p>树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声；但热闹是它们的，我什么也没有。</p>
<a href="#" name="di">底部</a><br/>
<a href="#ding">返回顶部</a><br/>

</body>
</html>

不同文件件的条件，需要新建一个文件：06test.html

<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>

<p>哈哈</p>
<a href="超链接.html#p8">去第八章</a><br/>
<a href="超链接.html#p1">去第一章</a><br/>
<a href="超链接.html#di">去第底部</a><br/>
<a href="超链接.html#ding">去顶部</a><br/>
</body>
</html>

运行结果：

点击去第八章  就可以转跳到上个文件：超链接.html  的第八章的内容

点击不同的章数和顶部底部，就可以跳转到文章所在的章数和位置。

这样简单的内部和外部转跳就完成了哦。 

HTML超链接（详解如何进行网页之间的跳转）
百赢出品，必属精品
04-24 1万+
HTML 使用超级链接与网络上的另一个文档相连。HTML中的链接是一种用于在不同网页之间导航的元素。链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。HTML超链接是用于链接到其他网页、文件或位置的元素。
[HTML]Web前端开发技术2（HTML5、CSS3、JavaScript ）格式化文本标记，定义列表，＜blockquote＞，definition description，ruby——喵喵画网页
ormstq的博客
11-20 3855
标题字标记添加空格与特殊符号文本修饰标记（重要）计算机输出标记（理解）引用和术语标记（理解）字体font标记（重要）段落与排版标记段落标记换行标记水平分割线标记（重要）拼音/音标注释ruby 标记和rt/rp 标记段落缩进标记列表无序列表有序列表列表嵌套定义列表熟悉无序列表ul元素的应用熟悉有序列表ol元素的应用。练习定义列表嵌套的使用。练习无序、有序、定义列表嵌套混合使用。
a标签的name属性和id属性实现页内跳转的方法
09-28
今天我们来讲一下用a标签的name属性和id属性来实现页内的跳转
css a标签带id跳转页面,a标签的name属性和id属性实现页内跳转的方法
weixin_33930436的博客
08-04 2480
原标题：a标签的name属性和id属性实现页内跳转的方法以前只知道用a标签的name属性来跳转，今天才知道还可以用id。不知道还有没有其他的方式。name可以有重复多个，id只能用一次，当然，如果你不打算遵守规范，用几次都行。demo如下：复制代码代码如下:Demo--页面内跳转.div1{height:400px;background:gray}页内跳转演示1——A标签href="#jump1"...
h5页面跳转微信小程序（最简单的方法|URL Scheme）
小二丶的博客
03-24 2120
h5页面跳转微信小程序（最简单的方法|URL Scheme）
前端H5路由跳转（二）
weixin_47002803的博客
11-18 586
前端H5路由跳转：a标签和$location
H5中的a标签
web工程师——小发发
12-28 2513
H5常用标签详解： 1.<a href="http://www.baidu.com">百度</a> < a >标签定义超链接，用于从一张页面链接到另一种页面。 其中a元素中最重要的属性是href属性，它指示链接的目标。在所有浏览器中，链接的默认外观是： 未被访问的链接带有下划线而且是蓝色的。 已被访问的链接带有下划线是紫色的。 活动链接带有下划线而且是红色的。 download属性：规定被下载的超链接目标，其值一般为filename。 hreflang属性：规定被链
HTML三：字体＜font＞＜/font＞；段落＜p＞＜/p＞；注释＜!----＞；标题＜h1＞＜/h1＞；图片＜img src=‘‘＞；超链接＜a＞＜/a＞；锚点；列表（无序&有序）；
小枯林的博客
12-14 2233
●HTML部分主要了解HTML标签，其标签主要是字体、段落、注释、标题、图片、超链接、锚点、列表、表格、图表等。 这篇博客只要介绍：字体<font></font>，段落<p></p>，注释<!---->，标题<h1></h1>，图片<img src=''>，超链接<a></a>，锚点，列表的用法和注意事项。 1.字体<font></font> ...
入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做 web 页面2 入门实例新建一个test.html文件，内容如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一个标题</h1><p>我的第一个段落。</p> </body></html>其中：<!DOCTYPE html> 声明为 HTML5 文档<html> 元素是 HTML 页面的根元素<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）<title> 元素描述了文档的标题<body> 元素包含了可见的页面内容<h1> 元素定义一个大标题<p> 元素定义一个段落保存后运行，即可在浏览器中打开如下界面3 各部分详解3.1 标题HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> </body></html>3.2 段落HTML 段落是通过标签 <p> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p> </body></html>3.3 链接HTML 链接是通过标签 <a> 来定义的<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.youkuaiyun.com/zong596568821xp">这是一个链接使用了 href 属性</a> </body></html>3.4 图像HTML 图像是通过标签 <img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>3.5 表格表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>4 速查列表4.1 基本文档<!DOCTYPE html><html><head><title>文档标题</title></head><body>可见文本...</body></html>4.2 基本标签<h1>最大的标题</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的标题</h6> <p>这是一个段落。</p><br> （换行）<hr> （水平线）<!-- 这是注释 -->4.3 文本格式化
最新发布
04-02
超链接标签 `<a>` 超链接允许用户点击跳转至其他页面或资源。其核心属性为 `href`，指定了目标地址。 ```html <a href="https://www.example.com">访问 Example 网站</a> ``` #### 5. 列表标签 列表分为有序列表 ...
Android 通过H5跳转到App指定页面
gy1115的博客
10-21 4440
Android 通过H5跳转到App指定页面
尚硅谷HTML5&CSS3 前端学习笔记03_超链接_相对路径_页面跳转_图片标签
KarinAu的博客
07-02 369
超链接 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他位置 使用a标签来定义超链接
html链接到另一个网址,怎么设置超级链接跳到另一个网站
weixin_42496802的博客
07-02 7749
网页上的超链接一般分为三种：一种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去；还有一种称为同一网页的超链接，这就要使用到书签的超链接。在网页中，一般文字上的超链接都是蓝色(当然，用户也可以自己设置成其他颜色)...
html5 超链接标签（最全使用方法）
dyg_zc的博客
09-16 1202
此时鼠标单机便会跳转百度首页，这时我们便有一个疑惑，就是如何进行跳转的呢，其实这时依靠接下来要讲的href属性。_self:在原窗口中打开。③锚链接：功能是在本页面中进行跳转，值为id属性的值。它是a标签的一个属性，用来是否在新窗口中打开链接。它是写在a标签的一个属性，属性名为href，属。可以学习http的相关知识。属性值为_blank:打开新窗口。如上为a标签在html中的写法；②相对链接（本地元素）;3.target属性。
html5a链接_HTML5之a标签的几种使用方法
weixin_39938269的博客
12-22 864
a标签是网页中常用的一个标签，它通常用来创建一个指向其他网页、文件、电子邮件地址、当前网页指定位置或是其他任意类型的URL超链接。下面就为大家具体介绍下针对不同用途下的使用方法。页面跳转页面跳转是我们常用的功能之一，通常在导航栏或菜单栏等地方当用户点击某个选项后就会打开对应的页面。我们只需要给a标签的【href】属性设置对应的网页地址就可以实现用户点击的时候跳转了。但是a标签默认会给显示的文字添加...
怎么让html打开网页自动跳转（多个链接）？
**My Coding Family**
04-06 1605
ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；
H5中name="viewport"
无道的博客
06-01 887
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt; width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度 initial-scale 设置页面的初始...
WEB前端：(3)HTML5②超链接及页面内跳转
热门推荐
super_lixiang的博客
08-20 1万+
@html5图像及路径 &lt;img src="images/fruit.jpg" alt="水果显示不出来时你就只好看我啦..." width="800" height="375" align="bottom"&gt; src和alt称之为标签属性 src是图片路径,这里用的是相对路径 相对路径用 ./代表当前文件夹，../代表上一级文件夹，当前路径是可以省略的 alt是图片加载失
HTML5链接属性及使用
darongzi1314的专栏
07-27 1798
1：链接数据：文本链接                           图片链接 2：属性：                 href:指向另一个文档的链接                 name:创建文档内的链接，常用在百度百科里面，文字的上标链接，点击就跳转到对应的解释。 3：img标签属性：                alt：替换文本属性               
H5：超链接标签（重点）
Cosophia的博客
03-03 1583
希望对你有所帮助，动手实践一下。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值