跳转定义_HTML中的超级链接和锚点跳转

好好学习，天天向上

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

一、超级链接

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

Ⅰ、超级链接标签

在 HTML 中使用 <a> 标签可以创建连接
a 全称 anchor，锚的意思
<a> 为双标签
作用：在指定的位置添加超级链接，提供用户进行点击和跳转
<a> 标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性

<a> 链接内容 </a>

Ⅱ、href属性

href 全称 hypertext reference，超文本引用，用于规定链接的目标地址
属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径
href 属性非常重要，<a> 标签要想实现点击跳转，必须设置该属性，拥有这个属性 <a> 标签在鼠标移上时才会显示一个小手指针状态

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

Ⅲ、target属性

使用target 属性，可以定义被链接的文档在何处跳转显示
属性只有两种：

_self: 默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
_blank: 空白的，表示跳转的页面在新窗口打开

<a fref = "www.xxx.com" target= "_blank" > 超级链接并打开新的窗口 </a>

Ⅳ、title 属性

title设置的是鼠标悬停时的提示文本，与 <img> 标签类似
属性值：自定义的文字内容
该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验

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

示例图：

二、锚点跳转

这种跳转方式实现的是从某个位置跳转到同页面的另一个位置
制作方法分为两种步骤，分别是设置锚点、添加链接
设置锚点，也就是设置跳转目标位置，有两种设置方式

在目标位置找到任意一个标签，给它添加 id 属性， id 属性值必须唯一性
在目标位置添加一个空的 <a> 标签，只设置一个 name 属性， name 属性设置必须唯一性

<h1 id= "h2">目标位置</h1><a name= "maodian"> </a>

添加链接到锚点，在需要点击的位置设置 <a> 标签，给 a 的 href 属性设置属性值为 #id 属性值或者 # 加 a 的 name 属性值完整的跨页面锚点路径

 <a href="#mb"> 页面内跳转文件的纯文本 </a>

Ⅰ、跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转
制作方法也分为两个步骤，分别是设置锚点、添加链接

设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用 id 或 name 属性
链接到锚点，添加超级链接时 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>

跳转定义_HTML中的超级链接和锚点跳转相关推荐

access 链接mysql数据库教程_如何在Access中插入超级链接
要向数据库中添加超级链接,要经过两个步骤,一是在表中定义字段类型为超级链接,一是向此字段中添加数据. 要在表中定义字段类型为超级链接,可以按下面的步骤操作: (1)打开数据库,选择要在数据库窗口中包含 ...
DataGrid中的超级链接列使用注意点
在DataGrid中的超级链接列的信息后面想要加入其他的信息,如标志性图片等,在ItemDataBound的事件中进行附加数据,这样是取不到数据的(原数据不能显示了),有另外一个方法,就是不用超级链接 ...
使用mshtml为页面中的超级链接添加Click事件 - 蜡人张 - 博客园
导读: 使用mshtml为页面中的超级链接添加Click事件在使用mshtml操作HTML页面时可能遇到要为页面的超级链接添加Click事件的操作,可以用下面的代码来完成: foreach(msht ...
HTML_页面中的超级链接
超级链接定义: 超级链接又称为"超文本链接",其在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素.各个网页链接在一起后,才能真正构成一个网站.所谓的 ...
word中使用超级链接
超级链接是将文档中的文字或图形其他位置的相关信息链接起来,单击建立了超级链接的文字或图形时,就可跳转到相关信息. 超级链接非常灵活和强大,既可跳转至当前文档或 Web 页的某个位置,亦可跳转至其他 ...
html页面如何跳转到asp,asp点击按钮跳转页面 ASP中按钮的点击触发网页跳转
ASP中按钮的点击触发网页跳转 asp中要实现点击一个按钮转到另一个网页有几种方法就是按下一个BUTTON,转到另一个网页,一共有哪些方式实现? 我只知道ona标签,背景图按钮,直接点击跳转链接hre ...
在html网页上在线连接邮箱,怎么在html中创建超级链接和电子邮件链接
1.首先新建一个首页,用什么软件写无所谓啊. 2.然后在body随便写一个元素,我写一个P吧 3.然后在里面写一个a标签,里面写一个href[超文本引用] 4.接着写上你的需要链接的邮箱地址 5.测试 ...
提取网页中的超级链接
using System; using System.Xml; using System.Text; using System.Net; using System.IO; using System.C ...
在html中超链接_HTML 超级链接详细讲解
超级链接超级链接是网站中使用比较频繁的HTML元素,因为网站的各种页面都是由超级链接串接而成,超级链接完成了页面之间的跳转.超级链接是浏览者和服务器的交互的主要手段,在后面的技术中会逐步深化学习. ...

跳转定义_HTML中的超级链接和锚点跳转

一、超级链接

Ⅰ、超级链接标签

Ⅱ、href属性

Ⅲ、target属性

Ⅳ、title 属性

二、锚点跳转

Ⅰ、跨页面锚点跳转

跳转定义_HTML中的超级链接和锚点跳转相关推荐

最新文章

热门文章