15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML中的超级链接和锚点跳转

HTML中的超级链接和锚点跳转

时间:2023-09-04 18:42:02 | 来源:网站运营

时间:2023-09-04 18:42:02 来源:网站运营

HTML中的超级链接和锚点跳转:好好学习,天天向上

本章主要是HTML标签中,超级链接和锚点跳转的基础使用

一、超级链接

HTML 使用超级链接与网络上的另一个文档相连。 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分

Ⅰ、超级链接标签

<a> 链接内容 </a>


Ⅱ、href属性

<a href = "www.xxx.com"> 超级链接 </a>

Ⅲ、target属性

  1. _self: 默认值,表示跳转的页面在当前窗口打开,不会打开新的窗口
  2. _blank: 空白的,表示跳转的页面在新窗口打开
<a fref = "www.xxx.com" target= "_blank" > 超级链接并打开新的窗口 </a>

Ⅳ、title 属性

<a href="拉勾教育 - 拉勾旗下教育平台" target="_blank" title="点击跳转到源网页"> <img src="lagou.jpg" width="100px" height="100px"></a>示例图:

二、锚点跳转

  1. 在目标位置找到任意一个标签,给它添加 id 属性, id 属性值必须唯一性
  2. 在目标位置添加一个空的 <a> 标签, 只设置一个 name 属性, name 属性设置必须唯一性
<h1 id= "h2">目标位置</h1><a name= "maodian"> </a> <a href="#mb"> 页面内跳转文件的纯文本 </a>

Ⅰ、跨页面锚点跳转

  1. 设置锚点,方式与页面内锚点跳转一致,在目标网页的指定位置设置使用 id 或 name 属性
  2. 链接到锚点,添加超级链接时 href 属性需要更改,属性值写为页面的路径 #id
<a href="a.html#text"> 页面内跳转文件的纯文本 </a>示例:

index.html

<html> <head> <title> 超级链接和锚点跳转 </title> </head> <body> <a name="dingbu" ></a> <!-- 超级链接跳转 target="_blank" 打开新的窗口 --> <a href="https://www.lagou.com" target="_blank"> 拉勾网 </a> <a href="https://www.baidu.com" title="点击跳转到百度"> 百度 </a> <br> <!-- 锚点跳转 --> <a href="#h1">11</a> <a href="#maodian">22</a> <br> <!-- 跨页面锚点跳转 --> <a href="demo.html#demo" target="_blank"> 点击跳转到 demo页面 </a> <!-- 设置空白高度 以方便测试 --> <div style="height: 1000;"></div> <h1 id="h1"> 这是第一个跳转的位置 </h1> <a href="#dingbu" > 返回顶部 </a> <!-- 设置空白高度 以方便测试 --> <div style="height: 1000;"></div> <a name="maodian" ></a> <p> 第二个跳转到这里 </p> <a href="#dingbu" > 返回顶部 </a> </body></html>demo.html

<html> <head> <title> 跨页面跳转在这里 </title> </head> <body> <p id="demo" >跳转过来了呀</p> </body></html>

关键词:超级

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭